Fluent-next: extend the component tier to every component that owns v…

apps/demos/Demos/Common/ListsOverview/visualtestrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../../testing/visualtestrc-schema.json",
+  "comment": "Sub-pixel noise, measured 30.08.2026: text rendering shifts by a pixel between runs across the whole page. The looser comparison lives here, per demo, instead of being the default for every screenshot in every theme.",
+  "comparison-options": {
+    "looksSameComparisonOptions": {
+      "tolerance": 20,
+      "antialiasingTolerance": 20
+    }
+  }
+}

apps/demos/Demos/PivotGrid/Overview/visualtestrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../../testing/visualtestrc-schema.json",
+  "comment": "Sub-pixel noise, measured 30.08.2026: the highlighted total cells re-blend a few shades between runs. The looser comparison lives here, per demo, instead of being the default for every screenshot in every theme.",
+  "comparison-options": {
+    "looksSameComparisonOptions": {
+      "tolerance": 20,
+      "antialiasingTolerance": 20
+    }
+  }
+}

apps/demos/Demos/TagBox/Grouping/visualtestrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../../testing/visualtestrc-schema.json",
+  "comment": "Sub-pixel noise, measured 30.08.2026: the group header re-blends a few pixels between runs. The looser comparison lives here, per demo, instead of being the default for every screenshot in every theme.",
+  "comparison-options": {
+    "looksSameComparisonOptions": {
+      "tolerance": 20,
+      "antialiasingTolerance": 20
+    }
+  }
+}

apps/demos/testing/visualtestrc-schema.json

@@ -4,40 +4,44 @@
   "type": "object",
   "required": [],
   "properties": {
-      "$schema": {
-          "type": "string"
-      },
-      "ignore": {
-          "type": "boolean"
-        },
-      "comparison-options": {
-          "$ref": "../node_modules/devextreme-screenshot-comparer/src/options.json"
-      },
-      "jquery": {
-          "$ref": "#/$defs/frameworkOptions"
-      },
-      "angular": {
-          "$ref": "#/$defs/frameworkOptions"
-      },
-      "react": {
-          "$ref": "#/$defs/frameworkOptions"
-      },
-      "vue": {
-          "$ref": "#/$defs/frameworkOptions"
-      }
+    "$schema": {
+      "type": "string"
+    },
+    "comment": {
+      "type": "string",
+      "description": "Why this demo needs the exception; read by people, not by the runner."
+    },
+    "ignore": {
+      "type": "boolean"
+    },
+    "comparison-options": {
+      "$ref": "../node_modules/devextreme-screenshot-comparer/src/options.json"
+    },
+    "jquery": {
+      "$ref": "#/$defs/frameworkOptions"
+    },
+    "angular": {
+      "$ref": "#/$defs/frameworkOptions"
+    },
+    "react": {
+      "$ref": "#/$defs/frameworkOptions"
+    },
+    "vue": {
+      "$ref": "#/$defs/frameworkOptions"
+    }
   },
   "additionalProperties": false,
   "$defs": {
-      "frameworkOptions":{
-          "type": "object",
-          "properties": {
-              "ignore": {
-                  "type": "boolean"
-              },
-              "comparison-options": {
-                  "$ref": "../node_modules/devextreme-screenshot-comparer/src/options-schema.json"
-              }
-          }
+    "frameworkOptions": {
+      "type": "object",
+      "properties": {
+        "ignore": {
+          "type": "boolean"
+        },
+        "comparison-options": {
+          "$ref": "../node_modules/devextreme-screenshot-comparer/src/options-schema.json"
+        }
       }
+    }
   }
 }

apps/demos/testing/widgets/tagbox/GroupedItems.test.ts

@@ -33,7 +33,12 @@ runManualTest('TagBox', 'Grouping', (test) => {
       .pressKey('tab')
       .pressKey('alt+down');
 
-    await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_third_opened.png');
+    // Sub-pixel noise, measured 30.08.2026: the opened list re-renders its text a pixel off between
+    // runs. The looser comparison is asked for here, for this screenshot, rather than being the
+    // default for every screenshot in every theme.
+    await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_third_opened.png', undefined, {
+      looksSameComparisonOptions: { tolerance: 20, antialiasingTolerance: 20 },
+    });
 
     await t
       .expect(compareResults.isValid())

apps/demos/utils/visual-tests/helpers/theme-utils.js

@@ -27,17 +27,25 @@ export async function testScreenshot(
 ) {
   const testTheme = process.env.THEME;
 
+  /*
+   * Defaults for every screenshot. `looksSameComparisonOptions` used to live here with
+   * tolerance/antialiasingTolerance 20, which made the comparison looser than the comparator's own
+   * defaults for EVERY demo in EVERY theme — and it hid real drift: a hairline that changed by 9
+   * units, a whole tree shifted by a pixel, an appointment line dropped by a product change, all
+   * passed silently for months (wave H, 28.08.2026).
+   *
+   * A demo that genuinely renders unstable pixels asks for the looser comparison itself, in its own
+   * visualtestrc.json ("comparison-options") or at the call site — so the exception is visible,
+   * greppable and attached to a reason, instead of covering everything.
+   */
   const themeOptions = {
-    looksSameComparisonOptions: {
-      tolerance: 20,
-      antialiasingTolerance: 20,
-    },
     textDiffTreshold: 0.2,
   };
 
+  // per-demo options win: the defaults above must not silently override what a test asked for
   const finalOptions = {
-    ...comparisonOptions,
     ...themeOptions,
+    ...comparisonOptions,
   };
 
   await t

packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss

@@ -4,48 +4,76 @@
 @use "box/public" as boxPublic;
 @use "button/public" as buttonPublic;
 @use "buttonGroup/public" as buttonGroupPublic;
+@use "calendar/public" as calendarPublic;
 @use "card/public" as cardPublic;
+@use "cardView/public" as cardViewPublic;
+@use "chat/public" as chatPublic;
+@use "checkBox/public" as checkBoxPublic;
 @use "colorBox/public" as colorBoxPublic;
+@use "colorView/public" as colorViewPublic;
 @use "common/public" as commonPublic;
 @use "contextMenu/public" as contextMenuPublic;
 @use "dataGrid/public" as dataGridPublic;
 @use "dateBox/public" as dateBoxPublic;
 @use "dateRangeBox/public" as dateRangeBoxPublic;
 @use "dateView/public" as dateViewPublic;
+@use "diagram/public" as diagramPublic;
+@use "drawer/public" as drawerPublic;
 @use "dropDownButton/public" as dropDownButtonPublic;
 @use "dropDownEditor/public" as dropDownEditorPublic;
 @use "dropDownList/public" as dropDownListPublic;
 @use "dropDownMenu/public" as dropDownMenuPublic;
 @use "fieldset/public" as fieldsetPublic;
+@use "fileManager/public" as fileManagerPublic;
+@use "fileUploader/public" as fileUploaderPublic;
+@use "filterBuilder/public" as filterBuilderPublic;
+@use "form/public" as formPublic;
 @use "gallery/public" as galleryPublic;
+@use "gantt/public" as ganttPublic;
 @use "gridBase/public" as gridBasePublic;
+@use "htmlEditor/public" as htmlEditorPublic;
 @use "informer/public" as informerPublic;
+@use "list/public" as listPublic;
 @use "loadIndicator/public" as loadIndicatorPublic;
 @use "loadPanel/public" as loadPanelPublic;
 @use "lookup/public" as lookupPublic;
+@use "map/public" as mapPublic;
 @use "menu/public" as menuPublic;
 @use "numberBox/public" as numberBoxPublic;
+@use "pagination/public" as paginationPublic;
+@use "pivotGrid/public" as pivotGridPublic;
 @use "popover/public" as popoverPublic;
+@use "popup/public" as popupPublic;
 @use "progressBar/public" as progressBarPublic;
 @use "radioButton/public" as radioButtonPublic;
+@use "radioGroup/public" as radioGroupPublic;
+@use "recurrenceEditor/public" as recurrenceEditorPublic;
+@use "scheduler/public" as schedulerPublic;
 @use "scrollView/public" as scrollViewPublic;
 @use "scrollable/public" as scrollablePublic;
 @use "selectBox/public" as selectBoxPublic;
+@use "slider/public" as sliderPublic;
 @use "sortable/public" as sortablePublic;
+@use "speedDialAction/public" as speedDialActionPublic;
 @use "splitter/public" as splitterPublic;
 @use "splitterBar/public" as splitterBarPublic;
+@use "stepper/public" as stepperPublic;
 @use "switch/public" as switchPublic;
 @use "tabPanel/public" as tabPanelPublic;
+@use "tabs/public" as tabsPublic;
 @use "tagBox/public" as tagBoxPublic;
 @use "textArea/public" as textAreaPublic;
 @use "textBox/public" as textBoxPublic;
 @use "textEditor/public" as textEditorPublic;
 @use "tileView/public" as tileViewPublic;
+@use "timeView/public" as timeViewPublic;
 @use "toast/public" as toastPublic;
 @use "toolbar/public" as toolbarPublic;
 @use "tooltip/public" as tooltipPublic;
 @use "treeList/public" as treeListPublic;
+@use "treeView/public" as treeViewPublic;
 @use "validation/public" as validationPublic;
+@use "widget/public" as widgetPublic;
 
 :root {
   @include commonPublic.publish();
@@ -86,6 +114,10 @@
   @include colorBoxPublic.publish();
 }
 
+.dx-colorview-container {
+  @include colorViewPublic.publish();
+}
+
 .dx-context-menu {
   @include contextMenuPublic.publish();
 }
@@ -267,3 +299,140 @@
 .dx-validationsummary {
   @include validationPublic.publish();
 }
+
+.dx-calendar {
+  @include calendarPublic.publish();
+}
+
+.dx-checkbox {
+  @include checkBoxPublic.publish();
+}
+
+.dx-drawer {
+  @include drawerPublic.publish();
+}
+
+.dx-filterbuilder,
+.dx-filterbuilder-overlay,
+.dx-filterbuilder-operations {
+  @include filterBuilderPublic.publish();
+}
+
+.dx-form {
+  @include formPublic.publish();
+}
+
+.dx-htmleditor,
+.dx-aidialog,
+.dx-htmleditor-add-image-popup {
+  @include htmlEditorPublic.publish();
+}
+
+.dx-list,
+.dx-list-context-menucontent {
+  @include listPublic.publish();
+}
+
+.dx-popup-wrapper {
+  @include popupPublic.publish();
+}
+
+.dx-radiogroup {
+  @include radioGroupPublic.publish();
+}
+
+.dx-fa-button {
+  @include speedDialActionPublic.publish();
+}
+
+.dx-timeview {
+  @include timeViewPublic.publish();
+}
+
+.dx-treeview,
+.dx-sortable-dragging {
+  @include treeViewPublic.publish();
+}
+
+.dx-surface {
+  @include widgetPublic.publish();
+}
+
+.dx-filemanager,
+.dx-filemanager-dialog-popup {
+  @include fileManagerPublic.publish();
+}
+
+.dx-scheduler,
+.dx-scheduler-appointment-popup,
+.dx-scheduler-appointment-tooltip-wrapper,
+.dx-scheduler-overlay-panel {
+  @include schedulerPublic.publish();
+}
+
+.dx-tabs {
+  @include tabsPublic.publish();
+}
+
+.dx-chat,
+.dx-messagelist-context-menu-content,
+.dx-chat-confirmation-popup-wrapper {
+  @include chatPublic.publish();
+}
+
+.dx-diagram,
+.dx-diagram-properties-popup,
+.dx-diagram-toolbox-popup,
+.dx-diagram-contextmenu,
+.dx-diagram-context-toolbox,
+.dx-diagram-floating-toolbar-container {
+  @include diagramPublic.publish();
+}
+
+.dx-fileuploader {
+  @include fileUploaderPublic.publish();
+}
+
+.dx-gantt {
+  @include ganttPublic.publish();
+}
+
+.dx-map-container {
+  @include mapPublic.publish();
+}
+
+.dx-pagination,
+.dx-pager {
+  @include paginationPublic.publish();
+}
+
+.dx-pivotgrid,
+.dx-pivotgridfieldchooser,
+.dx-pivotgrid-fields-container {
+  @include pivotGridPublic.publish();
+}
+
+.dx-recurrence-repeat-on,
+.dx-recurrence-button-group,
+.dx-recurrence-numberbox-interval-wrapper,
+.dx-recurrence-radiogroup-repeat-type,
+.dx-recurrence-datebox-until-date,
+.dx-recurrence-numberbox-repeat-count {
+  @include recurrenceEditorPublic.publish();
+}
+
+.dx-slider {
+  @include sliderPublic.publish();
+}
+
+.dx-stepper {
+  @include stepperPublic.publish();
+}
+
+.dx-cardview,
+.dx-cardview-header-item,
+.dx-cardview-header-item-sort-indicator,
+.dx-cardview-column-chooser-list,
+.dx-cardview-column-chooser-plain {
+  @include cardViewPublic.publish();
+}