From f810dfcedd67795f0a858fa02be2451d046ac722 Mon Sep 17 00:00:00 2001
From: Dmitry Lavrinovich <52966626+dmlvr@users.noreply.github.com>
Date: Fri, 4 Sep 2026 13:14:44 +0000
Subject: [PATCH 01/45] Scheduler - mock date in demo for screenshots testing
 (#35054)

---
 .../ResolveTimeConflicts/Angular/app/app.component.ts    | 9 +++++++++
 .../Demos/Scheduler/ResolveTimeConflicts/React/App.tsx   | 9 +++++++++
 .../Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js  | 8 ++++++++
 .../Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue     | 9 +++++++++
 .../Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js | 9 +++++++++
 5 files changed, 44 insertions(+)

diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.ts b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.ts
index 96bd4aa81eac..8b275fbc3e96 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.ts
@@ -86,6 +86,15 @@ export class AppComponent {
         this.form?.validate();
       }
     });
+
+    this.form?.on('contentReady', (contentReadyEvent: DxFormTypes.ContentReadyEvent) => {
+      const untilEditor = contentReadyEvent.component.getEditor('recurrenceEndUntilEditor');
+      untilEditor?.on('valueChanged', () => {
+        contentReadyEvent.component.getEditor('recurrenceRepeatEndEditor')?.option('value') !== 'until'
+        && untilEditor?.option('value', new Date(2026, 8, 3));
+      });
+      untilEditor?.option('value', new Date(2026, 8, 3));
+    });
   };
 
   customizeItem = (item: DxFormTypes.SimpleItem): void => {
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx
index 42a44a6958aa..11ccad20985b 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx
@@ -173,6 +173,15 @@ const App = () => {
         formRef.current?.validate();
       }
     });
+
+    e.component.on('contentReady', (contentReadyEvent: FormTypes.ContentReadyEvent) => {
+      const untilEditor = contentReadyEvent.component.getEditor('recurrenceEndUntilEditor');
+      untilEditor?.on('valueChanged', () => {
+        contentReadyEvent.component.getEditor('recurrenceRepeatEndEditor')?.option('value') !== 'until'
+        && untilEditor?.option('value', new Date(2026, 8, 3));
+      });
+      untilEditor?.option('value', new Date(2026, 8, 3));
+    });
   }, [setConflictError]);
 
   const customizeItem = useCallback((item: FormTypes.SimpleItem) => {
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js
index e13487f0fae2..9cbd4f8a600f 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js
@@ -149,6 +149,14 @@ const App = () => {
           formRef.current?.validate();
         }
       });
+      e.component.on('contentReady', (contentReadyEvent) => {
+        const untilEditor = contentReadyEvent.component.getEditor('recurrenceEndUntilEditor');
+        untilEditor?.on('valueChanged', () => {
+          contentReadyEvent.component.getEditor('recurrenceRepeatEndEditor')?.option('value') !==
+            'until' && untilEditor?.option('value', new Date(2026, 8, 3));
+        });
+        untilEditor?.option('value', new Date(2026, 8, 3));
+      });
     },
     [setConflictError],
   );
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
index 260dc02e5e76..38507b99935d 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
@@ -240,6 +240,15 @@ const onFormInitialized = (e: DxFormTypes.InitializedEvent) => {
       form?.validate();
     }
   });
+
+  e.component!.on('contentReady', (contentReadyEvent: DxFormTypes.ContentReadyEvent) => {
+    const untilEditor = contentReadyEvent.component.getEditor('recurrenceEndUntilEditor');
+    untilEditor?.on('valueChanged', () => {
+      contentReadyEvent.component.getEditor('recurrenceRepeatEndEditor')?.option('value') !== 'until'
+      && untilEditor?.option('value', new Date(2026, 8, 3));
+    });
+    untilEditor?.option('value', new Date(2026, 8, 3));
+  });
 };
 
 const customizeItem = (item: DxFormTypes.SimpleItem) => {
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js
index b6a6887daf51..9358db8a1b7a 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js
@@ -43,6 +43,15 @@ $(() => {
               form.validate();
             }
           });
+
+          form.on('contentReady', (e) => {
+            const untilEditor = e.component.getEditor('recurrenceEndUntilEditor');
+            untilEditor.on('valueChanged', () => {
+              e.component.getEditor('recurrenceRepeatEndEditor').option('value') !== 'until'
+              && untilEditor.option('value', new Date(2026, 8, 3));
+            });
+            untilEditor.option('value', new Date(2026, 8, 3));
+          });
         },
         items: [
           {

From 49d66d64af345314ef6b60c8f13fe6b612904ba2 Mon Sep 17 00:00:00 2001
From: Andrei Kharitonov <pharret31@users.noreply.github.com>
Date: Fri, 4 Sep 2026 13:47:34 +0000
Subject: [PATCH 02/45] Tooltip: ESC key does not close both the Tooltip and
 its parent overlay (T1334708) (#35032)

---
 .../js/__internal/ui/overlay/overlay.ts       | 24 ++++++++++--
 .../js/__internal/ui/popover/popover.ts       | 14 +++----
 .../js/__internal/ui/popup/popup.ts           | 12 ++++--
 .../DevExpress.ui.widgets/popup.tests.js      | 37 +++++++++++++++++++
 4 files changed, 73 insertions(+), 14 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/overlay/overlay.ts b/packages/devextreme/js/__internal/ui/overlay/overlay.ts
index d6b3068d30ee..0b4a3a9bc546 100644
--- a/packages/devextreme/js/__internal/ui/overlay/overlay.ts
+++ b/packages/devextreme/js/__internal/ui/overlay/overlay.ts
@@ -565,14 +565,13 @@ class Overlay<
     super._initTemplates();
   }
 
-  _isTopOverlay(): boolean {
+  _isTopFocusableOverlay(): boolean {
     const overlayStack = this._overlayStack();
 
     for (let i = overlayStack.length - 1; i >= 0; i -= 1) {
       const tabbableElements = overlayStack[i]._findTabbableBounds();
 
       if (tabbableElements.$first || tabbableElements.$last) {
-        // @ts-ignore expected: types Overlay<OverlayProperties> and this have no overlap
         return overlayStack[i] === this;
       }
     }
@@ -580,6 +579,25 @@ class Overlay<
     return false;
   }
 
+  _isLastInOverlayStack(): boolean {
+    const overlayStack = this._overlayStack();
+
+    return overlayStack[overlayStack.length - 1] === this;
+  }
+
+  _handlesDocumentEscapeKey(): boolean {
+    return false;
+  }
+
+  _isEscapeHandledByOverlayAbove(): boolean {
+    const overlayStack = this._overlayStack();
+    const index = overlayStack.indexOf(this);
+
+    return overlayStack
+      .slice(index + 1)
+      .some((overlay) => overlay._handlesDocumentEscapeKey());
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _overlayStack(): Overlay<any>[] {
     return OVERLAY_STACK;
@@ -1052,7 +1070,7 @@ class Overlay<
   }
 
   _tabKeyHandler(e: KeyboardEvent): void {
-    if (normalizeKeyName(e) !== TAB_KEY || !this._isTopOverlay()) {
+    if (normalizeKeyName(e) !== TAB_KEY || !this._isTopFocusableOverlay()) {
       return;
     }
 
diff --git a/packages/devextreme/js/__internal/ui/popover/popover.ts b/packages/devextreme/js/__internal/ui/popover/popover.ts
index fa5d0fbf46e5..d071cd9f425e 100644
--- a/packages/devextreme/js/__internal/ui/popover/popover.ts
+++ b/packages/devextreme/js/__internal/ui/popover/popover.ts
@@ -225,19 +225,19 @@ class Popover<
 
   _initEscapeKeyHandler(): void {
     this._documentEscapeKeyHandler = (e: KeyboardEvent): void => {
-      const { visible } = this.option();
-
-      const overlayStack = this._overlayStack();
-      // @ts-ignore expected: types Overlay<OverlayProperties> and this have no overlap
-      const isTopOverlay = overlayStack[overlayStack.length - 1] === this;
-
-      if (normalizeKeyName(e) === ESC_KEY_NAME && visible && isTopOverlay) {
+      if (normalizeKeyName(e) === ESC_KEY_NAME && this._handlesDocumentEscapeKey()) {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.hide();
       }
     };
   }
 
+  _handlesDocumentEscapeKey(): boolean {
+    const { visible } = this.option();
+
+    return Boolean(visible) && this._isLastInOverlayStack();
+  }
+
   _attachEscapeKeyHandler(): void {
     const eventName = addNamespace('keydown', this.NAME as string);
 
diff --git a/packages/devextreme/js/__internal/ui/popup/popup.ts b/packages/devextreme/js/__internal/ui/popup/popup.ts
index efbd2cf74297..ace3c8ebbc71 100644
--- a/packages/devextreme/js/__internal/ui/popup/popup.ts
+++ b/packages/devextreme/js/__internal/ui/popup/popup.ts
@@ -245,10 +245,14 @@ class Popup<
     const e = options.originalEvent;
     const $target = $(e.target);
 
-    if (this._$content && !$target.is(this._$content)
-        && options.keyName === ESC_KEY_NAME
-        && !e.isDefaultPrevented()
-        && !_ignoreCloseOnChildEscape) {
+    const shouldCloseOnChildEscape = !!this._$content
+      && !$target.is(this._$content)
+      && options.keyName === ESC_KEY_NAME
+      && !e.isDefaultPrevented()
+      && !_ignoreCloseOnChildEscape
+      && !this._isEscapeHandledByOverlayAbove();
+
+    if (shouldCloseOnChildEscape) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.hide();
     }
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js
index 1fcb96b26eef..9b47c993828a 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js
@@ -33,6 +33,8 @@ import { BUTTON_CLASS } from '__internal/ui/button/button';
 
 import 'fluent_blue_light.css!';
 import 'ui/popup';
+import 'ui/tooltip';
+import 'ui/load_panel';
 import 'ui/tab_panel';
 import 'ui/scroll_view';
 import 'ui/date_box';
@@ -2774,6 +2776,41 @@ QUnit.module('keyboard navigation', {
 
         assert.strictEqual(this.popup.option('visible'), true, 'popup remains visible when _ignoreCloseOnChildEscape is true');
     });
+
+    QUnit.test('should remain visible when child element presses escape and a tooltip is shown above it (T1334708)', function(assert) {
+        this.init({ dragEnabled: false });
+
+        const $input = $('<input>').appendTo(this.popup.$content());
+        const tooltip = $('<div>')
+            .appendTo('#qunit-fixture')
+            .dxTooltip({ target: $input, visible: true, animation: null })
+            .dxTooltip('instance');
+
+        assert.strictEqual(tooltip.option('visible'), true, 'tooltip is shown');
+
+        keyboardMock($input).keyDown('esc');
+
+        assert.strictEqual(tooltip.option('visible'), false, 'tooltip is hidden');
+        assert.strictEqual(this.popup.option('visible'), true, 'popup remains visible');
+
+        tooltip.dispose();
+    });
+
+    QUnit.test('should be closed on child element escape key press when an overlay that ignores escape is shown above it', function(assert) {
+        this.init({ dragEnabled: false });
+
+        const $input = $('<input>').appendTo(this.popup.$content());
+        const loadPanel = $('<div>')
+            .appendTo('#qunit-fixture')
+            .dxLoadPanel({ visible: true, animation: null })
+            .dxLoadPanel('instance');
+
+        keyboardMock($input).keyDown('esc');
+
+        assert.strictEqual(this.popup.option('visible'), false, 'popup is closed');
+
+        loadPanel.dispose();
+    });
 });
 
 QUnit.module('rendering', {

From 90beeb9f75014adcae68b227f76a40f43c7b444f Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <251575087+bit-byte0@users.noreply.github.com>
Date: Fri, 4 Sep 2026 14:40:36 +0000
Subject: [PATCH 03/45] chore(security): bump fast-uri, qs and fflate overrides
 to patched versions (GHSA-5jgf-p345-68v8, GHSA-4mjr-xmp4-gh2g,
 GHSA-px8p-9vwx-vf98) (#35034)

---
 pnpm-lock.yaml      | 51 +++++++++++++++++++--------------------------
 pnpm-workspace.yaml |  5 +++--
 2 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aed252f8908c..7afce36ee551 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -185,7 +185,7 @@ overrides:
   axios@<1.18.0: ^1.18.0
   braces@<3.0.3: ^3.0.3
   semver@<5.7.2: ^5.7.2
-  qs: '>=6.15.2'
+  qs: '>=6.16.0'
   vite@>=7.0.0 <=7.3.4: ^7.3.5
   hono@<4.12.34: ^4.12.34
   minimatch@>=9.0.0 < 9.0.7: 9.0.9
@@ -223,13 +223,14 @@ overrides:
   tar@<7.5.19: ^7.5.19
   shell-quote@<=1.8.4: ^1.9.0
   babel-traverse: npm:@babel/traverse@^7.23.2
-  fast-uri@>=3.0.0 <3.1.5: ^3.1.5
+  fast-uri@>=3.0.0 <3.1.6: ^3.1.6
   '@hono/node-server@<2.0.12': ^2.0.12
   dompurify@<=3.4.12: ^3.4.13
   nanoid@<3.3.17: ^3.3.17
   browserslist@<4.28.7: ^4.28.7
   postcss-selector-parser@>=6.1.0 <6.1.3: ^6.1.3
   postcss-selector-parser@>=7.1.0 <7.1.3: ^7.1.3
+  fflate@>=0.8.0 <0.8.3: ^0.8.3
 
 patchedDependencies:
   testcafe-hammerhead@31.7.8: 8655c07786177d3b611a05abf6b0ea87d32796eb2601f92a800ef041095f264c
@@ -10896,8 +10897,8 @@ packages:
   fast-string-width@3.0.2:
     resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
 
-  fast-uri@3.1.5:
-    resolution: {integrity: sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==}
+  fast-uri@3.1.7:
+    resolution: {integrity: sha512-dOvZVzjdZdz7phd9v6jCbwxrBW3fK6n8Rc0CtdmM4bumzMnxywBYhuph6J819RRw/ku+rLbelwfMunktuzVVHg==}
 
   fast-wrap-ansi@0.2.2:
     resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
@@ -10931,8 +10932,8 @@ packages:
   fecha@4.2.3:
     resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
 
-  fflate@0.8.2:
-    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+  fflate@0.8.3:
+    resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==}
 
   figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
@@ -14487,12 +14488,8 @@ packages:
     resolution: {integrity: sha512-ZvWjbAj4MWAj6bnCc9CnculsXnJr7eoKsvH/8rVpZbqYxP2z05HNQa43ZVwe/dVRcFxgfFHE2CkUqn0sCyLfHw==}
     hasBin: true
 
-  qs@6.15.2:
-    resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==}
-    engines: {node: '>=0.6'}
-
-  qs@6.15.3:
-    resolution: {integrity: sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==}
+  qs@6.16.0:
+    resolution: {integrity: sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==}
     engines: {node: '>=0.6'}
 
   querystring-es3@0.2.1:
@@ -25807,14 +25804,14 @@ snapshots:
   ajv@8.18.0:
     dependencies:
       fast-deep-equal: 3.1.3
-      fast-uri: 3.1.5
+      fast-uri: 3.1.7
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
   ajv@8.20.0:
     dependencies:
       fast-deep-equal: 3.1.3
-      fast-uri: 3.1.5
+      fast-uri: 3.1.7
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
@@ -26437,7 +26434,7 @@ snapshots:
       http-errors: 2.0.1
       iconv-lite: 0.4.24
       on-finished: 2.4.1
-      qs: 6.15.3
+      qs: 6.16.0
       raw-body: 2.5.3
       type-is: 1.6.18
       unpipe: 1.0.0
@@ -26452,7 +26449,7 @@ snapshots:
       http-errors: 2.0.1
       iconv-lite: 0.7.2
       on-finished: 2.4.1
-      qs: 6.15.3
+      qs: 6.16.0
       raw-body: 3.0.2
       type-is: 2.1.0
     transitivePeerDependencies:
@@ -27554,7 +27551,7 @@ snapshots:
       object-keys: 1.1.1
       object.assign: 4.1.7
       regexp.prototype.flags: 1.5.4
-      side-channel: 1.1.0
+      side-channel: 1.1.1
       which-boxed-primitive: 1.1.1
       which-collection: 1.0.2
       which-typed-array: 1.1.20
@@ -29180,7 +29177,7 @@ snapshots:
       parseurl: 1.3.3
       path-to-regexp: 0.1.13
       proxy-addr: 2.0.7
-      qs: 6.15.2
+      qs: 6.16.0
       range-parser: 1.2.1
       safe-buffer: 5.2.1
       send: 0.19.2
@@ -29215,7 +29212,7 @@ snapshots:
       once: 1.4.0
       parseurl: 1.3.3
       proxy-addr: 2.0.7
-      qs: 6.15.3
+      qs: 6.16.0
       range-parser: 1.3.0
       router: 2.2.0(supports-color@7.2.0)
       send: 1.2.1(supports-color@7.2.0)
@@ -29279,7 +29276,7 @@ snapshots:
     dependencies:
       fast-string-truncated-width: 3.0.3
 
-  fast-uri@3.1.5: {}
+  fast-uri@3.1.7: {}
 
   fast-wrap-ansi@0.2.2:
     dependencies:
@@ -29313,7 +29310,7 @@ snapshots:
 
   fecha@4.2.3: {}
 
-  fflate@0.8.2: {}
+  fflate@0.8.3: {}
 
   figures@3.2.0:
     dependencies:
@@ -31953,7 +31950,7 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.29.2
       fast-png: 6.4.0
-      fflate: 0.8.2
+      fflate: 0.8.3
     optionalDependencies:
       canvg: 3.0.11
       core-js: 3.49.0
@@ -34277,11 +34274,7 @@ snapshots:
 
   qrcode-terminal@0.10.0: {}
 
-  qs@6.15.2:
-    dependencies:
-      side-channel: 1.1.0
-
-  qs@6.15.3:
+  qs@6.16.0:
     dependencies:
       es-define-property: 1.0.1
       side-channel: 1.1.1
@@ -37057,7 +37050,7 @@ snapshots:
 
   union@0.5.0:
     dependencies:
-      qs: 6.15.2
+      qs: 6.16.0
 
   unist-util-find-after@4.0.1:
     dependencies:
@@ -37174,7 +37167,7 @@ snapshots:
   url@0.11.4:
     dependencies:
       punycode: 1.4.1
-      qs: 6.15.2
+      qs: 6.16.0
 
   use-sync-external-store@1.6.0(react@18.3.1):
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 723fdeb948d3..cc6a4529add4 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -19,7 +19,7 @@ overrides:
   "axios@<1.18.0": ^1.18.0
   "braces@<3.0.3": ^3.0.3
   "semver@<5.7.2": ^5.7.2
-  qs: ">=6.15.2"
+  qs: ">=6.16.0"
   "vite@>=7.0.0 <=7.3.4": ^7.3.5
   "hono@<4.12.34": "^4.12.34"
   "minimatch@>=9.0.0 < 9.0.7": 9.0.9
@@ -57,13 +57,14 @@ overrides:
   "tar@<7.5.19": "^7.5.19"
   "shell-quote@<=1.8.4": ^1.9.0
   "babel-traverse": "npm:@babel/traverse@^7.23.2"
-  "fast-uri@>=3.0.0 <3.1.5": "^3.1.5"
+  "fast-uri@>=3.0.0 <3.1.6": "^3.1.6"
   "@hono/node-server@<2.0.12": "^2.0.12"
   "dompurify@<=3.4.12": "^3.4.13"
   "nanoid@<3.3.17": "^3.3.17"
   "browserslist@<4.28.7": "^4.28.7"
   "postcss-selector-parser@>=6.1.0 <6.1.3": "^6.1.3"
   "postcss-selector-parser@>=7.1.0 <7.1.3": "^7.1.3"
+  "fflate@>=0.8.0 <0.8.3": "^0.8.3"
 catalog:
   axe-core: 4.11.3
   inferno: ^8.2.3

From 674e0aa519854eec334209b858af20a8b0ad32d0 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Sat, 5 Sep 2026 23:58:17 +0000
Subject: [PATCH 04/45] CI: fail a hung TestCafe test after 3 minutes instead
 of waiting for the job timeout (#35046)

---
 e2e/testcafe-devextreme/runner.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/e2e/testcafe-devextreme/runner.ts b/e2e/testcafe-devextreme/runner.ts
index 0be6eeeafc80..ab47c5657686 100644
--- a/e2e/testcafe-devextreme/runner.ts
+++ b/e2e/testcafe-devextreme/runner.ts
@@ -16,6 +16,7 @@ import { getCurrentTheme } from './helpers/themeUtils';
 const LAUNCH_RETRY_ATTEMPTS = 3;
 const LAUNCH_RETRY_TIMEOUT = 10000;
 const FAILED_TESTS_RETRY_ATTEMPTS = 0;
+const TEST_EXECUTION_TIMEOUT = 3 * 60 * 1000;
 
 const wait = async (
   timeout: number,
@@ -328,6 +329,7 @@ async function main() {
 
     const runOptions: RunOptions = {
       quarantineMode: false,
+      testExecutionTimeout: TEST_EXECUTION_TIMEOUT,
       // @ts-expect-error ts-error
       hooks: {
         test: {

From ea9296e7a3525240a60393859fd74c9fc648498a Mon Sep 17 00:00:00 2001
From: Alyar <Alyar666@users.noreply.github.com>
Date: Sun, 6 Sep 2026 20:27:19 +0000
Subject: [PATCH 05/45] Grids - DataController: Extract row type knowledge to
 extenders (#35031)

Co-authored-by: Alyar <>
---
 .../grouping/__tests__/utils.test.ts          |  38 ++++++-
 ...ing_data_controller.data_row_index.test.ts |  81 ++++++++++++++
 ...ouping_data_controller.row_changes.test.ts |  36 +++++-
 .../extenders/grouping_data_controller.ts     |  22 +++-
 .../grids/data_grid/grouping/utils.ts         |  16 +++
 ...ummary_data_controller.row_changes.test.ts |   1 +
 .../extenders/summary_data_controller.ts      |  13 +++
 .../__tests__/__mock__/helpers/row_changes.ts |  16 ++-
 .../data_controller/data_controller.ts        |  37 +++---
 .../utils/__tests__/row_changes.test.ts       | 105 +++---------------
 .../data_controller/utils/row_changes.ts      |  36 +-----
 ...diting_data_controller.row_changes.test.ts |  16 +++
 12 files changed, 278 insertions(+), 139 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/__tests__/grouping_data_controller.data_row_index.test.ts

diff --git a/packages/devextreme/js/__internal/grids/data_grid/grouping/__tests__/utils.test.ts b/packages/devextreme/js/__internal/grids/data_grid/grouping/__tests__/utils.test.ts
index ff48341edb38..4bf12e9d36b8 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/grouping/__tests__/utils.test.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/grouping/__tests__/utils.test.ts
@@ -5,7 +5,7 @@ import type { ProcessedItem } from '@ts/grids/grid_core/data_controller/types';
 import type { RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
 
 import {
-  isGroupNode, isGroupRow, isSameContinuationState, isSameExpandedState,
+  getGroupColumnIndices, isGroupNode, isGroupRow, isSameContinuationState, isSameExpandedState,
 } from '../utils';
 
 const groupRow = (partial: Partial<ProcessedItem> = {}): ProcessedItem => ({
@@ -136,3 +136,39 @@ describe('isSameContinuationState', () => {
     )).toBe(true);
   });
 });
+
+describe('getGroupColumnIndices', () => {
+  const expandedGroupRow = (partial: Partial<ProcessedItem> = {}): ProcessedItem => groupRow({
+    isExpanded: true,
+    data: { isContinuation: false, isContinuationOnNextPage: false },
+    ...partial,
+  });
+
+  it('should skip the group expand cell', () => {
+    const oldItem = expandedGroupRow({
+      cells: [{ column: { type: 'groupExpand' } }, {}, { column: { dataField: 'name' } }],
+    });
+
+    expect(getGroupColumnIndices(oldItem, expandedGroupRow())).toEqual([1, 2]);
+  });
+
+  it('should return undefined when the old row has no cells', () => {
+    expect(getGroupColumnIndices(expandedGroupRow(), expandedGroupRow())).toBeUndefined();
+  });
+
+  it('should return undefined when the expanded state has changed', () => {
+    const oldItem = expandedGroupRow({ cells: [{}] });
+
+    expect(getGroupColumnIndices(oldItem, expandedGroupRow({ isExpanded: false })))
+      .toBeUndefined();
+  });
+
+  it('should return undefined when the continuation state has changed', () => {
+    const oldItem = expandedGroupRow({ cells: [{}] });
+    const newItem = expandedGroupRow({
+      data: { isContinuation: true, isContinuationOnNextPage: false },
+    });
+
+    expect(getGroupColumnIndices(oldItem, newItem)).toBeUndefined();
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/__tests__/grouping_data_controller.data_row_index.test.ts b/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/__tests__/grouping_data_controller.data_row_index.test.ts
new file mode 100644
index 000000000000..6e1d64269b75
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/__tests__/grouping_data_controller.data_row_index.test.ts
@@ -0,0 +1,81 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+} from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { ProcessedItem } from '@ts/grids/grid_core/data_controller/types';
+
+declare class ExposedDataController extends DataController {
+  public _items: ProcessedItem[];
+
+  public adjustInsertRowIndex: (visibleRowIndex: number) => number;
+}
+
+const row = (rowType: ProcessedItem['rowType']): ProcessedItem => ({
+  rowType,
+  key: rowType,
+  data: {},
+  values: [],
+});
+
+const withVisibleRows = async (
+  rows: ProcessedItem[],
+): Promise<(visibleRowIndex: number) => number> => {
+  const { instance } = await createDataGrid({
+    dataSource: [],
+    columns: ['name', 'age'],
+  });
+  const dataController = instance.getController('data') as unknown as ExposedDataController;
+
+  dataController._items = rows;
+
+  return (visibleRowIndex: number): number => dataController.adjustInsertRowIndex(visibleRowIndex);
+};
+
+describe('Grouping data controller data row index', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('should count the group rows along with the data rows', async () => {
+    const dataRowIndex = await withVisibleRows([
+      row('data'), row('group'), row('detail'), row('data'),
+    ]);
+
+    expect(dataRowIndex(3)).toBe(2);
+    expect(dataRowIndex(4)).toBe(3);
+  });
+
+  it('should not count the group footer rows', async () => {
+    const dataRowIndex = await withVisibleRows([row('data'), row('groupFooter'), row('data')]);
+
+    expect(dataRowIndex(3)).toBe(2);
+  });
+
+  it('should not count the adaptive detail rows', async () => {
+    const dataRowIndex = await withVisibleRows([row('data'), row('detailAdaptive'), row('data')]);
+
+    expect(dataRowIndex(3)).toBe(2);
+  });
+
+  it('should count only the data rows when there are no group rows', async () => {
+    const dataRowIndex = await withVisibleRows([row('data'), row('detail'), row('data')]);
+
+    expect(dataRowIndex(3)).toBe(2);
+  });
+
+  it('should return zero for the first visible index', async () => {
+    const dataRowIndex = await withVisibleRows([row('group'), row('data')]);
+
+    expect(dataRowIndex(0)).toBe(0);
+  });
+
+  it('should count the rows that are there when the index is out of range', async () => {
+    const dataRowIndex = await withVisibleRows([row('group'), row('data')]);
+
+    expect(dataRowIndex(10)).toBe(2);
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/__tests__/grouping_data_controller.row_changes.test.ts b/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/__tests__/grouping_data_controller.row_changes.test.ts
index 4a0559e43a5c..3c7bea04f2e4 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/__tests__/grouping_data_controller.row_changes.test.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/__tests__/grouping_data_controller.row_changes.test.ts
@@ -12,20 +12,31 @@ interface GroupRowState {
   isExpanded?: boolean;
   isContinuation?: boolean;
   isContinuationOnNextPage?: boolean;
+  values?: unknown[];
+  cells?: ProcessedItem['cells'];
 }
 
 const groupRow = ({
   isExpanded = true,
   isContinuation = false,
   isContinuationOnNextPage = false,
+  values = [],
+  cells,
 }: GroupRowState = {}): ProcessedItem => ({
   rowType: 'group',
   key: [1],
   data: { isContinuation, isContinuationOnNextPage },
-  values: [],
+  values,
   isExpanded,
+  cells,
 });
 
+const renderedCells: ProcessedItem['cells'] = [
+  { column: { type: 'groupExpand' } },
+  {},
+  { column: { dataField: 'name' } },
+];
+
 const dataRow = (partial: Partial<ProcessedItem> = {}): ProcessedItem => ({
   rowType: 'data',
   key: 1,
@@ -46,12 +57,13 @@ describe('Grouping data controller row changes', () => {
 
   it('should report a group row when isExpanded changed', async () => {
     const change = await refreshRow(
-      groupRow({ isExpanded: true }),
+      groupRow({ isExpanded: true, cells: renderedCells }),
       groupRow({ isExpanded: false }),
     );
 
     expect(change.rowIndices).toEqual([0]);
     expect(change.changeTypes).toEqual(['update']);
+    expect(change.columnIndices).toEqual([undefined]);
   });
 
   it('should report a group row when isContinuation changed', async () => {
@@ -68,6 +80,26 @@ describe('Grouping data controller row changes', () => {
     expect(change.changeTypes).toEqual(['update']);
   });
 
+  it('should diff every group cell but the expand one when values changed', async () => {
+    const change = await refreshRow(
+      groupRow({ values: ['Alex'], cells: renderedCells }),
+      groupRow({ values: ['Bob'] }),
+    );
+
+    expect(change.rowIndices).toEqual([0]);
+    expect(change.columnIndices).toEqual([[1, 2]]);
+  });
+
+  it('should repaint the whole group row when it was never rendered', async () => {
+    const change = await refreshRow(
+      groupRow({ values: ['Alex'] }),
+      groupRow({ values: ['Bob'] }),
+    );
+
+    expect(change.rowIndices).toEqual([0]);
+    expect(change.columnIndices).toEqual([undefined]);
+  });
+
   it('should not report a data row when isExpanded changed (master detail row)', async () => {
     const change = await refreshRow(
       dataRow({ isExpanded: false }),
diff --git a/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/grouping_data_controller.ts b/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/grouping_data_controller.ts
index 440fb56af6d1..769d0aa1590f 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/grouping_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/grouping/extenders/grouping_data_controller.ts
@@ -3,6 +3,7 @@ import { Deferred, when } from '@js/core/utils/deferred';
 import type { Properties } from '@js/ui/data_grid';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
 import type { ItemProcessingOptions, ProcessedItem } from '@ts/grids/grid_core/data_controller/types';
+import { countRowsBefore } from '@ts/grids/grid_core/data_controller/utils/row_changes';
 import type { RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
 import type {
   ModuleType,
@@ -16,7 +17,7 @@ import type {
   ChangeRowExpandArgs, GroupItem, ProcessGroupItemsOptions,
 } from '../types';
 import {
-  isGroupNode, isGroupRow, isSameContinuationState, isSameExpandedState,
+  getGroupColumnIndices, isGroupNode, isGroupRow, isSameContinuationState, isSameExpandedState,
 } from '../utils';
 
 export const groupingDataControllerExtender = (
@@ -134,6 +135,25 @@ export const groupingDataControllerExtender = (
     return resultItems;
   }
 
+  protected adjustInsertRowIndex(visibleRowIndex: number): number {
+    const groupRowCount = countRowsBefore(this.getVisibleRows(), visibleRowIndex, 'group');
+
+    return super.adjustInsertRowIndex(visibleRowIndex) + groupRowCount;
+  }
+
+  protected getChangedColumnIndices(
+    oldItem: ProcessedItem,
+    newItem: ProcessedItem,
+    visibleRowIndex: number,
+    isLiveUpdate?: boolean,
+  ): number[] | undefined {
+    if (oldItem.rowType === 'group' && newItem.rowType === 'group') {
+      return getGroupColumnIndices(oldItem, newItem);
+    }
+
+    return super.getChangedColumnIndices(oldItem, newItem, visibleRowIndex, isLiveUpdate);
+  }
+
   protected isSameRowState(item1: ProcessedItem, item2: ProcessedItem): boolean {
     if (item1.rowType === 'group'
       && (!isSameExpandedState(item1, item2) || !isSameContinuationState(item1, item2))) {
diff --git a/packages/devextreme/js/__internal/grids/data_grid/grouping/utils.ts b/packages/devextreme/js/__internal/grids/data_grid/grouping/utils.ts
index 52a05945ae26..e7e8a71a566e 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/grouping/utils.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/grouping/utils.ts
@@ -25,3 +25,19 @@ export function isSameContinuationState(item1: ProcessedItem, item2: ProcessedIt
   return item1.data?.isContinuation === item2.data?.isContinuation
     && item1.data?.isContinuationOnNextPage === item2.data?.isContinuationOnNextPage;
 }
+
+export function getGroupColumnIndices(
+  oldItem: ProcessedItem,
+  newItem: ProcessedItem,
+): number[] | undefined {
+  const isSameState = isSameExpandedState(oldItem, newItem)
+    && isSameContinuationState(oldItem, newItem);
+
+  if (!oldItem.cells || !isSameState) {
+    return undefined;
+  }
+
+  return oldItem.cells
+    .map((cell, index) => (cell.column?.type !== 'groupExpand' ? index : -1))
+    .filter((index) => index >= 0);
+}
diff --git a/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/__tests__/summary_data_controller.row_changes.test.ts b/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/__tests__/summary_data_controller.row_changes.test.ts
index 08455315c79f..fbfd87bbc4ea 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/__tests__/summary_data_controller.row_changes.test.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/__tests__/summary_data_controller.row_changes.test.ts
@@ -55,6 +55,7 @@ describe('Summary data controller row changes', () => {
 
     expect(change.rowIndices).toEqual([0]);
     expect(change.changeTypes).toEqual(['update']);
+    expect(change.columnIndices).toEqual([undefined]);
   });
 
   it('should report a group footer when isContinuation changed', async () => {
diff --git a/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/summary_data_controller.ts b/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/summary_data_controller.ts
index a32233d8861f..937c110c9ef3 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/summary_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/summary_data_controller.ts
@@ -288,6 +288,19 @@ export const summaryDataControllerExtender = (
     return super.isSameRowState(item1, item2);
   }
 
+  protected getChangedColumnIndices(
+    oldItem: ProcessedItem,
+    newItem: ProcessedItem,
+    visibleRowIndex: number,
+    isLiveUpdate?: boolean,
+  ): number[] | undefined {
+    if (newItem.rowType === DATAGRID_GROUP_FOOTER_ROW_TYPE) {
+      return undefined;
+    }
+
+    return super.getChangedColumnIndices(oldItem, newItem, visibleRowIndex, isLiveUpdate);
+  }
+
   protected _updateItemsCore(change: DataChange): void {
     const dataSource = this._dataSource;
     const summaryTotalItems = this.option('summary.totalItems');
diff --git a/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/row_changes.ts b/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/row_changes.ts
index 67df1f4eda7f..a93f657a28d5 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/row_changes.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/row_changes.ts
@@ -1,3 +1,4 @@
+import type { Properties as DataGridProperties } from '@js/ui/data_grid';
 import { createDataGrid } from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
 import type {
@@ -10,26 +11,37 @@ declare class ExposedDataController extends DataController {
   public applyChangesOnly: (change: DataChange) => void;
 }
 
-const createRefreshChange = (items: ProcessedItem[]): DataChange => ({
+export interface RefreshRowOptions {
+  gridOptions?: DataGridProperties;
+  isLiveUpdate?: boolean;
+}
+
+const createRefreshChange = (
+  items: ProcessedItem[],
+  isLiveUpdate?: boolean,
+): DataChange => ({
   changeType: 'refresh',
   repaintChangesOnly: true,
   items,
+  isLiveUpdate,
 });
 
 export const refreshRow = async (
   oldItem: ProcessedItem,
   newItem: ProcessedItem,
+  { gridOptions, isLiveUpdate }: RefreshRowOptions = {},
 ): Promise<UpdateChange> => {
   const { instance } = await createDataGrid({
     dataSource: [],
     columns: ['name', 'age'],
     repaintChangesOnly: true,
+    ...gridOptions,
   });
   const dataController = instance.getController('data') as unknown as ExposedDataController;
 
   dataController._items = [oldItem];
 
-  const change = createRefreshChange([newItem]);
+  const change = createRefreshChange([newItem], isLiveUpdate);
 
   dataController.applyChangesOnly(change);
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index 5b58e6902297..49576bb98d28 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -54,11 +54,9 @@ import { resolvePaginate, syncPaging } from './utils/paging';
 import { getRefreshOptions } from './utils/refresh';
 import {
   attachChangedItems,
-  canDiffColumns,
   convertToUpdateChange,
+  countRowsBefore,
   getChangedRowIndices,
-  getDataRowIndex,
-  getGroupColumnIndices,
   getItemChange,
   getRowKey,
   indexRowsByKey,
@@ -749,6 +747,16 @@ export class DataController extends modules.Controller {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected getDataIndex(change: DataChange): number { return 0; }
 
+  /**
+   * A store change is indexed by data rows, while an insert index coming from the grid counts
+   * every visible row. Each module that puts its own countable rows into the stream adds their
+   * count on top of this one.
+   * @extended: grouping (DataGrid)
+   */
+  protected adjustInsertRowIndex(visibleRowIndex: number): number {
+    return countRowsBefore(this.getVisibleRows(), visibleRowIndex, 'data');
+  }
+
   /**
    * @extended: adaptivity, editing, master_detail, virtual_scrolling
    */
@@ -968,7 +976,8 @@ export class DataController extends modules.Controller {
   }
 
   /**
-   * @extended: editing_row_based, editing, editing_form_based
+   * @extended: editing_row_based, editing, editing_form_based, grouping (DataGrid),
+   * summary (DataGrid)
    */
   protected getChangedColumnIndices(
     oldItem: ProcessedItem,
@@ -976,18 +985,17 @@ export class DataController extends modules.Controller {
     visibleRowIndex: number,
     isLiveUpdate?: boolean,
   ): number[] | undefined {
-    if (!canDiffColumns(oldItem, newItem)) {
+    if (oldItem.rowType !== newItem.rowType) {
       return undefined;
     }
-
-    switch (newItem.rowType) {
-      case 'group':
-        return getGroupColumnIndices(oldItem, newItem);
-      case 'detail':
-        return [];
-      default:
-        return this.getChangedColumnIndicesCore(oldItem, newItem, visibleRowIndex, isLiveUpdate);
+    // The detail type is not owned by a single module: Master-Detail creates these rows,
+    // while form-based editing reuses the same type for its edit row. Therefore, the check
+    // remains in the base module for now.
+    if (newItem.rowType === 'detail') {
+      return [];
     }
+
+    return this.getChangedColumnIndicesCore(oldItem, newItem, visibleRowIndex, isLiveUpdate);
   }
 
   private getChangedColumnIndicesCore(
@@ -1150,7 +1158,6 @@ export class DataController extends modules.Controller {
   }
 
   private readonly changingHandler = (e: ChangingEvent): void => {
-    const rows = this.getVisibleRows();
     const dataSource = this.dataSource();
 
     if (!dataSource) {
@@ -1159,7 +1166,7 @@ export class DataController extends modules.Controller {
 
     e.changes.forEach((change) => {
       if (change.type === 'insert' && change.index !== undefined && change.index >= 0) {
-        change.index = getDataRowIndex(rows, change.index);
+        change.index = this.adjustInsertRowIndex(change.index);
       }
     });
   };
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/__tests__/row_changes.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/__tests__/row_changes.test.ts
index 6a214c39d3a1..3f75575829b7 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/__tests__/row_changes.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/__tests__/row_changes.test.ts
@@ -8,16 +8,13 @@ import type {
 } from '../../types';
 import {
   attachChangedItems,
-  canDiffColumns,
   convertToUpdateChange,
+  countRowsBefore,
   getChangedRowIndices,
-  getDataRowIndex,
-  getGroupColumnIndices,
   getItemChange,
   getRowKey,
   getRowOperation,
   indexRowsByKey,
-  isSameGroupRowState,
   isSameItem,
   partialUpdateItem,
   resolveRepaintChangesOnly,
@@ -96,84 +93,6 @@ describe('isSameItem', () => {
   });
 });
 
-describe('isSameGroupRowState', () => {
-  const groupRow = (partial: Partial<ProcessedItem>): ProcessedItem => row({
-    rowType: 'group',
-    isExpanded: true,
-    data: { isContinuation: false, isContinuationOnNextPage: false },
-    ...partial,
-  });
-
-  it('should return true for the same state', () => {
-    expect(isSameGroupRowState(groupRow({}), groupRow({}))).toBe(true);
-  });
-
-  it('should compare the expanded state', () => {
-    expect(isSameGroupRowState(groupRow({}), groupRow({ isExpanded: false }))).toBe(false);
-  });
-
-  it('should compare the continuation flags', () => {
-    expect(isSameGroupRowState(
-      groupRow({}),
-      groupRow({ data: { isContinuation: true, isContinuationOnNextPage: false } }),
-    )).toBe(false);
-
-    expect(isSameGroupRowState(
-      groupRow({}),
-      groupRow({ data: { isContinuation: false, isContinuationOnNextPage: true } }),
-    )).toBe(false);
-  });
-
-  it('should not compare the data beyond the continuation flags', () => {
-    expect(isSameGroupRowState(
-      groupRow({ data: { key: 1, isContinuation: false, isContinuationOnNextPage: false } }),
-      groupRow({ data: { key: 2, isContinuation: false, isContinuationOnNextPage: false } }),
-    )).toBe(true);
-  });
-});
-
-describe('canDiffColumns', () => {
-  it('should allow the diff for the rows of the same type', () => {
-    expect(canDiffColumns(row({ rowType: 'data' }), row({ rowType: 'data' }))).toBe(true);
-  });
-
-  it('should forbid the diff for the rows of different types', () => {
-    expect(canDiffColumns(row({ rowType: 'data' }), row({ rowType: 'detail' }))).toBe(false);
-  });
-
-  it('should forbid the diff for group footers', () => {
-    expect(canDiffColumns(row({ rowType: 'groupFooter' }), row({ rowType: 'groupFooter' })))
-      .toBe(false);
-  });
-});
-
-describe('getGroupColumnIndices', () => {
-  const groupRow = (partial: Partial<ProcessedItem>): ProcessedItem => row({
-    rowType: 'group',
-    isExpanded: true,
-    data: { isContinuation: false, isContinuationOnNextPage: false },
-    ...partial,
-  });
-
-  it('should skip the group expand cell', () => {
-    const oldItem = groupRow({
-      cells: [{ column: { type: 'groupExpand' } }, {}, { column: { dataField: 'name' } }],
-    });
-
-    expect(getGroupColumnIndices(oldItem, groupRow({}))).toEqual([1, 2]);
-  });
-
-  it('should return undefined when the old row has no cells', () => {
-    expect(getGroupColumnIndices(groupRow({}), groupRow({}))).toBeUndefined();
-  });
-
-  it('should return undefined when the group state has changed', () => {
-    const oldItem = groupRow({ cells: [{}] });
-
-    expect(getGroupColumnIndices(oldItem, groupRow({ isExpanded: false }))).toBeUndefined();
-  });
-});
-
 describe('getRowKey', () => {
   it('should tell apart the rows of different types with the same key', () => {
     expect(getRowKey(row({ key: 1, rowType: 'data' })))
@@ -307,7 +226,7 @@ describe('updateKeptRows', () => {
   });
 });
 
-describe('getDataRowIndex', () => {
+describe('countRowsBefore', () => {
   const rows = [
     row({ rowType: 'data' }),
     row({ rowType: 'group' }),
@@ -315,14 +234,24 @@ describe('getDataRowIndex', () => {
     row({ rowType: 'data' }),
   ];
 
-  it('should count the data and group rows before the visible index', () => {
-    expect(getDataRowIndex(rows, 0)).toBe(0);
-    expect(getDataRowIndex(rows, 3)).toBe(2);
-    expect(getDataRowIndex(rows, rows.length)).toBe(3);
+  it('should count the rows of the requested type before the visible index', () => {
+    expect(countRowsBefore(rows, 0, 'data')).toBe(0);
+    expect(countRowsBefore(rows, 3, 'data')).toBe(1);
+    expect(countRowsBefore(rows, rows.length, 'data')).toBe(2);
+  });
+
+  it('should not count the rows of any other type', () => {
+    expect(countRowsBefore(rows, rows.length, 'group')).toBe(1);
+    expect(countRowsBefore(rows, rows.length, 'detail')).toBe(1);
+    expect(countRowsBefore(rows, rows.length, 'groupFooter')).toBe(0);
   });
 
   it('should count the rows that are there when the index is out of range', () => {
-    expect(getDataRowIndex(rows, 10)).toBe(3);
+    expect(countRowsBefore(rows, 10, 'data')).toBe(2);
+  });
+
+  it('should return zero for an empty row set', () => {
+    expect(countRowsBefore([], 3, 'data')).toBe(0);
   });
 });
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/row_changes.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/row_changes.ts
index c4ae25369d6e..b713669479e5 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/row_changes.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/row_changes.ts
@@ -26,30 +26,6 @@ export function isSameItem(
   return isSameRowType && (!isDetailRow || isSameEditingState);
 }
 
-// TODO remove after related checks moved to extenders (duplicated in grouping)
-export function isSameGroupRowState(item1: ProcessedItem, item2: ProcessedItem): boolean {
-  return item1.isExpanded === item2.isExpanded
-    && item1.data?.isContinuation === item2.data?.isContinuation
-    && item1.data?.isContinuationOnNextPage === item2.data?.isContinuationOnNextPage;
-}
-
-export function canDiffColumns(oldItem: ProcessedItem, newItem: ProcessedItem): boolean {
-  return oldItem.rowType === newItem.rowType && newItem.rowType !== 'groupFooter';
-}
-
-export function getGroupColumnIndices(
-  oldItem: ProcessedItem,
-  newItem: ProcessedItem,
-): number[] | undefined {
-  if (!oldItem.cells || !isSameGroupRowState(oldItem, newItem)) {
-    return undefined;
-  }
-
-  return oldItem.cells
-    .map((cell, index) => (cell.column?.type !== 'groupExpand' ? index : -1))
-    .filter((index) => index >= 0);
-}
-
 /**
  * Rows of different types may share a key, so the row type is a part of the key
  * the diff is built on.
@@ -122,14 +98,14 @@ export function updateKeptRows(
   });
 }
 
-/**
- * A store change is indexed by data rows, while an insert index coming from the
- * grid counts every visible row — group rows included.
- */
-export function getDataRowIndex(rows: ProcessedItem[], visibleRowIndex: number): number {
+export function countRowsBefore(
+  rows: ProcessedItem[],
+  visibleRowIndex: number,
+  rowType: ProcessedItem['rowType'],
+): number {
   const previousRows = rows.slice(0, visibleRowIndex);
 
-  return previousRows.filter((row) => row?.rowType === 'data' || row?.rowType === 'group').length;
+  return previousRows.filter((row) => row?.rowType === rowType).length;
 }
 
 export function getChangedRowIndices(
diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/__tests__/editing_data_controller.row_changes.test.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/__tests__/editing_data_controller.row_changes.test.ts
index 77a44b18000c..efddd940e9f5 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/__tests__/editing_data_controller.row_changes.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/__tests__/editing_data_controller.row_changes.test.ts
@@ -16,6 +16,11 @@ const dataRow = (partial: Partial<ProcessedItem> = {}): ProcessedItem => ({
   ...partial,
 });
 
+const editFormRow = (partial: Partial<ProcessedItem> = {}): ProcessedItem => dataRow({
+  rowType: 'detail',
+  ...partial,
+});
+
 describe('Editing data controller row changes', () => {
   beforeEach(beforeTest);
   afterEach(afterTest);
@@ -38,4 +43,15 @@ describe('Editing data controller row changes', () => {
       expect(change.changeTypes).toEqual(['update']);
     },
   );
+
+  it('should repaint the whole edit form row instead of diffing its columns', async () => {
+    const change = await refreshRow(
+      editFormRow({ isEditing: true, values: ['Alex', 15] }),
+      editFormRow({ isEditing: true, values: ['Bob', 15] }),
+      { gridOptions: { editing: { mode: 'form' } }, isLiveUpdate: false },
+    );
+
+    expect(change.rowIndices).toEqual([0]);
+    expect(change.columnIndices).toEqual([undefined]);
+  });
 });

From 064edf95c621c2ae3b33a7901f2f7a678a69a6ff Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <251575087+bit-byte0@users.noreply.github.com>
Date: Mon, 7 Sep 2026 06:23:11 +0000
Subject: [PATCH 06/45] CardView - flaky tests in 26.1 (#35051)

---
 .../tests/cardView/columnChooser/functional.ts                 | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/e2e/testcafe-devextreme/tests/cardView/columnChooser/functional.ts b/e2e/testcafe-devextreme/tests/cardView/columnChooser/functional.ts
index 6daade06393f..71f616668eac 100644
--- a/e2e/testcafe-devextreme/tests/cardView/columnChooser/functional.ts
+++ b/e2e/testcafe-devextreme/tests/cardView/columnChooser/functional.ts
@@ -60,6 +60,7 @@ function testsFactory(testModel: {
     const cardView = new CardView('#container');
 
     await cardView.apiShowColumnChooser();
+    await testModel.assertFirstColumnVisible(t, cardView);
 
     await testModel.hideFirstColumn(t, cardView);
     await testModel.assertFirstColumnHidden(t, cardView);
@@ -230,11 +231,13 @@ test('cards should update when column is hidden via column chooser (select mode)
   await t.expect(initialCaptions).eql(['A', 'B', 'C']);
 
   await cardView.apiShowColumnChooser();
+  await t.expect(cardView.getColumnChooser().isCheckboxChecked(0)).ok();
 
   await t.click(cardView.getColumnChooser().getCheckbox(0));
 
   const captionsAfterHide = await getCardFieldCaptions(t, cardView, 2);
   await t.expect(captionsAfterHide).eql(['B', 'C']);
+  await t.expect(cardView.getColumnChooser().isCheckboxChecked(0)).notOk();
 
   await t.click(cardView.getColumnChooser().getCheckbox(0));
 

From c4768c3251f20d81c63a4d24ebd378120a82f9c2 Mon Sep 17 00:00:00 2001
From: Alyar <Alyar666@users.noreply.github.com>
Date: Mon, 7 Sep 2026 07:24:08 +0000
Subject: [PATCH 07/45] Grids - DataController: Extract editing state knowledge
 to extenders (#35042)

Co-authored-by: Alyar <>
---
 .../grids/grid_core/data_controller/data_controller.ts | 10 +---------
 .../editing_data_controller.row_changes.test.ts        | 10 ++++++++++
 .../editing/extenders/editing_data_controller.ts       |  5 +++++
 .../grids/grid_core/editing/m_editing_utils.ts         |  7 +++++++
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index 49576bb98d28..ba98b077e839 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -964,15 +964,7 @@ export class DataController extends modules.Controller {
     const oldValue = oldRow.values[columnIndex];
     const newValue = newRow.values[columnIndex];
 
-    if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
-      return true;
-    }
-
-    const isCellModified = (
-      row: ProcessedItem,
-    ): boolean => row.modifiedValues?.[columnIndex] !== undefined;
-
-    return isCellModified(oldRow) !== isCellModified(newRow);
+    return JSON.stringify(oldValue) !== JSON.stringify(newValue);
   }
 
   /**
diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/__tests__/editing_data_controller.row_changes.test.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/__tests__/editing_data_controller.row_changes.test.ts
index efddd940e9f5..1184e8adf5fa 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/__tests__/editing_data_controller.row_changes.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/__tests__/editing_data_controller.row_changes.test.ts
@@ -54,4 +54,14 @@ describe('Editing data controller row changes', () => {
     expect(change.rowIndices).toEqual([0]);
     expect(change.columnIndices).toEqual([undefined]);
   });
+
+  it('should report a cell whose modified mark appeared without a new value', async () => {
+    const change = await refreshRow(
+      dataRow(),
+      dataRow({ modified: true, modifiedValues: [undefined, 15] }),
+    );
+
+    expect(change.rowIndices).toEqual([0]);
+    expect(change.columnIndices).toEqual([[1]]);
+  });
 });
diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/editing_data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/editing_data_controller.ts
index 999590624de4..8b8915a4171a 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/editing_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/editing_data_controller.ts
@@ -15,6 +15,7 @@ import gridCoreUtils from '@ts/grids/grid_core/m_utils';
 
 import { EDITING_EDITROWKEY_OPTION_NAME } from '../const';
 import type { EditingController } from '../m_editing';
+import { isCellModified } from '../m_editing_utils';
 
 export interface EditingDataControllerExtension {
   _editingController: EditingController;
@@ -147,6 +148,10 @@ export const editingDataControllerExtender = (
       return true;
     }
 
+    if (isCellModified(oldRow, columnIndex) !== isCellModified(newRow, columnIndex)) {
+      return true;
+    }
+
     return super._isCellChanged(oldRow, newRow, visibleRowIndex, columnIndex, isLiveUpdate);
   }
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing_utils.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing_utils.ts
index ddffd2ed0859..67632b7d5599 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing_utils.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing_utils.ts
@@ -1,6 +1,8 @@
 import Guid from '@js/core/guid';
 import { isObject } from '@js/core/utils/type';
 
+import type { ProcessedItem } from '../data_controller/types';
+
 const NEW_ROW_TEMP_KEY_PREFIX = '_DX_KEY_';
 const GUID_LENGTH = 36;
 
@@ -80,3 +82,8 @@ export const forEachFormItems = (items, callBack) => {
     }
   });
 };
+
+export const isCellModified = (
+  row: ProcessedItem,
+  columnIndex: number,
+): boolean => row.modifiedValues?.[columnIndex] !== undefined;

From 0712ad305d6a02a6fd92a9a1fde69dd3927a7185 Mon Sep 17 00:00:00 2001
From: Eldar Iusupzhanov <84278206+Tucchhaa@users.noreply.github.com>
Date: Mon, 7 Sep 2026 08:16:41 +0000
Subject: [PATCH 08/45] TreeList - DataSourceAdapter - Extract tree building
 utils (#35053)

Co-authored-by: Eldar Iusupzhanov <eldar.iusupzhanov@users.noreply.github.com>
---
 .../m_data_source_adapter.ts                  |   2 +-
 .../m_data_source_adapter.ts                  | 191 ++----
 .../tree_list/data_source_adapter/types.ts    |  22 +
 .../utils/__tests__/nodes.test.ts             | 637 ++++++++++++++++++
 .../data_source_adapter/utils/nodes.ts        | 194 ++++++
 5 files changed, 905 insertions(+), 141 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/types.ts
 create mode 100644 packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/utils/__tests__/nodes.test.ts
 create mode 100644 packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/utils/nodes.ts

diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/m_data_source_adapter.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/m_data_source_adapter.ts
index 4b135fbd8680..2a4db0edfc7c 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/m_data_source_adapter.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/m_data_source_adapter.ts
@@ -673,7 +673,7 @@ export default class DataSourceAdapter extends modules.Controller {
   /**
    * @extended: TreeLists's data_source_adapter
    */
-  protected customizeLoadResultHandlerCore(options) {
+  protected customizeLoadResultHandlerCore(options: LoadOperation): void {
     if (options.remoteOperations && !options.remoteOperations.paging && Array.isArray(options.data)) {
       if (options.skip !== undefined) {
         options.data = options.data.slice(options.skip);
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/m_data_source_adapter.ts b/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/m_data_source_adapter.ts
index b76ec5607f45..ae7cc27ff427 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/m_data_source_adapter.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/m_data_source_adapter.ts
@@ -15,9 +15,15 @@ import type { BeforePushEvent } from '@ts/data/types';
 import type { CustomLoadResult } from '@ts/grids/grid_core/data_source_adapter/custom_loader';
 import DataSourceAdapter from '@ts/grids/grid_core/data_source_adapter/m_data_source_adapter';
 import { createDataSourceAdapterProvider } from '@ts/grids/grid_core/data_source_adapter/provider';
+import type { RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
 import gridCoreUtils from '@ts/grids/grid_core/m_utils';
 
 import treeListCore from '../m_core';
+import type { LoadOperation, NodeByKey, TreeNode } from './types';
+import type { NodesContext } from './utils/nodes';
+import {
+  convertItemToNode, createNodesByItems, fillNodes, getVisibleNodes,
+} from './utils/nodes';
 
 const { queryByOptions } = storeHelper;
 
@@ -67,11 +73,11 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
 
   private _isChildrenLoaded: any;
 
-  private _nodeByKey: any;
+  private _nodeByKey!: NodeByKey;
 
   private _isReload: any;
 
-  private _rootNode: any;
+  private _rootNode?: TreeNode;
 
   public _isNodesInitializing = false;
 
@@ -139,85 +145,15 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
     });
   }
 
-  private _calculateHasItems(node, options) {
-    const that = this;
-    const { parentIds } = options.storeLoadOptions;
-    let hasItems;
-    const isFullBranch = isFullBranchFilterMode(that);
-
-    if (that._hasItemsGetter && (parentIds || !options.storeLoadOptions.filter || isFullBranch)) {
-      hasItems = that._hasItemsGetter(node.data);
-    }
-
-    if (hasItems === undefined) {
-      if (!that._isChildrenLoaded[node.key] && options.remoteOperations.filtering && (parentIds || isFullBranch)) {
-        hasItems = true;
-      } else if (options.loadOptions.filter && !options.remoteOperations.filtering && isFullBranch) {
-        hasItems = node.children.length;
-      } else {
-        hasItems = node.hasChildren;
-      }
-    }
-    return !!hasItems;
-  }
-
-  private _fillVisibleItemsByNodes(nodes, options, result) {
-    for (let i = 0; i < nodes.length; i++) {
-      if (nodes[i].visible) {
-        result.push(nodes[i]);
-      }
-
-      if ((this.isRowExpanded(nodes[i].key, options) || !nodes[i].visible) && nodes[i].hasChildren && nodes[i].children.length) {
-        this._fillVisibleItemsByNodes(nodes[i].children, options, result);
-      }
-    }
-  }
-
-  private _convertItemToNode(item, rootValue, nodeByKey) {
-    const key = this._keyGetter(item);
-    let parentId = this._parentIdGetter(item);
-
-    parentId = isDefined(parentId) ? parentId : rootValue;
-    const parentNode = nodeByKey[parentId] = nodeByKey[parentId] || { key: parentId, children: [] };
-
-    const node = nodeByKey[key] = nodeByKey[key] || { key, children: [] };
-    node.data = item;
-    node.parent = parentNode;
-
-    return node;
-  }
-
-  private _createNodesByItems(items, visibleItems) {
-    const that = this;
-    const rootValue: any = that.option('rootValue');
-    const visibleByKey = {};
-    const nodeByKey = that._nodeByKey = {};
-    let i;
-
-    if (visibleItems) {
-      for (i = 0; i < visibleItems.length; i++) {
-        visibleByKey[this._keyGetter(visibleItems[i])] = true;
-      }
-    }
-
-    for (i = 0; i < items.length; i++) {
-      const node = that._convertItemToNode(items[i], rootValue, nodeByKey);
-
-      if (node.key === undefined) {
-        return;
-      }
-
-      node.visible = !visibleItems || !!visibleByKey[node.key];
-      if (node.parent) {
-        node.parent.children.push(node);
-      }
-    }
-
-    const rootNode = nodeByKey[rootValue] || { key: rootValue, children: [] };
-
-    rootNode.level = -1;
-
-    return rootNode;
+  private _getNodesContext(): NodesContext {
+    return {
+      rootValue: this.option('rootValue'),
+      isFullBranchFilterMode: isFullBranchFilterMode(this),
+      keyGetter: this._keyGetter,
+      parentIdGetter: this._parentIdGetter,
+      hasItemsGetter: this._hasItemsGetter,
+      isChildrenLoaded: this._isChildrenLoaded,
+    };
   }
 
   private _convertDataToPlainStructure(data, parentId?, result?) {
@@ -438,11 +374,13 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
       return d.resolve(data);
     }
 
-    let cachedNodes = keys.map((id) => this.getNodeByKey(id)).filter((node) => node && node.data);
+    let cachedNodes = keys
+      .map((id) => this.getNodeByKey(id))
+      .filter((node) => node && node.data) as TreeNode[];
 
     if (cachedNodes.length === keys.length) {
       if (needChildren) {
-        cachedNodes = cachedNodes.reduce((result, node) => result.concat(node.children), []);
+        cachedNodes = cachedNodes.reduce((result: TreeNode[], node) => result.concat(node.children), []);
       }
 
       if (cachedNodes.length) {
@@ -571,20 +509,20 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
     const parentNode = that.getNodeByKey(parentId);
 
     if (parentNode) {
-      const rootValue = that.option('rootValue');
-      const node = that._convertItemToNode(change.data, rootValue, that._nodeByKey);
+      const node = convertItemToNode(change.data, that._nodeByKey, that._getNodesContext());
 
       node.hasChildren = false;
-      node.level = parentNode.level + 1;
+      node.level = parentNode.level! + 1;
       node.visible = true;
 
       parentNode.children.push(node);
 
-      that._isChildrenLoaded[node.key] = true;
+      that._isChildrenLoaded[node.key as string] = true;
 
       that._setHasItems(parentNode, true);
 
       if ((!parentNode.parent || that.isRowExpanded(parentNode.key)) && change.index !== undefined) {
+        // @ts-expect-error Badly typed items()
         let index = that.items().indexOf(parentNode) + 1;
 
         index += change.index >= 0 ? Math.min(change.index, parentNode.children.length) : parentNode.children.length;
@@ -640,61 +578,29 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
     }
   }
 
-  private _fillNodes(nodes, options, expandedRowKeys, level?) {
-    const isFullBranch = isFullBranchFilterMode(this);
-
-    level = level || 0;
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      let needToExpand = false;
-
-      // node.hasChildren = false;
-      this._fillNodes(nodes[i].children, options, expandedRowKeys, level + 1);
-
-      node.level = level;
-      node.hasChildren = this._calculateHasItems(node, options);
-
-      if (node.visible && node.hasChildren) {
-        if (isFullBranch) {
-          if (node.children.filter((node) => node.visible).length) {
-            needToExpand = true;
-          } else if (node.children.length) {
-            treeListCore.foreachNodes(node.children, (node) => {
-              node.visible = true;
-            });
-          }
-        } else {
-          needToExpand = true;
-        }
-        if (options.expandVisibleNodes && needToExpand) {
-          expandedRowKeys.push(node.key);
-        }
-      }
-
-      if (node.visible || node.hasChildren) {
-        node.parent.hasChildren = true;
-      }
-    }
-  }
-
-  private _processTreeStructure(options, visibleItems?) {
-    let { data } = options;
+  private _processTreeStructure(options: LoadOperation, visibleItems?: RawItemData[]): void {
+    let data = options.data as RawItemData[];
     const { parentIds } = options.storeLoadOptions;
-    const expandedRowKeys = [];
 
     if (parentIds && parentIds.length || this._isReload) {
       if (options.fullData) {
         data = options.fullData;
-        visibleItems = visibleItems || options.data;
+        visibleItems ??= options.data as RawItemData[];
       }
 
-      this._rootNode = this._createNodesByItems(data, visibleItems);
+      const nodesContext = this._getNodesContext();
+      const { rootNode, nodeByKey } = createNodesByItems(data, visibleItems, nodesContext);
+
+      this._nodeByKey = nodeByKey;
+      this._rootNode = rootNode;
+
       if (!this._rootNode) {
-        // @ts-expect-error
-        options.data = new Deferred().reject(errors.Error('E1046', this.getKeyExpr()));
+        // @ts-expect-error badly typed Deferred
+        options.data = Deferred().reject(errors.Error('E1046', this.getKeyExpr()));
         return;
       }
-      this._fillNodes(this._rootNode.children, options, expandedRowKeys);
+
+      const expandedRowKeys = fillNodes(this._rootNode.children, options, nodesContext);
 
       this._isNodesInitializing = true;
       if (options.collapseVisibleNodes || expandedRowKeys.length) {
@@ -705,18 +611,20 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
       this._isNodesInitializing = false;
     }
 
-    const resultData = [];
-
-    this._fillVisibleItemsByNodes(this._rootNode.children, options, resultData);
+    const resultData = getVisibleNodes(
+      this._rootNode!.children,
+      (key) => this.isRowExpanded(key, options),
+    );
 
+    // @ts-expect-error From here on the rows are nodes, not the loaded items the base type describes.
     options.data = resultData;
     this._totalItemsCount = resultData.length;
   }
 
-  protected customizeLoadResultHandlerCore(options) {
+  protected customizeLoadResultHandlerCore(options: LoadOperation): void {
     const that = this;
     const { data } = options;
-    const filter = options.storeLoadOptions.filter || options.loadOptions.filter;
+    const filter = options.storeLoadOptions.filter || options.loadOptions?.filter;
     const filterMode = that.option('filterMode');
     let visibleItems;
     const { parentIds } = options.storeLoadOptions;
@@ -730,6 +638,7 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
         if (filterMode === 'matchOnly') {
           visibleItems = data;
         }
+
         return that._loadParents(data, options).done((data) => {
           that._loadChildrenIfNeed(data, options).done((data) => {
             options.data = data;
@@ -847,10 +756,12 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
     return this._isNodesInitializing ? new Deferred().resolve() : this.load();
   }
 
-  public getNodeByKey(key) {
+  public getNodeByKey(key): TreeNode | undefined {
     if (this._nodeByKey) {
       return this._nodeByKey[key];
     }
+
+    return undefined;
   }
 
   private getNodeLeafKeys() {
@@ -918,7 +829,7 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
   public forEachNode(nodeCallback?: (node: any) => void) {
-    let nodes = [];
+    let nodes: TreeNode[] = [];
     let callback;
 
     if (arguments.length === 1) {
@@ -926,7 +837,7 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
       callback = arguments[0];
 
       const rootNode = this.getRootNode();
-      nodes = rootNode && rootNode.children || [];
+      nodes = rootNode?.children ?? [];
     } else if (arguments.length === 2) {
       // eslint-disable-next-line prefer-destructuring
       callback = arguments[1];
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/types.ts b/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/types.ts
new file mode 100644
index 000000000000..443ab021fa11
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/types.ts
@@ -0,0 +1,22 @@
+import type { LoadOperation as BaseLoadOperation, RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
+
+export interface LoadOperation extends BaseLoadOperation {
+  storeLoadOptions: BaseLoadOperation['storeLoadOptions'] & {
+    parentIds?: unknown[];
+  };
+  fullData?: RawItemData[];
+  collapseVisibleNodes?: boolean;
+  expandVisibleNodes?: boolean;
+}
+
+export interface TreeNode {
+  key: unknown;
+  children: TreeNode[];
+  data?: unknown;
+  parent?: TreeNode;
+  level?: number;
+  visible?: boolean;
+  hasChildren?: boolean;
+}
+
+export type NodeByKey = Record<string, TreeNode>;
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/utils/__tests__/nodes.test.ts b/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/utils/__tests__/nodes.test.ts
new file mode 100644
index 000000000000..ea1141373c60
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/utils/__tests__/nodes.test.ts
@@ -0,0 +1,637 @@
+import { describe, expect, it } from '@jest/globals';
+
+import type { LoadOperation, NodeByKey, TreeNode } from '../../types';
+import type { NodesContext } from '../nodes';
+import {
+  convertItemToNode, createNodesByItems, fillNodes, getVisibleNodes,
+} from '../nodes';
+
+interface Item {
+  [field: string]: unknown;
+  id?: unknown;
+  parentId?: unknown;
+  hasItems?: unknown;
+}
+
+const ROOT = 0;
+
+function createContext(overrides?: Partial<NodesContext>): NodesContext {
+  return {
+    rootValue: ROOT,
+    isFullBranchFilterMode: false,
+    keyGetter: (data): unknown => (data as Item).id,
+    parentIdGetter: (data): unknown => (data as Item).parentId,
+    hasItemsGetter: undefined,
+    isChildrenLoaded: {},
+    ...overrides,
+  };
+}
+
+function createLoadOptions(options: {
+  parentIds?: unknown[];
+  storeFilter?: unknown;
+  loadFilter?: unknown;
+  remoteFiltering?: boolean;
+  expandVisibleNodes?: boolean;
+} = {}): LoadOperation {
+  return {
+    storeLoadOptions: {
+      parentIds: options.parentIds,
+      filter: options.storeFilter,
+    },
+    loadOptions: {
+      filter: options.loadFilter,
+    },
+    remoteOperations: {
+      filtering: options.remoteFiltering,
+    },
+    expandVisibleNodes: options.expandVisibleNodes,
+  };
+}
+
+function buildTree(items: Item[], visibleKeys?: unknown[]): { root: TreeNode; nodes: NodeByKey } {
+  const visibleItems = visibleKeys && items.filter((item) => visibleKeys.includes(item.id));
+  const { rootNode, nodeByKey } = createNodesByItems(items, visibleItems, createContext());
+
+  return { root: rootNode as TreeNode, nodes: nodeByKey };
+}
+
+describe('convertItemToNode', () => {
+  it('wires the node to a placeholder parent and registers both by key', () => {
+    const nodeByKey = {};
+    const item = { id: 2, parentId: 1 };
+
+    const node = convertItemToNode(item, nodeByKey, createContext());
+
+    expect(node).toMatchObject({ key: 2, data: item, children: [] });
+    expect(node.parent).toEqual({ key: 1, children: [] });
+    expect(nodeByKey).toEqual({ 1: node.parent, 2: node });
+  });
+
+  const rootFallbackCases: [string, unknown][] = [
+    ['undefined', undefined],
+    ['null', null],
+  ];
+
+  it.each(rootFallbackCases)('attaches the item to rootValue when its parent id is %s', (_, parentId) => {
+    const node = convertItemToNode({ id: 1, parentId }, {}, createContext());
+
+    expect(node.parent?.key).toBe(ROOT);
+  });
+
+  it('reuses an already registered node, keeping the children it accumulated', () => {
+    const nodeByKey = {};
+    const context = createContext();
+
+    // The child is converted first, so node `1` only exists as a placeholder parent.
+    const child = convertItemToNode({ id: 2, parentId: 1 }, nodeByKey, context);
+    child.parent?.children.push(child);
+
+    const parentItem = { id: 1, parentId: ROOT };
+    const parent = convertItemToNode(parentItem, nodeByKey, context);
+
+    expect(parent).toBe(child.parent);
+    expect(parent.data).toBe(parentItem);
+    expect(parent.children).toEqual([child]);
+  });
+
+  it('reuses an already registered parent', () => {
+    const nodeByKey = {};
+    const context = createContext();
+
+    const first = convertItemToNode({ id: 2, parentId: 1 }, nodeByKey, context);
+    const second = convertItemToNode({ id: 3, parentId: 1 }, nodeByKey, context);
+
+    expect(second.parent).toBe(first.parent);
+  });
+});
+
+describe('createNodesByItems', () => {
+  it('builds a tree and indexes every node by key', () => {
+    const items = [
+      { id: 1, parentId: ROOT },
+      { id: 2, parentId: 1 },
+      { id: 3, parentId: 1 },
+    ];
+
+    const { rootNode, nodeByKey } = createNodesByItems(items, undefined, createContext());
+
+    expect(rootNode?.key).toBe(ROOT);
+    expect(rootNode?.level).toBe(-1);
+    expect(rootNode?.children.map((node) => node.key)).toEqual([1]);
+    expect(rootNode?.children[0].children.map((node) => node.key)).toEqual([2, 3]);
+    expect(Object.keys(nodeByKey)).toEqual(['0', '1', '2', '3']);
+  });
+
+  it('does not depend on item order — a child may precede its parent', () => {
+    const items = [
+      { id: 2, parentId: 1 },
+      { id: 1, parentId: ROOT },
+    ];
+
+    const { rootNode } = createNodesByItems(items, undefined, createContext());
+
+    expect(rootNode?.children.map((node) => node.key)).toEqual([1]);
+    expect(rootNode?.children[0].children.map((node) => node.key)).toEqual([2]);
+    expect(rootNode?.children[0].data).toBe(items[1]);
+  });
+
+  it('leaves an orphaned branch out of the root, but keeps it indexed', () => {
+    const items = [{ id: 2, parentId: 'missing' }];
+
+    const { rootNode, nodeByKey } = createNodesByItems(items, undefined, createContext());
+
+    expect(rootNode?.children).toEqual([]);
+    expect(nodeByKey.missing.children.map((node) => node.key)).toEqual([2]);
+  });
+
+  const rootValueCases: [string, unknown][] = [
+    ['null', null],
+    ['a string', 'root'],
+  ];
+
+  it.each(rootValueCases)('supports %s as rootValue', (_, rootValue) => {
+    const items = [{ id: 1, parentId: rootValue }];
+
+    const { rootNode } = createNodesByItems(items, undefined, createContext({ rootValue }));
+
+    expect(rootNode?.key).toBe(rootValue);
+    expect(rootNode?.children.map((node) => node.key)).toEqual([1]);
+  });
+
+  it('returns a synthetic root when there are no items', () => {
+    const { rootNode, nodeByKey } = createNodesByItems([], undefined, createContext());
+
+    expect(rootNode).toEqual({ key: ROOT, children: [], level: -1 });
+    expect(nodeByKey).toEqual({});
+  });
+
+  it('marks every node visible when visibleItems is not passed', () => {
+    const items = [{ id: 1, parentId: ROOT }, { id: 2, parentId: 1 }];
+
+    const { nodeByKey } = createNodesByItems(items, undefined, createContext());
+
+    expect(nodeByKey[1].visible).toBe(true);
+    expect(nodeByKey[2].visible).toBe(true);
+  });
+
+  it('marks only the nodes listed in visibleItems visible', () => {
+    const items = [{ id: 1, parentId: ROOT }, { id: 2, parentId: 1 }];
+
+    const { nodeByKey } = createNodesByItems(items, [items[1]], createContext());
+
+    expect(nodeByKey[1].visible).toBe(false);
+    expect(nodeByKey[2].visible).toBe(true);
+  });
+
+  it('hides every node when visibleItems is an empty array', () => {
+    const items = [{ id: 1, parentId: ROOT }];
+
+    const { nodeByKey } = createNodesByItems(items, [], createContext());
+
+    expect(nodeByKey[1].visible).toBe(false);
+  });
+
+  it('bails out without a root node when an item has no key (E1046)', () => {
+    const items = [
+      { id: 1, parentId: ROOT },
+      { id: undefined, parentId: 1 },
+      { id: 3, parentId: 1 },
+    ];
+
+    const { rootNode, nodeByKey } = createNodesByItems(items, undefined, createContext());
+
+    expect(rootNode).toBeUndefined();
+    // The adapter keeps this partially filled map, so the nodes seen so far stay indexed.
+    expect(nodeByKey[1]).toMatchObject({ key: 1 });
+    expect(nodeByKey[3]).toBeUndefined();
+  });
+});
+
+describe('fillNodes', () => {
+  it('assigns the level of every node depth first', () => {
+    const { root, nodes } = buildTree([
+      { id: 1, parentId: ROOT },
+      { id: 2, parentId: 1 },
+      { id: 3, parentId: 2 },
+      { id: 4, parentId: ROOT },
+    ]);
+
+    fillNodes(root.children, createLoadOptions(), createContext());
+
+    expect([1, 2, 3, 4].map((key) => nodes[key].level)).toEqual([0, 1, 2, 0]);
+  });
+
+  it('returns no keys for an empty node list', () => {
+    expect(fillNodes([], createLoadOptions(), createContext())).toEqual([]);
+  });
+
+  describe('hasChildren propagation', () => {
+    it('propagates up from the visible leaves', () => {
+      const { root, nodes } = buildTree([
+        { id: 1, parentId: ROOT },
+        { id: 2, parentId: 1 },
+        { id: 3, parentId: 2 },
+      ], [3]);
+
+      fillNodes(root.children, createLoadOptions(), createContext());
+
+      expect([1, 2, 3].map((key) => nodes[key].hasChildren)).toEqual([true, true, false]);
+      expect(root.hasChildren).toBe(true);
+    });
+
+    it('stays false on a branch of hidden leaves', () => {
+      const { root, nodes } = buildTree([
+        { id: 1, parentId: ROOT },
+        { id: 2, parentId: 1 },
+      ], []);
+
+      fillNodes(root.children, createLoadOptions(), createContext());
+
+      expect(nodes[1].hasChildren).toBe(false);
+      expect(root.hasChildren).toBeUndefined();
+    });
+
+    it('is overridden by hasItemsExpr on the node itself', () => {
+      const context = createContext({
+        hasItemsGetter: (data): unknown => (data as Item).hasItems,
+      });
+      const { root, nodes } = buildTree([
+        { id: 1, parentId: ROOT, hasItems: false },
+        { id: 2, parentId: 1 },
+      ], [2]);
+
+      fillNodes(root.children, createLoadOptions(), context);
+
+      expect(nodes[1].hasChildren).toBe(false);
+    });
+  });
+
+  describe('hasChildren of one node', () => {
+    interface Fixture {
+      items: Item[];
+      visibleKeys: unknown[];
+    }
+
+    const leaf: Fixture = {
+      items: [{ id: 1, parentId: ROOT }],
+      visibleKeys: [],
+    };
+
+    const withVisibleChild: Fixture = {
+      items: [{ id: 1, parentId: ROOT }, { id: 2, parentId: 1 }],
+      visibleKeys: [2],
+    };
+
+    const withHiddenChild: Fixture = {
+      items: [{ id: 1, parentId: ROOT }, { id: 2, parentId: 1 }],
+      visibleKeys: [],
+    };
+
+    function calculateHasChildren(
+      fixture: Fixture,
+      options: LoadOperation,
+      context: NodesContext,
+    ): boolean | undefined {
+      const { root, nodes } = buildTree(fixture.items, fixture.visibleKeys);
+
+      fillNodes(root.children, options, context);
+
+      return nodes[1].hasChildren;
+    }
+
+    describe('hasItemsExpr', () => {
+      const getterCases: [string, unknown, boolean][] = [
+        ['true', true, true],
+        ['false', false, false],
+      ];
+
+      it.each(getterCases)('follows the getter when it returns %s', (_, hasItems, expected) => {
+        const context = createContext({ hasItemsGetter: () => hasItems });
+
+        // Shaped so the fallback would answer the opposite: the getter has to win.
+        const fixture = expected ? leaf : withVisibleChild;
+
+        expect(calculateHasChildren(fixture, createLoadOptions(), context)).toBe(expected);
+      });
+
+      it('falls back to the children when the getter returns undefined', () => {
+        const context = createContext({ hasItemsGetter: () => undefined });
+
+        expect(calculateHasChildren(withVisibleChild, createLoadOptions(), context)).toBe(true);
+      });
+
+      it('is ignored while a store filter is applied', () => {
+        const context = createContext({ hasItemsGetter: () => true });
+        const options = createLoadOptions({ storeFilter: ['id', '=', 1] });
+
+        expect(calculateHasChildren(leaf, options, context)).toBe(false);
+      });
+
+      it('is used under a store filter when parentIds are requested', () => {
+        const context = createContext({ hasItemsGetter: () => true });
+        const options = createLoadOptions({ storeFilter: ['id', '=', 1], parentIds: [ROOT] });
+
+        expect(calculateHasChildren(leaf, options, context)).toBe(true);
+      });
+
+      // Pins current behaviour: an empty parentIds array is truthy here, while
+      // _processTreeStructure treats it as "no parent ids requested".
+      it('is used under a store filter when parentIds is an empty array', () => {
+        const context = createContext({ hasItemsGetter: () => true });
+        const options = createLoadOptions({ storeFilter: ['id', '=', 1], parentIds: [] });
+
+        expect(calculateHasChildren(leaf, options, context)).toBe(true);
+      });
+
+      it('is used under a store filter in fullBranch mode', () => {
+        const context = createContext({
+          hasItemsGetter: () => true,
+          isFullBranchFilterMode: true,
+        });
+        const options = createLoadOptions({ storeFilter: ['id', '=', 1] });
+
+        expect(calculateHasChildren(leaf, options, context)).toBe(true);
+      });
+    });
+
+    describe('children not loaded yet', () => {
+      it('assumes items exist under remote filtering when parentIds are requested', () => {
+        const options = createLoadOptions({ remoteFiltering: true, parentIds: [ROOT] });
+
+        expect(calculateHasChildren(leaf, options, createContext())).toBe(true);
+      });
+
+      it('assumes items exist under remote filtering in fullBranch mode', () => {
+        const context = createContext({ isFullBranchFilterMode: true });
+        const options = createLoadOptions({ remoteFiltering: true });
+
+        expect(calculateHasChildren(leaf, options, context)).toBe(true);
+      });
+
+      it('assumes nothing once the children are loaded', () => {
+        const context = createContext({ isChildrenLoaded: { 1: true } });
+        const options = createLoadOptions({ remoteFiltering: true, parentIds: [ROOT] });
+
+        expect(calculateHasChildren(leaf, options, context)).toBe(false);
+      });
+
+      it('assumes nothing without remote filtering', () => {
+        const options = createLoadOptions({ parentIds: [ROOT] });
+
+        expect(calculateHasChildren(leaf, options, createContext())).toBe(false);
+      });
+    });
+
+    describe('local filtering in fullBranch mode', () => {
+      const options = createLoadOptions({ loadFilter: ['id', '=', 1] });
+      const context = createContext({ isFullBranchFilterMode: true });
+
+      it('reports items for any child that survived the filter, visible or not', () => {
+        expect(calculateHasChildren(withHiddenChild, options, context)).toBe(true);
+      });
+
+      it('reports no items when every child was filtered out', () => {
+        expect(calculateHasChildren(leaf, options, context)).toBe(false);
+      });
+    });
+
+    describe('fallback', () => {
+      it('reports items once a descendant propagated them', () => {
+        expect(calculateHasChildren(withVisibleChild, createLoadOptions(), createContext()))
+          .toBe(true);
+      });
+
+      it('reports none for a node nothing propagated into', () => {
+        expect(calculateHasChildren(leaf, createLoadOptions(), createContext())).toBe(false);
+      });
+    });
+  });
+
+  describe('expandedRowKeys', () => {
+    it('collects the keys to expand deepest first', () => {
+      const { root } = buildTree([
+        { id: 1, parentId: ROOT },
+        { id: 2, parentId: 1 },
+        { id: 3, parentId: 2 },
+      ]);
+      const expandedRowKeys = fillNodes(
+        root.children,
+        createLoadOptions({ expandVisibleNodes: true }),
+        createContext(),
+      );
+
+      expect(expandedRowKeys).toEqual([2, 1]);
+    });
+
+    it('collects nothing when expandVisibleNodes is not set', () => {
+      const { root, nodes } = buildTree([
+        { id: 1, parentId: ROOT },
+        { id: 2, parentId: 1 },
+      ]);
+      const expandedRowKeys = fillNodes(root.children, createLoadOptions(), createContext());
+
+      expect(expandedRowKeys).toEqual([]);
+      expect(nodes[1].hasChildren).toBe(true);
+    });
+
+    it('skips a node that is hidden itself', () => {
+      const { root, nodes } = buildTree([
+        { id: 1, parentId: ROOT },
+        { id: 2, parentId: 1 },
+      ], [2]);
+      const expandedRowKeys = fillNodes(
+        root.children,
+        createLoadOptions({ expandVisibleNodes: true }),
+        createContext(),
+      );
+
+      expect(nodes[1].hasChildren).toBe(true);
+      expect(expandedRowKeys).toEqual([]);
+    });
+
+    it('skips a node without children', () => {
+      const { root } = buildTree([{ id: 1, parentId: ROOT }]);
+      const expandedRowKeys = fillNodes(
+        root.children,
+        createLoadOptions({ expandVisibleNodes: true }),
+        createContext(),
+      );
+
+      expect(expandedRowKeys).toEqual([]);
+    });
+  });
+
+  describe('fullBranch mode', () => {
+    const context = createContext({
+      isFullBranchFilterMode: true,
+      hasItemsGetter: (data): unknown => (data as Item).hasItems,
+    });
+    const options = createLoadOptions({ expandVisibleNodes: true });
+
+    it('expands a node that kept at least one visible child', () => {
+      const { root, nodes } = buildTree([
+        { id: 1, parentId: ROOT },
+        { id: 2, parentId: 1 },
+        { id: 3, parentId: 1 },
+      ], [1, 2]);
+      const expandedRowKeys = fillNodes(root.children, options, context);
+
+      expect(expandedRowKeys).toEqual([1]);
+      expect(nodes[3].visible).toBe(false);
+    });
+
+    it('reveals the branch instead of expanding it when every child was filtered out', () => {
+      const { root, nodes } = buildTree([
+        { id: 1, parentId: ROOT, hasItems: true },
+        { id: 2, parentId: 1 },
+      ], [1]);
+      const expandedRowKeys = fillNodes(root.children, options, context);
+
+      expect(expandedRowKeys).toEqual([]);
+      expect(nodes[2].visible).toBe(true);
+    });
+
+    it('stops revealing a branch at a node that reports no items of its own', () => {
+      const { root, nodes } = buildTree([
+        { id: 1, parentId: ROOT, hasItems: true },
+        { id: 2, parentId: 1 },
+        { id: 3, parentId: 2 },
+      ], [1]);
+
+      fillNodes(root.children, options, context);
+
+      // foreachNodes only descends into nodes whose hasChildren is already truthy,
+      // and node 2 reports none once its own children were filtered out.
+      expect(nodes[2].visible).toBe(true);
+      expect(nodes[3].visible).toBe(false);
+    });
+
+    it('keeps revealing a branch through a node that reports items', () => {
+      const { root, nodes } = buildTree([
+        { id: 1, parentId: ROOT, hasItems: true },
+        { id: 2, parentId: 1, hasItems: true },
+        { id: 3, parentId: 2 },
+      ], [1]);
+
+      fillNodes(root.children, options, context);
+
+      expect(nodes[3].visible).toBe(true);
+    });
+
+    it('handles a node that reports items but has no loaded children', () => {
+      const { root, nodes } = buildTree([{ id: 1, parentId: ROOT, hasItems: true }], [1]);
+      const expandedRowKeys = fillNodes(root.children, options, context);
+
+      expect(expandedRowKeys).toEqual([]);
+      expect(nodes[1].hasChildren).toBe(true);
+    });
+
+    it('expands a visible node with children when the mode is off', () => {
+      const plainContext = createContext({
+        hasItemsGetter: (data): unknown => (data as Item).hasItems,
+      });
+      const { root, nodes } = buildTree([
+        { id: 1, parentId: ROOT, hasItems: true },
+        { id: 2, parentId: 1 },
+      ], [1]);
+      const expandedRowKeys = fillNodes(root.children, options, plainContext);
+
+      expect(expandedRowKeys).toEqual([1]);
+      expect(nodes[2].visible).toBe(false);
+    });
+  });
+});
+
+describe('getVisibleNodes', () => {
+  const noneExpanded = (): boolean => false;
+  const allExpanded = (): boolean => true;
+
+  // Mirrors the adapter: the tree is filled first, then flattened into rows.
+  function getVisibleKeys(
+    items: Item[],
+    visibleKeys: unknown[] | undefined,
+    isRowExpanded: (key: unknown) => boolean,
+    context = createContext(),
+  ): unknown[] {
+    const { root } = buildTree(items, visibleKeys);
+
+    fillNodes(root.children, createLoadOptions(), context);
+
+    return getVisibleNodes(root.children, isRowExpanded).map((node) => node.key);
+  }
+
+  const parentAndChild: Item[] = [
+    { id: 1, parentId: ROOT },
+    { id: 2, parentId: 1 },
+  ];
+
+  it('returns the node objects themselves', () => {
+    const { root, nodes } = buildTree([{ id: 1, parentId: ROOT }]);
+
+    fillNodes(root.children, createLoadOptions(), createContext());
+
+    expect(getVisibleNodes(root.children, noneExpanded)[0]).toBe(nodes[1]);
+  });
+
+  it('returns nothing for an empty node list', () => {
+    expect(getVisibleNodes([], noneExpanded)).toEqual([]);
+  });
+
+  it('stops at a collapsed node', () => {
+    expect(getVisibleKeys(parentAndChild, undefined, noneExpanded)).toEqual([1]);
+  });
+
+  it('includes the children of an expanded node', () => {
+    expect(getVisibleKeys(parentAndChild, undefined, allExpanded)).toEqual([1, 2]);
+  });
+
+  it('returns the nodes in tree order', () => {
+    const items = [
+      { id: 1, parentId: ROOT },
+      { id: 2, parentId: 1 },
+      { id: 3, parentId: 2 },
+      { id: 4, parentId: ROOT },
+    ];
+
+    expect(getVisibleKeys(items, undefined, allExpanded)).toEqual([1, 2, 3, 4]);
+  });
+
+  // How matchOnly/fullBranch surface a match whose ancestors were filtered out.
+  it('descends through a hidden node without listing it', () => {
+    expect(getVisibleKeys(parentAndChild, [2], noneExpanded)).toEqual([2]);
+  });
+
+  it('does not descend into a node that reports no children', () => {
+    const context = createContext({
+      hasItemsGetter: (data): unknown => (data as Item).hasItems,
+    });
+    const items = [
+      { id: 1, parentId: ROOT, hasItems: false },
+      { id: 2, parentId: 1 },
+    ];
+
+    expect(getVisibleKeys(items, undefined, allExpanded, context)).toEqual([1]);
+  });
+
+  it('handles a node that reports children it has not loaded', () => {
+    const context = createContext({
+      hasItemsGetter: (data): unknown => (data as Item).hasItems,
+    });
+    const items = [{ id: 1, parentId: ROOT, hasItems: true }];
+
+    expect(getVisibleKeys(items, undefined, allExpanded, context)).toEqual([1]);
+  });
+
+  it('asks about expansion using each node key', () => {
+    const asked: unknown[] = [];
+
+    getVisibleKeys(parentAndChild, undefined, (key) => {
+      asked.push(key);
+
+      return true;
+    });
+
+    expect(asked).toEqual([1, 2]);
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/utils/nodes.ts b/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/utils/nodes.ts
new file mode 100644
index 000000000000..ffbb7bd84f30
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/utils/nodes.ts
@@ -0,0 +1,194 @@
+import { isDefined } from '@js/core/utils/type';
+import type { RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
+
+import treeListCore from '../../m_core';
+import type { LoadOperation, NodeByKey, TreeNode } from '../types';
+
+export interface NodesContext {
+  rootValue: unknown;
+  isFullBranchFilterMode: boolean;
+  keyGetter: (data: unknown) => unknown;
+  parentIdGetter: (data: unknown) => unknown;
+  hasItemsGetter?: (data: unknown) => unknown;
+  isChildrenLoaded: Record<string, boolean>;
+}
+
+export type ConvertContext = Pick<NodesContext, 'keyGetter' | 'parentIdGetter' | 'rootValue'>;
+
+export type FillNodesContext = Pick<NodesContext, 'hasItemsGetter' | 'isChildrenLoaded' | 'isFullBranchFilterMode'>;
+
+export function convertItemToNode(
+  item: unknown,
+  nodeByKey: NodeByKey,
+  context: ConvertContext,
+): TreeNode {
+  const key = context.keyGetter(item) as string;
+  const itemParentId = context.parentIdGetter(item);
+  const parentId = (isDefined(itemParentId) ? itemParentId : context.rootValue) as string;
+
+  const parentNode = nodeByKey[parentId] ?? { key: parentId, children: [] };
+  nodeByKey[parentId] = parentNode;
+
+  const node = nodeByKey[key] ?? { key, children: [] };
+  nodeByKey[key] = node;
+
+  node.data = item;
+  node.parent = parentNode;
+
+  return node;
+}
+
+export function createNodesByItems(
+  items: RawItemData[],
+  visibleItems: RawItemData[] | undefined,
+  context: ConvertContext,
+): { rootNode?: TreeNode; nodeByKey: NodeByKey } {
+  const nodeByKey: NodeByKey = {};
+  const visibleByKey: Record<string, boolean> = {};
+
+  visibleItems?.forEach((item) => {
+    visibleByKey[context.keyGetter(item) as string] = true;
+  });
+
+  for (const item of items) {
+    const node = convertItemToNode(item, nodeByKey, context);
+
+    if (node.key === undefined) {
+      return { nodeByKey };
+    }
+
+    node.visible = !visibleItems || !!visibleByKey[node.key as string];
+    if (node.parent) {
+      node.parent.children.push(node);
+    }
+  }
+
+  const rootNode = nodeByKey[context.rootValue as string] ?? {
+    key: context.rootValue,
+    children: [],
+  };
+
+  rootNode.level = -1;
+
+  return { rootNode, nodeByKey };
+}
+
+function calculateHasChildren(
+  node: TreeNode,
+  options: LoadOperation,
+  context: FillNodesContext,
+): boolean {
+  const { parentIds } = options.storeLoadOptions;
+  const isFullBranch = context.isFullBranchFilterMode;
+  const canUseHasItemsGetter = !!parentIds || !options.storeLoadOptions.filter || isFullBranch;
+
+  const hasItemsFromData = context.hasItemsGetter && canUseHasItemsGetter
+    ? context.hasItemsGetter(node.data)
+    : undefined;
+
+  if (hasItemsFromData !== undefined) {
+    return !!hasItemsFromData;
+  }
+
+  const isChildrenLoaded = context.isChildrenLoaded[node.key as string];
+
+  if (!isChildrenLoaded && options.remoteOperations?.filtering && (parentIds || isFullBranch)) {
+    return true;
+  }
+
+  if (options.loadOptions?.filter && !options.remoteOperations?.filtering && isFullBranch) {
+    return !!node.children.length;
+  }
+
+  return !!node.hasChildren;
+}
+
+// In `fullBranch` mode a node whose children are all filtered out stays collapsed
+// and its whole branch becomes visible instead.
+function resolveNeedToExpand(node: TreeNode, isFullBranch: boolean): boolean {
+  if (!isFullBranch) {
+    return true;
+  }
+
+  if (node.children.some((child) => child.visible)) {
+    return true;
+  }
+
+  if (node.children.length) {
+    treeListCore.foreachNodes(node.children, (child: TreeNode) => {
+      child.visible = true;
+    });
+  }
+
+  return false;
+}
+
+function fillNodesCore(
+  nodes: TreeNode[],
+  options: LoadOperation,
+  context: FillNodesContext,
+  expandedRowKeys: unknown[],
+  level: number,
+): void {
+  nodes.forEach((node) => {
+    fillNodesCore(node.children, options, context, expandedRowKeys, level + 1);
+
+    node.level = level;
+    node.hasChildren = calculateHasChildren(node, options, context);
+
+    if (node.visible && node.hasChildren) {
+      const needToExpand = resolveNeedToExpand(node, context.isFullBranchFilterMode);
+
+      if (options.expandVisibleNodes && needToExpand) {
+        expandedRowKeys.push(node.key);
+      }
+    }
+
+    if (node.parent && (node.visible || node.hasChildren)) {
+      node.parent.hasChildren = true;
+    }
+  });
+}
+
+export function fillNodes(
+  nodes: TreeNode[],
+  options: LoadOperation,
+  context: FillNodesContext,
+): unknown[] {
+  const expandedRowKeys: unknown[] = [];
+
+  fillNodesCore(nodes, options, context, expandedRowKeys, 0);
+
+  return expandedRowKeys;
+}
+
+function collectVisibleNodes(
+  nodes: TreeNode[],
+  isRowExpanded: (key: unknown) => boolean,
+  result: TreeNode[],
+): void {
+  nodes.forEach((node) => {
+    if (node.visible) {
+      result.push(node);
+    }
+
+    const shouldDescend = (isRowExpanded(node.key) || !node.visible)
+      && node.hasChildren
+      && node.children.length > 0;
+
+    if (shouldDescend) {
+      collectVisibleNodes(node.children, isRowExpanded, result);
+    }
+  });
+}
+
+export function getVisibleNodes(
+  nodes: TreeNode[],
+  isRowExpanded: (key: unknown) => boolean,
+): TreeNode[] {
+  const result: TreeNode[] = [];
+
+  collectVisibleNodes(nodes, isRowExpanded, result);
+
+  return result;
+}

From 9ad425293dfe5b58b9dc48e186c7fac587821505 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <251575087+bit-byte0@users.noreply.github.com>
Date: Mon, 7 Sep 2026 08:45:20 +0000
Subject: [PATCH 09/45] chore(security): override fast-uri and qs in sbom
 package (GHSA-5jgf-p345-68v8, GHSA-4mjr-xmp4-gh2g) (#35069)

---
 packages/sbom/pnpm-lock.yaml      | 19 ++++++++++---------
 packages/sbom/pnpm-workspace.yaml |  3 ++-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/sbom/pnpm-lock.yaml b/packages/sbom/pnpm-lock.yaml
index 9c823e841f73..fd286ee42947 100644
--- a/packages/sbom/pnpm-lock.yaml
+++ b/packages/sbom/pnpm-lock.yaml
@@ -8,7 +8,8 @@ overrides:
   tar@<7.5.19: ^7.5.19
   brace-expansion@<5.0.8: ^5.0.8
   body-parser@>=2.0.0 <2.3.0: ^2.3.0
-  fast-uri@>=3.0.0 <3.1.5: ^3.1.5
+  fast-uri@>=3.0.0 <3.1.6: ^3.1.6
+  qs@>=2.2.5 <6.16.0: ^6.16.0
   undici@>=7.23.0 <7.29.0: ^7.29.0
   brace-expansion@>=3.0.0 <5.0.9: ^5.0.9
 
@@ -422,8 +423,8 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-uri@3.1.5:
-    resolution: {integrity: sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==}
+  fast-uri@3.1.7:
+    resolution: {integrity: sha512-dOvZVzjdZdz7phd9v6jCbwxrBW3fK6n8Rc0CtdmM4bumzMnxywBYhuph6J819RRw/ku+rLbelwfMunktuzVVHg==}
 
   finalhandler@1.1.2:
     resolution: {integrity: sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==}
@@ -691,8 +692,8 @@ packages:
     resolution: {integrity: sha512-WPn+h9RGEExOKdu4bsF4HksG/uzd3cFq3MFtq8PsFeExPse5Ha/VOjQNyHhjboBFwGXGev6muJYTSPAOkROq2g==}
     engines: {node: '>=18'}
 
-  qs@6.15.3:
-    resolution: {integrity: sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==}
+  qs@6.16.0:
+    resolution: {integrity: sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==}
     engines: {node: '>=0.6'}
 
   quick-lru@5.1.1:
@@ -1157,7 +1158,7 @@ snapshots:
   ajv@8.20.0:
     dependencies:
       fast-deep-equal: 3.1.3
-      fast-uri: 3.1.5
+      fast-uri: 3.1.7
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
@@ -1183,7 +1184,7 @@ snapshots:
       http-errors: 2.0.1
       iconv-lite: 0.7.2
       on-finished: 2.4.1
-      qs: 6.15.3
+      qs: 6.16.0
       raw-body: 3.0.2
       type-is: 2.1.0
     transitivePeerDependencies:
@@ -1381,7 +1382,7 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
-  fast-uri@3.1.5: {}
+  fast-uri@3.1.7: {}
 
   finalhandler@1.1.2:
     dependencies:
@@ -1661,7 +1662,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  qs@6.15.3:
+  qs@6.16.0:
     dependencies:
       es-define-property: 1.0.1
       side-channel: 1.1.1
diff --git a/packages/sbom/pnpm-workspace.yaml b/packages/sbom/pnpm-workspace.yaml
index 9f665ac75ee6..f2a0edddd8fc 100644
--- a/packages/sbom/pnpm-workspace.yaml
+++ b/packages/sbom/pnpm-workspace.yaml
@@ -8,6 +8,7 @@ overrides:
   tar@<7.5.19: ^7.5.19
   brace-expansion@<5.0.8: ^5.0.8
   body-parser@>=2.0.0 <2.3.0: ^2.3.0
-  fast-uri@>=3.0.0 <3.1.5: ^3.1.5
+  fast-uri@>=3.0.0 <3.1.6: ^3.1.6
+  qs@>=2.2.5 <6.16.0: ^6.16.0
   undici@>=7.23.0 <7.29.0: ^7.29.0
   brace-expansion@>=3.0.0 <5.0.9: ^5.0.9

From d860df84a5696fea1bebf60d24acc47fea50ce9c Mon Sep 17 00:00:00 2001
From: Anna Shakhova <68295572+anna-shakhova@users.noreply.github.com>
Date: Mon, 7 Sep 2026 08:46:30 +0000
Subject: [PATCH 10/45] Grids: create dataSourceController (#35040)

---
 .../data_source/data_source_controller.ts     |  20 +
 .../data_source/data_source_module.ts         |   9 +
 .../grids/data_grid/m_data_controller.ts      |  31 --
 .../grids/data_grid/m_widget_base.ts          |   4 +-
 .../module_not_extended/data_controller.ts    |   5 +
 .../data_controller.data_source.test.ts       |  65 ---
 .../data_controller/data_controller.ts        | 101 +---
 ...data_source_controller.integration.test.ts | 369 +++++++++++++
 .../__tests__/data_source_controller.test.ts  | 493 ++++++++++++++++++
 .../data_source/data_source_controller.ts     | 105 ++++
 .../js/__internal/grids/grid_core/m_types.ts  |   1 +
 .../data_controller/m_data_controller.ts      |   6 -
 .../data_source/data_source_controller.ts     |   9 +
 .../data_source/data_source_module.ts         |   9 +
 .../grids/tree_list/m_widget_base.ts          |   2 +
 .../testing/helpers/gridBaseMocks.js          |   6 +-
 .../dataController.tests.js                   |   3 +-
 .../dataSource.tests.js                       |   2 +-
 .../dataController.tests.js                   |   2 +-
 19 files changed, 1058 insertions(+), 184 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/data_grid/data_source/data_source_controller.ts
 create mode 100644 packages/devextreme/js/__internal/grids/data_grid/data_source/data_source_module.ts
 delete mode 100644 packages/devextreme/js/__internal/grids/data_grid/m_data_controller.ts
 create mode 100644 packages/devextreme/js/__internal/grids/data_grid/module_not_extended/data_controller.ts
 delete mode 100644 packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.data_source.test.ts
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.test.ts
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
 create mode 100644 packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts
 create mode 100644 packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_module.ts

diff --git a/packages/devextreme/js/__internal/grids/data_grid/data_source/data_source_controller.ts b/packages/devextreme/js/__internal/grids/data_grid/data_source/data_source_controller.ts
new file mode 100644
index 000000000000..c978b138692e
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/data_grid/data_source/data_source_controller.ts
@@ -0,0 +1,20 @@
+import errors from '@js/ui/widget/ui.errors';
+import dataSourceAdapterProvider from '@ts/grids/data_grid/m_data_source_adapter';
+import { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
+import type { DataSourceAdapterProvider } from '@ts/grids/grid_core/data_source_adapter/types';
+
+export class DataGridDataSourceController extends DataSourceController {
+  protected getAdapterProvider(): DataSourceAdapterProvider {
+    return dataSourceAdapterProvider;
+  }
+
+  protected getSpecificDataSourceOption(): unknown {
+    const dataSource = this.option('dataSource');
+
+    if (dataSource && !Array.isArray(dataSource) && this.option('keyExpr')) {
+      errors.log('W1011');
+    }
+
+    return super.getSpecificDataSourceOption();
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/data_grid/data_source/data_source_module.ts b/packages/devextreme/js/__internal/grids/data_grid/data_source/data_source_module.ts
new file mode 100644
index 000000000000..87d5621798c0
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/data_grid/data_source/data_source_module.ts
@@ -0,0 +1,9 @@
+import gridCore from '@ts/grids/data_grid/m_core';
+
+import { DataGridDataSourceController } from './data_source_controller';
+
+gridCore.registerModule('dataSource', {
+  controllers: {
+    dataSource: DataGridDataSourceController,
+  },
+});
diff --git a/packages/devextreme/js/__internal/grids/data_grid/m_data_controller.ts b/packages/devextreme/js/__internal/grids/data_grid/m_data_controller.ts
deleted file mode 100644
index e6632d7df28f..000000000000
--- a/packages/devextreme/js/__internal/grids/data_grid/m_data_controller.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import errors from '@js/ui/widget/ui.errors';
-import { DataController, dataControllerModule } from '@ts/grids/grid_core/data_controller/data_controller';
-
-import type { DataSourceAdapterProvider } from '../grid_core/data_source_adapter/types';
-import gridCore from './m_core';
-import dataSourceAdapterProvider from './m_data_source_adapter';
-
-class DataGridDataController extends DataController {
-  protected _getDataSourceAdapterProvider(): DataSourceAdapterProvider {
-    return dataSourceAdapterProvider;
-  }
-
-  protected _getSpecificDataSourceOption() {
-    const dataSource = this.option('dataSource');
-
-    if (dataSource && !Array.isArray(dataSource) && this.option('keyExpr')) {
-      errors.log('W1011');
-    }
-
-    return super._getSpecificDataSourceOption();
-  }
-}
-
-export { DataGridDataController as DataController };
-
-gridCore.registerModule('data', {
-  defaultOptions: dataControllerModule.defaultOptions,
-  controllers: {
-    data: DataGridDataController,
-  },
-});
diff --git a/packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts b/packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts
index 1710af383abd..546d0b54c089 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts
@@ -1,6 +1,7 @@
 import './module_not_extended/column_headers';
 import './m_columns_controller';
-import './m_data_controller';
+import './data_source/data_source_module';
+import './module_not_extended/data_controller';
 import './module_not_extended/sorting';
 import './module_not_extended/rows';
 import './module_not_extended/context_menu';
@@ -24,6 +25,7 @@ import gridCore from './m_core';
 const DATAGRID_DEPRECATED_TEMPLATE_WARNING = 'Specifying grid templates with the jQuery selector name is now deprecated. Use the DOM Node or the jQuery object that references this selector instead.';
 
 gridCore.registerModulesOrder([
+  'dataSource',
   'stateStoring',
   'columns',
   'selection',
diff --git a/packages/devextreme/js/__internal/grids/data_grid/module_not_extended/data_controller.ts b/packages/devextreme/js/__internal/grids/data_grid/module_not_extended/data_controller.ts
new file mode 100644
index 000000000000..5965240a4e70
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/data_grid/module_not_extended/data_controller.ts
@@ -0,0 +1,5 @@
+import { dataControllerModule } from '@ts/grids/grid_core/data_controller/data_controller';
+
+import gridCore from '../m_core';
+
+gridCore.registerModule('data', dataControllerModule);
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.data_source.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.data_source.test.ts
deleted file mode 100644
index 0d64fec2e747..000000000000
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.data_source.test.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  afterEach,
-  beforeEach,
-  describe,
-  expect,
-  it,
-} from '@jest/globals';
-import DataSource from '@js/data/data_source';
-import type { DataGridInstance } from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
-import {
-  afterTest,
-  beforeTest,
-  createDataGrid,
-  flushAsync,
-} from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
-
-import { DataController } from '../data_controller';
-
-declare class ExposedDataController extends DataController {
-  public isSharedDataSource?: boolean;
-}
-
-const DATA = [
-  { id: 1, value: 'a' },
-  { id: 2, value: 'b' },
-];
-
-const getIsSharedDataSource = (instance: DataGridInstance): boolean | undefined => {
-  const dataController = instance.getController('data') as unknown as ExposedDataController;
-
-  return dataController.isSharedDataSource;
-};
-
-describe('DataController data source', () => {
-  beforeEach(beforeTest);
-  afterEach(afterTest);
-
-  describe('isSharedDataSource', () => {
-    it('should be true when a DataSource instance is passed', async () => {
-      const sharedDataSource = new DataSource({ store: DATA, key: 'id' });
-
-      const { instance } = await createDataGrid({ dataSource: sharedDataSource });
-
-      expect(getIsSharedDataSource(instance)).toBe(true);
-    });
-
-    it('should be false when a plain array is passed', async () => {
-      const { instance } = await createDataGrid({ dataSource: DATA });
-
-      expect(getIsSharedDataSource(instance)).toBe(false);
-    });
-
-    it('should reset to false after switching from a shared DataSource to a plain array', async () => {
-      const sharedDataSource = new DataSource({ store: DATA, key: 'id' });
-
-      const { instance } = await createDataGrid({ dataSource: sharedDataSource });
-      expect(getIsSharedDataSource(instance)).toBe(true);
-
-      instance.option('dataSource', DATA);
-      await flushAsync();
-
-      expect(getIsSharedDataSource(instance)).toBe(false);
-    });
-  });
-});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index ba98b077e839..ec04bb2b8892 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -1,11 +1,8 @@
-import { DataSource as DataSourceClass } from '@js/common/data/data_source/data_source';
-import { normalizeDataSourceOptions } from '@js/common/data/data_source/utils';
 import type { Callback } from '@js/core/utils/callbacks';
 import { deferRender } from '@js/core/utils/common';
 import { logger } from '@js/core/utils/console';
 import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred, when } from '@js/core/utils/deferred';
-import { extend } from '@js/core/utils/extend';
 import { isDefined } from '@js/core/utils/type';
 import type { StoreChange } from '@js/data/store';
 import errors from '@js/ui/widget/ui.errors';
@@ -15,9 +12,10 @@ import type Store from '@ts/data/abstract_store';
 import type { DataSource } from '@ts/data/data_source/data_source';
 import type { ChangingEvent } from '@ts/data/data_source/types';
 import type { Column, ColumnsChanges } from '@ts/grids/grid_core/columns_controller/types';
+import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type DataSourceAdapter from '@ts/grids/grid_core/data_source_adapter/m_data_source_adapter';
 import type {
-  ChangedEvent, DataSourceAdapterProvider, LoadOperation, OperationTypes, RawItemData,
+  ChangedEvent, LoadOperation, OperationTypes, RawItemData,
 } from '@ts/grids/grid_core/data_source_adapter/types';
 import { isLocalStore } from '@ts/grids/grid_core/data_source_adapter/utils/store';
 import modules from '@ts/grids/grid_core/m_modules';
@@ -70,8 +68,6 @@ import { generateRowValues } from './utils/row_values';
 export class DataController extends modules.Controller {
   public _dataSource?: DataSourceAdapter | null;
 
-  protected isSharedDataSource?: boolean;
-
   protected _items!: ProcessedItem[];
 
   private _cachedProcessedItems!: ProcessedItem[] | null;
@@ -124,6 +120,8 @@ export class DataController extends modules.Controller {
 
   public rowIndicesChanged!: Callback<[RowIndexCorrection]>;
 
+  protected dataSourceController!: DataSourceController;
+
   // TODO public controller
   public _columnsController!: Controllers['columns'];
 
@@ -138,6 +136,7 @@ export class DataController extends modules.Controller {
   public init(): void {
     this._items = [];
     this._cachedProcessedItems = null;
+    this.dataSourceController = this.getController('dataSource');
     this._columnsController = this.getController('columns');
 
     this._isPaging = false;
@@ -641,22 +640,6 @@ export class DataController extends modules.Controller {
     });
   }
 
-  protected _getSpecificDataSourceOption(): unknown {
-    const dataSource = this.option('dataSource');
-
-    if (Array.isArray(dataSource)) {
-      return {
-        store: {
-          type: 'array',
-          data: dataSource,
-          key: this.option('keyExpr'),
-        },
-      };
-    }
-
-    return dataSource;
-  }
-
   /**
    * @extended: state_storing, virtual_scrolling
    */
@@ -670,7 +653,9 @@ export class DataController extends modules.Controller {
   protected _initDataSource(): void {
     const hadDataSource = !!this._dataSource;
 
-    const dataSource = this.recreateDataSource();
+    this._disposeDataSource();
+
+    const dataSource = this.dataSourceController.createDataSource();
     this._useSortingGroupingFromColumns = true;
     this._cachedProcessedItems = null;
 
@@ -684,27 +669,6 @@ export class DataController extends modules.Controller {
     }
   }
 
-  private recreateDataSource(): DataSource | undefined {
-    const dataSourceOptions = this._getSpecificDataSourceOption();
-
-    this._disposeDataSource();
-
-    if (!dataSourceOptions) {
-      this.isSharedDataSource = false;
-      return undefined;
-    }
-
-    if (dataSourceOptions instanceof DataSourceClass) {
-      this.isSharedDataSource = true;
-      return dataSourceOptions as unknown as DataSource;
-    }
-
-    this.isSharedDataSource = false;
-    return new DataSourceClass(
-      extend(true, {}, normalizeDataSourceOptions(dataSourceOptions, {})),
-    ) as unknown as DataSource;
-  }
-
   /**
    * @extended: selection, virtual_scrolling
    */
@@ -1358,18 +1322,6 @@ export class DataController extends modules.Controller {
     this.dataSourceChanged.fire();
   };
 
-  protected _getDataSourceAdapterProvider(): DataSourceAdapterProvider {
-    throw new Error('Method not implemented.');
-  }
-
-  protected _createDataSourceAdapter(dataSource: DataSource): DataSourceAdapter {
-    const dataSourceAdapterProvider = this._getDataSourceAdapterProvider();
-    const dataSourceAdapter = dataSourceAdapterProvider.create(this.component);
-
-    dataSourceAdapter.init(dataSource);
-    return dataSourceAdapter;
-  }
-
   private subscribeToDataSource(dataSourceAdapter: DataSourceAdapter): void {
     dataSourceAdapter.changed.add(this.dataChangedHandlerProxy);
     dataSourceAdapter.loadingChanged.add(this.loadingChangedHandler);
@@ -1388,29 +1340,17 @@ export class DataController extends modules.Controller {
     dataSourceAdapter.pushed.remove(this.dataPushedHandlerProxy);
   }
 
-  private setDataSource(dataSource: DataSource | null): void {
-    const oldDataSource = this._dataSource;
-
-    if (!dataSource && oldDataSource) {
-      oldDataSource.cancelAll();
-      this.unsubscribeFromDataSource(oldDataSource);
-      oldDataSource.dispose(this.isSharedDataSource);
-    }
-
-    const dataSourceAdapter = dataSource
-      ? this._createDataSourceAdapter(dataSource)
-      : null;
+  private setDataSource(dataSource: DataSource): void {
+    const dataSourceAdapter = this.dataSourceController.createAdapter(dataSource);
 
     this._dataSource = dataSourceAdapter;
 
-    if (dataSourceAdapter) {
-      this._isLoading = !dataSourceAdapter.isLoaded();
-      this._needApplyFilter = true;
-      this._isAllDataTypesDefined = this._columnsController.isAllDataTypesDefined();
+    this._isLoading = !dataSourceAdapter.isLoaded();
+    this._needApplyFilter = true;
+    this._isAllDataTypesDefined = this._columnsController.isAllDataTypesDefined();
 
-      this.changed.add(this.fireDataSourceChanged);
-      this.subscribeToDataSource(dataSourceAdapter);
-    }
+    this.changed.add(this.fireDataSourceChanged);
+    this.subscribeToDataSource(dataSourceAdapter);
   }
 
   /**
@@ -1649,7 +1589,16 @@ export class DataController extends modules.Controller {
   }
 
   protected _disposeDataSource(): void {
-    this.setDataSource(null);
+    const oldDataSource = this._dataSource;
+
+    if (oldDataSource) {
+      // Before unsubscribing: cancelling in-flight loads still notifies this controller.
+      oldDataSource.cancelAll();
+      this.unsubscribeFromDataSource(oldDataSource);
+    }
+
+    this._dataSource = null;
+    this.dataSourceController.disposeAdapter();
   }
 
   public dispose(): void {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
new file mode 100644
index 000000000000..cfae192b7095
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
@@ -0,0 +1,369 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import DataSourceClass from '@js/data/data_source';
+import type { Properties as TreeListProperties } from '@js/ui/tree_list';
+import TreeList from '@js/ui/tree_list';
+import errors from '@js/ui/widget/ui.errors';
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+  flushAsync,
+} from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+import type { Controllers, InternalGrid } from '@ts/grids/grid_core/m_types';
+
+import { DataSourceController } from '../data_source_controller';
+
+const TREELIST_CONTAINER_ID = 'treeListContainer';
+
+const DATA = [
+  { id: 1, parentId: 0, value: 'a' },
+  { id: 2, parentId: 1, value: 'b' },
+];
+
+const OTHER_DATA = [
+  { id: 3, parentId: 0, value: 'c' },
+];
+
+interface TreeListInstance extends TreeList {
+  getController: <T extends keyof Controllers>(name: T) => Controllers[T];
+}
+
+const createTreeList = (
+  options: TreeListProperties = {},
+): { $container: dxElementWrapper; instance: TreeListInstance } => {
+  const $container = $('<div>')
+    .attr('id', TREELIST_CONTAINER_ID)
+    .appendTo(document.body);
+
+  const instance = new TreeList(
+    $container.get(0) as HTMLDivElement,
+    { keyExpr: 'id', parentIdExpr: 'parentId', ...options },
+  ) as TreeListInstance;
+
+  jest.runAllTimers();
+
+  return { $container, instance };
+};
+
+const disposeTreeList = ($container: dxElementWrapper): void => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (($container as any).dxTreeList('instance') as TreeList | undefined)?.dispose();
+  $container.remove();
+};
+
+const getControllerNames = (instance: unknown): string[] => Object
+  .keys((instance as InternalGrid)._controllers);
+
+describe('dataSource module registration', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('is reachable from DataGrid', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+
+    expect(instance.getController('dataSource')).toBeInstanceOf(DataSourceController);
+  });
+
+  it('is reachable from TreeList', () => {
+    const { $container, instance } = createTreeList({ dataSource: DATA });
+
+    try {
+      expect(instance.getController('dataSource')).toBeInstanceOf(DataSourceController);
+    } finally {
+      disposeTreeList($container);
+    }
+  });
+
+  it('leaves the getDataSource public method on DataController', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+
+    expect(instance.getDataSource()).toBe(instance.getController('data').getDataSource());
+  });
+
+  it('sits at the bottom of the controller order', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+
+    expect(getControllerNames(instance)[0]).toBe('dataSource');
+  });
+});
+
+describe('dataSource controller holds the adapter', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('holds the same adapter object as DataController', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+    const dataSourceController = instance.getController('dataSource');
+    const adapter = instance.getController('data')._dataSource;
+
+    expect(adapter).toBeTruthy();
+    expect(dataSourceController.hasAdapter()).toBe(true);
+    expect(dataSourceController.getAdapter()).toBe(adapter);
+  });
+
+  it('follows the rebuilt adapter when the dataSource option changes', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+    const dataSourceController = instance.getController('dataSource');
+    const dataController = instance.getController('data');
+    const firstAdapter = dataSourceController.getAdapter();
+
+    instance.option('dataSource', OTHER_DATA);
+    await flushAsync();
+
+    expect(dataSourceController.getAdapter()).not.toBe(firstAdapter);
+    expect(dataSourceController.getAdapter()).toBe(dataController._dataSource);
+  });
+
+  it('releases the adapter when the dataSource option is cleared', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+    const dataSourceController = instance.getController('dataSource');
+
+    instance.option('dataSource', undefined);
+    await flushAsync();
+
+    expect(instance.getController('data')._dataSource).toBeNull();
+    expect(dataSourceController.hasAdapter()).toBe(false);
+    expect(dataSourceController.getAdapter()).toBeNull();
+    expect(dataSourceController.getDataSource()).toBeNull();
+    expect(dataSourceController.store()).toBeUndefined();
+  });
+
+  it('recovers after the dataSource option is set again', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+    const dataSourceController = instance.getController('dataSource');
+
+    instance.option('dataSource', undefined);
+    await flushAsync();
+    instance.option('dataSource', OTHER_DATA);
+    await flushAsync();
+
+    expect(dataSourceController.hasAdapter()).toBe(true);
+    expect(dataSourceController.getAdapter()).toBe(instance.getController('data')._dataSource);
+  });
+
+  it('still holds the same adapter after a refresh', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+    const dataSourceController = instance.getController('dataSource');
+
+    const refreshed = instance.refresh();
+    await flushAsync();
+    await refreshed;
+
+    expect(dataSourceController.hasAdapter()).toBe(true);
+    expect(dataSourceController.getAdapter()).toBe(instance.getController('data')._dataSource);
+  });
+
+  it('releases the adapter on dispose', async () => {
+    const { $container, instance } = await createDataGrid({ dataSource: DATA });
+    const dataSourceController = instance.getController('dataSource');
+    const dataController = instance.getController('data');
+
+    instance.dispose();
+    $container.remove();
+
+    expect(dataController._dataSource).toBeNull();
+    expect(dataSourceController.hasAdapter()).toBe(false);
+  });
+
+  it('holds the adapter in TreeList too', () => {
+    const { $container, instance } = createTreeList({ dataSource: DATA });
+
+    try {
+      const dataSourceController = instance.getController('dataSource');
+
+      expect(dataSourceController.hasAdapter()).toBe(true);
+      expect(dataSourceController.getAdapter()).toBe(instance.getController('data')._dataSource);
+    } finally {
+      disposeTreeList($container);
+    }
+  });
+});
+
+describe('dataSource controller reads delegate to the adapter', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('delegates store', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+
+    expect(instance.getController('dataSource').store())
+      .toBe(instance.getController('data').store());
+  });
+
+  it('delegates key', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+
+    expect(instance.getController('dataSource').key()).toBe('id');
+  });
+
+  it('unwraps one hop for getDataSource', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+    const dataSourceController = instance.getController('dataSource');
+
+    expect(dataSourceController.getDataSource())
+      .toBe(instance.getController('data').getDataSource());
+    expect(dataSourceController.getDataSource())
+      .not.toBe(dataSourceController.getAdapter());
+  });
+
+  it('delegates remoteOperations instead of falling back to an empty object', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+    const dataSourceController = instance.getController('dataSource');
+    const adapter = dataSourceController.getAdapter();
+
+    expect(dataSourceController.remoteOperations()).toBe(adapter?.remoteOperations());
+  });
+
+  it('delegates getDataIndexGetter', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+
+    expect(typeof instance.getController('dataSource').getDataIndexGetter()).toBe('function');
+  });
+});
+
+describe('dataSource controller resolves its own component adapter provider', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('builds a DataGrid adapter in DataGrid', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA });
+    const adapter = instance.getController('dataSource').getAdapter();
+
+    expect(adapter).toBeTruthy();
+    expect('forEachNode' in (adapter as object)).toBe(false);
+  });
+
+  it('builds a TreeList adapter in TreeList', () => {
+    const { $container, instance } = createTreeList({ dataSource: DATA });
+
+    try {
+      const adapter = instance.getController('dataSource').getAdapter();
+
+      expect(adapter).toBeTruthy();
+      expect('forEachNode' in (adapter as object)).toBe(true);
+    } finally {
+      disposeTreeList($container);
+    }
+  });
+});
+
+describe('dataSource controller owns the dataSource option reading', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('warns W1011 in DataGrid when keyExpr is combined with a non-array dataSource', async () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+
+    try {
+      await createDataGrid({ dataSource: { store: { type: 'array', data: DATA } }, keyExpr: 'id' });
+
+      expect(log).toHaveBeenCalledWith('W1011');
+    } finally {
+      log.mockRestore();
+    }
+  });
+
+  it('does not warn W1011 in DataGrid for an array dataSource', async () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+
+    try {
+      await createDataGrid({ dataSource: DATA, keyExpr: 'id' });
+
+      expect(log).not.toHaveBeenCalledWith('W1011');
+    } finally {
+      log.mockRestore();
+    }
+  });
+
+  it('does not warn W1011 in TreeList, where the override does not apply', () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+    const { $container } = createTreeList({
+      dataSource: { store: { type: 'array', data: DATA } },
+      keyExpr: 'id',
+    });
+
+    try {
+      expect(log).not.toHaveBeenCalledWith('W1011');
+    } finally {
+      log.mockRestore();
+      disposeTreeList($container);
+    }
+  });
+
+  it('builds a DataSource from the array option and keys it by keyExpr', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA, keyExpr: 'id' });
+
+    expect(instance.getController('dataSource').key()).toBe('id');
+  });
+});
+
+describe('dataSource controller owns adapter disposal', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('spares a DataSource the caller still owns when the grid is disposed', async () => {
+    const shared = new DataSourceClass({ store: DATA, key: 'id' });
+    const dispose = jest.spyOn(shared, 'dispose');
+    const { $container, instance } = await createDataGrid({ dataSource: shared });
+
+    instance.dispose();
+    // afterTest reads the component off #gridContainer, so a disposed one must not linger.
+    $container.remove();
+
+    expect(dispose).not.toHaveBeenCalled();
+
+    dispose.mockRestore();
+    shared.dispose();
+  });
+
+  it('destroys a DataSource it built itself when the grid is disposed', async () => {
+    const { $container, instance } = await createDataGrid({ dataSource: DATA, keyExpr: 'id' });
+    const built = instance.getController('dataSource').getDataSource();
+
+    if (!built) {
+      throw new Error('expected the controller to have built a DataSource');
+    }
+
+    const dispose = jest.spyOn(built, 'dispose');
+
+    instance.dispose();
+    $container.remove();
+
+    expect(dispose).toHaveBeenCalledTimes(1);
+
+    dispose.mockRestore();
+  });
+
+  it('spares a shared DataSource when the dataSource option is replaced', async () => {
+    const shared = new DataSourceClass({ store: DATA, key: 'id' });
+    const dispose = jest.spyOn(shared, 'dispose');
+    const { instance } = await createDataGrid({ dataSource: shared });
+
+    instance.option('dataSource', OTHER_DATA);
+    await flushAsync();
+
+    expect(dispose).not.toHaveBeenCalled();
+
+    dispose.mockRestore();
+    shared.dispose();
+  });
+
+  it('leaves DataController and the controller agreeing that the adapter is gone', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA, keyExpr: 'id' });
+
+    instance.option('dataSource', undefined);
+    await flushAsync();
+
+    expect(instance.getController('dataSource').hasAdapter()).toBe(false);
+    expect(instance.getController('dataSource').getAdapter()).toBeNull();
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.test.ts
new file mode 100644
index 000000000000..d64d70ec46ab
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.test.ts
@@ -0,0 +1,493 @@
+import {
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import { DataSource as DataSourceClass } from '@js/common/data/data_source/data_source';
+import type Store from '@ts/data/abstract_store';
+import type { StoreKey } from '@ts/data/abstract_store';
+import type { DataSource } from '@ts/data/data_source/data_source';
+import type DataSourceAdapter from '@ts/grids/grid_core/data_source_adapter/m_data_source_adapter';
+import type {
+  DataSourceAdapterProvider, RawItemData, RemoteOperationsOptions,
+} from '@ts/grids/grid_core/data_source_adapter/types';
+import type { InternalGrid } from '@ts/grids/grid_core/m_types';
+
+import { DataSourceController } from '../data_source_controller';
+
+interface AdapterStub {
+  _dataSource: DataSource;
+  store: jest.Mock<() => Store | undefined>;
+  key: jest.Mock<() => StoreKey | undefined>;
+  remoteOperations: jest.Mock<() => RemoteOperationsOptions>;
+  getDataIndexGetter: jest.Mock<() => (data: RawItemData) => number>;
+  dispose: jest.Mock<(isShared?: boolean) => void>;
+  init: jest.Mock<(dataSource: DataSource) => void>;
+}
+
+interface ProviderStub {
+  nextAdapter: AdapterStub;
+  create: jest.Mock<(component: InternalGrid) => DataSourceAdapter>;
+  extend: jest.Mock<() => void>;
+}
+
+const createAdapterStub = (marker: string): AdapterStub => ({
+  _dataSource: { marker } as unknown as DataSource,
+  store: jest.fn(() => ({ marker } as unknown as Store)),
+  key: jest.fn(() => marker as StoreKey),
+  remoteOperations: jest.fn(() => ({ filtering: true } as RemoteOperationsOptions)),
+  getDataIndexGetter: jest.fn(() => (): number => 0),
+  dispose: jest.fn(),
+  init: jest.fn(),
+});
+
+const asAdapter = (stub: AdapterStub): DataSourceAdapter => stub as unknown as DataSourceAdapter;
+
+class TestDataSourceController extends DataSourceController {
+  public providerStub!: DataSourceAdapterProvider;
+
+  protected getAdapterProvider(): DataSourceAdapterProvider {
+    return this.providerStub;
+  }
+
+  public readSpecificDataSourceOption(): unknown {
+    return this.getSpecificDataSourceOption();
+  }
+}
+
+const createControllerWith = (): {
+  controller: DataSourceController;
+  component: InternalGrid;
+} => {
+  const component = {
+    _optionCache: {},
+    _controllers: {},
+    option: jest.fn(),
+  } as unknown as InternalGrid;
+
+  return { controller: new DataSourceController(component), component };
+};
+
+const createController = (): DataSourceController => createControllerWith().controller;
+
+const createProviderStub = (adapter: AdapterStub): ProviderStub => {
+  const stub: ProviderStub = {
+    nextAdapter: adapter,
+    create: jest.fn(() => asAdapter(stub.nextAdapter)),
+    extend: jest.fn(),
+  };
+
+  return stub;
+};
+
+const asProvider = (
+  stub: ProviderStub,
+): DataSourceAdapterProvider => stub as unknown as DataSourceAdapterProvider;
+
+const SOURCE = { marker: 'source' } as unknown as DataSource;
+
+const withProvider = (adapter: AdapterStub): {
+  controller: TestDataSourceController;
+  component: InternalGrid;
+  provider: ProviderStub;
+} => {
+  const component = {
+    _optionCache: {},
+    _controllers: {},
+    option: jest.fn(),
+  } as unknown as InternalGrid;
+  const controller = new TestDataSourceController(component);
+  const provider = createProviderStub(adapter);
+
+  controller.providerStub = asProvider(provider);
+
+  return { controller, component, provider };
+};
+
+const withOptions = (options: Record<string, unknown>): TestDataSourceController => {
+  const component = {
+    _controllers: {},
+    option: jest.fn((name?: string) => (name === undefined ? options : options[name])),
+  } as unknown as InternalGrid;
+
+  return new TestDataSourceController(component);
+};
+
+// isShared is private and read only by disposal, so that is where it becomes observable.
+const flagHandedToAdapter = (
+  controller: TestDataSourceController,
+): boolean | undefined => {
+  const probe = createAdapterStub('probe');
+
+  controller.providerStub = asProvider(createProviderStub(probe));
+  controller.createAdapter(SOURCE);
+  controller.disposeAdapter();
+
+  return probe.dispose.mock.calls[0]?.[0];
+};
+
+const withAdapter = (marker = 'first'): {
+  controller: TestDataSourceController;
+  adapter: AdapterStub;
+  provider: ProviderStub;
+} => {
+  const adapter = createAdapterStub(marker);
+  const { controller, provider } = withProvider(adapter);
+
+  controller.createAdapter(SOURCE);
+
+  return { controller, adapter, provider };
+};
+
+describe('DataSourceController', () => {
+  describe('with no adapter', () => {
+    it('has no adapter right after construction, without init()', () => {
+      const controller = createController();
+
+      expect(controller.hasAdapter()).toBe(false);
+      expect(controller.getAdapter()).toBeNull();
+    });
+
+    it('returns null from getDataSource', () => {
+      expect(createController().getDataSource()).toBeNull();
+    });
+
+    it('returns undefined from store and key', () => {
+      const controller = createController();
+
+      expect(controller.store()).toBeUndefined();
+      expect(controller.key()).toBeUndefined();
+    });
+
+    it('returns undefined from getDataIndexGetter', () => {
+      expect(createController().getDataIndexGetter()).toBeUndefined();
+    });
+
+    it('returns an empty object from remoteOperations, so callers can enumerate it', () => {
+      const controller = createController();
+
+      expect(controller.remoteOperations()).toEqual({});
+      expect(Object.keys(controller.remoteOperations())).toEqual([]);
+    });
+  });
+
+  describe('with an adapter', () => {
+    it('reports the adapter as present and hands back the same object', () => {
+      const { controller, adapter } = withAdapter();
+
+      expect(controller.hasAdapter()).toBe(true);
+      expect(controller.getAdapter()).toBe(asAdapter(adapter));
+    });
+
+    it('delegates store to the adapter once per call', () => {
+      const { controller, adapter } = withAdapter();
+
+      expect(controller.store()).toBe(adapter.store.mock.results[0]?.value);
+      expect(adapter.store).toHaveBeenCalledTimes(1);
+    });
+
+    it('delegates key to the adapter', () => {
+      const { controller, adapter } = withAdapter();
+
+      expect(controller.key()).toBe('first');
+      expect(adapter.key).toHaveBeenCalledTimes(1);
+    });
+
+    it('returns the adapter remoteOperations object as-is', () => {
+      const { controller, adapter } = withAdapter();
+
+      expect(controller.remoteOperations()).toEqual({ filtering: true });
+      expect(adapter.remoteOperations).toHaveBeenCalledTimes(1);
+    });
+
+    it('delegates getDataIndexGetter to the adapter', () => {
+      const { controller, adapter } = withAdapter();
+      const getter = controller.getDataIndexGetter();
+
+      expect(getter).toBe(adapter.getDataIndexGetter.mock.results[0]?.value);
+      expect(adapter.getDataIndexGetter).toHaveBeenCalledTimes(1);
+    });
+
+    it('returns the inner DataSource from getDataSource, not the adapter', () => {
+      const { controller, adapter } = withAdapter();
+
+      expect(controller.getDataSource()).toBe(adapter._dataSource);
+      expect(controller.getDataSource()).not.toBe(asAdapter(adapter));
+    });
+  });
+
+  describe('replacing the adapter', () => {
+    it('follows the new adapter after a replacement', () => {
+      const { controller, adapter: first, provider } = withAdapter();
+      const second = createAdapterStub('second');
+
+      provider.nextAdapter = second;
+      controller.createAdapter(SOURCE);
+
+      expect(controller.getAdapter()).toBe(asAdapter(second));
+      expect(controller.key()).toBe('second');
+      expect(controller.getDataSource()).toBe(second._dataSource);
+      expect(first.key).not.toHaveBeenCalled();
+    });
+
+    it('returns to the absent state after disposeAdapter', () => {
+      const { controller } = withAdapter();
+
+      controller.disposeAdapter();
+
+      expect(controller.hasAdapter()).toBe(false);
+      expect(controller.getAdapter()).toBeNull();
+      expect(controller.getDataSource()).toBeNull();
+      expect(controller.store()).toBeUndefined();
+      expect(controller.key()).toBeUndefined();
+      expect(controller.getDataIndexGetter()).toBeUndefined();
+      expect(controller.remoteOperations()).toEqual({});
+    });
+  });
+
+  describe('layering', () => {
+    it('reads no other controller', () => {
+      const { controller } = withAdapter();
+      const getController = jest.spyOn(controller, 'getController');
+
+      controller.hasAdapter();
+      controller.getAdapter();
+      controller.getDataSource();
+      controller.store();
+      controller.key();
+      controller.remoteOperations();
+      controller.getDataIndexGetter();
+      controller.disposeAdapter();
+
+      expect(getController).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('createAdapter', () => {
+    it('builds the adapter through the provider, passing the component', () => {
+      const { controller, component, provider } = withProvider(createAdapterStub('built'));
+
+      controller.createAdapter(SOURCE);
+
+      expect(provider.create).toHaveBeenCalledTimes(1);
+      expect(provider.create).toHaveBeenCalledWith(component);
+    });
+
+    it('initialises the adapter with the given data source', () => {
+      const adapter = createAdapterStub('built');
+
+      withProvider(adapter).controller.createAdapter(SOURCE);
+
+      expect(adapter.init).toHaveBeenCalledTimes(1);
+      expect(adapter.init).toHaveBeenCalledWith(SOURCE);
+    });
+
+    it('returns the adapter the provider produced', () => {
+      const adapter = createAdapterStub('built');
+
+      const result = withProvider(adapter).controller.createAdapter(SOURCE);
+
+      expect(result).toBe(asAdapter(adapter));
+    });
+
+    it('stores the adapter it built', () => {
+      const adapter = createAdapterStub('built');
+      const { controller } = withProvider(adapter);
+
+      controller.createAdapter(SOURCE);
+
+      expect(controller.hasAdapter()).toBe(true);
+      expect(controller.getAdapter()).toBe(asAdapter(adapter));
+    });
+
+    it('replaces a previously held adapter without disposing it', () => {
+      const first = createAdapterStub('first');
+      const { controller, provider } = withProvider(first);
+      const second = createAdapterStub('second');
+
+      controller.createAdapter(SOURCE);
+      provider.nextAdapter = second;
+      controller.createAdapter(SOURCE);
+
+      expect(controller.getAdapter()).toBe(asAdapter(second));
+      expect(first.dispose).not.toHaveBeenCalled();
+    });
+
+    it('throws on the base class, where no component has supplied a provider', () => {
+      expect(() => createController().createAdapter(SOURCE)).toThrow('Method not implemented.');
+    });
+  });
+
+  describe('getSpecificDataSourceOption', () => {
+    it('wraps an array option into an array store, keyed by keyExpr', () => {
+      const data = [{ id: 1 }];
+
+      const result = withOptions({ dataSource: data, keyExpr: 'id' })
+        .readSpecificDataSourceOption();
+
+      expect(result).toEqual({ store: { type: 'array', data, key: 'id' } });
+    });
+
+    it('keeps the caller array by reference, leaving the copy to createDataSource', () => {
+      const data = [{ id: 1 }];
+
+      const result = withOptions({ dataSource: data, keyExpr: 'id' })
+        .readSpecificDataSourceOption() as { store: { data: unknown } };
+
+      expect(result.store.data).toBe(data);
+    });
+
+    it('passes a non-array option straight through', () => {
+      const config = { store: { type: 'odata', url: 'x' } };
+
+      const result = withOptions({ dataSource: config }).readSpecificDataSourceOption();
+
+      expect(result).toBe(config);
+    });
+
+    it('returns the unset option as-is, so createDataSource can see it is absent', () => {
+      expect(withOptions({}).readSpecificDataSourceOption()).toBeUndefined();
+    });
+
+    it('does not throw on the base class, unlike getAdapterProvider', () => {
+      expect(() => withOptions({}).readSpecificDataSourceOption()).not.toThrow();
+    });
+  });
+
+  describe('createDataSource', () => {
+    it('returns undefined when the dataSource option is absent', () => {
+      const controller = withOptions({});
+
+      expect(controller.createDataSource()).toBeUndefined();
+    });
+
+    it('leaves the source not-shared when the dataSource option is absent', () => {
+      const controller = withOptions({});
+
+      controller.createDataSource();
+
+      expect(flagHandedToAdapter(controller)).toBe(false);
+    });
+
+    it('builds a DataSource from a plain array', () => {
+      const controller = withOptions({ dataSource: [{ id: 1 }], keyExpr: 'id' });
+
+      expect(controller.createDataSource()).toBeInstanceOf(DataSourceClass);
+    });
+
+    it('keys the built DataSource by keyExpr', () => {
+      const controller = withOptions({ dataSource: [{ id: 1 }], keyExpr: 'id' });
+
+      expect(controller.createDataSource()?.key()).toBe('id');
+    });
+
+    it('marks what it built not-shared, so disposal may destroy it', () => {
+      const controller = withOptions({ dataSource: [{ id: 1 }], keyExpr: 'id' });
+
+      controller.createDataSource();
+
+      expect(flagHandedToAdapter(controller)).toBe(false);
+    });
+
+    it('builds a DataSource from a store config', () => {
+      const controller = withOptions({ dataSource: { store: { type: 'array', data: [] } } });
+
+      expect(controller.createDataSource()).toBeInstanceOf(DataSourceClass);
+    });
+
+    it('builds a fresh DataSource on every call', () => {
+      const controller = withOptions({ dataSource: [{ id: 1 }], keyExpr: 'id' });
+
+      expect(controller.createDataSource()).not.toBe(controller.createDataSource());
+    });
+
+    it('hands back the very DataSource the caller passed, without rebuilding it', () => {
+      const shared = new DataSourceClass({ store: [{ id: 1 }], key: 'id' });
+      const controller = withOptions({ dataSource: shared });
+
+      expect(controller.createDataSource()).toBe(shared);
+
+      shared.dispose();
+    });
+
+    it('marks a caller-owned DataSource shared, so disposal spares it', () => {
+      const shared = new DataSourceClass({ store: [{ id: 1 }], key: 'id' });
+      const controller = withOptions({ dataSource: shared });
+
+      controller.createDataSource();
+
+      expect(flagHandedToAdapter(controller)).toBe(true);
+
+      shared.dispose();
+    });
+
+    it('clears the shared flag when the option moves from a DataSource to an array', () => {
+      const shared = new DataSourceClass({ store: [{ id: 1 }], key: 'id' });
+      const options: Record<string, unknown> = { dataSource: shared, keyExpr: 'id' };
+      const controller = withOptions(options);
+
+      controller.createDataSource();
+      options.dataSource = [{ id: 2 }];
+      controller.createDataSource();
+
+      expect(flagHandedToAdapter(controller)).toBe(false);
+
+      shared.dispose();
+    });
+
+    it('starts out not-shared, before anything has been created', () => {
+      expect(flagHandedToAdapter(withOptions({}))).toBe(false);
+    });
+
+    it('leaves the held adapter alone — creating a source is not creating an adapter', () => {
+      const controller = withOptions({ dataSource: [{ id: 1 }], keyExpr: 'id' });
+
+      controller.createDataSource();
+
+      expect(controller.hasAdapter()).toBe(false);
+    });
+
+    it('reads no other controller', () => {
+      const controller = withOptions({ dataSource: [{ id: 1 }], keyExpr: 'id' });
+      const getController = jest.spyOn(controller, 'getController');
+
+      controller.createDataSource();
+      controller.readSpecificDataSourceOption();
+
+      expect(getController).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('disposeAdapter', () => {
+    it('disposes the adapter it holds', () => {
+      const { controller, adapter } = withAdapter();
+
+      controller.disposeAdapter();
+
+      expect(adapter.dispose).toHaveBeenCalledTimes(1);
+    });
+
+    it('does nothing when there is no adapter to dispose', () => {
+      expect(() => createController().disposeAdapter()).not.toThrow();
+    });
+
+    it('disposes only once across repeated calls', () => {
+      const { controller, adapter } = withAdapter();
+
+      controller.disposeAdapter();
+      controller.disposeAdapter();
+
+      expect(adapter.dispose).toHaveBeenCalledTimes(1);
+    });
+
+    it('reads no other controller', () => {
+      const { controller } = withAdapter();
+      const getController = jest.spyOn(controller, 'getController');
+
+      controller.disposeAdapter();
+
+      expect(getController).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
new file mode 100644
index 000000000000..7a70ce031ba9
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
@@ -0,0 +1,105 @@
+import { DataSource as DataSourceClass } from '@js/common/data/data_source/data_source';
+import { normalizeDataSourceOptions } from '@js/common/data/data_source/utils';
+import { extend } from '@js/core/utils/extend';
+import type Store from '@ts/data/abstract_store';
+import type { StoreKey } from '@ts/data/abstract_store';
+import type { DataSource } from '@ts/data/data_source/data_source';
+import type DataSourceAdapter from '@ts/grids/grid_core/data_source_adapter/m_data_source_adapter';
+import type {
+  DataSourceAdapterProvider, RawItemData, RemoteOperationsOptions,
+} from '@ts/grids/grid_core/data_source_adapter/types';
+import modules from '@ts/grids/grid_core/m_modules';
+
+export class DataSourceController extends modules.Controller {
+  // Absent before the first dataSource assignment and again after a reset.
+  private adapter: DataSourceAdapter | null = null;
+
+  private isShared = false;
+
+  /**
+   * @extended: DataGrid's data_source_controller
+   */
+  protected getSpecificDataSourceOption(): unknown {
+    const dataSource = this.option('dataSource');
+
+    if (Array.isArray(dataSource)) {
+      return {
+        store: {
+          type: 'array',
+          data: dataSource,
+          key: this.option('keyExpr'),
+        },
+      };
+    }
+
+    return dataSource;
+  }
+
+  public createDataSource(): DataSource | undefined {
+    const dataSourceOptions = this.getSpecificDataSourceOption();
+
+    if (!dataSourceOptions) {
+      this.isShared = false;
+      return undefined;
+    }
+
+    if (dataSourceOptions instanceof DataSourceClass) {
+      this.isShared = true;
+      return dataSourceOptions as unknown as DataSource;
+    }
+
+    this.isShared = false;
+    return new DataSourceClass(
+      extend(true, {}, normalizeDataSourceOptions(dataSourceOptions, {})),
+    ) as unknown as DataSource;
+  }
+
+  public getDataSource(): DataSource | null {
+    return this.adapter?._dataSource ?? null;
+  }
+
+  /**
+   * @extended: DataGrid's and TreeList's data_source_controller
+   */
+  protected getAdapterProvider(): DataSourceAdapterProvider {
+    throw new Error('Method not implemented.');
+  }
+
+  public createAdapter(dataSource: DataSource): DataSourceAdapter {
+    const adapter = this.getAdapterProvider().create(this.component);
+
+    adapter.init(dataSource);
+    this.adapter = adapter;
+
+    return adapter;
+  }
+
+  public hasAdapter(): boolean {
+    return this.adapter !== null;
+  }
+
+  public getAdapter(): DataSourceAdapter | null {
+    return this.adapter;
+  }
+
+  public disposeAdapter(): void {
+    this.adapter?.dispose(this.isShared);
+    this.adapter = null;
+  }
+
+  public store(): Store | undefined {
+    return this.adapter?.store();
+  }
+
+  public key(): StoreKey | undefined {
+    return this.adapter?.key();
+  }
+
+  public remoteOperations(): RemoteOperationsOptions {
+    return this.adapter?.remoteOperations() ?? {};
+  }
+
+  public getDataIndexGetter(): ((data: RawItemData) => number) | undefined {
+    return this.adapter?.getDataIndexGetter();
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/grid_core/m_types.ts b/packages/devextreme/js/__internal/grids/grid_core/m_types.ts
index 662de74a6193..d056690762f3 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/m_types.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/m_types.ts
@@ -203,6 +203,7 @@ export interface Controllers {
   columnsResizer: import('./columns_resizing_reordering/m_columns_resizing_reordering').ColumnsResizerViewController;
   contextMenu: import('./context_menu/m_context_menu').ContextMenuController;
   data: import('./data_controller/data_controller').DataController;
+  dataSource: import('./data_source/data_source_controller').DataSourceController;
   draggingHeader: import('./columns_resizing_reordering/m_columns_resizing_reordering').DraggingHeaderViewController;
   // todo: export is dataGrid-only controller
   editing: import('./editing/m_editing').EditingController;
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts b/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts
index e87ee434b1e8..309f50bd4481 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts
@@ -2,11 +2,9 @@ import { equalByValue } from '@js/core/utils/common';
 import { Deferred } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import { DataController, dataControllerModule } from '@ts/grids/grid_core/data_controller/data_controller';
-import type { DataSourceAdapterProvider } from '@ts/grids/grid_core/data_source_adapter/types';
 import type { RowKey } from '@ts/grids/grid_core/m_types';
 
 import type { DataSourceAdapterTreeList } from '../data_source_adapter/m_data_source_adapter';
-import dataSourceAdapterProvider from '../data_source_adapter/m_data_source_adapter';
 import treeListCore from '../m_core';
 
 export class TreeListDataController extends DataController {
@@ -16,10 +14,6 @@ export class TreeListDataController extends DataController {
     return this._dataSource ?? undefined;
   }
 
-  protected _getDataSourceAdapterProvider(): DataSourceAdapterProvider {
-    return dataSourceAdapterProvider;
-  }
-
   private _getNodeLevel(node) {
     let level = -1;
     while (node.parent) {
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts b/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts
new file mode 100644
index 000000000000..70f64d785c20
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts
@@ -0,0 +1,9 @@
+import { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
+import type { DataSourceAdapterProvider } from '@ts/grids/grid_core/data_source_adapter/types';
+import dataSourceAdapterProvider from '@ts/grids/tree_list/data_source_adapter/m_data_source_adapter';
+
+export class TreeListDataSourceController extends DataSourceController {
+  protected getAdapterProvider(): DataSourceAdapterProvider {
+    return dataSourceAdapterProvider;
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_module.ts b/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_module.ts
new file mode 100644
index 000000000000..d3b5072248af
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_module.ts
@@ -0,0 +1,9 @@
+import treeListCore from '@ts/grids/tree_list/m_core';
+
+import { TreeListDataSourceController } from './data_source_controller';
+
+treeListCore.registerModule('dataSource', {
+  controllers: {
+    dataSource: TreeListDataSourceController,
+  },
+});
diff --git a/packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts b/packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts
index c933bd272e7e..41ccc3606941 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts
@@ -1,5 +1,6 @@
 import './module_not_extended/column_headers';
 import './m_columns_controller';
+import './data_source/data_source_module';
 import './data_controller/m_data_controller';
 import './module_not_extended/sorting';
 import './rows/m_rows';
@@ -19,6 +20,7 @@ import treeListCore from './m_core';
 const TREELIST_CLASS = 'dx-treelist';
 
 treeListCore.registerModulesOrder([
+  'dataSource',
   'stateStoring',
   'columns',
   'selection',
diff --git a/packages/devextreme/testing/helpers/gridBaseMocks.js b/packages/devextreme/testing/helpers/gridBaseMocks.js
index 05441eea0baa..27c1041868bd 100644
--- a/packages/devextreme/testing/helpers/gridBaseMocks.js
+++ b/packages/devextreme/testing/helpers/gridBaseMocks.js
@@ -994,11 +994,15 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
         _subscribeToEvents(rootElement) { }
     };
 
+    // The dataSource controller is a leaf that the data controller resolves in init(),
+    // so it is always included rather than listed by every caller.
+    const ALWAYS_INCLUDED_MODULES = ['dataSource'];
+
     exports['setup' + nameWidget + 'Modules'] = function(that, moduleNames, options) {
         const modules = [];
 
         $.each(gridCore.modules, function() {
-            if($.inArray(this.name, moduleNames) !== -1) {
+            if($.inArray(this.name, moduleNames) !== -1 || $.inArray(this.name, ALWAYS_INCLUDED_MODULES) !== -1) {
                 modules.push(this);
             }
         });
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
index c2fc39385b72..4b78e7d2de73 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
@@ -383,7 +383,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         dataSource.load();
 
         // act
-        this.dataController.setDataSource(null);
+        this.dataController._disposeDataSource();
 
         // assert
         assert.strictEqual(loadingChangedSpy.callCount, 2, 'loadingChanged call count');
@@ -7746,7 +7746,6 @@ QUnit.module('Filtering', {
             remoteOperations: { filtering: true }
         });
 
-        this.dataController.isSharedDataSource = true;
         this.dataController.setDataSource(this.dataSource);
 
         let loadingCount = 0;
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataSource.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataSource.tests.js
index d83fa3a157c7..eccc30888fb8 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataSource.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataSource.tests.js
@@ -31,7 +31,7 @@ const createDataSource = function(options) {
 
     setupDataGridModules(dataGridStub, ['data', 'columns']);
 
-    const dataSourceAdapter = dataGridStub.dataController._createDataSourceAdapter(dataSource);
+    const dataSourceAdapter = dataGridStub.dataSourceController.createAdapter(dataSource);
 
     const origItems = dataSourceAdapter.items;
     const processItems = function(items) {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/dataController.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/dataController.tests.js
index ee7a4c5f2ac6..5f2f56fb3699 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/dataController.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/dataController.tests.js
@@ -707,7 +707,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
 
     QUnit.test('There are no exceptions on getting node when hasn\'t datasource', function(assert) {
     // arrange
-        this.dataController.setDataSource(undefined);
+        this.dataController._disposeDataSource();
 
         // act, assert
         assert.equal(this.getNodeByKey(1), undefined, 'no exceptions');

From 35f2b92c7bd9d136f67ddfc4dfb0479571924a39 Mon Sep 17 00:00:00 2001
From: Alex Lavrov <36633600+alexslavr@users.noreply.github.com>
Date: Mon, 7 Sep 2026 09:44:09 +0000
Subject: [PATCH 11/45] CI: Always run full test matrix in visual-test-demos
 workflow (#35020)

---
 .github/workflows/visual-tests-demos.yml | 499 ++---------------------
 1 file changed, 27 insertions(+), 472 deletions(-)

diff --git a/.github/workflows/visual-tests-demos.yml b/.github/workflows/visual-tests-demos.yml
index 8a5f3107baf4..6bf84c43dd7c 100644
--- a/.github/workflows/visual-tests-demos.yml
+++ b/.github/workflows/visual-tests-demos.yml
@@ -26,130 +26,13 @@ jobs:
         id: check
         run: echo "should-run=${{ env.RUN_TESTS }}" >> $GITHUB_OUTPUT
 
-  get-changes:
-    runs-on: ubuntu-latest
-    needs: check-should-run
-    if: github.event_name == 'pull_request' && needs.check-should-run.outputs.should-run == 'true'
-    name: Get changed demos
-    timeout-minutes: 5
-    outputs:
-      has-changed-demos: ${{ steps.check-changes.outputs.has-changed-demos }}
-
-    steps:
-      - name: Get sources
-        uses: actions/checkout@v6
-
-      - name: Get changed files
-        uses: DevExpress/github-actions/get-changed-files@get-changed-files
-        with:
-          gh-token: ${{ secrets.GITHUB_TOKEN }}
-          paths: 'apps/demos/Demos/**/*'
-          output: apps/demos/changed-files.json
-
-      - name: Display changed files
-        id: check-changes
-        run: |
-          HAS_CHANGED="false"
-          if [ -f "apps/demos/changed-files.json" ]; then
-            DEMO_COUNT=$(jq length apps/demos/changed-files.json)
-            echo "Found changed-files.json"
-            echo "Content of changed-files.json:"
-            cat apps/demos/changed-files.json
-            echo "Number of changed files: $DEMO_COUNT"
-            if [ "$DEMO_COUNT" -gt 0 ]; then
-              HAS_CHANGED="true"
-            fi
-          else
-            echo "changed-files.json not found"
-          fi
-          echo "has-changed-demos=${HAS_CHANGED}" >> $GITHUB_OUTPUT
-
-      - name: Upload artifacts
-        uses: actions/upload-artifact@v7
-        with:
-          name: changed-demos
-          path: apps/demos/changed-files.json
-          retention-days: 1
-
-  determine-framework-tests-scope:
-    runs-on: ubuntu-slim
-    name: Determine scope for framework tests
-    needs: [check-should-run, get-changes]
-    if: |
-      !cancelled() &&
-      needs.check-should-run.outputs.should-run == 'true' &&
-      (needs.get-changes.result == 'success' || needs.get-changes.result == 'skipped')
-    outputs:
-      framework-tests-scope: ${{ steps.determine.outputs.framework-tests-scope }}
-
-    steps:
-      - name: Determine framework tests scope
-        id: determine
-        run: |
-          if [ "${{ github.event_name }}" != "pull_request" ] || [ "${{ contains(github.event.pull_request.labels.*.name, 'force all tests') }}" = "true" ]; then
-            echo "Framework tests scope: all demos"
-            echo "framework-tests-scope=all" >> $GITHUB_OUTPUT
-          elif [ "${{ needs.get-changes.outputs.has-changed-demos }}" = "true" ]; then
-            echo "Framework tests scope: changed demos"
-            echo "framework-tests-scope=changed" >> $GITHUB_OUTPUT
-          else
-            echo "Framework tests NOT needed"
-            echo "framework-tests-scope=none" >> $GITHUB_OUTPUT
-          fi
-
-  determine-jquery-test-matrix:
-    runs-on: ubuntu-slim
-    name: Determine jQuery test matrix
-    needs: [check-should-run, determine-framework-tests-scope]
-    if: |
-      !cancelled() &&
-      needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success'
-    outputs:
-      matrix: ${{ steps.matrix.outputs.matrix }}
-
-    steps:
-      - name: Build matrix
-        id: matrix
-        run: |
-          base_matrix=$(cat <<'JSON'
-          [
-            { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(1/3)" },
-            { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(2/3)" },
-            { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(3/3)" },
-            { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(1/3)" },
-            { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(2/3)" },
-            { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(3/3)" },
-            { "STRATEGY": "accessibility", "THEME": "material.blue.light", "CONSTEL": "jquery" },
-            { "STRATEGY": "accessibility", "THEME": "fluent.blue.light", "CONSTEL": "jquery" }
-          ]
-          JSON
-          )
-
-          dark_accessibility_matrix=$(cat <<'JSON'
-          [
-            { "STRATEGY": "accessibility", "THEME": "material.blue.dark", "CONSTEL": "jquery" },
-            { "STRATEGY": "accessibility", "THEME": "fluent.blue.dark", "CONSTEL": "jquery" }
-          ]
-          JSON
-          )
-
-          matrix=$(jq -c -n \
-            --argjson base "$base_matrix" \
-            --argjson darkAccessibility "$dark_accessibility_matrix" \
-            --arg frameworkTestsScope "${{ needs.determine-framework-tests-scope.outputs.framework-tests-scope }}" \
-            '{ include: ($base + (if $frameworkTestsScope != "none" then $darkAccessibility else [] end)) }')
-
-          echo "matrix=$matrix" >> $GITHUB_OUTPUT
-
   build-devextreme:
     runs-on: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || 'devextreme-shr2' }}
     name: Build DevExtreme
-    needs: [check-should-run, determine-framework-tests-scope]
+    needs: [check-should-run]
     if: |
       !cancelled() &&
-      needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success'
+      needs.check-should-run.outputs.should-run == 'true'
     env:
       NODE_OPTIONS: --max-old-space-size=8192
     timeout-minutes: 30
@@ -228,15 +111,7 @@ jobs:
             ${{ runner.os }}-nx-v2-${{ github.workflow }}-${{ github.job }}-
             ${{ runner.os }}-nx-v2-
 
-      - name: DevExtreme - Build
-        if: needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'none'
-        shell: bash
-        run: |
-          pnpm exec nx build devextreme-scss
-          pnpm exec nx build devextreme -c testing
-
       - name: DevExtreme - Build-all
-        if: needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none'
         run: pnpm nx all:build-testing workflows
 
       - name: Zip artifacts (for jQuery tests)
@@ -252,7 +127,6 @@ jobs:
           retention-days: 1
 
       - name: Move packages
-        if: needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none'
         run: |
           mv ./packages/devextreme/artifacts/npm/devextreme/*.tgz ./devextreme-installer.tgz
           mv ./packages/devextreme/artifacts/npm/devextreme-dist/*.tgz ./devextreme-dist-installer.tgz
@@ -261,7 +135,6 @@ jobs:
           mv ./packages/devextreme-vue/npm/*.tgz ./devextreme-vue-installer.tgz
 
       - name: Copy build artifacts
-        if: needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none'
         uses: actions/upload-artifact@v7
         with:
           name: devextreme-sources
@@ -276,12 +149,10 @@ jobs:
     name: Build vendor bundles (React, Vue)
     runs-on: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || 'devextreme-shr2' }}
     timeout-minutes: 15
-    needs: [check-should-run, determine-framework-tests-scope, build-devextreme]
+    needs: [check-should-run, build-devextreme]
     if: |
       !cancelled() &&
       needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success' &&
-      needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none' &&
       needs.build-devextreme.result == 'success'
     env:
       NODE_OPTIONS: --max-old-space-size=8192
@@ -337,12 +208,10 @@ jobs:
     name: ${{ matrix.SHARD_TOTAL == 1 && format('Build demos ({0})', matrix.FRAMEWORK) || format('Build demos ({0} {1}/{2})', matrix.FRAMEWORK, matrix.SHARD_INDEX, matrix.SHARD_TOTAL) }}
     runs-on: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || 'devextreme-shr2' }}
     timeout-minutes: 30
-    needs: [check-should-run, determine-framework-tests-scope, build-devextreme, build-vendor-bundles]
+    needs: [check-should-run, build-devextreme, build-vendor-bundles]
     if: |
       !cancelled() &&
       needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success' &&
-      needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none' &&
       needs.build-devextreme.result == 'success' &&
       needs.build-vendor-bundles.result == 'success'
     env:
@@ -437,12 +306,10 @@ jobs:
 
   lint:
     name: Check TS and lint code base
-    needs: [check-should-run, determine-framework-tests-scope, build-devextreme]
+    needs: [check-should-run, build-devextreme]
     if: |
       !cancelled() &&
       needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success' &&
-      needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none' &&
       needs.build-devextreme.result == 'success'
 
     runs-on: ubuntu-latest
@@ -452,14 +319,6 @@ jobs:
     - name: Get sources
       uses: actions/checkout@v6
 
-    - name: Download artifacts
-      if: github.event_name == 'pull_request'
-      uses: actions/download-artifact@v8
-      with:
-        name: changed-demos
-        path: apps/demos
-      continue-on-error: true
-
     - name: Download devextreme sources
       uses: actions/download-artifact@v8
       with:
@@ -512,7 +371,6 @@ jobs:
 
     - name: Run lint on all demos
       id: lint_all
-      if: needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'all'
       continue-on-error: true
       working-directory: apps/demos
       env:
@@ -520,51 +378,19 @@ jobs:
         NODE_OPTIONS: --max-old-space-size=8192
       run: pnpm exec nx lint
 
-    - name: Run lint on changed demos
-      id: lint_changed
-      if: needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'changed'
-      continue-on-error: true
-      working-directory: apps/demos
-      env:
-        DEBUG: 'eslint:cli-engine,stylelint:standalone'
-      run: |
-        pnpm exec nx lint-non-demos
-
-        if [ -f "changed-files.json" ]; then
-          echo "Running lint-demos on changed files"
-          CHANGED_DEMOS=$(jq -r '.[].filename' changed-files.json \
-            | grep '^apps/demos/Demos/' \
-            | sed 's|^apps/demos/||' \
-            | while read f; do
-                [ -f "$f" ] && echo "$f"
-              done \
-            | tr '\n' ' ')
-          if [ ! -z "$CHANGED_DEMOS" ]; then
-            echo "Changed demo files: $CHANGED_DEMOS"
-            pnpm run eslint $CHANGED_DEMOS
-          else
-            echo "No demo files changed, skipping lint-demos"
-          fi
-        else
-          echo "changed-files.json not found"
-          pnpm run lint-demos
-        fi
-
     - name: Check TS and lint results
       if: always()
       env:
         TS_VUE_OUTCOME: ${{ steps.ts_vue.outcome }}
         TS_REACT_OUTCOME: ${{ steps.ts_react.outcome }}
         LINT_ALL_OUTCOME: ${{ steps.lint_all.outcome }}
-        LINT_CHANGED_OUTCOME: ${{ steps.lint_changed.outcome }}
       run: |
         failed=0
 
         for check in \
           "Demos - Check Vue TS:$TS_VUE_OUTCOME" \
           "Demos - Check React TS:$TS_REACT_OUTCOME" \
-          "Run lint on all demos:$LINT_ALL_OUTCOME" \
-          "Run lint on changed demos:$LINT_CHANGED_OUTCOME"; do
+          "Run lint on all demos:$LINT_ALL_OUTCOME"; do
           name="${check%%:*}"
           outcome="${check#*:}"
 
@@ -576,124 +402,14 @@ jobs:
 
         exit "$failed"
 
-  check-generated-demos-changed:
-    name: Check generated demos (changed only)
-    runs-on: devextreme-shr2
-    timeout-minutes: 20
-    needs: [check-should-run, get-changes, build-devextreme, determine-framework-tests-scope]
-    if: |
-      !cancelled() &&
-      needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success' &&
-      needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'changed' &&
-      needs.build-devextreme.result == 'success'
-
-    steps:
-    - name: Get sources
-      uses: actions/checkout@v6
-
-    - name: Download changed demos
-      uses: actions/download-artifact@v8
-      with:
-        name: changed-demos
-        path: apps/demos
-      continue-on-error: true
-
-    - name: Detect changed React TS demos
-      id: changed-react-demos
-      working-directory: apps/demos
-      run: |
-        if [ ! -f "changed-files.json" ]; then
-          echo "changed-files.json not found, skipping generated JS demos check"
-          echo "has-react-demos=false" >> $GITHUB_OUTPUT
-          exit 0
-        fi
-
-        jq -r '.[].filename' changed-files.json \
-          | grep '/React/' \
-          | grep -E '\.tsx?$' \
-          | sed 's|^apps/demos/||' \
-          | sed -E 's|/[^/]*\.tsx?$||' \
-          | sort \
-          | uniq > changed-react-demos.txt || true
-
-        if [ -s changed-react-demos.txt ]; then
-          echo "Changed React demos:"
-          cat changed-react-demos.txt
-          echo "has-react-demos=true" >> $GITHUB_OUTPUT
-        else
-          echo "No React demos found in changed files, skipping conversion"
-          echo "has-react-demos=false" >> $GITHUB_OUTPUT
-        fi
-
-    - uses: pnpm/action-setup@v6
-      if: steps.changed-react-demos.outputs.has-react-demos == 'true'
-      with:
-        run_install: false
-
-    - name: Use Node.js
-      if: steps.changed-react-demos.outputs.has-react-demos == 'true'
-      uses: actions/setup-node@v6
-      with:
-        node-version-file: '.node-version'
-
-    - name: Download devextreme sources
-      if: steps.changed-react-demos.outputs.has-react-demos == 'true'
-      uses: actions/download-artifact@v8
-      with:
-        name: devextreme-sources
-
-    - name: Get pnpm store directory
-      if: steps.changed-react-demos.outputs.has-react-demos == 'true'
-      shell: bash
-      run: |
-        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-    - uses: actions/cache/restore@v5
-      if: steps.changed-react-demos.outputs.has-react-demos == 'true'
-      name: Restore pnpm cache
-      with:
-        path: ${{ env.STORE_PATH }}
-        key: ${{ runner.os }}-pnpm-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-pnpm-cache
-
-    - name: Install dependencies
-      if: steps.changed-react-demos.outputs.has-react-demos == 'true'
-      run: pnpm install --frozen-lockfile
-
-    - name: Install tgz
-      if: steps.changed-react-demos.outputs.has-react-demos == 'true'
-      working-directory: apps/demos
-      run: pnpm add --ignore-workspace --allow-build=core-js --allow-build=inferno devextreme-aspnet-data@5.1.0 devextreme-aspnet-data-nojquery@5.1.0 ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz && rm -f pnpm-workspace.yaml pnpm-lock.yaml
-
-    - name: Check generated JS demos
-      if: steps.changed-react-demos.outputs.has-react-demos == 'true'
-      working-directory: apps/demos
-      run: |
-        echo "Running convert-to-js on changed files only"
-        xargs -r pnpm run convert-to-js < changed-react-demos.txt
-
-        git add ./Demos -N
-
-        if git diff --exit-code . ':!package.json' ; then
-          echo "Generated JS demos are up-to-date"
-        else
-          echo "Generated JS demos are outdated. Execute 'pnpm run convert-to-js split' and commit changes."
-          echo "If you see another diff, ensure that extra listed files have LF endings."
-          exit 1
-        fi
-
   check-generated-demos-all:
     name: Check generated demos
     runs-on: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || 'devextreme-shr2' }}
     timeout-minutes: 20
-    needs: [check-should-run, build-devextreme, determine-framework-tests-scope]
+    needs: [check-should-run, build-devextreme]
     if: |
       !cancelled() &&
       needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success' &&
-      needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'all' &&
       needs.build-devextreme.result == 'success'
 
     steps:
@@ -751,16 +467,25 @@ jobs:
         fi
 
   testcafe-jquery:
-    needs: [check-should-run, build-devextreme, determine-framework-tests-scope, determine-jquery-test-matrix]
+    needs: [check-should-run, build-devextreme]
     if: |
       !cancelled() &&
       needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success' &&
-      needs.determine-jquery-test-matrix.result == 'success' &&
       needs.build-devextreme.result == 'success'
     strategy:
       fail-fast: false
-      matrix: ${{ fromJson(needs.determine-jquery-test-matrix.outputs.matrix) }}
+      matrix:
+        include:
+          - { STRATEGY: screenshots,   THEME: material.blue.light, CONSTEL: jquery(1/3) }
+          - { STRATEGY: screenshots,   THEME: material.blue.light, CONSTEL: jquery(2/3) }
+          - { STRATEGY: screenshots,   THEME: material.blue.light, CONSTEL: jquery(3/3) }
+          - { STRATEGY: screenshots,   THEME: fluent.blue.light,   CONSTEL: jquery(1/3) }
+          - { STRATEGY: screenshots,   THEME: fluent.blue.light,   CONSTEL: jquery(2/3) }
+          - { STRATEGY: screenshots,   THEME: fluent.blue.light,   CONSTEL: jquery(3/3) }
+          - { STRATEGY: accessibility, THEME: material.blue.light, CONSTEL: jquery }
+          - { STRATEGY: accessibility, THEME: fluent.blue.light,   CONSTEL: jquery }
+          - { STRATEGY: accessibility, THEME: material.blue.dark,  CONSTEL: jquery }
+          - { STRATEGY: accessibility, THEME: fluent.blue.dark,    CONSTEL: jquery }
     env:
       ACCESSIBILITY_TESTCAFE_REPORT_PATH: "accessibility_testcafe_report"
 
@@ -909,12 +634,10 @@ jobs:
         if-no-files-found: ignore
 
   testcafe-frameworks-all:
-    needs: [check-should-run, determine-framework-tests-scope, build-demos, build-vendor-bundles]
+    needs: [check-should-run, build-demos, build-vendor-bundles]
     if: |
       !cancelled() &&
       needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success' &&
-      needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'all' &&
       needs.build-demos.result == 'success'
     strategy:
       fail-fast: false
@@ -1096,176 +819,10 @@ jobs:
         path: ${{ github.workspace }}/apps/demos/testing/artifacts/compared-screenshots/**/*
         if-no-files-found: ignore
 
-  testcafe-frameworks-changed:
-    needs: [check-should-run, determine-framework-tests-scope, build-demos, build-vendor-bundles]
-    if: |
-      !cancelled() &&
-      needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success' &&
-      needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'changed' &&
-      needs.build-demos.result == 'success'
-    strategy:
-      fail-fast: false
-      matrix:
-        CONSTEL: [react, vue, angular]
-        THEME: ['fluent.blue.light']
-
-    runs-on: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || 'devextreme-shr2' }}
-    name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }}
-    timeout-minutes: 60
-
-    steps:
-      - name: Get sources
-        uses: actions/checkout@v6
-
-      - name: Setup Chrome
-        uses: ./.github/actions/setup-chrome
-        with:
-          chrome-version: '150.0.7871.181'
-
-      - name: Use Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: '.node-version'
-
-      - name: Download devextreme sources
-        uses: actions/download-artifact@v8
-        with:
-          name: devextreme-sources
-
-      - name: Download changed demos
-        uses: actions/download-artifact@v8
-        with:
-          name: changed-demos
-          path: apps/demos
-        continue-on-error: true
-
-      - uses: pnpm/action-setup@v6
-        with:
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache/restore@v5
-        name: Restore pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-cache
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Install tgz
-        working-directory: apps/demos
-        run: pnpm add --ignore-workspace --allow-build=core-js --allow-build=inferno devextreme-aspnet-data@5.1.0 devextreme-aspnet-data-nojquery@5.1.0 ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz && rm -f pnpm-workspace.yaml pnpm-lock.yaml
-
-      - name: Download demo bundles (React)
-        if: matrix.CONSTEL == 'react'
-        uses: actions/download-artifact@v8
-        with:
-          name: devextreme-bundles-React
-          path: apps/demos/.demo-bundles/react
-
-      - name: Download demo bundles (Vue)
-        if: matrix.CONSTEL == 'vue'
-        uses: actions/download-artifact@v8
-        with:
-          name: devextreme-bundles-Vue
-          path: apps/demos/.demo-bundles/vue
-
-      # build-demos shards Angular 3 ways regardless of how it's tested here.
-      - name: Download demo bundles (Angular shard 1)
-        if: matrix.CONSTEL == 'angular'
-        uses: actions/download-artifact@v8
-        with:
-          name: devextreme-bundles-Angular-shard1
-          path: apps/demos/.demo-bundles/angular-shard1
-
-      - name: Download demo bundles (Angular shard 2)
-        if: matrix.CONSTEL == 'angular'
-        uses: actions/download-artifact@v8
-        with:
-          name: devextreme-bundles-Angular-shard2
-          path: apps/demos/.demo-bundles/angular-shard2
-
-      - name: Download demo bundles (Angular shard 3)
-        if: matrix.CONSTEL == 'angular'
-        uses: actions/download-artifact@v8
-        with:
-          name: devextreme-bundles-Angular-shard3
-          path: apps/demos/.demo-bundles/angular-shard3
-
-      - name: Download changes artifacts
-        uses: actions/download-artifact@v8
-        with:
-          name: changed-demos
-          path: apps/demos
-
-      # No-op for angular demos (no manifest — see build-vendor-bundles.js).
-      - name: Download vendor bundles
-        uses: actions/download-artifact@v8
-        with:
-          name: devextreme-vendor-bundles
-          path: apps/demos/bundles/vendor
-
-      - name: Unpack demo bundles
-        run: |
-          shopt -s nullglob
-          archives=(apps/demos/.demo-bundles/*/demo-bundles.tgz)
-          if [ ${#archives[@]} -eq 0 ]; then
-            echo "No demo bundle archives downloaded for constellation '${{ matrix.CONSTEL }}'" >&2
-            exit 1
-          fi
-          for archive in "${archives[@]}"; do
-            tar -xzf "$archive" -C apps/demos
-          done
-          rm -rf apps/demos/.demo-bundles
-          echo "Unpacked $(find apps/demos/Demos -name 'bundle.js' | wc -l) demo bundle(s)"
-
-      - name: Run Web Server
-        run: |
-          python -m http.server 8080 &
-          python -m http.server 8081 &
-          python -m http.server 8082 &
-          python -m http.server 8083 &
-
-      - name: Run TestCafe tests
-        shell: bash
-        working-directory: apps/demos
-        env:
-          CHANGEDFILEINFOSPATH: changed-files.json
-          BROWSERS: chrome:headless --window-size=1200,800 --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl=swiftshader --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
-          # DEBUG: hammerhead:*,testcafe:*
-          CONCURRENCY: 1
-          CONSTEL: ${{ matrix.CONSTEL }}
-          THEME: ${{ matrix.THEME }}
-          # DISABLE_DEMO_TEST_SETTINGS: all # Uncomment to ignore all the visualtestrc.json settings
-          # DISABLE_DEMO_TEST_SETTINGS: ignore # Uncomment to ignore the `ignore` field
-          # DISABLE_DEMO_TEST_SETTINGS: comparison-options # Uncomment to ignore the `comparison-options` field
-          CI_ENV: true # The `ignore` field in the visualtestrc.json should be disabled when running test locally
-        run: pnpm exec nx test-testcafe
-
-      - name: Sanitize job name
-        if: ${{ failure() }}
-        run: echo "JOB_NAME=$(echo "${{ matrix.CONSTEL }}-${{ matrix.THEME }}" | tr '/' '-')" >> $GITHUB_ENV
-
-      - name: Copy screenshots artifacts
-        if: ${{ failure() }}
-        uses: actions/upload-artifact@v7
-        with:
-          name: screenshots-${{ env.JOB_NAME }}
-          path: ${{ github.workspace }}/apps/demos/testing/artifacts/compared-screenshots/**/*
-          if-no-files-found: ignore
-
   merge-artifacts:
     runs-on: ubuntu-latest
-    needs: [testcafe-jquery, testcafe-frameworks-all, testcafe-frameworks-changed]
-    if: ${{ !cancelled() && (needs.testcafe-jquery.result == 'failure' || needs.testcafe-frameworks-all.result == 'failure' || needs.testcafe-frameworks-changed.result == 'failure') }}
+    needs: [testcafe-jquery, testcafe-frameworks-all]
+    if: ${{ !cancelled() && (needs.testcafe-jquery.result == 'failure' || needs.testcafe-frameworks-all.result == 'failure') }}
 
     steps:
       - name: Merge jQuery screenshot artifacts
@@ -1278,7 +835,7 @@ jobs:
           delete-merged: true
 
       - name: Merge React screenshot artifacts
-        if: needs.testcafe-frameworks-all.result == 'failure' || needs.testcafe-frameworks-changed.result == 'failure'
+        if: needs.testcafe-frameworks-all.result == 'failure'
         uses: actions/upload-artifact/merge@v7
         continue-on-error: true
         with:
@@ -1287,7 +844,7 @@ jobs:
           delete-merged: true
 
       - name: Merge Vue screenshot artifacts
-        if: needs.testcafe-frameworks-all.result == 'failure' || needs.testcafe-frameworks-changed.result == 'failure'
+        if: needs.testcafe-frameworks-all.result == 'failure'
         uses: actions/upload-artifact/merge@v7
         continue-on-error: true
         with:
@@ -1296,7 +853,7 @@ jobs:
           delete-merged: true
 
       - name: Merge Angular screenshot artifacts
-        if: needs.testcafe-frameworks-all.result == 'failure' || needs.testcafe-frameworks-changed.result == 'failure'
+        if: needs.testcafe-frameworks-all.result == 'failure'
         uses: actions/upload-artifact/merge@v7
         continue-on-error: true
         with:
@@ -1386,12 +943,10 @@ jobs:
 
   csp-check-frameworks:
     name: ${{ matrix.SHARD_TOTAL == 1 && format('CSP check ({0})', matrix.FRAMEWORK) || format('CSP check ({0} {1}/{2})', matrix.FRAMEWORK, matrix.SHARD_INDEX, matrix.SHARD_TOTAL) }}
-    needs: [check-should-run, determine-framework-tests-scope, build-devextreme]
+    needs: [check-should-run, build-devextreme]
     if: |
       !cancelled() &&
       needs.check-should-run.outputs.should-run == 'true' &&
-      needs.determine-framework-tests-scope.result == 'success' &&
-      needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none' &&
       needs.build-devextreme.result == 'success'
     strategy:
       fail-fast: false

From d2dd8ada2cf22dad659b1781091307ff9bd0a646 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Mon, 7 Sep 2026 10:21:41 +0000
Subject: [PATCH 12/45] Overlay: SpeedDialAction has no right offset when a
 vertical scrollbar appears after initial render (T1334663) (#35062)

---
 .../button/floatingActionViewport.ts          |  40 +++++
 .../common/core/animation/m_position.ts       |  12 +-
 .../__tests__/document_size_callbacks.test.ts | 161 ++++++++++++++++++
 .../core/utils/document_size_callbacks.ts     |  99 +++++++++++
 .../js/__internal/ui/overlay/overlay.ts       |  16 ++
 .../DevExpress.animation/position.tests.js    | 100 ++++++++++-
 .../DevExpress.ui.widgets/overlay.tests.js    |  79 +++++++++
 7 files changed, 496 insertions(+), 11 deletions(-)
 create mode 100644 e2e/testcafe-devextreme/tests/navigation/button/floatingActionViewport.ts
 create mode 100644 packages/devextreme/js/__internal/core/utils/__tests__/document_size_callbacks.test.ts
 create mode 100644 packages/devextreme/js/__internal/core/utils/document_size_callbacks.ts

diff --git a/e2e/testcafe-devextreme/tests/navigation/button/floatingActionViewport.ts b/e2e/testcafe-devextreme/tests/navigation/button/floatingActionViewport.ts
new file mode 100644
index 000000000000..a9eb89df1ac8
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/navigation/button/floatingActionViewport.ts
@@ -0,0 +1,40 @@
+import { ClientFunction, Selector } from 'testcafe';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+import { appendElementTo } from '../../../helpers/domUtils';
+
+const OVERLAY_CONTENT_CLASS = 'dx-overlay-content';
+const FA_MAIN_BUTTON_CLASS = 'dx-fa-button-main';
+const FAB_OFFSET = 16;
+
+const getViewportClientSize = ClientFunction(() => ({
+  width: document.documentElement.clientWidth,
+  height: document.documentElement.clientHeight,
+}));
+
+fixture`FloatingAction - visible area`
+  .page(url(__dirname, '../../container.html'));
+
+test('FAB should keep its offset from the visible area edges after scrollbars appear (T1334663)', async (t) => {
+  const fabContent = Selector(`.${FA_MAIN_BUTTON_CLASS} .${OVERLAY_CONTENT_CLASS}`);
+  const initialSize = await getViewportClientSize();
+
+  await t
+    .expect(fabContent.getBoundingClientRectProperty('right'))
+    .within(initialSize.width - FAB_OFFSET - 1, initialSize.width - FAB_OFFSET + 1)
+    .expect(fabContent.getBoundingClientRectProperty('bottom'))
+    .within(initialSize.height - FAB_OFFSET - 1, initialSize.height - FAB_OFFSET + 1);
+
+  await appendElementTo('#container', 'div', 'tall-content', { width: '3000px', height: '3000px' });
+
+  const sizeWithScrollbars = await getViewportClientSize();
+
+  await t
+    .expect(fabContent.getBoundingClientRectProperty('right'))
+    .within(sizeWithScrollbars.width - FAB_OFFSET - 1, sizeWithScrollbars.width - FAB_OFFSET + 1)
+    .expect(fabContent.getBoundingClientRectProperty('bottom'))
+    .within(sizeWithScrollbars.height - FAB_OFFSET - 1, sizeWithScrollbars.height - FAB_OFFSET + 1);
+}).before(async () => createWidget('dxSpeedDialAction', {
+  icon: 'add',
+  visible: true,
+}));
diff --git a/packages/devextreme/js/__internal/common/core/animation/m_position.ts b/packages/devextreme/js/__internal/common/core/animation/m_position.ts
index 0c4089d10c8d..ce6207053ab0 100644
--- a/packages/devextreme/js/__internal/common/core/animation/m_position.ts
+++ b/packages/devextreme/js/__internal/common/core/animation/m_position.ts
@@ -2,7 +2,6 @@ import { move, resetPosition } from '@js/common/core/animation/translator';
 import devices from '@js/core/devices';
 import domAdapter from '@js/core/dom_adapter';
 import $ from '@js/core/renderer';
-import browser from '@js/core/utils/browser';
 import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
 import { getBoundingRect } from '@js/core/utils/position';
@@ -21,7 +20,6 @@ const horzRe = /left|right/;
 const vertRe = /top|bottom/;
 const collisionRe = /fit|flip|none/;
 const scaleRe = /scale\(.+?\)/;
-const IS_SAFARI = browser.safari;
 
 const normalizeAlign = function (raw) {
   const result = {
@@ -258,14 +256,18 @@ const calculatePosition = function (what, options) {
     if (isWindow(of[0])) {
       h.atLocation = of.scrollLeft();
       v.atLocation = of.scrollTop();
-      if (devices.real().deviceType === 'phone' && of[0].visualViewport) {
+      const device = devices.real();
+
+      if (device.deviceType === 'phone' && of[0].visualViewport) {
         h.atLocation = Math.max(h.atLocation, of[0].visualViewport.offsetLeft);
         v.atLocation = Math.max(v.atLocation, of[0].visualViewport.offsetTop);
         h.atSize = of[0].visualViewport.width;
         v.atSize = of[0].visualViewport.height;
       } else {
-        h.atSize = of[0].innerWidth > of[0].outerWidth ? of[0].innerWidth : getWidth(of);
-        v.atSize = of[0].innerHeight > of[0].outerHeight || IS_SAFARI ? of[0].innerHeight : getHeight(of);
+        const isIos = device.platform === 'ios';
+
+        h.atSize = getWidth(of);
+        v.atSize = isIos ? of[0].innerHeight : getHeight(of);
       }
     } else if (of[0].nodeType === 9) {
       h.atLocation = 0;
diff --git a/packages/devextreme/js/__internal/core/utils/__tests__/document_size_callbacks.test.ts b/packages/devextreme/js/__internal/core/utils/__tests__/document_size_callbacks.test.ts
new file mode 100644
index 000000000000..2b5f4d05e1cf
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/utils/__tests__/document_size_callbacks.test.ts
@@ -0,0 +1,161 @@
+import {
+  afterEach, describe, expect, it, jest,
+} from '@jest/globals';
+import domAdapter from '@js/core/dom_adapter';
+import documentSizeCallbacks from '@ts/core/utils/document_size_callbacks';
+
+type DocumentElement = ReturnType<typeof domAdapter.getDocumentElement>;
+
+interface Environment {
+  documentElement: { clientWidth: number; clientHeight: number };
+  resizeVisualViewport: () => void;
+  addEventListenerSpy: jest.SpiedFunction<EventTarget['addEventListener']>;
+  removeEventListenerSpy: jest.SpiedFunction<EventTarget['removeEventListener']>;
+}
+
+function setup(): Environment {
+  const documentElement = { clientWidth: 1000, clientHeight: 800 };
+  const visualViewport = new EventTarget();
+
+  jest.spyOn(domAdapter, 'getDocumentElement')
+    .mockImplementation(() => documentElement as unknown as DocumentElement);
+  Object.defineProperty(window, 'visualViewport', { value: visualViewport, configurable: true });
+  window.innerWidth = 1024;
+  window.innerHeight = 768;
+
+  return {
+    documentElement,
+    resizeVisualViewport: (): void => { visualViewport.dispatchEvent(new Event('resize')); },
+    addEventListenerSpy: jest.spyOn(visualViewport, 'addEventListener'),
+    removeEventListenerSpy: jest.spyOn(visualViewport, 'removeEventListener'),
+  };
+}
+
+describe('documentSizeCallbacks', () => {
+  const addedHandlers: (() => void)[] = [];
+
+  function addHandler(): jest.Mock {
+    const handler = jest.fn();
+
+    addedHandlers.push(handler);
+    documentSizeCallbacks.add(handler);
+
+    return handler;
+  }
+
+  afterEach(() => {
+    addedHandlers.splice(0).forEach((handler) => documentSizeCallbacks.remove(handler));
+    delete (window as { visualViewport?: VisualViewport }).visualViewport;
+    jest.restoreAllMocks();
+  });
+
+  it('should listen to the visual viewport resize once, no matter how many handlers are added', () => {
+    const { addEventListenerSpy } = setup();
+
+    addHandler();
+    addHandler();
+
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
+    expect(addEventListenerSpy.mock.calls[0][0]).toBe('resize');
+  });
+
+  it('should not call handlers when the document size has not changed', () => {
+    const { resizeVisualViewport } = setup();
+    const handler = addHandler();
+
+    resizeVisualViewport();
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('should call handlers when a scrollbar changes the client width', () => {
+    const { documentElement, resizeVisualViewport } = setup();
+    const handler = addHandler();
+
+    documentElement.clientWidth = 985;
+    resizeVisualViewport();
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call handlers when a scrollbar changes the client height', () => {
+    const { documentElement, resizeVisualViewport } = setup();
+    const handler = addHandler();
+
+    documentElement.clientHeight = 785;
+    resizeVisualViewport();
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('should leave a window resize to the window resize callbacks', () => {
+    const { documentElement, resizeVisualViewport } = setup();
+    const handler = addHandler();
+
+    window.innerWidth = 1224;
+    documentElement.clientWidth = 1200;
+    resizeVisualViewport();
+
+    expect(handler).not.toHaveBeenCalled();
+
+    documentElement.clientWidth = 1185;
+    resizeVisualViewport();
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('should hold a handler once even when it is added twice', () => {
+    const { documentElement, resizeVisualViewport, removeEventListenerSpy } = setup();
+    const handler = addHandler();
+
+    documentSizeCallbacks.add(handler);
+
+    documentElement.clientWidth = 985;
+    resizeVisualViewport();
+
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    documentSizeCallbacks.remove(handler);
+
+    expect(removeEventListenerSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should stop listening once the last handler is removed', () => {
+    const { removeEventListenerSpy } = setup();
+    const first = addHandler();
+
+    addHandler();
+    documentSizeCallbacks.remove(first);
+
+    expect(removeEventListenerSpy).not.toHaveBeenCalled();
+
+    documentSizeCallbacks.remove(addedHandlers[1]);
+
+    expect(removeEventListenerSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should measure the document anew when the first handler is added again', () => {
+    const { documentElement, resizeVisualViewport } = setup();
+    const first = addHandler();
+
+    documentSizeCallbacks.remove(first);
+    documentElement.clientWidth = 985;
+
+    const second = addHandler();
+
+    resizeVisualViewport();
+
+    expect(second).not.toHaveBeenCalled();
+  });
+
+  it('should do nothing when the browser has no visual viewport', () => {
+    setup();
+    delete (window as { visualViewport?: VisualViewport }).visualViewport;
+
+    const listenSpy = jest.spyOn(domAdapter, 'listen');
+    const handler = addHandler();
+
+    expect(listenSpy).not.toHaveBeenCalled();
+    expect(() => documentSizeCallbacks.remove(handler)).not.toThrow();
+  });
+});
diff --git a/packages/devextreme/js/__internal/core/utils/document_size_callbacks.ts b/packages/devextreme/js/__internal/core/utils/document_size_callbacks.ts
new file mode 100644
index 000000000000..a9fcb7f7015d
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/utils/document_size_callbacks.ts
@@ -0,0 +1,99 @@
+import domAdapter from '@js/core/dom_adapter';
+import { Callbacks } from '@ts/core/utils/m_callbacks';
+import windowUtils from '@ts/core/utils/m_window';
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+type DocumentSizeHandler = () => void;
+
+interface HandlerList {
+  add: (handler: DocumentSizeHandler) => void;
+  remove: (handler: DocumentSizeHandler) => void;
+  has: () => boolean;
+  fire: () => void;
+}
+
+const callbacks = Callbacks({ unique: true }) as HandlerList;
+
+let removeListener: (() => void) | null = null;
+let previousDocumentSize: Size | null = null;
+let previousWindowSize: Size | null = null;
+
+function getDocumentSize(): Size {
+  const documentElement = domAdapter.getDocumentElement();
+
+  return {
+    width: documentElement.clientWidth,
+    height: documentElement.clientHeight,
+  };
+}
+
+function getWindowSize(): Size {
+  const window: Window = windowUtils.getWindow();
+
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  };
+}
+
+function isSameSize(previous: Size | null, current: Size): boolean {
+  return previous?.width === current.width && previous?.height === current.height;
+}
+
+function handleVisualViewportResize(): void {
+  const documentSize = getDocumentSize();
+  const windowSize = getWindowSize();
+  const isDocumentSizeChanged = !isSameSize(previousDocumentSize, documentSize);
+  const isWindowSizeChanged = !isSameSize(previousWindowSize, windowSize);
+
+  previousDocumentSize = documentSize;
+  previousWindowSize = windowSize;
+
+  if (isDocumentSizeChanged && !isWindowSizeChanged) {
+    callbacks.fire();
+  }
+}
+
+function getVisualViewport(): VisualViewport | null {
+  if (!windowUtils.hasWindow()) {
+    return null;
+  }
+
+  const window: Window = windowUtils.getWindow();
+
+  return window.visualViewport;
+}
+
+function add(handler: DocumentSizeHandler): void {
+  const visualViewport = getVisualViewport();
+
+  if (!visualViewport) {
+    return;
+  }
+
+  callbacks.add(handler);
+
+  if (!removeListener) {
+    previousDocumentSize = getDocumentSize();
+    previousWindowSize = getWindowSize();
+    removeListener = domAdapter.listen(visualViewport, 'resize', handleVisualViewportResize);
+  }
+}
+
+function remove(handler: DocumentSizeHandler): void {
+  callbacks.remove(handler);
+
+  if (removeListener && !callbacks.has()) {
+    removeListener();
+    removeListener = null;
+    previousDocumentSize = null;
+    previousWindowSize = null;
+  }
+}
+
+export const documentSizeCallbacks = { add, remove };
+export default documentSizeCallbacks;
diff --git a/packages/devextreme/js/__internal/ui/overlay/overlay.ts b/packages/devextreme/js/__internal/ui/overlay/overlay.ts
index 0b4a3a9bc546..e1a18de96da5 100644
--- a/packages/devextreme/js/__internal/ui/overlay/overlay.ts
+++ b/packages/devextreme/js/__internal/ui/overlay/overlay.ts
@@ -39,6 +39,7 @@ import type {
 } from '@js/events';
 import type { dxOverlayAnimation, Properties } from '@js/ui/overlay';
 import uiErrors from '@js/ui/widget/ui.errors';
+import documentSizeCallbacks from '@ts/core/utils/document_size_callbacks';
 import domUtils from '@ts/core/utils/m_dom';
 import selectors from '@ts/core/utils/m_selectors';
 import windowUtils from '@ts/core/utils/m_window';
@@ -262,6 +263,8 @@ class Overlay<
 
   _hideTopOverlayHandler!: () => void;
 
+  _documentSizeChangedHandler?: () => void;
+
   _hideAnimationProcessing?: boolean;
 
   _showAnimationProcessing?: boolean;
@@ -1104,6 +1107,19 @@ class Overlay<
     if (windowUtils.hasWindow()) {
       this._toggleHideTopOverlayCallback(enabled);
       this._toggleHideOnParentsScrollSubscription(enabled);
+      this._toggleDocumentSizeSubscription(enabled);
+    }
+  }
+
+  _toggleDocumentSizeSubscription(subscribe: boolean): void {
+    this._documentSizeChangedHandler ??= (): void => {
+      this._dimensionChanged();
+    };
+
+    if (subscribe) {
+      documentSizeCallbacks.add(this._documentSizeChangedHandler);
+    } else {
+      documentSizeCallbacks.remove(this._documentSizeChangedHandler);
     }
   }
 
diff --git a/packages/devextreme/testing/tests/DevExpress.animation/position.tests.js b/packages/devextreme/testing/tests/DevExpress.animation/position.tests.js
index 84f4b67bd58c..d5ee42099d6a 100644
--- a/packages/devextreme/testing/tests/DevExpress.animation/position.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.animation/position.tests.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 import positionUtils from 'common/core/animation/position';
 import translator from '__internal/common/core/animation/translatorModule';
 import browser from 'core/utils/browser';
+import devices from '__internal/core/m_devices';
 import fixtures from '../../helpers/positionFixtures.js';
 import { implementationsMap } from 'core/utils/size';
 import { getWindow } from 'core/utils/window.js';
@@ -942,23 +943,30 @@ const testCollision = (name, fixtureName, params, expectedHorzDist, expectedVert
         assert.deepEqual(positionUtils.offset($event), { left: 100, top: 200 }, 'position.offset() is correct');
     });
 
-    QUnit.test('position should return window.innerHeight if window.outerHeight < window.innerHeight', function(assert) {
+    QUnit.test('position should measure the window by its client height whatever window.outerHeight reports', function(assert) {
         const $what = $('#what').height(300);
         const initialInnerHeight = window.innerHeight;
         const initialOuterHeight = window.outerHeight;
 
+        const heightStub = sinon.stub(implementationsMap, 'getHeight').returns(1000);
+
         try {
             window.innerHeight = 500;
-            window.outerHeight = 200;
 
-            const resultPosition = setupPosition($what, {
-                of: $(window)
-            });
+            // 0 is what the browser reports before the first frame, a smaller value comes from a zoomed out page
+            [0, 200].forEach((outerHeight) => {
+                window.outerHeight = outerHeight;
+
+                const resultPosition = setupPosition($what, {
+                    of: $(window)
+                });
 
-            assert.roughEqual(resultPosition.v.location, 100, 50, 'vertical location is correct');
+                assert.roughEqual(resultPosition.v.location, 350, 50, `vertical location is correct, outerHeight is ${outerHeight}`);
+            });
         } finally {
             window.innerHeight = initialInnerHeight;
             window.outerHeight = initialOuterHeight;
+            heightStub.restore();
         }
     });
 
@@ -1018,6 +1026,86 @@ const testCollision = (name, fixtureName, params, expectedHorzDist, expectedVert
         }
     });
 
+    QUnit.test('position should measure the window by its client height on desktop Safari', function(assert) {
+        const $what = $('#what').height(300);
+        const initialInnerHeight = window.innerHeight;
+        const initialSafari = browser.safari;
+
+        const heightStub = sinon.stub(implementationsMap, 'getHeight').returns(1000);
+        const devicesStub = sinon.stub(devices, 'real').returns({ deviceType: 'desktop', platform: 'generic' });
+
+        try {
+            window.innerHeight = 500;
+            browser.safari = true;
+
+            const resultPosition = setupPosition($what, {
+                of: $(window)
+            });
+
+            assert.roughEqual(resultPosition.v.location, 350, 50, 'vertical location is correct');
+        } finally {
+            window.innerHeight = initialInnerHeight;
+            browser.safari = initialSafari;
+            heightStub.restore();
+            devicesStub.restore();
+        }
+    });
+
+    QUnit.test('position should measure the window by window.innerHeight on iOS whatever the browser is', function(assert) {
+        const $what = $('#what').height(300);
+        const initialInnerHeight = window.innerHeight;
+        const initialSafari = browser.safari;
+
+        const heightStub = sinon.stub(implementationsMap, 'getHeight').returns(1000);
+        const devicesStub = sinon.stub(devices, 'real').returns({ deviceType: 'desktop', platform: 'ios' });
+
+        try {
+            window.innerHeight = 500;
+
+            [true, false].forEach((isSafari) => {
+                browser.safari = isSafari;
+
+                const resultPosition = setupPosition($what, {
+                    of: $(window)
+                });
+
+                assert.roughEqual(resultPosition.v.location, 100, 50, `vertical location is correct, browser.safari is ${isSafari}`);
+            });
+        } finally {
+            window.innerHeight = initialInnerHeight;
+            browser.safari = initialSafari;
+            heightStub.restore();
+            devicesStub.restore();
+        }
+    });
+
+    QUnit.test('position should measure the window by its client width whatever window.outerWidth reports', function(assert) {
+        const $what = $('#what').width(300);
+        const initialInnerWidth = window.innerWidth;
+        const initialOuterWidth = window.outerWidth;
+
+        const widthStub = sinon.stub(implementationsMap, 'getWidth').returns(1000);
+
+        try {
+            window.innerWidth = 500;
+
+            // 0 is what the browser reports before the first frame, a smaller value comes from a zoomed out page
+            [0, 200].forEach((outerWidth) => {
+                window.outerWidth = outerWidth;
+
+                const resultPosition = setupPosition($what, {
+                    of: $(window)
+                });
+
+                assert.roughEqual(resultPosition.h.location, 350, 50, `horizontal location is correct, outerWidth is ${outerWidth}`);
+            });
+        } finally {
+            window.innerWidth = initialInnerWidth;
+            window.outerWidth = initialOuterWidth;
+            widthStub.restore();
+        }
+    });
+
     // T664522
     QUnit.test('setup should call resetPosition with finishTransition argument', function(assert) {
         const resetPositionStub = sinon.stub(translator, 'resetPosition').callsFake(($element, finishTransition) => {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js
index 9b60cc53f2b4..44d0d3583082 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js
@@ -20,6 +20,7 @@ import * as zIndex from '__internal/ui/overlay/z_index';
 import 'ui/scroll_view/ui.scrollable';
 import selectors from '__internal/core/utils/m_selectors';
 import swatch from '__internal/core/utils/swatch_container';
+import documentSizeCallbacks from '__internal/core/utils/document_size_callbacks';
 import keyboardMock from '../../helpers/keyboardMock.js';
 import pointerMock from '../../helpers/pointerMock.js';
 import nativePointerMock from '../../helpers/nativePointerMock.js';
@@ -4469,3 +4470,81 @@ QUnit.module('Memory Leaks', {
         assert.strictEqual(positionController._$visualContainer, undefined, 'PositionController._$visualContainer is undefined after dispose');
     });
 });
+
+QUnit.module('document size subscription', {
+    beforeEach: function() {
+        fx.off = true;
+        this.$element = $('#overlay');
+        this.addSpy = sinon.spy(documentSizeCallbacks, 'add');
+        this.removeSpy = sinon.spy(documentSizeCallbacks, 'remove');
+        this.subscribedHandler = () => this.addSpy.lastCall.args[0];
+        this.createOverlay = (options) => {
+            this.overlay = new Overlay(this.$element, options);
+
+            return this.overlay;
+        };
+    },
+    afterEach: function() {
+        if(this.overlay) {
+            this.overlay.dispose();
+        }
+        this.addSpy.restore();
+        this.removeSpy.restore();
+        fx.off = false;
+    }
+}, () => {
+    QUnit.test('overlay should subscribe when shown and unsubscribe when hidden', function(assert) {
+        const overlay = this.createOverlay({ visible: true });
+
+        assert.ok(this.addSpy.calledOnce, 'subscribed while visible');
+
+        const handler = this.subscribedHandler();
+
+        overlay.hide();
+
+        assert.ok(this.removeSpy.calledWith(handler), 'unsubscribed when hidden');
+    });
+
+    QUnit.test('overlay should unsubscribe on dispose', function(assert) {
+        const overlay = this.createOverlay({ visible: true });
+        const handler = this.subscribedHandler();
+
+        overlay.dispose();
+        this.overlay = null;
+
+        assert.ok(this.removeSpy.calledWith(handler), 'unsubscribed on dispose');
+    });
+
+    QUnit.test('geometry should be re-rendered when the visible area changes', function(assert) {
+        const overlay = this.createOverlay({ visible: true });
+        const handler = this.subscribedHandler();
+        const renderGeometrySpy = sinon.spy(overlay, '_renderGeometry');
+
+        handler();
+
+        assert.strictEqual(renderGeometrySpy.callCount, 1, 'geometry is re-rendered');
+    });
+
+    QUnit.test('geometry should be re-rendered for an overlay placed against an element as well', function(assert) {
+        const overlay = this.createOverlay({
+            visible: true,
+            visualContainer: $('#container')
+        });
+        const handler = this.subscribedHandler();
+        const renderGeometrySpy = sinon.spy(overlay, '_renderGeometry');
+
+        handler();
+
+        assert.strictEqual(renderGeometrySpy.callCount, 1, 'geometry is re-rendered');
+    });
+
+    QUnit.test('a visible area change should be handled the same way as a window resize', function(assert) {
+        const overlay = this.createOverlay({ visible: true });
+        const handler = this.subscribedHandler();
+        const dimensionChangedSpy = sinon.spy(overlay, '_dimensionChanged');
+
+        handler();
+
+        assert.strictEqual(dimensionChangedSpy.callCount, 1, '_dimensionChanged is called');
+    });
+});

From dc890c7b3785f34fc96fc33c9e043f32cb9347e4 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Mon, 7 Sep 2026 11:49:18 +0000
Subject: [PATCH 13/45] Styles: lint theme variables for branch duplicates,
 missing !default and dead declarations (#35049)

---
 packages/devextreme-scss/.stylelintrc.json    |   6 +-
 .../scss/widgets/base/_htmlEditor.scss        |  22 +-
 .../scss/widgets/base/_icon_fonts.scss        |   2 +-
 .../scss/widgets/base/_loadIndicator.scss     |   4 +-
 .../scss/widgets/base/_mixins.scss            |   4 +-
 .../scss/widgets/base/_numberBox.scss         |   4 +-
 .../scss/widgets/base/_pagination.scss        |   4 +-
 .../scss/widgets/base/_recurrenceEditor.scss  |   6 +-
 .../scss/widgets/base/_resizable.scss         |   6 +-
 .../scss/widgets/base/_scrollView.scss        |   4 +-
 .../scss/widgets/base/_slider.scss            |   4 +-
 .../base/cardView/header_panel/_index.scss    |   2 +-
 .../scss/widgets/base/colorBox/_index.scss    |   2 +-
 .../scss/widgets/base/colorView/_index.scss   |  24 +-
 .../scss/widgets/base/diagram/_index.scss     |   2 +-
 .../widgets/base/gridBase/_variables.scss     |  26 +-
 .../gridBase/layout/aiChat/_variables.scss    |  12 +-
 .../scss/widgets/base/list/_index.scss        |   2 +-
 .../scss/widgets/base/pivotGrid/_index.scss   |  20 +-
 .../scss/widgets/base/scheduler/_common.scss  |   4 +-
 .../scss/widgets/base/scheduler/_index.scss   |  68 +--
 .../base/scheduler/layout/_header.scss        |   2 +-
 .../widgets/base/scheduler/views/_index.scss  |  26 +-
 .../base/scheduler/views/agenda/_index.scss   |   4 +-
 .../scheduler/views/timelines/_index.scss     |   2 +-
 .../scss/widgets/base/treeList/_index.scss    |  18 +-
 .../scss/widgets/base/treeView/_common.scss   |   2 +-
 .../scss/widgets/fluent/_colors.scss          |   2 +-
 .../scss/widgets/fluent/_sizes.scss           |   4 +-
 .../scss/widgets/fluent/accordion/_sizes.scss |   4 +-
 .../widgets/fluent/actionSheet/_sizes.scss    |   2 +-
 .../scss/widgets/fluent/badge/_sizes.scss     |   4 +-
 .../scss/widgets/fluent/button/_colors.scss   |  47 +--
 .../scss/widgets/fluent/button/_sizes.scss    |   8 +-
 .../scss/widgets/fluent/calendar/_colors.scss |   5 +-
 .../scss/widgets/fluent/cardView/_colors.scss | 218 +++-------
 .../scss/widgets/fluent/cardView/_sizes.scss  | 108 +----
 .../scss/widgets/fluent/chat/_colors.scss     |   4 +-
 .../scss/widgets/fluent/chat/_sizes.scss      |  17 +-
 .../scss/widgets/fluent/colorView/_index.scss |   4 +-
 .../scss/widgets/fluent/common/_mixins.scss   |   2 +-
 .../widgets/fluent/dateRangeBox/_index.scss   |   2 +-
 .../scss/widgets/fluent/dateView/_index.scss  |   2 +-
 .../scss/widgets/fluent/diagram/_index.scss   |   6 +-
 .../widgets/fluent/dropDownButton/_sizes.scss |   4 +-
 .../widgets/fluent/dropDownEditor/_index.scss |   8 +-
 .../widgets/fluent/fileManager/_colors.scss   |   3 -
 .../widgets/fluent/fileManager/_sizes.scss    |   2 +-
 .../widgets/fluent/fileUploader/_index.scss   |   4 +-
 .../widgets/fluent/fileUploader/_sizes.scss   |   4 +-
 .../scss/widgets/fluent/form/_sizes.scss      |   4 +-
 .../scss/widgets/fluent/gantt/_index.scss     |   2 +-
 .../scss/widgets/fluent/gridBase/_colors.scss |  17 +-
 .../scss/widgets/fluent/gridBase/_index.scss  |  10 +-
 .../scss/widgets/fluent/gridBase/_sizes.scss  |  11 +-
 .../widgets/fluent/gridBase/_variables.scss   |  12 +-
 .../fluent/gridBase/layout/aiChat/_sizes.scss |   2 +-
 .../scss/widgets/fluent/informer/_colors.scss |   8 +-
 .../scss/widgets/fluent/list/_index.scss      |   8 +-
 .../scss/widgets/fluent/menuBase/_colors.scss |   2 +-
 .../scss/widgets/fluent/menuBase/_sizes.scss  |   2 +-
 .../scss/widgets/fluent/numberBox/_sizes.scss |  10 +-
 .../scss/widgets/fluent/pivotGrid/_index.scss |  10 +-
 .../scss/widgets/fluent/popup/_index.scss     |   2 +-
 .../scss/widgets/fluent/popup/_sizes.scss     |  10 +-
 .../widgets/fluent/progressBar/_colors.scss   |   6 +-
 .../widgets/fluent/progressBar/_sizes.scss    |   2 +-
 .../widgets/fluent/radioGroup/_sizes.scss     |   3 -
 .../fluent/recurrenceEditor/_index.scss       |   6 +-
 .../widgets/fluent/scheduler/_colors.scss     |   9 +-
 .../scss/widgets/fluent/scheduler/_index.scss |   8 +-
 .../scss/widgets/fluent/scheduler/_sizes.scss |  73 +---
 .../widgets/fluent/scrollView/_index.scss     |   2 +-
 .../widgets/fluent/scrollable/_sizes.scss     |   4 +-
 .../scss/widgets/fluent/slider/_sizes.scss    |   9 -
 .../fluent/speedDialAction/_index.scss        |   4 +-
 .../fluent/speedDialAction/_sizes.scss        |   8 +-
 .../scss/widgets/fluent/splitter/_colors.scss |  14 +-
 .../scss/widgets/fluent/splitter/_sizes.scss  |   2 +-
 .../scss/widgets/fluent/switch/_index.scss    |   6 +-
 .../scss/widgets/fluent/switch/_sizes.scss    |  13 +-
 .../widgets/fluent/tabs/variables/_sizes.scss |  21 +-
 .../scss/widgets/fluent/tagBox/_sizes.scss    |   4 +-
 .../widgets/fluent/textEditor/_colors.scss    |  10 +-
 .../widgets/fluent/textEditor/_index.scss     |   8 +-
 .../widgets/fluent/textEditor/_sizes.scss     |   8 +-
 .../scss/widgets/fluent/tooltip/_sizes.scss   |   4 +-
 .../scss/widgets/fluent/treeView/_sizes.scss  |  17 +-
 .../widgets/fluent/typography/_sizes.scss     |   4 +-
 .../widgets/fluent/validation/_sizes.scss     |   3 -
 .../scss/widgets/generic/_sizes.scss          |   2 +-
 .../scss/widgets/generic/button/_sizes.scss   |   3 -
 .../scss/widgets/generic/cardView/_sizes.scss | 120 ++----
 .../scss/widgets/generic/chat/_sizes.scss     |   5 +-
 .../scss/widgets/generic/checkBox/_index.scss |   2 +-
 .../scss/widgets/generic/checkBox/_sizes.scss |   4 +-
 .../widgets/generic/colorView/_index.scss     |   4 +-
 .../scss/widgets/generic/common/_mixins.scss  |   4 +-
 .../widgets/generic/contextMenu/_index.scss   |   2 +-
 .../scss/widgets/generic/dateView/_index.scss |   2 +-
 .../scss/widgets/generic/diagram/_index.scss  |   8 +-
 .../generic/dropDownEditor/_index.scss        |  12 +-
 .../scss/widgets/generic/fieldset/_index.scss |   4 +-
 .../widgets/generic/fileManager/_colors.scss  |  18 -
 .../widgets/generic/fileManager/_sizes.scss   |   4 +-
 .../widgets/generic/fileUploader/_index.scss  |   2 +-
 .../generic/filterBuilder/_colors.scss        |  10 +-
 .../scss/widgets/generic/gantt/_index.scss    |   2 +-
 .../scss/widgets/generic/gridBase/_index.scss |  18 +-
 .../scss/widgets/generic/gridBase/_sizes.scss |  20 +-
 .../widgets/generic/gridBase/_variables.scss  |   2 +-
 .../gridBase/layout/aiChat/_sizes.scss        |   2 +-
 .../widgets/generic/htmlEditor/_colors.scss   |  36 --
 .../widgets/generic/htmlEditor/_sizes.scss    |  12 +-
 .../widgets/generic/informer/_colors.scss     |  64 +--
 .../scss/widgets/generic/list/_index.scss     |   6 +-
 .../generic/loadIndicator/_colors.scss        |  10 +-
 .../scss/widgets/generic/menuBase/_index.scss |   8 +-
 .../widgets/generic/pivotGrid/_sizes.scss     |   4 +-
 .../scss/widgets/generic/popup/_index.scss    |   4 +-
 .../widgets/generic/progressBar/_index.scss   |  10 +-
 .../widgets/generic/rangeSlider/_index.scss   |   2 +-
 .../generic/recurrenceEditor/_index.scss      |   2 +-
 .../widgets/generic/scheduler/_colors.scss    |  56 +--
 .../widgets/generic/scheduler/_index.scss     |  20 +-
 .../widgets/generic/scheduler/_sizes.scss     |  73 +---
 .../widgets/generic/scrollable/_sizes.scss    |   4 +-
 .../scss/widgets/generic/slider/_colors.scss  |  11 +-
 .../scss/widgets/generic/slider/_index.scss   |   2 +-
 .../generic/speedDialAction/_index.scss       |   6 +-
 .../generic/speedDialAction/_sizes.scss       |   4 +-
 .../scss/widgets/generic/splitter/_sizes.scss |   2 +-
 .../scss/widgets/generic/switch/_colors.scss  |  11 +-
 .../scss/widgets/generic/switch/_index.scss   |   4 +-
 .../generic/tabPanel/variables/_borders.scss  |  93 +----
 .../generic/tabs/variables/_colors.scss       |  19 +-
 .../generic/tabs/variables/_sizes.scss        |  11 +-
 .../borders/_borders-horizontal.scss          | 264 ++----------
 .../variables/borders/_borders-vertical.scss  | 264 ++----------
 .../scss/widgets/generic/tagBox/_colors.scss  |  11 +-
 .../widgets/generic/textEditor/_colors.scss   |   4 +-
 .../widgets/generic/textEditor/_index.scss    |  16 +-
 .../widgets/generic/textEditor/_sizes.scss    |   4 +-
 .../scss/widgets/generic/toast/_index.scss    |   2 +-
 .../widgets/generic/treeList/_colors.scss     |  10 +-
 .../widgets/generic/treeView/_colors.scss     |  11 +-
 .../scss/widgets/generic/treeView/_sizes.scss |   8 +-
 .../scss/widgets/material/_colors.scss        |  64 ++-
 .../widgets/material/actionSheet/_sizes.scss  |   2 +-
 .../scss/widgets/material/button/_colors.scss |   2 +-
 .../scss/widgets/material/button/_sizes.scss  |   7 +-
 .../widgets/material/cardView/_colors.scss    | 296 ++++---------
 .../widgets/material/cardView/_sizes.scss     | 122 ++----
 .../scss/widgets/material/chat/_sizes.scss    |   5 +-
 .../widgets/material/checkBox/_index.scss     |   2 +-
 .../widgets/material/colorView/_index.scss    |   4 +-
 .../scss/widgets/material/common/_mixins.scss |   2 +-
 .../widgets/material/dateRangeBox/_index.scss |   2 +-
 .../widgets/material/dateView/_index.scss     |   2 +-
 .../scss/widgets/material/diagram/_index.scss |   6 +-
 .../material/dropDownButton/_sizes.scss       |   4 +-
 .../material/dropDownEditor/_index.scss       |   8 +-
 .../widgets/material/fileManager/_colors.scss |   3 -
 .../widgets/material/fileManager/_sizes.scss  |   2 +-
 .../widgets/material/fileUploader/_index.scss |   2 +-
 .../widgets/material/fileUploader/_sizes.scss |   2 +-
 .../scss/widgets/material/gantt/_colors.scss  |   8 +-
 .../scss/widgets/material/gantt/_index.scss   |   2 +-
 .../widgets/material/gridBase/_colors.scss    |  13 +-
 .../widgets/material/gridBase/_index.scss     |  10 +-
 .../widgets/material/gridBase/_sizes.scss     |   7 +-
 .../widgets/material/gridBase/_variables.scss |  12 +-
 .../gridBase/layout/aiChat/_sizes.scss        |   2 +-
 .../widgets/material/htmlEditor/_sizes.scss   |   4 +-
 .../widgets/material/informer/_colors.scss    |   8 +-
 .../scss/widgets/material/list/_index.scss    |  10 +-
 .../scss/widgets/material/menu/_index.scss    |   2 +-
 .../widgets/material/menuBase/_index.scss     |   2 +-
 .../widgets/material/menuBase/_sizes.scss     |   2 +-
 .../widgets/material/pivotGrid/_index.scss    |  10 +-
 .../scss/widgets/material/popup/_index.scss   |   2 +-
 .../widgets/material/progressBar/_index.scss  |   6 +-
 .../widgets/material/radioButton/_index.scss  |   2 +-
 .../widgets/material/rangeSlider/_index.scss  |   2 +-
 .../material/recurrenceEditor/_index.scss     |   6 +-
 .../widgets/material/scheduler/_colors.scss   |   6 +-
 .../widgets/material/scheduler/_index.scss    |  14 +-
 .../widgets/material/scheduler/_sizes.scss    |  78 +---
 .../widgets/material/scrollView/_index.scss   |   2 +-
 .../widgets/material/scrollable/_sizes.scss   |   4 +-
 .../scss/widgets/material/slider/_index.scss  |  10 +-
 .../scss/widgets/material/slider/_sizes.scss  |   3 -
 .../material/speedDialAction/_index.scss      |   6 +-
 .../material/speedDialAction/_sizes.scss      |   8 +-
 .../widgets/material/splitter/_sizes.scss     |   2 +-
 .../scss/widgets/material/switch/_index.scss  |   8 +-
 .../scss/widgets/material/switch/_sizes.scss  |   9 +-
 .../material/tabs/variables/_sizes.scss       |  29 +-
 .../scss/widgets/material/tagBox/_sizes.scss  |   7 +-
 .../scss/widgets/material/textBox/_index.scss |   6 +-
 .../widgets/material/textEditor/_colors.scss  |   4 +-
 .../widgets/material/textEditor/_index.scss   |   8 +-
 .../widgets/material/textEditor/_sizes.scss   |  16 +-
 .../widgets/material/treeView/_sizes.scss     |  15 +-
 .../widgets/material/typography/_sizes.scss   |   4 +-
 .../widgets/material/validation/_sizes.scss   |   3 -
 .../tests/module-variable-default.test.ts     |  90 ++++
 .../no-identical-branch-declarations.test.ts  | 392 ++++++++++++++++++
 .../devextreme-scss/tests/stylelint-rule.ts   |  49 +++
 .../tests/unused-elements.test.ts             |  76 ++--
 .../stylelint/module-variable-default.mjs     |  55 +++
 .../no-identical-branch-declarations.mjs      | 238 +++++++++++
 212 files changed, 1799 insertions(+), 2412 deletions(-)
 create mode 100644 packages/devextreme-scss/tests/module-variable-default.test.ts
 create mode 100644 packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts
 create mode 100644 packages/devextreme-scss/tests/stylelint-rule.ts
 create mode 100644 packages/devextreme-scss/tools/stylelint/module-variable-default.mjs
 create mode 100644 packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs

diff --git a/packages/devextreme-scss/.stylelintrc.json b/packages/devextreme-scss/.stylelintrc.json
index e34adf09d5ce..52bbdc7712f3 100644
--- a/packages/devextreme-scss/.stylelintrc.json
+++ b/packages/devextreme-scss/.stylelintrc.json
@@ -1,7 +1,9 @@
 {
     "plugins": [
         "stylelint-scss",
-        "@stylistic/stylelint-plugin"
+        "@stylistic/stylelint-plugin",
+        "./tools/stylelint/no-identical-branch-declarations.mjs",
+        "./tools/stylelint/module-variable-default.mjs"
     ],
     "extends": "stylelint-config-standard-scss",
     "ignoreFiles": "!**/*.{css,scss}",
@@ -18,6 +20,8 @@
         "@stylistic/declaration-colon-space-after": "always-single-line",
         "@stylistic/declaration-colon-space-before": "never",
         "declaration-no-important": true,
+        "dx/module-variable-default": true,
+        "dx/no-identical-branch-declarations": true,
         "font-family-name-quotes": "always-unless-keyword",
         "@stylistic/function-comma-space-after": "always-single-line",
         "@stylistic/indentation": [2, { "ignore": ["inside-parens"] }],
diff --git a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
index 5b3818d55082..79636b10de17 100644
--- a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
@@ -2,17 +2,17 @@
 @use "sass:math";
 @use "sass:selector";
 
-$list-style: decimal lower-alpha lower-roman;
-$list-style-width: 1.2em;
-$list-style-margin: 0.3em;
-$list-style-outer-width: $list-style-margin + $list-style-width;
-$max-indent: 9;
-$resize-handle-size: 11px;
-$touch-resize-handle-size: 15px;
-$half-resize-handle-size: math.div($resize-handle-size, 2);
-$half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2);
-
-$transparent-border: 1px solid transparent;
+$list-style: decimal lower-alpha lower-roman !default;
+$list-style-width: 1.2em !default;
+$list-style-margin: 0.3em !default;
+$list-style-outer-width: $list-style-margin + $list-style-width !default;
+$max-indent: 9 !default;
+$resize-handle-size: 11px !default;
+$touch-resize-handle-size: 15px !default;
+$half-resize-handle-size: math.div($resize-handle-size, 2) !default;
+$half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2) !default;
+
+$transparent-border: 1px solid transparent !default;
 
 @function add-counter-reset($counter, $start: 1) {
   @if $counter > $start {
diff --git a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
index c6645d033729..2bc650a5f1c8 100644
--- a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
@@ -613,7 +613,7 @@ $icons: (
     "gridkanban": "\f240",
     "listbartreeoffset": "\f241",
     "clearhistory": "\f242",
-);
+) !default;
 
 // stylelint-enable
 
diff --git a/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss b/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss
index ac6f0ec94503..eafdf848b572 100644
--- a/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss
@@ -1,7 +1,7 @@
 @use "sass:math";
 
-$loadindicator-width: 32px;
-$loadindicator-height: 32px;
+$loadindicator-width: 32px !default;
+$loadindicator-height: 32px !default;
 
 .dx-loadindicator {
   width: $loadindicator-width;
diff --git a/packages/devextreme-scss/scss/widgets/base/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/_mixins.scss
index e38a7556b667..5a37174c9974 100644
--- a/packages/devextreme-scss/scss/widgets/base/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_mixins.scss
@@ -140,5 +140,5 @@
   transform: translate(-50%, -50%);
 }
 
-$overlay-zindex: 1000;
-$max-integer: 2147483647;
+$overlay-zindex: 1000 !default;
+$max-integer: 2147483647 !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
index 569695d1163f..e2db3328c299 100644
--- a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
@@ -1,7 +1,7 @@
 @use "./mixins" as *;
 
-$spin-container-width: 22px;
-$touch-friendly-spin-container-width: 64px;
+$spin-container-width: 22px !default;
+$touch-friendly-spin-container-width: 64px !default;
 
 .dx-numberbox {
   position: relative;
diff --git a/packages/devextreme-scss/scss/widgets/base/_pagination.scss b/packages/devextreme-scss/scss/widgets/base/_pagination.scss
index e4e03edf80db..b73aed4bc164 100644
--- a/packages/devextreme-scss/scss/widgets/base/_pagination.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_pagination.scss
@@ -1,7 +1,7 @@
 @use "./mixins" as *;
 
-$pagination-paddings: 8px;
-$pagination-info-paddings: 9px;
+$pagination-paddings: 8px !default;
+$pagination-info-paddings: 9px !default;
 
 .dx-pager,
 .dx-pagination {
diff --git a/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss b/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss
index 28f826acb54d..136bc1ebf27c 100644
--- a/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss
@@ -1,6 +1,6 @@
-$recurrence-interval-number-box-margin-top: 25px;
-$recurrence-radio-group-item-padding: 10px;
-$recurrence-button-group-item-padding: 8px;
+$recurrence-interval-number-box-margin-top: 25px !default;
+$recurrence-radio-group-item-padding: 10px !default;
+$recurrence-button-group-item-padding: 8px !default;
 
 .dx-recurrence-repeat-on,
 .dx-recurrence-numberbox-interval-wrapper {
diff --git a/packages/devextreme-scss/scss/widgets/base/_resizable.scss b/packages/devextreme-scss/scss/widgets/base/_resizable.scss
index 8068ae0a863a..a7635864fec7 100644
--- a/packages/devextreme-scss/scss/widgets/base/_resizable.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_resizable.scss
@@ -1,6 +1,6 @@
-$handle-offset: 0;
-$one-side-handle-size: 3px + $handle-offset;
-$two-side-handle-size: 6px + $handle-offset;
+$handle-offset: 0 !default;
+$one-side-handle-size: 3px + $handle-offset !default;
+$two-side-handle-size: 6px + $handle-offset !default;
 
 .dx-resizable {
   display: block;
diff --git a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
index c125ad2d0d01..920800bdf699 100644
--- a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
@@ -1,7 +1,7 @@
 @use "./mixins" as *;
 
-$pulldown-height: 50px;
-$pulldown-padding: 15px;
+$pulldown-height: 50px !default;
+$pulldown-padding: 15px !default;
 
 .dx-scrollable-native {
   &.dx-scrollable-native-generic {
diff --git a/packages/devextreme-scss/scss/widgets/base/_slider.scss b/packages/devextreme-scss/scss/widgets/base/_slider.scss
index 1c2ebfa9e3d4..2f6fe5294ea2 100644
--- a/packages/devextreme-scss/scss/widgets/base/_slider.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_slider.scss
@@ -1,8 +1,8 @@
 @use "./mixins" as *;
 @use "./popover/mixins" as *;
 
-$slider-tooltip-content-height: 28px;
-$slider-tooltip-arrow-height: 7px;
+$slider-tooltip-content-height: 28px !default;
+$slider-tooltip-arrow-height: 7px !default;
 
 .dx-slider-label {
   position: absolute;
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
index 33789dd4a50e..f03e72471f49 100644
--- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
@@ -6,7 +6,7 @@
   2px maximal right header item padding + 4px maximal dxSortable placeholder (drop indicator) width
   We can increase this number up to the CardView root padding without issues
 */
-$sortable-side-offset: 6px;
+$sortable-side-offset: 6px !default;
 
 .dx-cardview-header-item-sorting {
   display: flex;
diff --git a/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss
index 262086e375ee..4174f1803d22 100644
--- a/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss
@@ -2,7 +2,7 @@
 @use "./mixins" as *;
 @use "sass:string" as string;
 
-$colorbox-input-left-padding: 40px;
+$colorbox-input-left-padding: 40px !default;
 
 .dx-colorbox-input-container {
   &.dx-colorbox-color-is-not-defined {
diff --git a/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss
index f226a5938c2a..9eb36c7c7061 100644
--- a/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss
@@ -1,17 +1,17 @@
 @use "../mixins" as *;
 
-$color-view-container-width: 450px;
-$color-view-palette-width: 288px;
-$color-view-palette-height: 299px;
-$color-view-alpha-width: 292px;
-$color-view-hue-scale-width: 18px;
-$color-view-hue-scale-height: $color-view-palette-height;
-
-$colorview-palette-handle-size: 28px;
-$colorview-transparent-background-color: #ccc;
-
-$colorview-handle-first-side-size: 36px;
-$colorview-handle-second-side-size: 17px;
+$color-view-container-width: 450px !default;
+$color-view-palette-width: 288px !default;
+$color-view-palette-height: 299px !default;
+$color-view-alpha-width: 292px !default;
+$color-view-hue-scale-width: 18px !default;
+$color-view-hue-scale-height: $color-view-palette-height !default;
+
+$colorview-palette-handle-size: 28px !default;
+$colorview-transparent-background-color: #ccc !default;
+
+$colorview-handle-first-side-size: 36px !default;
+$colorview-handle-second-side-size: 17px !default;
 
 .dx-colorview-container {
   width: $color-view-container-width;
diff --git a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
index e6d9d5683a3c..3b10c750588e 100644
--- a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
@@ -1,6 +1,6 @@
 @use "../mixins" as *;
 
-$transparent-border: 1px solid transparent;
+$transparent-border: 1px solid transparent !default;
 
 .dx-diagram {
   border: $transparent-border;
diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss
index c1b6172d3926..e6a121dc6e89 100644
--- a/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss
+++ b/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss
@@ -1,13 +1,13 @@
-$grid-cell-padding: 7px;
-$grid-texteditor-input-padding: 32px;
-$grid-total-footer-paddings: 7px;
-$grid-command-select-column-width: 70px;
-$grid-command-edit-column-width: 100px;
-$grid-command-edit-column-with-icons-width: 80px;
-$grid-command-expand-column-width: 30px;
-$grid-command-adaptive-column-width: 36px;
-$grid-column-header-indicator-width: 14px;
-$grid-text-content-margin: 3px;
-$grid-sort-index-width: 12px;
-$grid-sort-index-offset: 3px;
-$grid-ai-assistant-confirm-dialog-button-width: 50px;
+$grid-cell-padding: 7px !default;
+$grid-texteditor-input-padding: 32px !default;
+$grid-total-footer-paddings: 7px !default;
+$grid-command-select-column-width: 70px !default;
+$grid-command-edit-column-width: 100px !default;
+$grid-command-edit-column-with-icons-width: 80px !default;
+$grid-command-expand-column-width: 30px !default;
+$grid-command-adaptive-column-width: 36px !default;
+$grid-column-header-indicator-width: 14px !default;
+$grid-text-content-margin: 3px !default;
+$grid-sort-index-width: 12px !default;
+$grid-sort-index-offset: 3px !default;
+$grid-ai-assistant-confirm-dialog-button-width: 50px !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss
index 03c18025cb6e..887b8717f691 100644
--- a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss
+++ b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss
@@ -1,6 +1,6 @@
-$ai-chat-toolbar-item-spacing: 4px;
-$ai-chat-message-gap: 8px;
-$ai-chat-message-content-gap: 4px;
-$ai-chat-message-width: 280px;
-$ai-chat-message-regenerate-button-border-radius: 4px;
-$ai-chat-action-list-item-text-max-lines: 2;
+$ai-chat-toolbar-item-spacing: 4px !default;
+$ai-chat-message-gap: 8px !default;
+$ai-chat-message-content-gap: 4px !default;
+$ai-chat-message-width: 280px !default;
+$ai-chat-message-regenerate-button-border-radius: 4px !default;
+$ai-chat-action-list-item-text-max-lines: 2 !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/list/_index.scss b/packages/devextreme-scss/scss/widgets/base/list/_index.scss
index 44c3baa238f4..ce602f27237d 100644
--- a/packages/devextreme-scss/scss/widgets/base/list/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/list/_index.scss
@@ -1,7 +1,7 @@
 @use "../mixins" as *;
 @use "../button/mixins" as *;
 
-$list-searchbox-margin-bottom: 5px;
+$list-searchbox-margin-bottom: 5px !default;
 
 .dx-list {
   margin: 0;
diff --git a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
index cfd91f6158e4..f207e0faa181 100644
--- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
@@ -23,16 +23,16 @@ $pivotgrid-button-top-padding: null !default;
 @use "../icon_fonts" as *;
 @use "./common";
 
-$pivotgrid-drag-header-border: 1px solid;
-$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color;
-$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color;
-$pivotgrid-border-width: 1px;
-$pivotgrid-border: $pivotgrid-border-width solid;
-$pivotgrid-icon-size: 14px;
-$pivotgrid-common-field-padding: 2px;
-$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding;
-$pivotgrid-expand-icon-offset: -5px;
-$pivotgrid-expand-icon-text-offset: 0;
+$pivotgrid-drag-header-border: 1px solid !default;
+$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color !default;
+$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color !default;
+$pivotgrid-border-width: 1px !default;
+$pivotgrid-border: $pivotgrid-border-width solid !default;
+$pivotgrid-icon-size: 14px !default;
+$pivotgrid-common-field-padding: 2px !default;
+$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding !default;
+$pivotgrid-expand-icon-offset: -5px !default;
+$pivotgrid-expand-icon-text-offset: 0 !default;
 
 .dx-pivotgrid-fields-container {
   .dx-position-indicator {
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss
index 757318499b2b..996034b1de34 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss
@@ -1,8 +1,8 @@
 @use "sass:math";
 @use "../../base/mixins" as *;
 
-$scheduler-appointment-collector-margin: 3px;
-$scheduler-appointment-collector-height: 22px;
+$scheduler-appointment-collector-margin: 3px !default;
+$scheduler-appointment-collector-height: 22px !default;
 
 .dx-scheduler {
   .dx-empty-message {
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
index 5aed1e0f20f4..c42229cab532 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
@@ -52,52 +52,52 @@ $agenda-appointment-recurrence-icon-color: null !default;
   $scheduler-tooltip-list-focused-bg: $scheduler-tooltip-list-focused-bg
 );
 
-$scheduler-appointment-min-size: 4px;
-$scheduler-appointment-content-padding: 5px 7px;
-$scheduler-appointment-reduced-content-padding: 40px;
+$scheduler-appointment-min-size: 4px !default;
+$scheduler-appointment-content-padding: 5px 7px !default;
+$scheduler-appointment-reduced-content-padding: 40px !default;
 
-$scheduler-hovered-appointment-top-shadow-size: 5px;
-$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color;
+$scheduler-hovered-appointment-top-shadow-size: 5px !default;
+$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color !default;
 
-$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color;
-$scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color;
-$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color;
-$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow;
+$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color !default;
+$scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color !default;
+$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color !default;
+$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow !default;
 
-$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2);
+$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2) !default;
 
-$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color;
-$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow;
+$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color !default;
+$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color !default;
+$scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color !default;
+$scheduler-horizontal-appointment-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color !default;
+$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color !default;
+$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color !default;
+$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow !default;
 
-$scheduler-grouped-appointment-month-text-size: 12px;
+$scheduler-grouped-appointment-month-text-size: 12px !default;
 
-$scheduler-base-border: 1px solid;
-$scheduler-transparent-top-border: 1px solid transparent;
-$scheduler-accent-border: 1px solid;
+$scheduler-base-border: 1px solid !default;
+$scheduler-transparent-top-border: 1px solid transparent !default;
+$scheduler-accent-border: 1px solid !default;
 
-$scheduler-reduced-icon-offset: 5px;
-$scheduler-recurrence-icon-offset: 20px;
+$scheduler-reduced-icon-offset: 5px !default;
+$scheduler-recurrence-icon-offset: 20px !default;
 
-$scheduler-agenda-appointment-margin: 5px;
-$scheduler-agenda-last-in-date-appointment-margin: 20px;
+$scheduler-agenda-appointment-margin: 5px !default;
+$scheduler-agenda-last-in-date-appointment-margin: 20px !default;
 
-$scheduler-small-size-factor: 0.5;
+$scheduler-small-size-factor: 0.5 !default;
 
-$scheduler-small-size-element-offset: $scheduler-left-column-width * $scheduler-small-size-factor;
+$scheduler-small-size-element-offset: $scheduler-left-column-width * $scheduler-small-size-factor !default;
 
-$scheduler-time-indicator-font-size: 30px;
-$scheduler-time-indicator-size: 1px;
-$scheduler-time-indicator-top: 14px;
-$scheduler-time-indicator-left: 12px;
+$scheduler-time-indicator-font-size: 30px !default;
+$scheduler-time-indicator-size: 1px !default;
+$scheduler-time-indicator-top: 14px !default;
+$scheduler-time-indicator-left: 12px !default;
 
-$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1);
-$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color;
-$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0;
+$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1) !default;
+$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color !default;
+$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0 !default;
 
 @use "./appointment" with (
   $scheduler-transparent-top-border: $scheduler-transparent-top-border,
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss
index f58cba3e9c35..76a342a3bfbb 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss
@@ -1,4 +1,4 @@
-$arrow-down: "\f016";
+$arrow-down: "\f016" !default;
 
 @mixin header-base(
   $border,
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss
index bdbe38bd195e..dec89907e065 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss
@@ -28,24 +28,24 @@ $scheduler-first-month-cell-background-color: null !default;
 
 $scheduler-panel-text-color: null !default;
 
-$scheduler-timepanel-cell-offset: 20px;
-$scheduler-workspace-info-font-size: 20px;
-$scheduler-small-font-size: 14px;
+$scheduler-timepanel-cell-offset: 20px !default;
+$scheduler-workspace-info-font-size: 20px !default;
+$scheduler-small-font-size: 14px !default;
 
-$scheduler-current-time-cell-border-size: 2px;
+$scheduler-current-time-cell-border-size: 2px !default;
 
-$scheduler-workspace-date-table-cell-height: 50px;
-$scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5;
-$scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5;
-$scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height;
-$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px;
-$scheduler-group-header-table-cell-height: 30px;
+$scheduler-workspace-date-table-cell-height: 50px !default;
+$scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5 !default;
+$scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5 !default;
+$scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height !default;
+$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px !default;
+$scheduler-group-header-table-cell-height: 30px !default;
 
-$scheduler-group-header-table-cell-width: 80px;
+$scheduler-group-header-table-cell-width: 80px !default;
 
-$scheduler-month-date-text-size: 16px;
+$scheduler-month-date-text-size: 16px !default;
 
-$scheduler-month-date-text-padding: 6px;
+$scheduler-month-date-text-padding: 6px !default;
 
 @use "./day" with (
   $scheduler-base-border: $scheduler-base-border,
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss
index 9602a3aaadc9..61291d143064 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss
@@ -4,8 +4,8 @@ $scheduler-small-font-size: null !default;
 $scheduler-workspace-info-font-size: null !default;
 $scheduler-other-month-cell-opacity: null !default;
 
-$scheduler-agenda-left-column-width: 70px;
-$scheduler-group-header-agenda-font-size: 18px;
+$scheduler-agenda-left-column-width: 70px !default;
+$scheduler-group-header-agenda-font-size: 18px !default;
 
 .dx-scheduler-agenda {
   .dx-scheduler-date-table-scrollable {
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss
index b8469f2b1e83..8805dcef56c5 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss
@@ -6,7 +6,7 @@ $scheduler-base-border: null !default;
 $scheduler-base-border-color: null !default;
 $scheduler-accent-border-color: null !default;
 
-$scheduler-timeline-min-height: 100px;
+$scheduler-timeline-min-height: 100px !default;
 
 .dx-scheduler-timeline-week,
 .dx-scheduler-timeline-work-week,
diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
index 95667f2a6758..30e7affaa09d 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
@@ -24,15 +24,15 @@ $base-focus-color: null !default;
   $treelist-focused-border-color: $datagrid-focused-border-color,
 );
 
-$treelist-border: $datagrid-border;
-$treelist-drag-header-border-color: $datagrid-drag-header-border-color;
-$treelist-row-error-bg: $datagrid-row-error-bg;
-$treelist-base-color: $datagrid-base-color;
-$treelist-base-background-color: $datagrid-base-background-color;
-$treelist-border-color: $datagrid-border-color;
-$treelist-focused-border-color: $datagrid-focused-border-color;
-$treelist-text-stub-background-image-path: $datagrid-text-stub-background-image-path;
-$treelist-row-error-color: $datagrid-row-error-color;
+$treelist-border: $datagrid-border !default;
+$treelist-drag-header-border-color: $datagrid-drag-header-border-color !default;
+$treelist-row-error-bg: $datagrid-row-error-bg !default;
+$treelist-base-color: $datagrid-base-color !default;
+$treelist-base-background-color: $datagrid-base-background-color !default;
+$treelist-border-color: $datagrid-border-color !default;
+$treelist-focused-border-color: $datagrid-focused-border-color !default;
+$treelist-text-stub-background-image-path: $datagrid-text-stub-background-image-path !default;
+$treelist-row-error-color: $datagrid-row-error-color !default;
 
 .dx-treelist-borders {
   > .dx-treelist-headers,
diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
index 644abfdb53c3..86223bf07535 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
@@ -1,7 +1,7 @@
 @use "../mixins" as *;
 @use "../../base/icon_fonts" as *;
 
-$treeview-searchbox-margin-bottom: 5px;
+$treeview-searchbox-margin-bottom: 5px !default;
 
 .dx-treeview-loadindicator-wrapper {
   text-align: center;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss
index bbceda66881c..f0b0ffd43d08 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss
@@ -250,7 +250,7 @@ $scrollview-pulldown-path: null !default;
 
   $base-danger-hover: color.adjust($base-danger, $saturation: 0.44%, $space: hsl, $lightness: 7.45%) !default;
   $base-danger-active: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.8deg, $saturation: -0.9%, $lightness: 28.8%) !default;
-  $base-danger-selected: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 0.7deg, $saturation: 1.3%, $lightness: 14.9%);
+  $base-danger-selected: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 0.7deg, $saturation: 1.3%, $lightness: 14.9%) !default;
 
   $scrollview-pulldown-path: data-uri("images/widgets/fluent/color-schemes/dark/pulldown.png") !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss
index a4017a22e04a..70129095fd6d 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss
@@ -7,7 +7,7 @@ $fluent-base-inline-block-height: null !default;
 $fluent-base-icon-size: null !default;
 $fluent-base-icon-margin: 8px !default;
 $fluent-base-inline-horizontal-padding: null !default;
-$fluent-base-border-radius: null !default;
+$fluent-base-border-radius: 4px !default;
 $fluent-html-editor-add-image-dialog-base-padding: 5px !default;
 
 /**
@@ -39,7 +39,6 @@ $fluent-button-icon-margin: null !default;
   $fluent-base-inline-block-height: 20px !default;
   $fluent-base-icon-size: 20px !default;
   $fluent-base-inline-horizontal-padding: 12px !default;
-  $fluent-base-border-radius: 4px !default;
   $fluent-button-height: 32px !default;
   $fluent-button-icon-size: 20px !default;
   $fluent-button-icon-margin: 8px !default;
@@ -56,7 +55,6 @@ $fluent-button-icon-margin: null !default;
   $fluent-base-inline-block-height: 16px !default;
   $fluent-base-icon-size: 16px !default;
   $fluent-base-inline-horizontal-padding: 8px !default;
-  $fluent-base-border-radius: 4px !default;
   $fluent-button-height: 24px !default;
   $fluent-button-icon-size: 16px !default;
   $fluent-button-icon-margin: 4px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/accordion/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/accordion/_sizes.scss
index 176f3edb5ad4..78b26f936b03 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/accordion/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/accordion/_sizes.scss
@@ -13,7 +13,7 @@ $accordion-item-border-radius: $fluent-base-border-radius !default;
 * $name 10. Item expanded margin
 * $type text
 */
-$fluent-accordion-item-opened-margin: null !default;
+$fluent-accordion-item-opened-margin: 0 !default;
 
 @if $size == "default" {
   $fluent-accordion-title-horizontal-padding: 12px !default;
@@ -21,7 +21,6 @@ $fluent-accordion-item-opened-margin: null !default;
   $fluent-accordion-title-height: 44px !default;
   $accordion-title-icon-margin: 8px !default;
   $accordion-title-icon-size: 20px !default;
-  $fluent-accordion-item-opened-margin: 0 !default;
 }
 
 @else if $size == "compact" {
@@ -30,5 +29,4 @@ $fluent-accordion-item-opened-margin: null !default;
   $fluent-accordion-title-height: 32px !default;
   $accordion-title-icon-margin: 6px !default;
   $accordion-title-icon-size: 16px !default;
-  $fluent-accordion-item-opened-margin: 0 !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/actionSheet/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/actionSheet/_sizes.scss
index 5694e65f75d3..15fdcab8742f 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/actionSheet/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/actionSheet/_sizes.scss
@@ -1,2 +1,2 @@
-$fluent-actionsheet-item-margin-value: 12px;
+$fluent-actionsheet-item-margin-value: 12px !default;
 $fluent-actionsheet-item-margin: 0 0 $fluent-actionsheet-item-margin-value 0 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/badge/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/badge/_sizes.scss
index 2c99c408f03a..59af08ff7a51 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/badge/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/badge/_sizes.scss
@@ -1,17 +1,15 @@
 @use "../sizes" as *;
 
-$fluent-badge-padding: null !default;
+$fluent-badge-padding: 0 6px !default;
 $fluent-badge-font-size: null !default;
 $badge-line-height: null !default;
 
 @if $size == "default" {
-  $fluent-badge-padding: 0 6px !default;
   $fluent-badge-font-size: 12px !default;
   $badge-line-height: 20px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-badge-padding: 0 6px !default;
   $fluent-badge-font-size: 10px !default;
   $badge-line-height: 16px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss
index de2be8586ff2..354fabaa5455 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss
@@ -84,13 +84,13 @@ $button-default-selected-color: null !default;
 * $name 30. Hover state background color
 * $type color
 */
-$button-default-hover-bg: null !default;
+$button-default-hover-bg: $base-accent-hover !default;
 
 /**
 * $name 40. Focused state background color
 * $type color
 */
-$button-default-focused-bg: null !default;
+$button-default-focused-bg: $base-accent-hover !default;
 
 /**
 * $name 50. Active state background color
@@ -113,7 +113,6 @@ $button-default-outlined-border-color: $base-accent !default;
 
 $button-default-outlined-bg: transparent !default;
 $button-default-outlined-hover-bg: null !default;
-$button-default-outlined-focused-bg: null !default;
 $button-default-outlined-active-bg: null !default;
 $button-default-outlined-selected-bg: null !default;
 
@@ -168,11 +167,10 @@ $button-danger-selected-bg: $base-danger-selected !default;
 $button-danger-outlined-color: $base-danger !default;
 $button-danger-outlined-border-color: $base-danger !default;
 $button-danger-outlined-color-hover: null !default;
-$button-danger-outlined-color-active: null !default;
+$button-danger-outlined-color-active: $base-danger-active !default;
 $button-danger-outlined-selected-color: null !default;
 $button-danger-outlined-bg: transparent !default;
 $button-danger-outlined-hover-bg: null !default;
-$button-danger-outlined-focused-bg: null !default;
 $button-danger-outlined-active-bg: null !default;
 $button-danger-outlined-selected-bg: null !default;
 
@@ -200,12 +198,6 @@ $button-success-selected-color: null !default;
 */
 $button-success-hover-bg: null !default;
 
-/**
-* $name 40. Focused state background color
-* $type color
-*/
-$button-success-focused-bg: null !default;
-
 /**
 * $name 50. Active state background color
 * $type color
@@ -222,10 +214,8 @@ $button-success-outlined-color: $base-success !default;
 $button-success-outlined-border-color: $base-success !default;
 $button-success-outlined-color-hover: null !default;
 $button-success-outlined-color-active: null !default;
-$button-success-outlined-selected-color: null !default;
 $button-success-outlined-bg: transparent !default;
 $button-success-outlined-hover-bg: null !default;
-$button-success-outlined-focused-bg: null !default;
 $button-success-outlined-active-bg: null !default;
 $button-success-outlined-selected-bg: null !default;
 
@@ -233,14 +223,10 @@ $button-accent-foreground-color: null !default;
 
 @if $mode == "light" {
   $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -9.10%, $lightness: -23.53%) !default;
-
-  $button-default-hover-bg: $base-accent-hover !default;
-  $button-default-focused-bg: $base-accent-hover !default;
   $button-default-active-bg: $base-accent-active !default;
   $button-default-selected-bg: $base-accent-selected !default;
 
   $button-success-hover-bg: color.adjust($base-success, $saturation: 0.63%, $space: hsl, $lightness: -2.75%) !default;
-  $button-success-focused-bg: $button-success-hover-bg !default;
   $button-success-active-bg: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default;
   $button-success-selected-bg: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default;
 
@@ -250,12 +236,10 @@ $button-accent-foreground-color: null !default;
     $button-default-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 17.00%, $lightness: -17.06%) !default;
 
     $button-danger-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.5deg, $saturation: 0.6%, $lightness: 46.7%) !default;
-    $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
     $button-danger-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-hover-bg, $hue: 358.9deg, $saturation: 2.2%, $lightness: -13.9%) !default;
     $button-danger-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-active-bg, $hue: 359.1deg, $saturation: -0.6%, $lightness: 7.1%) !default;
 
     $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: -29.8%, $space: hsl, $lightness: 68.8%) !default;
-    $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
     $button-success-outlined-active-bg: color.adjust($base-success, $saturation: -34.9%, $space: hsl, $lightness: 46.1%) !default;
     $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: -35%, $space: hsl, $lightness: 57.6%) !default;
   }
@@ -266,25 +250,19 @@ $button-accent-foreground-color: null !default;
     $button-default-outlined-active-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
 
     $button-danger-outlined-hover-bg: color.mix($base-bg, $base-danger, 90%) !default;
-    $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
     $button-danger-outlined-active-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
     $button-danger-outlined-selected-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
 
     $button-success-outlined-hover-bg: color.mix($base-bg, $base-success, 90%) !default;
-    $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
     $button-success-outlined-active-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
     $button-success-outlined-selected-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
   }
 
-  $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default;
-
   $button-danger-outlined-color-hover: $base-danger-selected !default;
-  $button-danger-outlined-color-active: $base-danger-active !default;
   $button-danger-outlined-selected-color: $base-danger-selected !default;
 
   $button-success-outlined-color-hover: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default;
   $button-success-outlined-color-active: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default;
-  $button-success-outlined-selected-color: $button-success-outlined-color-hover;
 
   $button-default-color: $base-inverted-text-color !default;
   $button-default-selected-color: $base-inverted-text-color !default;
@@ -297,37 +275,28 @@ $button-accent-foreground-color: null !default;
 
 @if $mode == "dark" {
   $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 0.9deg, $saturation: -2.2%, $lightness: 22.4%) !default;
-
-  $button-default-hover-bg: $base-accent-hover !default;
-  $button-default-focused-bg: $base-accent-hover !default;
   $button-default-active-bg: $button-accent-foreground-color !default;
   $button-default-selected-bg: color.adjust($button-default-active-bg, $saturation: -6.4%, $space: hsl, $lightness: 5.3%) !default;
 
   $button-success-hover-bg: color.adjust($base-success, $saturation: 5.4%, $space: hsl, $lightness: 22.5%) !default;
-  $button-success-focused-bg: $button-success-hover-bg !default;
   $button-success-active-bg: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default;
   $button-success-selected-bg: color.adjust($base-success, $saturation: 5.3%, $space: hsl, $lightness: 34.1%) !default;
 
   $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !default;
-  $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default;
   $button-default-outlined-active-bg: $base-accent-selected !default;
   $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -12.33%, $lightness: -41.18%) !default;
 
   $button-danger-outlined-color-hover: $base-danger-active !default;
-  $button-danger-outlined-color-active: $base-danger-active !default;
   $button-danger-outlined-selected-color: $base-danger-active !default;
 
   $button-danger-outlined-hover-bg: color.adjust($base-danger, $saturation: -5.1%, $space: hsl, $lightness: -53.5%) !default;
-  $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
   $button-danger-outlined-active-bg: color.adjust($base-danger, $saturation: -4.6%, $space: hsl, $lightness: -22.9%) !default;
   $button-danger-outlined-selected-bg: color.adjust($base-danger, $saturation: -4.3%, $space: hsl, $lightness: -40.4%) !default;
 
   $button-success-outlined-color-hover: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default;
   $button-success-outlined-color-active: $button-success-outlined-color-hover !default;
-  $button-success-outlined-selected-color: $button-success-outlined-color-hover !default;
 
   $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: 39.4%, $space: hsl, $lightness: -42.7%) !default;
-  $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
   $button-success-outlined-active-bg: color.adjust($base-success, $saturation: 39%, $space: hsl, $lightness: -33.1%) !default;
   $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: 40.1%, $space: hsl, $lightness: -35.7%) !default;
 
@@ -340,6 +309,16 @@ $button-accent-foreground-color: null !default;
   $button-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
 }
 
+/**
+* $name 40. Focused state background color
+* $type color
+*/
+$button-success-focused-bg: $button-success-hover-bg !default;
+$button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
+$button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
+$button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default;
+$button-success-outlined-selected-color: $button-success-outlined-color-hover !default;
+
 $button-default-icon-color: $button-default-color !default;
 $button-normal-icon-color: $button-normal-color !default;
 $button-danger-icon-color: $button-danger-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss
index 72d7c8a9e8cd..44ca7a7ee796 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss
@@ -2,8 +2,6 @@
 
 $fluent-button-horizontal-padding: null !default;
 $fluent-button-vertical-padding: null !default;
-$fluent-button-icon-padding: null !default;
-$fluent-button-icon-text-padding: null !default;
 $fluent-button-content-line-height: 0 !default;
 $fluent-button-text-line-height: normal !default;
 $fluent-button-text-transform: none !default;
@@ -15,17 +13,15 @@ $fluent-button-box-shadow-size: 0 1px 3px !default;
 @if $size == "default" {
   $fluent-button-horizontal-padding: 12px !default;
   $fluent-button-vertical-padding: 6px !default;
-  $fluent-button-icon-padding: 6px;
-  $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default;
 }
 
 @else if $size == "compact" {
   $fluent-button-horizontal-padding: 8px !default;
   $fluent-button-vertical-padding: 4px !default;
-  $fluent-button-icon-padding: 4px !default;
-  $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default;
 }
 
+$fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default;
+
 :root {
   --dx-button-padding-inline: #{$fluent-button-horizontal-padding};
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss
index 6fdc41b02872..b24780264b8f 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss
@@ -24,7 +24,6 @@ $calendar-header-color: $calendar-color !default;
 $calendar-cell-other-color: null !default;
 $calendar-bg: transparent !default;
 $calendar-hover-bg: null !default;
-$calendar-cell-hover-border-color: null !default;
 $calendar-cell-hover-color: $calendar-color !default;
 
 /**
@@ -44,7 +43,6 @@ $calendar-week-number-border-radius: 0 !default;
 
 @if $mode == "light" {
   $calendar-hover-bg: $button-default-outlined-selected-bg !default;
-  $calendar-cell-hover-border-color: $calendar-hover-bg !default;
   $calendar-cell-active-bg: $button-default-outlined-active-bg !default;
   $calendar-cell-other-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default;
   $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default;
@@ -54,7 +52,6 @@ $calendar-week-number-border-radius: 0 !default;
 
 @if $mode == "dark" {
   $calendar-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default;
-  $calendar-cell-hover-border-color: $calendar-hover-bg !default;
   $calendar-cell-active-bg: $base-accent-selected !default;
   $calendar-cell-other-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default;
   $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default;
@@ -62,4 +59,6 @@ $calendar-week-number-border-radius: 0 !default;
   $calendar-week-number-cell-bg: $base-hover-bg !default;
 }
 
+$calendar-cell-hover-border-color: $calendar-hover-bg !default;
+
 $calendar-cell-other-hover-color: $calendar-cell-other-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss
index 7c1d3a4c5b92..7d0f1ab8613e 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss
@@ -19,19 +19,19 @@
 * $name 100. Background color
 * $type color
 */
-$cardview-fluent-common-bg-color: null !default;
+$cardview-fluent-common-bg-color: $base-typography-bg !default;
 
 /**
 * $name 102. Link color
 * $type color
 */
-$cardview-fluent-common-link-color: null !default;
+$cardview-fluent-common-link-color: $base-link-color !default;
 
 /**
 * $name 103. Text color
 * $type color
 */
-$cardview-fluent-common-text-color: null !default;
+$cardview-fluent-common-text-color: $base-text-color !default;
 
 // #endregion
 
@@ -41,31 +41,31 @@ $cardview-fluent-common-text-color: null !default;
 * $name 200. Background color
 * $type color
 */
-$cardview-fluent-card-bg-color: null !default;
+$cardview-fluent-card-bg-color: $base-bg !default;
 
 /**
 * $name 201. Border color
 * $type color
 */
-$cardview-fluent-card-border-color: null !default;
+$cardview-fluent-card-border-color: $base-border-color !default;
 
 /**
 * $name 203. Divider color
 * $type color
 */
-$cardview-fluent-card-divider-color: null !default;
+$cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default;
 
 /**
 * $name 204. Text color
 * $type color
 */
-$cardview-fluent-card-text-color: null !default;
+$cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default;
 
 /**
 * $name 206. Cover background color
 * $type color
 */
-$cardview-fluent-card__cover-bg-color: null !default;
+$cardview-fluent-card__cover-bg-color: #FFF !default;
 
 /**
 * $name 207. "Empty cover" background color
@@ -79,7 +79,7 @@ $cardview-fluent-card__cover--noimage-bg-color: null !default;
 */
 $cardview-fluent-card__cover--noimage__icon-color: null !default;
 
-$cardview-fluent-card--focused-outline-color: null !default;
+$cardview-fluent-card--focused-outline-color: $base-accent !default;
 
 // #endregion
 
@@ -97,35 +97,17 @@ $cardview-fluent-card--selected-bg-color: null !default;
 */
 $cardview-fluent-card--selected-border-color: null !default;
 
-/**
-* $name 302. Divider color
-* $type color
-*/
-$cardview-fluent-card--selected-divider-color: null !default;
-
 /**
 * $name 303. Text color
 * $type color
 */
-$cardview-fluent-card--selected-text-color: null !default;
+$cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default;
 
 /**
 * $name 305. Cover background color
 * $type color
 */
-$cardview-fluent-card--selected__cover-bg-color: null !default;
-
-/**
-* $name 306. "Empty cover" background color
-* $type color
-*/
-$cardview-fluent-card--selected__cover--noimage-bg-color: null !default;
-
-/**
-* $name 307. "Empty cover" icon color
-* $type color
-*/
-$cardview-fluent-card--selected__cover--noimage__icon-color: null !default;
+$cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default;
 
 // #endregion
 
@@ -141,33 +123,33 @@ $cardview-fluent-header-panel__item-bg-color: null !default;
 * $name 401. Border color
 * $type color
 */
-$cardview-fluent-header-panel__item-border-color: null !default;
+$cardview-fluent-header-panel__item-border-color: $base-border-color !default;
 
 /**
 * $name 403. Text color
 * $type color
 */
-$cardview-fluent-header-panel__item-text-color: null !default;
+$cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default;
 
 /**
 * $name 405. Icon color
 * $type color
 */
-$cardview-fluent-header-panel__item__icon-color: null !default;
+$cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default;
 
 /**
 * $name 406. Active "Filter" icon color
 * $type color
 */
-$cardview-fluent-header-panel__item__header-filter-icon--selected-color: null !default;
+$cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default;
 
 /**
 * $name 407. Sort index text color
 * $type color
 */
-$cardview-fluent-header-panel__item__sort-index-text-color: null !default;
+$cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default;
 
-$cardview-fluent-header-panel__item--focused-outline-color: null !default;
+$cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default;
 
 // #endregion
 
@@ -213,17 +195,11 @@ $cardview-fluent-header-panel__item--hovered__sort-index-text-color: null !defau
 
 // #region HEADER PANEL ITEM (DISABLED)
 
-/**
-* $name 600. Background color
-* $type color
-*/
-$cardview-fluent-header-panel__item--disabled-bg-color: null !default;
-
 /**
 * $name 601. Border color
 * $type color
 */
-$cardview-fluent-header-panel__item--disabled-border-color: null !default;
+$cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default;
 
 /**
 * $name 602. Text color
@@ -253,29 +229,23 @@ $cardview-fluent-header-panel__item--disabled__sort-index-text-color: null !defa
 
 // #region HEADER PANEL ITEM (ON DRAG)
 
-/**
-* $name 700. Background color
-* $type color
-*/
-$cardview-fluent-header-panel__item--dragged-bg-color: null !default;
-
 /**
 * $name 701. Border color
 * $type color
 */
-$cardview-fluent-header-panel__item--dragged-border-color: null !default;
+$cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default;
 
 /**
 * $name 702. Text color
 * $type color
 */
-$cardview-fluent-header-panel__item--dragged-text-color: null !default;
+$cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default;
 
 /**
 * $name 704. "Drag allowed" icon color
 * $type color
 */
-$cardview-fluent-header-panel__item--dragged__allowance-icon-color: null !default;
+$cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default;
 
 /**
 * $name 705. "Drag blocked" icon color
@@ -287,7 +257,7 @@ $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: null !defa
 * $name 706. Box shadow color
 * $type color
 */
-$cardview-fluent-header-panel__item--dragged-box-shadow-color: null !default;
+$cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
 
 // #endregion
 
@@ -303,19 +273,19 @@ $cardview-fluent-header-panel__dropzone-bg-color: null !default;
 * $name 802. Border color
 * $type color
 */
-$cardview-fluent-header-panel__dropzone-border-color: null !default;
+$cardview-fluent-header-panel__dropzone-border-color: $base-accent !default;
 
 /**
 * $name 803. Text color
 * $type color
 */
-$cardview-fluent-header-panel__dropzone-text-color: null !default;
+$cardview-fluent-header-panel__dropzone-text-color: $base-accent !default;
 
 /**
 * $name 804. Icon color
 * $type color
 */
-$cardview-fluent-header-panel__dropzone__icon-color: null !default;
+$cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default;
 
 // #endregion
 
@@ -325,25 +295,25 @@ $cardview-fluent-header-panel__dropzone__icon-color: null !default;
 * $name 900. Background color
 * $type color
 */
-$cardview-fluent-filter-panel-bg-color: null !default;
+$cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default;
 
 /**
 * $name 902. Border color
 * $type color
 */
-$cardview-fluent-filter-panel-border-color: null !default;
+$cardview-fluent-filter-panel-border-color: $base-border-color !default;
 
 /**
 * $name 903. Text color
 * $type color
 */
-$cardview-fluent-filter-panel-text-color: null !default;
+$cardview-fluent-filter-panel-text-color: $base-accent !default;
 
 /**
 * $name 904. Icon color
 * $type color
 */
-$cardview-fluent-filter-panel__icon-color: null !default;
+$cardview-fluent-filter-panel__icon-color: $base-accent !default;
 
 // #endregion
 
@@ -353,7 +323,7 @@ $cardview-fluent-filter-panel__icon-color: null !default;
 * $name 1000. Background color
 * $type color
 */
-$cardview-fluent-nodata-view-bg-color: null !default;
+$cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default;
 
 /**
 * $name 1001. Text color
@@ -381,7 +351,7 @@ $cardview-fluent-nodata-view__icon-bg-color: null !default;
 * $name 1100. Background color
 * $type color
 */
-$cardview-fluent-card__content__field-value--highlighted-bg-color: null !default;
+$cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default;
 
 /**
 * $name 1102. Text color
@@ -393,52 +363,28 @@ $cardview-fluent-card__content__field-value--highlighted-text-color: null !defau
 * $name 1104. Box shadow color
 * $type color
 */
-$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: null !default;
+$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
 
 // #endregion
 
 // #region COLUMN CHOOSER
 
-$cardview-fluent-columnchooser--empty__message-color: null !default;
+$cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default;
 
 // #endregion
 
 @if $mode == "light" {
 
-  // Common
-  $cardview-fluent-common-bg-color: $base-typography-bg !default;
-  $cardview-fluent-common-link-color: $base-link-color !default;
-  $cardview-fluent-common-text-color: $base-text-color !default;
-
   // Card
-  $cardview-fluent-card-bg-color: $base-bg !default;
-  $cardview-fluent-card-border-color: $base-border-color !default;
-  $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default;
-  $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default;
-  $cardview-fluent-card__cover-bg-color: #FFF !default;
   $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default;
   $cardview-fluent-card__cover--noimage__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default;
 
-  $cardview-fluent-card--focused-outline-color: $base-accent !default;
-
   // Card - selected
   $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default;
   $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 2.21%, $lightness: 44.31%) !default;
-  $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default;
-  $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default;
-  $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default;
-  $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default;
-  $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default;
 
   // Header panel item - default state
   $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default;
-  $cardview-fluent-header-panel__item-border-color: $base-border-color !default;
-  $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default;
-  $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default;
-  $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default;
-  $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default;
-
-  $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default;
 
   // Header panel item - hovered
   $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: -1.96%, $space: hsl)  !default;
@@ -449,84 +395,38 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default;
 
   // Header panel item - disabled
-  $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
-  $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default;
   $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: 60.00%, $space: hsl) !default;
   $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: 60.00%, $space: hsl) !default;
   $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -34.10%, $space: hsl, $lightness: 27.06%) !default;
   $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: 60.00%, $space: hsl) !default;
 
   // Header panel item - dragged
-  $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
-  $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default;
-  $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default;
-  $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default;
   $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -4deg, $saturation: 22.80%, $lightness: -9.61%) !default;
-  $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
 
   // Header panel Drop-zone
   $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default;
-  $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default;
-  $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default;
-  $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default;
-
-  // Filter panel
-  $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default;
-  $cardview-fluent-filter-panel-border-color: $base-border-color !default;
-  $cardview-fluent-filter-panel-text-color: $base-accent !default;
-  $cardview-fluent-filter-panel__icon-color: $base-accent !default;
 
   // Empty view
-  $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default;
   $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default;
   $cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default;
   $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -9.80%, $space: hsl) !default;
 
   // Search highlight
-  $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default;
   $cardview-fluent-card__content__field-value--highlighted-text-color: $cardview-fluent-common-text-color !default;
-  $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
-
-  // Column chooser
-  $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
 
-  // Common
-  $cardview-fluent-common-bg-color: $base-typography-bg !default;
-  $cardview-fluent-common-link-color: $base-link-color !default;
-  $cardview-fluent-common-text-color: $base-text-color !default;
-
   // Card
-  $cardview-fluent-card-bg-color: $base-bg !default;
-  $cardview-fluent-card-border-color: $base-border-color !default;
-  $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default;
-  $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default;
-  $cardview-fluent-card__cover-bg-color: #FFF !default;
   $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default;
   $cardview-fluent-card__cover--noimage__icon-color: color.adjust($base-text-color, $lightness: -32.16%, $space: hsl) !default;
 
-  $cardview-fluent-card--focused-outline-color: $base-accent !default;
-
   // Card - selected
   $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default;
   $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -3deg, $saturation: -11.06%, $lightness: -36.27%) !default;
-  $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default;
-  $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default;
-  $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default;
-  $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default;
-  $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default;
 
   // Header panel item - default state
   $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default;
-  $cardview-fluent-header-panel__item-border-color: $base-border-color !default;
-  $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default;
-  $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default;
-  $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default;
-  $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default;
-
-  $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default;
 
   // Header panel item - hovered
   $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: 18.04%, $space: hsl)  !default;
@@ -537,48 +437,56 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-common-text-color !default;
 
   // Header panel item - disabled
-  $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
-  $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default;
   $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: -56.08%, $space: hsl) !default;
   $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: -56.08%, $space: hsl) !default;
   $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -6.72%, $space: hsl, $lightness: -18.04%) !default;
   $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: -56.08%, $space: hsl) !default;
 
   // Header panel item - dragged
-  $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
-  $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default;
-  $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default;
-  $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default;
   $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default;
-  $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
 
   // Header panel Drop-zone
   $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default;
-  $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default;
-  $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default;
-  $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default;
-
-  // Filter panel
-  $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default;
-  $cardview-fluent-filter-panel-border-color: $base-border-color !default;
-  $cardview-fluent-filter-panel-text-color: $base-accent !default;
-  $cardview-fluent-filter-panel__icon-color: $base-accent !default;
 
   // Empty view
-  $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default;
   $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default;
   $cardview-fluent-nodata-view__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default;
   $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: 3.92%, $space: hsl) !default;
 
   // Search highlight
-  $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default;
   $cardview-fluent-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default;
-  $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
-
-  // Column chooser
-  $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 
+/**
+* $name 302. Divider color
+* $type color
+*/
+$cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default;
+
+/**
+* $name 306. "Empty cover" background color
+* $type color
+*/
+$cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default;
+
+/**
+* $name 307. "Empty cover" icon color
+* $type color
+*/
+$cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default;
+
+/**
+* $name 600. Background color
+* $type color
+*/
+$cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
+
+/**
+* $name 700. Background color
+* $type color
+*/
+$cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
+
 $cardview-bg-color: $cardview-fluent-common-bg-color !default;
 $cardview-link-color: $cardview-fluent-common-link-color !default;
 $cardview-text-color: $cardview-fluent-common-text-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss
index a47f1f1d3df2..92390ea11dec 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss
@@ -17,14 +17,14 @@
 * $name 101. Border radius
 * $type text
 */
-$cardview-fluent-common-border-radius: null !default;
+$cardview-fluent-common-border-radius: 16px !default;
 
 /**
 * $name 104. Text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-common-text-weight: null !default;
+$cardview-fluent-common-text-weight: 400 !default;
 
 /**
 * $name 105. Vertical gap between cards
@@ -46,9 +46,9 @@ $cardview-fluent-common-padding: null !default;
 
 // #region CARD
 
-$cardview-fluent-card-min-width: null !default;
+$cardview-fluent-card-min-width: 250px !default;
 
-$cardview-fluent-card-border-width: null !default;
+$cardview-fluent-card-border-width: 1px !default;
 
 /**
 * $name 202. Border radius
@@ -67,7 +67,7 @@ $cardview-fluent-card__header__selection-checkbox-padding-right: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-card__field-caption-weight: null !default;
+$cardview-fluent-card__field-caption-weight: 600 !default;
 
 $cardview-fluent-card__cover-max-height: null !default;
 
@@ -90,7 +90,7 @@ $cardview-fluent-card__content__cell-padding-horizontal: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-card--selected__field-caption-weight: null !default;
+$cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default;
 
 // #endregion
 
@@ -110,13 +110,13 @@ $cardview-fluent-header-panel--empty-line-height: null !default;
 
 // #region HEADER PANEL ITEM
 
-$cardview-fluent-header-panel__item-border-width: null !default;
+$cardview-fluent-header-panel__item-border-width: 1px !default;
 
 /**
 * $name 402. Border radius
 * $type text
 */
-$cardview-fluent-header-panel__item-border-radius: null !default;
+$cardview-fluent-header-panel__item-border-radius: 6px !default;
 
 $cardview-fluent-header-panel__item-padding-vertical: null !default;
 
@@ -127,16 +127,16 @@ $cardview-fluent-header-panel__item-padding-horizontal: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-header-panel__item-text-weight: null !default;
+$cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default;
 
 /**
 * $name 408. Sort index text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-header-panel__item__sort-index-text-weight: null !default;
+$cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default;
 
-$cardview-fluent-header-panel__item__icon-size: null !default;
+$cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default;
 
 $cardview-fluent-header-item__left-padding: null !default;
 $cardview-fluent-header-item__right-padding: null !default;
@@ -150,14 +150,14 @@ $cardview-fluent-header-item__right-padding: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-header-panel__item--hovered-text-weight: null !default;
+$cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
 
 /**
 * $name 507. Sort index text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-header-panel__item--hovered__sort-index-text-weight: null !default;
+$cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
 
 // #endregion
 
@@ -168,14 +168,14 @@ $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: null !defa
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-header-panel__item--disabled-text-weight: null !default;
+$cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
 
 /**
 * $name 607. Sort index text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-header-panel__item--disabled__sort-index-text-weight: null !default;
+$cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
 
 // #endregion
 
@@ -186,10 +186,10 @@ $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: null !def
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-header-panel__item--dragged-text-weight: null !default;
+$cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
 
-$cardview-fluent-header-item__sort-indicator__border-size: null;
-$cardview-fluent-header-item__sort-indicator__border-radius: null;
+$cardview-fluent-header-item__sort-indicator__border-size: null !default;
+$cardview-fluent-header-item__sort-indicator__border-radius: null !default;
 
 // #endregion
 
@@ -199,7 +199,7 @@ $cardview-fluent-header-panel__dropzone-height: null !default;
 
 $cardview-fluent-header-panel__dropzone-top: null !default;
 
-$cardview-fluent-header-panel__dropzone-border-width: null !default;
+$cardview-fluent-header-panel__dropzone-border-width: 1.5px !default;
 
 /**
 * $name 801. Border radius
@@ -215,7 +215,7 @@ $cardview-fluent-header-panel__dropzone-border-radius: null !default;
 * $name 901. Border radius
 * $type text
 */
-$cardview-fluent-filter-panel-border-radius: null !default;
+$cardview-fluent-filter-panel-border-radius: 0 !default;
 
 // #endregion
 
@@ -235,16 +235,16 @@ $cardview-fluent-nodata-view__icon-size: null !default;
 * $name 1101. Border radius
 * $type text
 */
-$cardview-fluent-card__content__field-value--highlighted-border-radius: null !default;
+$cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default;
 
-$cardview-fluent-card__content__field-value--highlighted-border-padding: null !default;
+$cardview-fluent-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default;
 
 /**
 * $name 1103. Text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-fluent-card__content__field-value--highlighted-text-weight: null !default;
+$cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default;
 
 // #endregion
 
@@ -259,21 +259,16 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau
 @if $size == "default" {
 
   // Common
-  $cardview-fluent-common-border-radius: 16px !default;
-  $cardview-fluent-common-text-weight: 400 !default;
   $cardview-fluent-common-cards-row-gap: 16px !default;
   $cardview-fluent-common-cards-column-gap: 16px !default;
   $cardview-fluent-common-gap: 24px !default;
   $cardview-fluent-common-padding: 24px !default;
 
   // Card
-  $cardview-fluent-card-min-width: 250px !default;
-  $cardview-fluent-card-border-width: 1px !default;
   $cardview-fluent-card-border-radius: 8px !default;
   $cardview-fluent-card__header-height: 48px !default;
   $cardview-fluent-card__header-text-size: 16px !default;
   $cardview-fluent-card__header__selection-checkbox-padding-right: 12px !default;
-  $cardview-fluent-card__field-caption-weight: 600 !default;
   $cardview-fluent-card__cover-max-height: 180px !default;
   $cardview-fluent-card__cover--noimage__icon-size: 48px !default;
   $cardview-fluent-card__content-padding: 12px !default;
@@ -281,9 +276,6 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau
   $cardview-fluent-card__content__cell-padding-vertical: 6px !default;
   $cardview-fluent-card__content__cell-padding-horizontal: 12px !default;
 
-  // Card - selected
-  $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default;
-
   // Header
   $cardview-fluent-header-gap: 0 !default;
 
@@ -292,48 +284,25 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau
   $cardview-fluent-header-panel--empty-line-height: 32px !default;
 
   // Header panel item - default
-  $cardview-fluent-header-panel__item-border-width: 1px !default;
-  $cardview-fluent-header-panel__item-border-radius: 6px !default;
   $cardview-fluent-header-panel__item-padding-horizontal: 8px !default;
   $cardview-fluent-header-panel__item-padding-vertical: 5px !default;
   $cardview-fluent-header-item__left-padding: 6px !default;
   $cardview-fluent-header-item__right-padding: 2px !default;
-  $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default;
-  $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default;
-  $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default;
-
-  // Header panel item - hovered
-  $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
-  $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
-
-  // Header panel item - disabled
-  $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
-  $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
 
   // Header panel item - dragged
-  $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
   $cardview-fluent-header-item__sort-indicator__border-size: 2px !default;
   $cardview-fluent-header-item__sort-indicator__border-radius: 8px !default;
 
   // Header panel Drop-zone
   $cardview-fluent-header-panel__dropzone-height: 44px !default;
   $cardview-fluent-header-panel__dropzone-top: -6px  !default;
-  $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default;
   $cardview-fluent-header-panel__dropzone-border-radius: 8px !default;
 
-  // Filter panel
-  $cardview-fluent-filter-panel-border-radius: 0 !default;
-
   // Empty view
   $cardview-fluent-nodata-view__icon-container-size: 64px !default;
   $cardview-fluent-nodata-view__icon-container-margin: 12px !default;
   $cardview-fluent-nodata-view__icon-size: 40px !default;
 
-  // Search highlight
-  $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default;
-  $cardview-fluent-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default;
-  $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default;
-
   // Column chooser
   $cardview-fluent-column-chooser--empty__message-horizontal-padding: 24px !default;
   $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 14px !default;
@@ -341,21 +310,16 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau
 @else if $size == "compact" {
 
   // Common
-  $cardview-fluent-common-border-radius: 16px !default;
-  $cardview-fluent-common-text-weight: 400 !default;
   $cardview-fluent-common-cards-row-gap: 12px !default;
   $cardview-fluent-common-cards-column-gap: 12px !default;
   $cardview-fluent-common-gap: 16px !default;
   $cardview-fluent-common-padding: 16px !default;
 
   // Card
-  $cardview-fluent-card-min-width: 250px !default;
-  $cardview-fluent-card-border-width: 1px !default;
   $cardview-fluent-card-border-radius: 6px !default;
   $cardview-fluent-card__header-height: 36px !default;
   $cardview-fluent-card__header-text-size: 14px !default;
   $cardview-fluent-card__header__selection-checkbox-padding-right: 8px !default;
-  $cardview-fluent-card__field-caption-weight: 600 !default;
   $cardview-fluent-card__cover-max-height: 140px !default;
   $cardview-fluent-card__cover--noimage__icon-size: 32px !default;
   $cardview-fluent-card__content-padding: 8px !default;
@@ -363,9 +327,6 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau
   $cardview-fluent-card__content__cell-padding-vertical: 4px !default;
   $cardview-fluent-card__content__cell-padding-horizontal: 8px !default;
 
-  // Card - selected
-  $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default;
-
   // Header
   $cardview-fluent-header-gap: 4px !default;
 
@@ -374,48 +335,25 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau
   $cardview-fluent-header-panel--empty-line-height: 24px !default;
 
   // Header panel item - default
-  $cardview-fluent-header-panel__item-border-width: 1px !default;
-  $cardview-fluent-header-panel__item-border-radius: 6px !default;
   $cardview-fluent-header-panel__item-padding-horizontal: 6px !default;
   $cardview-fluent-header-panel__item-padding-vertical: 3px !default;
   $cardview-fluent-header-item__left-padding: 3px !default;
   $cardview-fluent-header-item__right-padding: 1px !default;
-  $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default;
-  $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default;
-  $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default;
-
-  // Header panel item - hovered
-  $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
-  $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
-
-  // Header panel item - disabled
-  $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
-  $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
 
   // Header panel item - dragged
-  $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
   $cardview-fluent-header-item__sort-indicator__border-size: 1px !default;
   $cardview-fluent-header-item__sort-indicator__border-radius: 4px !default;
 
   // Header panel Drop-zone
   $cardview-fluent-header-panel__dropzone-height: 32px !default;
   $cardview-fluent-header-panel__dropzone-top: -4px  !default;
-  $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default;
   $cardview-fluent-header-panel__dropzone-border-radius: 6px !default;
 
-  // Filter panel
-  $cardview-fluent-filter-panel-border-radius: 0 !default;
-
   // Empty view
   $cardview-fluent-nodata-view__icon-container-size: 48px !default;
   $cardview-fluent-nodata-view__icon-container-margin: 8px !default;
   $cardview-fluent-nodata-view__icon-size: 32px !default;
 
-  // Search highlight
-  $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default;
-  $cardview-fluent-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default;
-  $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default;
-
   // Column chooser
   $cardview-fluent-column-chooser--empty__message-horizontal-padding: 16px !default;
   $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 12px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
index 2d7ee1140d81..7f53705ade4e 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -125,7 +125,7 @@ $chat-typingindicator-circle-bg-color: null !default;
 
 $chat-file-container-background-color: $base-bg !default;
 $chat-file-container-box-shadow: null !default;
-$chat-file-secondary-color: null !default;
+$chat-file-secondary-color: $base-icon-color !default;
 
 $chat-suggestions-box-shadow: null !default;
 
@@ -144,7 +144,6 @@ $chat-suggestions-box-shadow: null !default;
   $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default;
 
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
-  $chat-file-secondary-color: $base-icon-color !default;
 
   $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;
 
@@ -176,7 +175,6 @@ $chat-suggestions-box-shadow: null !default;
   $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default;
 
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
-  $chat-file-secondary-color: $base-icon-color !default;
 
   $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
index f8069845cec3..cad0368631dd 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -14,7 +14,7 @@ $chat-bubble-delete-gap: null !default;
 $chat-bubble-delete-icon-size: null !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-padding: null !default;
-$chat-messagebox-textarea-border-radius: null !default;
+$chat-messagebox-textarea-border-radius: 8px !default;
 $chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagebox-files-container-padding: 3px !default;
@@ -32,7 +32,7 @@ $chat-information-edited-gap: 2px !default;
 
 $chat-alerts-padding-block: null !default;
 $chat-alerts-padding-inline: 8px !default;
-$chat-alerts-row-gap: null !default;
+$chat-alerts-row-gap: 2px !default;
 $chat-alert-padding-block: null !default;
 
 $chat-suggestions-padding: null !default;
@@ -57,12 +57,10 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
 $chat-messagelist-day-header-font-size: 12px !default;
 
 $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default;
-$chat-typingindicator-padding: null !default;
 $chat-typingindicator-row-gap: $chat-messagegroup-gap !default;
 $chat-typingindicator-font-size: $chat-information-font-size !default;
 $chat-typingindicator-bubble-padding-block: null !default;
 $chat-typingindicator-bubble-padding-inline: null !default;
-$chat-typingindicator-bubble-border-radius: null !default;
 $chat-typingindicator-bubble-column-gap: 4px !default;
 $chat-typingindicator-circle-size: null !default;
 $chat-typingindicator-circle-size-center: null !default;
@@ -90,14 +88,12 @@ $chat-bubble-gap: 8px !default;
   $chat-bubble-delete-gap: 4px !default;
   $chat-bubble-delete-icon-size: 20px !default;
   $chat-messagebox-padding: 20px !default;
-  $chat-messagebox-textarea-border-radius: 8px !default;
   $chat-messagebox-textarea-padding: 12px !default;
   $chat-messagebox-toolbar-min-height: 32px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
   $chat-alerts-padding-block: 12px !default;
-  $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 6px !default;
 
   $chat-suggestions-padding: 20px !default;
@@ -116,8 +112,6 @@ $chat-bubble-gap: 8px !default;
   $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default;
   $chat-typingindicator-bubble-padding-block: 12px !default;
   $chat-typingindicator-bubble-padding-inline: 20px !default;
-  $chat-typingindicator-padding: $chat-messagegroup-padding !default;
-  $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;
 
   $chat-confirmation-popup-toolbar-gap: 8px !default;
 
@@ -130,14 +124,12 @@ $chat-bubble-gap: 8px !default;
   $chat-bubble-delete-gap: 2px !default;
   $chat-bubble-delete-icon-size: 16px !default;
   $chat-messagebox-padding: 16px !default;
-  $chat-messagebox-textarea-border-radius: 8px !default;
   $chat-messagebox-textarea-padding: 8px !default;
   $chat-messagebox-toolbar-min-height: 24px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
   $chat-alerts-padding-block: 8px !default;
-  $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 5px !default;
 
   $chat-suggestions-padding: 16px !default;
@@ -156,10 +148,11 @@ $chat-bubble-gap: 8px !default;
   $chat-typingindicator-circle-size-center: math.div(12, 12) * 1em !default;
   $chat-typingindicator-bubble-padding-block: 8px !default;
   $chat-typingindicator-bubble-padding-inline: 12px !default;
-  $chat-typingindicator-padding: $chat-messagegroup-padding !default;
-  $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;
 
   $chat-confirmation-popup-toolbar-gap: 4px !default;
 
   $chat-file-icon-font-size: 16px !default;
 }
+
+$chat-typingindicator-padding: $chat-messagegroup-padding !default;
+$chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/colorView/_index.scss
index bef18943d2af..4259a2430fb2 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/colorView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/colorView/_index.scss
@@ -4,8 +4,8 @@
 @use "../../base/colorView";
 @include dx-base-colorview-styles($colorview-handle-color, $colorview-handle-border-color);
 
-$fluent-colorview-alpha-width: $fluent-colorview-palette-width + 4;
-$fluent-colorview-hue-scale-height: $fluent-colorview-palette-height;
+$fluent-colorview-alpha-width: $fluent-colorview-palette-width + 4 !default;
+$fluent-colorview-hue-scale-height: $fluent-colorview-palette-height !default;
 
 .dx-colorview-container {
   width: $fluent-colorview-container-width;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss
index 07d36367e858..83f2458bf9b9 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss
@@ -7,7 +7,7 @@
 @use "../../base/validation" as *;
 @use "../list/sizes" as *;
 
-$badge-invalid-bg: $base-invalid-color;
+$badge-invalid-bg: $base-invalid-color !default;
 
 @mixin dx-base-typography() {
   @include dx-base-typography-mixin(
diff --git a/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss
index c9c93f884a25..7540a81f6463 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss
@@ -9,7 +9,7 @@
 @use "../../base/icon_fonts" as *;
 @use "../textEditor" as *;
 
-$fluent-editor-custom-button-margin: 6px;
+$fluent-editor-custom-button-margin: 6px !default;
 
 .dx-daterangebox {
   @include dx-dropdowneditor-button-icon-styling(daterangepicker);
diff --git a/packages/devextreme-scss/scss/widgets/fluent/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/dateView/_index.scss
index 276fbf644f98..67bb91377d8d 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/dateView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/dateView/_index.scss
@@ -6,7 +6,7 @@
 @use "../../base/dateView";
 @use "../scrollable";
 
-$fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $fluent-dateview-roller-item-height, 2);
+$fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $fluent-dateview-roller-item-height, 2) !default;
 
 .dx-dateview-rollers {
   width: auto;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss
index 9b8af08066b7..d7d9b61bed19 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss
@@ -15,10 +15,10 @@
 @use "../fieldset/sizes" as *;
 @use "../menu/colors" as *;
 
-$fluent-diagram-toolbar-icon-size: $fluent-base-icon-size;
-$diagram-toolbar-colorbutton-border-width: 3px;
+$fluent-diagram-toolbar-icon-size: $fluent-base-icon-size !default;
+$diagram-toolbar-colorbutton-border-width: 3px !default;
 
-$diagram-toolbox-title-size: 18px;
+$diagram-toolbox-title-size: 18px !default;
 
 .dx-diagram {
   border-color: $diagram-border-color;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/dropDownButton/_sizes.scss
index b6f005a34d5d..b970e8c4cacd 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/dropDownButton/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/dropDownButton/_sizes.scss
@@ -6,12 +6,12 @@ $fluent-dropdownbutton-icon-spindown-right-size: null !default;
 
 @if $size == "default" {
   $fluent-dropdownbutton-action-horizontal-padding: 12px !default;
-  $fluent-dropdownbutton-icon-spindown-size: 24px;
+  $fluent-dropdownbutton-icon-spindown-size: 24px !default;
   $fluent-dropdownbutton-icon-spindown-right-size: 16px !default;
 }
 
 @else if $size == "compact" {
   $fluent-dropdownbutton-action-horizontal-padding: 8px !default;
-  $fluent-dropdownbutton-icon-spindown-size: 18px;
+  $fluent-dropdownbutton-icon-spindown-size: 18px !default;
   $fluent-dropdownbutton-icon-spindown-right-size: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/dropDownEditor/_index.scss
index c21aed8508d0..1a767ca16beb 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/dropDownEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/dropDownEditor/_index.scss
@@ -8,17 +8,17 @@
 @use "../../base/dropDownEditor";
 @use "../../base/dropDownEditor/mixins" as *;
 
-$fluent-dropdowneditor-container-button-size: $fluent-base-icon-size;
+$fluent-dropdowneditor-container-button-size: $fluent-base-icon-size !default;
 
 $fluent-dropdowneditor-invalid-badge-offset:
   $fluent-dropdowneditor-container-button-size +
-  $fluent-invalid-badge-halfhorizontal-padding;
+  $fluent-invalid-badge-halfhorizontal-padding !default;
 
 $fluent-dropdowneditor-invalid-badge-with-clear-offset:
   $fluent-dropdowneditor-container-button-size * 2 +
-  $fluent-invalid-badge-halfhorizontal-padding;
+  $fluent-invalid-badge-halfhorizontal-padding !default;
 
-$fluent-dropdowneditor-invalid-badge-size: $fluent-invalid-badge-size + $fluent-invalid-badge-horizontal-padding;
+$fluent-dropdowneditor-invalid-badge-size: $fluent-invalid-badge-size + $fluent-invalid-badge-horizontal-padding !default;
 
 @mixin dx-dropdowneditor-button-icon() {
   width: $fluent-dropdowneditor-container-button-size;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss
index 9c5aed4a9f7a..f0a6358c9177 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss
@@ -16,14 +16,11 @@ $filemanager-file-item-hover-bg: $base-hover-bg !default;
 $filemanager-file-item-focused-border: $base-accent !default;
 $filemanager-item-focused-color: $base-inverted-text-color !default;
 $filemanager-dirs-tree-item-focus-bg: null !default;
-$filemanager-progressbox-shadow-color: null !default;
 
 @if $mode == "light" {
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
-  $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
 }
 
 @if $mode == "dark" {
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
-  $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_sizes.scss
index c20681b38015..6d827e99f941 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_sizes.scss
@@ -15,7 +15,7 @@ $filemanager-large-icon-size: null !default;
 $filemanager-progress-panel-title-padding: null !default;
 $filemanager-progress-box-button-close-margin-top: null !default;
 
-$filemanager-toolbar-height: $fluent-toolbar-height;
+$filemanager-toolbar-height: $fluent-toolbar-height !default;
 
 @if $size == "default" {
   $filemanager-toolbar-separator-height: 36px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss
index 985d8a670669..feaf4bcd5aa4 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss
@@ -7,8 +7,8 @@
 @use "../../base/mixins" as *;
 @use "../../base/fileUploader";
 
-$fluent-fileuploader-file-wrapper-border-size: 3px;
-$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.1);
+$fluent-fileuploader-file-wrapper-border-size: 3px !default;
+$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.1) !default;
 
 .dx-fileuploader-wrapper {
   padding: $fluent-fileuploader-vertical-padding;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_sizes.scss
index fa118fa0c463..c41cfcdc2c1b 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_sizes.scss
@@ -7,7 +7,7 @@ $fluent-fileuploader-file-cancel-button-margin-left: 4px !default;
 $fluent-fileuploader-file-container-button-size: null !default;
 
 $fluent-fileuploader-vertical-padding: 7px !default;
-$fluent-fileuploader-files-container-padding: null !default;
+$fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
 $fluent-fileuploader-file-size-margin: null !default;
 $fluent-fileuploader-file-icon-font-size: null !default;
 $fluent-fileuploader-files-container-rounding: 4px !default;
@@ -17,7 +17,6 @@ $fluent-fileuploader-files-container-rounding: 4px !default;
   $fluent-fileuploader-file-container-text-margin: 15px !default;
   $fluent-fileuploader-file-container-button-margin: 8px !default;
   $fluent-fileuploader-file-container-button-size: 32px !default;
-  $fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
   $fluent-fileuploader-file-size-margin: 0 0 0 4px !default;
   $fluent-fileuploader-file-icon-font-size: 20px !default;
 }
@@ -27,7 +26,6 @@ $fluent-fileuploader-files-container-rounding: 4px !default;
   $fluent-fileuploader-file-container-text-margin: 6px !default;
   $fluent-fileuploader-file-container-button-margin: 2px !default;
   $fluent-fileuploader-file-container-button-size: 28px !default;
-  $fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
   $fluent-fileuploader-file-size-margin: 0 0 4px !default;
   $fluent-fileuploader-file-icon-font-size: 16px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/form/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/form/_sizes.scss
index 384113d46730..465839839624 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/form/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/form/_sizes.scss
@@ -1,6 +1,6 @@
 @use "../sizes" as *;
 
-$fluent-form-group-caption-bottom-margin: null !default;
+$fluent-form-group-caption-bottom-margin: 4px !default;
 $fluent-form-group-caption-top-padding: null !default;
 $fluent-form-group-content-bottom-padding: null !default;
 $fluent-form-group-caption-font-size: null !default;
@@ -17,7 +17,6 @@ $fluent-form-label-icon-size: $fluent-base-icon-size !default;
 $fluent-form-group-custom-caption-icon-margin: null !default;
 
 @if $size == "default" {
-  $fluent-form-group-caption-bottom-margin: 4px !default;
   $fluent-form-group-caption-top-padding: 16px !default;
   $fluent-form-group-content-bottom-padding: 16px !default;
   $fluent-form-group-caption-font-size: 20px !default;
@@ -30,7 +29,6 @@ $fluent-form-group-custom-caption-icon-margin: null !default;
 }
 
 @else if $size == "compact" {
-  $fluent-form-group-caption-bottom-margin: 4px !default;
   $fluent-form-group-caption-top-padding: 12px !default;
   $fluent-form-group-content-bottom-padding: 12px !default;
   $fluent-form-group-caption-font-size: 16px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss
index c6e20ce847e9..06d100805263 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss
@@ -9,7 +9,7 @@
 @use "../form/sizes" as *;
 @use "../splitterBar";
 
-$gantt-successor-background-color: white;
+$gantt-successor-background-color: white !default;
 
 .dx-gantt {
   border: 1px solid;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss
index c154f911500c..7ee20bfdcd22 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss
@@ -34,7 +34,7 @@ $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !def
 $datagrid-drag-header-shadow-color: null !default;
 $datagrid-drag-header-second-shadow-color: null !default;
 $datagrid-header-drag-bg: $datagrid-base-background-color !default;
-$header-filter-color: null !default;
+$header-filter-color: $datagrid-columnchooser-item-color !default;
 
 /**
 * $name 51. Selected row background color
@@ -75,7 +75,7 @@ $datagrid-row-hovered-color: $base-hover-color !default;
 $datagrid-cell-modified-border-color: $button-success-text-hover-bg !default;
 $datagrid-cell-removed-border-color: $datagrid-border-color !default;
 $datagrid-row-removed-bg: $datagrid-hover-bg !default;
-$datagrid-cell-removed-text-color: null !default;
+$datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
 
 /**
 * $name 45. Invalid data faded color
@@ -88,7 +88,7 @@ $datagrid-nodata-color: $base-label-color !default;
 * $name 90. Group row text color
 * $type color
 */
-$datagrid-group-row-color: null !default;
+$datagrid-group-row-color: $datagrid-columnchooser-item-color !default;
 
 /**
 * $name 95. Group row background color
@@ -159,8 +159,8 @@ $datagrid-text-stub-background-image-path: null !default;
 $datagrid-filter-panel-color: $base-accent !default;
 $datagrid-draggable-column-text-color: null !default;
 
-$datagrid-text-link-disabled-opacity: $base-disabled-opacity;
-$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
+$datagrid-text-link-disabled-opacity: $base-disabled-opacity !default;
+$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity !default;
 
 @if $mode == "light" {
   @if $color == "blue" {
@@ -172,31 +172,24 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
     $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: 0%, $lightness: 26.47%) !default;
     $datagrid-filter-row-background-color: $base-typography-bg !default;
   }
-
-  $datagrid-group-row-color: $datagrid-columnchooser-item-color !default;
   $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default;
   $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $header-filter-color: $datagrid-columnchooser-item-color !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
   $datagrid-text-stub-background-image-path: data-uri("images/widgets/fluent/color-schemes/light/grid/text-stub.png") !default;
-  $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
   $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
   $datagrid-row-focused-bg: #0c3b5e !default;
   $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default;
-  $datagrid-group-row-color: $datagrid-columnchooser-item-color !default;
   $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default;
   $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
-  $header-filter-color: $datagrid-columnchooser-item-color !default;
   $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
   $datagrid-text-stub-background-image-path: data-uri("images/widgets/fluent/color-schemes/dark/grid/text-stub.png") !default;
-  $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
   $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default;
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss
index 26ed9c35829f..27842a42af13 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss
@@ -28,11 +28,11 @@
 @use "layout/cell" as *;
 @use "layout/aiChat" as *;
 
-$fluent-grid-base-border-hidden: 1px solid transparent;
-$fluent-grid-base-row-border: 1px solid transparent;
-$fluent-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color;
-$fluent-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color;
-$fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-height;
+$fluent-grid-base-border-hidden: 1px solid transparent !default;
+$fluent-grid-base-row-border: 1px solid transparent !default;
+$fluent-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color !default;
+$fluent-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color !default;
+$fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-height !default;
 
 @mixin grid-base($widget-name) {
   @include fluent-grid-base-cell($widget-name);
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss
index caaa91c8ec2f..bc836c3c34a0 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss
@@ -17,14 +17,13 @@ $fluent-grid-base-menu-item-padding: null !default;
 $fluent-grid-base-column-chooser-horizontal-padding: null !default;
 $fluent-grid-base-column-chooser-paddings: null !default;
 $fluent-grid-base-header-panel-padding: null !default;
-$fluent-grid-base-grouppanel-item-margin: null !default;
+$fluent-grid-base-grouppanel-item-margin: 6px !default;
 $fluent-grid-base-command-edit-column-width: null !default;
 $fluent-grid-base-command-edit-column-with-icons-width: null !default;
 $fluent-grid-base-adaptive-column-height: null !default;
-$fluent-grid-base-treeview-search-margin: null !default;
+$fluent-grid-base-treeview-search-margin: 10px !default;
 $fluent-grid-base-nodata-font-size: null !default;
 $fluent-filter-row-between-editor-padding: null !default;
-$fluent-command-column-additional-right-margin: null !default;
 $fluent-grid-base-treeview-select-all-item-offset: null !default;
 
 $fluent-grid-base-header-line-height: 18px !default;
@@ -57,16 +56,13 @@ $fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
   $fluent-grid-base-column-chooser-horizontal-padding: 24px !default;
   $fluent-grid-base-column-chooser-paddings: 16px $fluent-grid-base-column-chooser-horizontal-padding 9px !default;
   $fluent-grid-base-header-panel-padding: 8px 0 !default;
-  $fluent-grid-base-grouppanel-item-margin: 6px !default;
 
   $fluent-grid-base-command-edit-column-width: 115px !default;
   $fluent-grid-base-command-edit-column-with-icons-width: 93px !default;
   $fluent-grid-base-adaptive-column-height: 40px !default;
-  $fluent-grid-base-treeview-search-margin: 10px !default;
   $fluent-grid-base-nodata-font-size: 17px !default;
 
   $fluent-filter-row-between-editor-padding: 12px !default;
-  $fluent-command-column-additional-right-margin: 0 !default;
 
   $fluent-grid-base-treeview-select-all-item-offset: 34px !default;
 
@@ -92,16 +88,13 @@ $fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
   $fluent-grid-base-column-chooser-horizontal-padding: 8px !default;
   $fluent-grid-base-column-chooser-paddings: 8px $fluent-grid-base-column-chooser-horizontal-padding 8px !default;
   $fluent-grid-base-header-panel-padding: 6px 0 !default;
-  $fluent-grid-base-grouppanel-item-margin: 6px !default;
 
   $fluent-grid-base-command-edit-column-width: 105px !default;
   $fluent-grid-base-command-edit-column-with-icons-width: 80px !default;
   $fluent-grid-base-adaptive-column-height: 26px !default;
-  $fluent-grid-base-treeview-search-margin: 10px !default;
   $fluent-grid-base-nodata-font-size: 14px !default;
 
   $fluent-filter-row-between-editor-padding: 8px !default;
-  $fluent-command-column-additional-right-margin: 2px !default;
 
   $fluent-grid-base-treeview-select-all-item-offset: 28px !default;
 
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_variables.scss
index 1ec5dd5b0875..2c57c3b85b93 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_variables.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_variables.scss
@@ -2,9 +2,9 @@
 @use "colors" as *;
 @use "sizes" as *;
 
-$fluent-grid-base-border-color: $datagrid-border-color;
-$fluent-grid-base-cell-vertical-padding: math.round(math.div($fluent-grid-base-cell-height - $fluent-grid-base-cell-line-height, 2));
-$fluent-grid-base-cell-padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding;
-$fluent-grid-base-header-cell-vertical-padding: math.round(math.div($fluent-grid-base-header-height - $fluent-grid-base-header-line-height, 2));
-$fluent-grid-base-command-select-column-width: $fluent-grid-base-checkbox-size + 2 * $fluent-grid-base-cell-horizontal-padding;
-$grid-masterdetail-padding: 16px;
+$fluent-grid-base-border-color: $datagrid-border-color !default;
+$fluent-grid-base-cell-vertical-padding: math.round(math.div($fluent-grid-base-cell-height - $fluent-grid-base-cell-line-height, 2)) !default;
+$fluent-grid-base-cell-padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding !default;
+$fluent-grid-base-header-cell-vertical-padding: math.round(math.div($fluent-grid-base-header-height - $fluent-grid-base-header-line-height, 2)) !default;
+$fluent-grid-base-command-select-column-width: $fluent-grid-base-checkbox-size + 2 * $fluent-grid-base-cell-horizontal-padding !default;
+$grid-masterdetail-padding: 16px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/aiChat/_sizes.scss
index 23463e560ea2..bf760a009072 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/aiChat/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/aiChat/_sizes.scss
@@ -1,3 +1,3 @@
 @use "../../../sizes" as *;
 
-$ai-chat-message-icon-size: $fluent-base-icon-size;
+$ai-chat-message-icon-size: $fluent-base-icon-size !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss
index 8fc917a37748..256a14dca7d3 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss
@@ -8,11 +8,11 @@ $informer-info-color: $base-text-color !default;
 $informer-info-background-color: null !default;
 
 @if $mode == "light" {
-  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -358deg, $saturation: 0.58%, $lightness: 46.67%);
-  $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl);
+  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -358deg, $saturation: 0.58%, $lightness: 46.67%) !default;
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $informer-error-background-color: color.adjust($base-danger, $saturation: -5.06%, $space: hsl, $lightness: -53.53%);
-  $informer-info-background-color: color.adjust($base-text-color, $lightness: -76.08%, $space: hsl);
+  $informer-error-background-color: color.adjust($base-danger, $saturation: -5.06%, $space: hsl, $lightness: -53.53%) !default;
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: -76.08%, $space: hsl) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss
index 12d1d175891c..21aefb71d99d 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss
@@ -13,10 +13,10 @@
 @use "../radioGroup/colors" as *;
 @use "../badge";
 
-$fluent-list-item-border-width: 1px;
-$fluent-list-border-width: 1px;
-$fluent-list-border: $fluent-list-border-width solid;
-$fluent-list-item-border: $fluent-list-item-border-width solid;
+$fluent-list-item-border-width: 1px !default;
+$fluent-list-border-width: 1px !default;
+$fluent-list-border: $fluent-list-border-width solid !default;
+$fluent-list-item-border: $fluent-list-item-border-width solid !default;
 
 .dx-state-disabled {
   &.dx-list {
diff --git a/packages/devextreme-scss/scss/widgets/fluent/menuBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/menuBase/_colors.scss
index f55789e57034..1f1279d587f3 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/menuBase/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/menuBase/_colors.scss
@@ -1,3 +1,3 @@
 @use "../colors" as *;
 
-$menu-item-color-disabled: $base-foreground-disabled;
+$menu-item-color-disabled: $base-foreground-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/menuBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/menuBase/_sizes.scss
index 63d09d1d7dbf..dd2ef1a21d2f 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/menuBase/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/menuBase/_sizes.scss
@@ -3,7 +3,7 @@
 $fluent-menu-item-line-height: null !default;
 $fluent-menu-item-with-icon-horizontal-padding: null !default;
 $fluent-menu-horizontal-padding: null !default;
-$fluent-menu-icon-to-text-offset: 4px;
+$fluent-menu-icon-to-text-offset: 4px !default;
 
 @if $size == "default" {
   $fluent-menu-item-line-height: 20px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss
index 09bdf6b8492b..a166d36fbe1f 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss
@@ -1,12 +1,4 @@
 @use "../sizes" as *;
 
 $fluent-numberbox-spin-container-width: 24px !default;
-$fluent-numberbox-touch-friendly-spin-container-width: null !default;
-
-@if $size == "default" {
-  $fluent-numberbox-touch-friendly-spin-container-width: 48px !default;
-}
-
-@else if $size == "compact" {
-  $fluent-numberbox-touch-friendly-spin-container-width: 48px !default;
-}
+$fluent-numberbox-touch-friendly-spin-container-width: 48px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss
index 3871987a599d..0afa3b10b188 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss
@@ -32,12 +32,12 @@
   $pivotgrid-button-top-padding: $pivotgrid-button-top-padding,
 );
 
-$fluent-pivotgrid-headers-font-size: 14px;
-$fluent-pivotgrid-area-font-size: 13px;
-$fluent-pivotgrid-chevron-icon-size: 20px;
+$fluent-pivotgrid-headers-font-size: 14px !default;
+$fluent-pivotgrid-area-font-size: 13px !default;
+$fluent-pivotgrid-chevron-icon-size: 20px !default;
 
-$fluent-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15);
-$fluent-pivotgridfieldchooser-field-min-height: 36px;
+$fluent-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15) !default;
+$fluent-pivotgridfieldchooser-field-min-height: 36px !default;
 
 .dx-pivotgrid-fields-container {
   &.dx-drag {
diff --git a/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss
index 75423b3fb670..3f1362182fa1 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss
@@ -8,7 +8,7 @@
 @use "../../base/popup";
 @use "../overlay";
 
-$fluent-popup-toolbar-label-font-size: $fluent-m-font-size;
+$fluent-popup-toolbar-label-font-size: $fluent-m-font-size !default;
 
 .dx-popup-wrapper {
   & > .dx-overlay-content {
diff --git a/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss
index d2d88fcd38d3..5553608c8b33 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss
@@ -12,8 +12,8 @@ $fluent-popup-toolbar-height: null !default;
 $fluent-popup-button-margin: 0 8px !default;
 $fluent-popup-toolbar-item-spacing: 8px !default;
 
-$fluent-popup-content-shadow: null !default;
-$fluent-popup-focused-content-shadow: null !default;
+$fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default;
+$fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default;
 
 @if $size == "default" {
   $fluent-popup-content-padding: 24px !default;
@@ -24,9 +24,6 @@ $fluent-popup-focused-content-shadow: null !default;
   $fluent-popup-toolbar-horizontal-padding: 24px !default;
   $fluent-popup-bottom-toolbar-height: 48px !default;
   $fluent-popup-toolbar-height: 48px !default;
-
-  $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default;
-  $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default;
 }
 
 @else if $size == "compact" {
@@ -38,9 +35,6 @@ $fluent-popup-focused-content-shadow: null !default;
   $fluent-popup-toolbar-horizontal-padding: 16px !default;
   $fluent-popup-bottom-toolbar-height: 36px !default;
   $fluent-popup-toolbar-height: 36px !default;
-
-  $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default;
-  $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default;
 }
 
 :root {
diff --git a/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss
index 85165ce798f0..a81d38c91d00 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss
@@ -18,9 +18,9 @@ $progressbar-range-disabled-bg: $base-foreground-disabled !default;
 $progressbar-range-indeterminate-color: $base-accent !default;
 $progressbar-range-invalid-color: $base-invalid-color !default;
 
-$progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
-$progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95%;
-$progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-invalid-color, transparent 95%;
+$progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95% !default;
+$progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95% !default;
+$progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-invalid-color, transparent 95% !default;
 
 /**
 * $name 30. Label color
diff --git a/packages/devextreme-scss/scss/widgets/fluent/progressBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/progressBar/_sizes.scss
index 91677287e082..d093147ac5d1 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/progressBar/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/progressBar/_sizes.scss
@@ -3,7 +3,7 @@
 $progressbar-height: null !default;
 $progressbar-border-radius: $base-border-radius !default;
 $progressbar-status-margin-top: null !default;
-$progressbar-indeterminate-background-width: 90%;
+$progressbar-indeterminate-background-width: 90% !default;
 
 @if $size == "default" {
   $progressbar-height: 4px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/radioGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/radioGroup/_sizes.scss
index 47f7cd1cd4ed..ada30c55a57e 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/radioGroup/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/radioGroup/_sizes.scss
@@ -1,14 +1,11 @@
 @use "../sizes" as *;
 
 $fluent-radio-button-vertical-margin: null !default;
-$fluent-radio-group-horizontal-gap: null !default;
 
 @if $size == "default" {
-  $fluent-radio-group-horizontal-gap: 16px !default;
   $fluent-radio-button-vertical-margin: 12px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-radio-group-horizontal-gap: 12px !default;
   $fluent-radio-button-vertical-margin: 6px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss
index a3bad1a3542a..cded1ffcecac 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss
@@ -4,9 +4,9 @@
 @use "../scheduler/sizes" as *;
 @use "../../base/recurrenceEditor" as *;
 
-$fluent-recurrence-number-box-margin: 11px;
-$fluent-recurrence-button-group-padding: 6px;
-$fluent-recurrence-radio-group-margin: 15px;
+$fluent-recurrence-number-box-margin: 11px !default;
+$fluent-recurrence-button-group-padding: 6px !default;
+$fluent-recurrence-radio-group-margin: 15px !default;
 
 .dx-recurrence-numberbox-interval {
   margin-right: $fluent-recurrence-number-box-margin;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss
index c307c71d772d..edaae60d331c 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss
@@ -23,7 +23,6 @@ $scheduler-accent-border-color: $base-border-color !default;
 * $type color
 */
 $scheduler-appointment-text-color: null !default;
-$scheduler-appointment-focus-color: null !default;
 
 /**
 * $name 40. Appointment background color
@@ -36,7 +35,7 @@ $scheduler-appointment-base-color: null !default;
 * $type color
 */
 $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default;
-$scheduler-appointment-active-color: $button-default-outlined-active-bg;
+$scheduler-appointment-active-color: $button-default-outlined-active-bg !default;
 
 /**
 * $name 60. Focused cell color
@@ -87,7 +86,7 @@ $header-panel-cell-date: null !default;
 
 @if $mode == "light" {
   $scheduler-appointment-text-color: #000 !default;
-  $header-panel-cell-date: #424242;
+  $header-panel-cell-date: #424242 !default;
 
   @if $color == "blue" {
     $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: 48%, $space: hsl) !default;
@@ -107,7 +106,7 @@ $header-panel-cell-date: null !default;
 @if $mode == "dark" {
   $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: -48%, $space: hsl) !default;
   $scheduler-appointment-text-color: #fff !default;
-  $header-panel-cell-date: #adadad;
+  $header-panel-cell-date: #adadad !default;
   $scheduler-cell-hover-bg: $base-hover-bg !default;
 
   @if $color == "blue" {
@@ -122,4 +121,4 @@ $header-panel-cell-date: null !default;
 }
 
 $scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default;
-$scheduler-appointment-focus-color: $scheduler-appointment-text-color;
+$scheduler-appointment-focus-color: $scheduler-appointment-text-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss
index b7136eab49d5..28f18745f2d9 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss
@@ -55,13 +55,13 @@
 @use "../recurrenceEditor" as *;
 @use "../scrollable";
 
-$fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-table-cell-height * 1.5;
+$fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-table-cell-height * 1.5 !default;
 
-$fluent-scheduler-month-date-text-size: 14px;
+$fluent-scheduler-month-date-text-size: 14px !default;
 
-$scheduler-first-of-month-border: 1px solid;
+$scheduler-first-of-month-border: 1px solid !default;
 
-$fluent-scheduler-agenda-time-panel-cell-padding: 8px;
+$fluent-scheduler-agenda-time-panel-cell-padding: 8px !default;
 
 @include baseScheduler.scheduler-mixin();
 
diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss
index 6fb2abec8776..1db3d084feb0 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss
@@ -4,8 +4,7 @@
 @use "../toolbar/sizes" as *;
 
 $fluent-scheduler-workspace-date-table-cell-height: null !default;
-$fluent-scheduler-toolbar-item-offset: null !default;
-$fluent-scheduler-navigator-height: null !default;
+$fluent-scheduler-toolbar-item-offset: 4px !default;
 $fluent-scheduler-header-panel-day-font-size: null !default;
 $fluent-scheduler-appointment-tooltip-title-font-size: null !default;
 $fluent-scheduler-appointment-tooltip-date-font-size: null !default;
@@ -18,8 +17,8 @@ $fluent-scheduler-dropdown-button-height: null !default;
 $fluent-scheduler-dropdown-button-padding: null !default;
 $fluent-scheduler-dropdown-button-margin: null !default;
 $fluent-scheduler-dropdown-button-vertical-margin: null !default;
-$fluent-scheduler-dropdown-button-adaptive-margin: null !default;
-$fluent-scheduler-dropdown-button-adaptive-vertical-margin: null !default;
+$fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
+$fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default;
 $fluent-scheduler-appointment-tooltip-content-margin-left: null !default;
 $fluent-tooltip-marker-dimension: null !default;
 $fluent-scheduler-appointment-tooltip-title-margin-top: null !default;
@@ -34,19 +33,19 @@ $fluent-scheduler-appointment-popup-all-day-item-height: null !default;
 $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: null !default;
 $fluent-scheduler-appointment-popup-repeat-end-item-height: null !default;
 
-$fluent-scheduler-appointment-short-content-padding: null !default;
-$fluent-scheduler-appointment-15min-height: null !default;
-$fluent-scheduler-appointment-20min-height: null !default;
-$fluent-scheduler-appointment-25min-height: null !default;
-$fluent-scheduler-appointment-10min-recurrence-padding-right: null !default;
-$fluent-scheduler-appointment-10min-title-font-size: null !default;
-$fluent-scheduler-appointment-10min-title-line-height: null !default;
-$fluent-scheduler-appointment-10min-icon-font-size: null !default;
-$fluent-scheduler-appointment-10min-icon-right: null !default;
+$fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default;
+$fluent-scheduler-appointment-15min-height: 17px !default;
+$fluent-scheduler-appointment-20min-height: 24px !default;
+$fluent-scheduler-appointment-25min-height: 32px !default;
+$fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default;
+$fluent-scheduler-appointment-10min-title-font-size: 8px !default;
+$fluent-scheduler-appointment-10min-title-line-height: 12px !default;
+$fluent-scheduler-appointment-10min-icon-font-size: 12px !default;
+$fluent-scheduler-appointment-10min-icon-right: 2px !default;
 $fluent-scheduler-appointment-15min-recurrence-padding-right: null !default;
-$fluent-scheduler-appointment-15min-title-font-size: null !default;
+$fluent-scheduler-appointment-15min-title-font-size: 12px !default;
 $fluent-scheduler-appointment-15min-title-line-height: null !default;
-$fluent-scheduler-appointment-15min-icon-font-size: null !default;
+$fluent-scheduler-appointment-15min-icon-font-size: 12px !default;
 $fluent-scheduler-appointment-15min-icon-right: null !default;
 $fluent-scheduler-appointment-20min-recurrence-padding-right: null !default;
 $fluent-scheduler-appointment-20min-icon-right: null !default;
@@ -60,7 +59,7 @@ $fluent-scheduler-timeline-date-table-cell-height: 50px !default;
 */
 $scheduler-border-radius: 0 !default;
 
-$fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size;
+$fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size !default;
 $fluent-scheduler-appointment-month-text-size: 12px !default;
 $fluent-scheduler-workspace-info-text-size: 16px !default;
 $fluent-scheduler-all-day-title-font-size: 12px !default;
@@ -90,14 +89,12 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-collapsed-all-day-table-cell-height: 32px !default;
   $header-panel-time-cell-padding: 12px !default;
 
-  $header-day-element-height: 26px;
+  $header-day-element-height: 26px !default;
   $fluent-scheduler-workspace-date-table-cell-height: 38px !default;
 
-  $fluent-scheduler-navigator-height: 36px !default;
   $fluent-scheduler-header-panel-day-font-size: 16px !default;
   $fluent-scheduler-header-height: 46px !default;
   $fluent-scheduler-header-offset: 0 12px !default;
-  $fluent-scheduler-toolbar-item-offset: 4px !default;
 
   $fluent-scheduler-appointment-tooltip-title-font-size: 16px !default;
   $fluent-scheduler-appointment-tooltip-date-font-size: 14px !default;
@@ -111,8 +108,6 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-dropdown-button-padding: 4px !default;
   $fluent-scheduler-dropdown-button-margin: 5px 1px 3px 3px !default;
   $fluent-scheduler-dropdown-button-vertical-margin: 5px 3px 3px 3px !default;
-  $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
-  $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default;
 
   $fluent-scheduler-appointment-tooltip-content-margin-left: 6px !default;
   $fluent-tooltip-marker-dimension: 12px !default;
@@ -128,23 +123,10 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 12px !default;
   $fluent-scheduler-appointment-popup-repeat-end-item-height: 32px !default;
 
-  $agenda-appointment-title-font-size: 14px;
-
-  $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default;
-  $fluent-scheduler-appointment-15min-height: 17px !default;
-  $fluent-scheduler-appointment-20min-height: 24px !default;
-  $fluent-scheduler-appointment-25min-height: 32px !default;
-
-  $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default;
-  $fluent-scheduler-appointment-10min-title-font-size: 8px !default;
-  $fluent-scheduler-appointment-10min-title-line-height: 12px !default;
-  $fluent-scheduler-appointment-10min-icon-font-size: 12px !default;
-  $fluent-scheduler-appointment-10min-icon-right: 2px !default;
+  $agenda-appointment-title-font-size: 14px !default;
 
   $fluent-scheduler-appointment-15min-recurrence-padding-right: 14px !default;
-  $fluent-scheduler-appointment-15min-title-font-size: 12px !default;
   $fluent-scheduler-appointment-15min-title-line-height: 18px !default;
-  $fluent-scheduler-appointment-15min-icon-font-size: 12px !default;
   $fluent-scheduler-appointment-15min-icon-right: 2px !default;
 
   $fluent-scheduler-appointment-20min-icon-right: 2px !default;
@@ -155,14 +137,12 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-collapsed-all-day-table-cell-height: 24px !default;
   $header-panel-time-cell-padding: 8px !default;
 
-  $header-day-element-height: 24px;
+  $header-day-element-height: 24px !default;
   $fluent-scheduler-workspace-date-table-cell-height: 28px !default;
 
-  $fluent-scheduler-navigator-height: 28px !default;
   $fluent-scheduler-header-panel-day-font-size: 14px !default;
   $fluent-scheduler-header-height: 34px !default;
   $fluent-scheduler-header-offset: 2px 8px !default;
-  $fluent-scheduler-toolbar-item-offset: 4px !default;
 
   $fluent-scheduler-appointment-tooltip-title-font-size: 14px !default;
   $fluent-scheduler-appointment-tooltip-date-font-size: 11px !default;
@@ -176,8 +156,6 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-dropdown-button-padding: 2px !default;
   $fluent-scheduler-dropdown-button-margin: 2px 1px 2px 3px !default;
   $fluent-scheduler-dropdown-button-vertical-margin: 2px 1px 2px 1px !default;
-  $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
-  $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default;
 
   $fluent-scheduler-appointment-tooltip-content-margin-left: 8px !default;
   $fluent-tooltip-marker-dimension: 18px !default;
@@ -193,23 +171,10 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default;
   $fluent-scheduler-appointment-popup-repeat-end-item-height: 24px !default;
 
-  $agenda-appointment-title-font-size: 13px;
-
-  $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default;
-  $fluent-scheduler-appointment-15min-height: 17px !default;
-  $fluent-scheduler-appointment-20min-height: 24px !default;
-  $fluent-scheduler-appointment-25min-height: 32px !default;
-
-  $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default;
-  $fluent-scheduler-appointment-10min-title-font-size: 8px !default;
-  $fluent-scheduler-appointment-10min-title-line-height: 12px !default;
-  $fluent-scheduler-appointment-10min-icon-font-size: 12px !default;
-  $fluent-scheduler-appointment-10min-icon-right: 2px !default;
+  $agenda-appointment-title-font-size: 13px !default;
 
   $fluent-scheduler-appointment-15min-recurrence-padding-right: 16px !default;
-  $fluent-scheduler-appointment-15min-title-font-size: 12px !default;
   $fluent-scheduler-appointment-15min-title-line-height: 12px !default;
-  $fluent-scheduler-appointment-15min-icon-font-size: 12px !default;
   $fluent-scheduler-appointment-15min-icon-right: 5px !default;
 
   $fluent-scheduler-appointment-20min-recurrence-padding-right: 20px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/scrollView/_index.scss
index 12a4b458fc80..fa971352b542 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/scrollView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/scrollView/_index.scss
@@ -6,7 +6,7 @@
 @use "../scrollable";
 @use "../../base/scrollView";
 
-$scrollview-loading-indicator-size: 42px;
+$scrollview-loading-indicator-size: 42px !default;
 
 .dx-scrollview-scrollbottom-text,
 .dx-scrollview-pull-down-text {
diff --git a/packages/devextreme-scss/scss/widgets/fluent/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/scrollable/_sizes.scss
index 993a6b25a95a..0cfcdad10d93 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/scrollable/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/scrollable/_sizes.scss
@@ -1,2 +1,2 @@
-$fluent-scrollbar-size-thin: 6px;
-$fluent-scrollbar-size: 13px;
+$fluent-scrollbar-size-thin: 6px !default;
+$fluent-scrollbar-size: 13px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/slider/_sizes.scss
index 788adabaef81..b9af6d044e39 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/slider/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/slider/_sizes.scss
@@ -3,31 +3,22 @@
 $fluent-slider-handle-size: null !default;
 $fluent-slider-wrapper-height: null !default;
 $fluent-slider-tooltip-width: null !default;
-$fluent-slider-top-tooltip-margin: null !default;
 
 $fluent-slider-height: 28px !default; // for fieldset height
 $fluent-slider-radius: 50% !default;
 $fluent-slider-track-height: null !default;
 $fluent-slider-track-border-radius: 2px !default;
-$fluent-slider-handle-height: null !default;
-$fluent-slider-handle-inner-size: null !default;
 
 @if $size == "default" {
   $fluent-slider-track-height: 4px !default;
-  $fluent-slider-handle-height: 18px !default;
   $fluent-slider-handle-size: 20px !default;
-  $fluent-slider-handle-inner-size: 18px !default;
   $fluent-slider-wrapper-height: 32px !default;
   $fluent-slider-tooltip-width: 34px !default;
-  $fluent-slider-top-tooltip-margin: -5px !default;
 }
 
 @else if $size == "compact" {
   $fluent-slider-track-height: 2px !default;
-  $fluent-slider-handle-height: 14px !default;
   $fluent-slider-handle-size: 16px !default;
-  $fluent-slider-handle-inner-size: 14px !default;
   $fluent-slider-wrapper-height: 26px !default;
   $fluent-slider-tooltip-width: 28px !default;
-  $fluent-slider-top-tooltip-margin: -2px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_index.scss
index 4ddec0093191..d1143ea3fcea 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_index.scss
@@ -5,8 +5,8 @@
 @use "../button/colors" as *;
 @use "../overlay";
 
-$fluent-fa-button-label-offset: 16px;
-$fluent-fa-button-label-padding: 4px 8px;
+$fluent-fa-button-label-offset: 16px !default;
+$fluent-fa-button-label-padding: 4px 8px !default;
 
 @include dx-fa-button-mixin(
   $fluent-main-fa-button-size,
diff --git a/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_sizes.scss
index 8862d4505a19..bfd200a0685b 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_sizes.scss
@@ -8,13 +8,13 @@ $fluent-fa-button-size: null !default;
 @if $size == "default" {
   $fluent-main-fa-button-size: 44px !default;
   $fluent-fa-button-size: 44px !default;
-  $fluent-main-fa-button-horizontal-padding: 16px;
-  $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 8px;
+  $fluent-main-fa-button-horizontal-padding: 16px !default;
+  $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 8px !default;
 }
 
 @else if $size == "compact" {
   $fluent-main-fa-button-size: 32px !default;
   $fluent-fa-button-size: 32px !default;
-  $fluent-main-fa-button-horizontal-padding: 12px;
-  $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 4px;
+  $fluent-main-fa-button-horizontal-padding: 12px !default;
+  $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 4px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/splitter/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/splitter/_colors.scss
index 44c8a9441194..31e5ce8db750 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/splitter/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/splitter/_colors.scss
@@ -10,19 +10,19 @@ $splitter-resize-handle-color: null !default;
 * $name 30. Focused state icon color
 * $type color
 */
-$splitter-resize-handle-color-focused: null !default;
+$splitter-resize-handle-color-focused: $base-inverted-text-color !default;
 
 /**
 * $name 40. Handle background color
 * $type color
 */
-$splitter-resize-handle-bg: null !default;
+$splitter-resize-handle-bg: $base-border-color !default;
 
 /**
 * $name 50. Handle hover state background color
 * $type color
 */
-$splitter-resize-handle-bg-hover: null !default;
+$splitter-resize-handle-bg-hover: $base-border-color-hover !default;
 
 /**
 * $name 60. Handle focused state background color
@@ -32,18 +32,10 @@ $splitter-resize-handle-bg-focused: $base-accent !default;
 
 @if $mode == "light" {
   $splitter-resize-handle-color: $base-icon-color !default;
-  $splitter-resize-handle-color-focused: $base-inverted-text-color !default;
-
-  $splitter-resize-handle-bg: $base-border-color !default;
-  $splitter-resize-handle-bg-hover: $base-border-color-hover !default;
 }
 
 @if $mode == "dark" {
   $splitter-resize-handle-color: $base-text-color !default;
-  $splitter-resize-handle-color-focused: $base-inverted-text-color !default;
-
-  $splitter-resize-handle-bg: $base-border-color !default;
-  $splitter-resize-handle-bg-hover: $base-border-color-hover !default;
 }
 
 /**
diff --git a/packages/devextreme-scss/scss/widgets/fluent/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/splitter/_sizes.scss
index a0e0b973b604..94d7ce69c89a 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/splitter/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/splitter/_sizes.scss
@@ -1 +1 @@
-$splitter-resize-handle-icon-size: 20px;
+$splitter-resize-handle-icon-size: 20px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/switch/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/switch/_index.scss
index f2dcd883f771..55c05689deca 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/switch/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/switch/_index.scss
@@ -5,9 +5,9 @@
 @use "../../base/switch";
 @use "../../base/switch/mixins" as *;
 
-$fluent-switch-transition: all 0.2s cubic-bezier(0.33, 0, 0.67, 1);
-$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1);
-$fluent-switch-shadow: none;
+$fluent-switch-transition: all 0.2s cubic-bezier(0.33, 0, 0.67, 1) !default;
+$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1) !default;
+$fluent-switch-shadow: none !default;
 
 @include dx-switch(
   $fluent-switch-width,
diff --git a/packages/devextreme-scss/scss/widgets/fluent/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/switch/_sizes.scss
index c2817e8f9714..8906ee1bef54 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/switch/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/switch/_sizes.scss
@@ -3,11 +3,9 @@
 $fluent-switch-width: null !default;
 $switch-handle-margin: null !default;
 $switch-padding: 8px !default;
-$switch-container-vertical-margin: null !default;
-$switch-container-horizontal-padding: null !default;
+$switch-container-vertical-margin: 0 !default;
 $fluent-switch-height: null !default;
 $switch-handle-height: null !default;
-$switch-container-height: null !default;
 
 $fluent-switch-shadow-blur-radius: 0 !default;
 $fluent-switch-container-adjustment: 6px !default;
@@ -16,18 +14,15 @@ $fluent-switch-container-adjustment: 6px !default;
   $fluent-switch-width: 40px !default;
   $switch-handle-height: 14px !default;
   $switch-handle-margin: 3px !default;
-  $switch-container-vertical-margin: 0 !default;
-  $switch-container-horizontal-padding: $switch-handle-margin !default;
   $fluent-switch-height: 20px !default;
-  $switch-container-height: $fluent-switch-height !default;
 }
 
 @else if $size == "compact" {
   $fluent-switch-width: 32px !default;
   $switch-handle-height: 12px !default;
   $switch-handle-margin: 2px !default;
-  $switch-container-vertical-margin: 0 !default;
-  $switch-container-horizontal-padding: $switch-handle-margin !default;
   $fluent-switch-height: 16px !default;
-  $switch-container-height: $fluent-switch-height !default;
 }
+
+$switch-container-horizontal-padding: $switch-handle-margin !default;
+$switch-container-height: $fluent-switch-height !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/tabs/variables/_sizes.scss
index 1793c8ce0a4a..0c73f52e0640 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/tabs/variables/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/tabs/variables/_sizes.scss
@@ -1,22 +1,21 @@
 @use "../../sizes" as *;
 
 $fluent-tabs-item-gap: 4px !default;
-$fluent-tabs-item-padding: null !default;
 $fluent-tabs-item-padding-top-bottom: null !default;
 $fluent-tabs-item-padding-right-left: null !default;
-$fluent-tab-height: null !default;
+$fluent-tab-height: auto !default;
 
 $fluent-tab-font-weight-basic: 400 !default;
 $fluent-tab-font-weight-accent: 500 !default;
-$fluent-base-icon-margin: null !default;
+$fluent-base-icon-margin: 8px !default;
 $fluent-tabs-icon-size: $fluent-base-icon-size !default;
 
 $fluent-tab-nav-button-icon-width: null !default;
 $fluent-tab-nav-button-icon-height: null !default;
 $fluent-tab-nav-button-icon-font-size: null !default;
-$fluent-tab-nav-button-content-padding: null !default;
+$fluent-tab-nav-button-content-padding: 0 4px !default;
 
-$fluent-tab-vertical-nav-button-content-padding: null !default;
+$fluent-tab-vertical-nav-button-content-padding: 4px 0 !default;
 
 $fluent-indicator-thickness-primary: 2px !default;
 $fluent-indicator-thickness-secondary: 3px !default;
@@ -32,27 +31,19 @@ $fluent-badge-min-size: null !default;
 @if $size == "default" {
   $fluent-tabs-item-padding-top-bottom: 12px !default;
   $fluent-tabs-item-padding-right-left: 10px !default;
-  $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
-  $fluent-tab-height: auto !default;
-  $fluent-base-icon-margin: 8px !default;
   $fluent-tab-nav-button-icon-width: 20px !default;
   $fluent-tab-nav-button-icon-height: 20px !default;
   $fluent-tab-nav-button-icon-font-size: 20px !default;
-  $fluent-tab-nav-button-content-padding: 0 4px !default;
-  $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default;
   $fluent-badge-min-size: 20px !default;
 }
 
 @else if $size == "compact" {
   $fluent-tabs-item-padding-top-bottom: 8px !default;
   $fluent-tabs-item-padding-right-left: 8px !default;
-  $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
-  $fluent-tab-height: auto !default;
-  $fluent-base-icon-margin: 8px !default;
   $fluent-tab-nav-button-icon-width: 16px !default;
   $fluent-tab-nav-button-icon-height: 16px !default;
   $fluent-tab-nav-button-icon-font-size: 16px !default;
-  $fluent-tab-nav-button-content-padding: 0 4px !default;
-  $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default;
   $fluent-badge-min-size: 16px !default;
 }
+
+$fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/tagBox/_sizes.scss
index 214f072e13de..92052e567b9e 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/tagBox/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/tagBox/_sizes.scss
@@ -1,7 +1,7 @@
 @use "../sizes" as *;
 
 $fluent-tagbox-tag-content-padding-left: null !default;
-$fluent-tagbox-tag-content-padding-right: null !default;
+$fluent-tagbox-tag-content-padding-right: 20px !default;
 $fluent-tagbox-tag-content-vertical-padding: null !default;
 $fluent-tagbox-tag-content-font-size: null !default;
 $fluent-tagbox-tag-container-padding-left: null !default;
@@ -17,7 +17,6 @@ $fluent-tagbox-tag-container-gap: null !default;
 
 @if $size == "default" {
   $fluent-tagbox-tag-content-padding-left: 6px !default;
-  $fluent-tagbox-tag-content-padding-right: 20px !default;
   $fluent-tagbox-tag-content-vertical-padding: 2px !default;
   $fluent-tagbox-tag-content-font-size: 12px !default;
   $fluent-tagbox-tag-container-padding-left: 12px !default;
@@ -31,7 +30,6 @@ $fluent-tagbox-tag-container-gap: null !default;
 
 @else if $size == "compact" {
   $fluent-tagbox-tag-content-padding-left: 4px !default;
-  $fluent-tagbox-tag-content-padding-right: 20px !default;
   $fluent-tagbox-tag-content-vertical-padding: 0 !default;
   $fluent-tagbox-tag-content-font-size: 10px !default;
   $fluent-tagbox-tag-container-padding-left: 8px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss
index b711bc2cce9d..40f6e1def3da 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss
@@ -87,20 +87,20 @@ $texteditor-input-border-radius: $base-border-radius !default;
 $texteditor-label-transition:
   font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
   transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
-  top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;
+  top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms !default;
 
 @if $mode == "light" {
+  $texteditor-outlined-bg: $base-element-bg !default;
+
   @if $color == "blue" {
     $texteditor-color: $base-text-color !default;
     $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default;
-    $texteditor-outlined-bg: $base-element-bg !default;
     $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -3.9%, $space: hsl) !default;
   }
 
   @if $color == "saas" {
     $texteditor-color: rgba(66, 81, 118, 1) !default;
     $texteditor-placeholder-color: rgba(144, 158, 192, 1) !default;
-    $texteditor-outlined-bg: $base-element-bg !default;
     $texteditor-filled-bg: rgba(243, 245, 248, 1) !default;
   }
 
@@ -141,8 +141,8 @@ $texteditor-filled-bg-hover: $texteditor-filled-bg !default;
 */
 $texteditor-filled-bg-focused: $texteditor-filled-bg !default;
 
-$texteditor-label-color: $texteditor-placeholder-color;
-$texteditor-label-color-focused: $base-accent;
+$texteditor-label-color: $texteditor-placeholder-color !default;
+$texteditor-label-color-focused: $base-accent !default;
 
 :root {
   --dx-texteditor-color-text: #{$texteditor-color};
diff --git a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss
index 6ef8c31da61a..463672eeeafe 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss
@@ -12,10 +12,10 @@
 @use "../../base/textEditor/mixins" as *;
 @use "../colorBox/sizes" as *;
 
-$fluent-base-standard-texteditor-input-horizontal-padding: 0;
-$fluent-texteditor-invalid-badge-size: $fluent-invalid-badge-size + 2 * $fluent-invalid-badge-horizontal-padding;
-$fluent-editor-custom-button-margin: 6px;
-$fluent-editor-border-width: 1px;
+$fluent-base-standard-texteditor-input-horizontal-padding: 0 !default;
+$fluent-texteditor-invalid-badge-size: $fluent-invalid-badge-size + 2 * $fluent-invalid-badge-horizontal-padding !default;
+$fluent-editor-custom-button-margin: 6px !default;
+$fluent-editor-border-width: 1px !default;
 
 @mixin texteditor-outlined-styling() {
   background-color: $texteditor-outlined-bg;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_sizes.scss
index eabf7d1cf17a..d49693d85091 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_sizes.scss
@@ -4,13 +4,13 @@
 $fluent-texteditor-line-height: null !default;
 $fluent-texteditor-font-size: null !default;
 $fluent-texteditor-input-height: null !default;
-$fluent-texteditor-label-top-offset: null !default;
+$fluent-texteditor-label-top-offset: -1px !default;
 $fluent-texteditor-label-outside-top-offset: null !default;
 $fluent-filled-texteditor-input-horizontal-padding: null !default;
 $fluent-filled-texteditor-input-top-padding: null !default;
 $fluent-filled-texteditor-input-bottom-padding: null !default;
 $fluent-standard-texteditor-input-top-padding: null !default;
-$fluent-underlined-editor-button-height: null !default;
+$fluent-underlined-editor-button-height: 22px !default;
 $fluent-texteditor-label-font-size: null !default;
 $fluent-texteditor-label-outside-height: null !default;
 $fluent-standard-texteditor-input-bottom-padding: null !default;
@@ -27,7 +27,6 @@ $texteditor-icon-container-size: $fluent-base-icon-size !default;
   $fluent-texteditor-label-outside-height: 20px !default;
   $fluent-texteditor-label-outside-top-offset: 24px !default;
   $fluent-texteditor-label-font-size: 12px !default;
-  $fluent-texteditor-label-top-offset: -1px !default;
   $fluent-filled-texteditor-input-horizontal-padding: 12px !default;
   $fluent-filled-texteditor-input-top-padding: 5px !default;
   $fluent-filled-texteditor-input-with-label-top-padding: 8px !default;
@@ -37,7 +36,6 @@ $texteditor-icon-container-size: $fluent-base-icon-size !default;
   $fluent-standard-texteditor-input-bottom-padding: 5px !default;
   $fluent-standard-texteditor-with-label-input-top-padding: 9px !default;
   $fluent-standard-texteditor-with-label-input-bottom-padding: 3px !default;
-  $fluent-underlined-editor-button-height: 22px !default;
 }
 
 @else if $size == "compact" {
@@ -47,7 +45,6 @@ $texteditor-icon-container-size: $fluent-base-icon-size !default;
   $fluent-texteditor-label-outside-height: 16px !default;
   $fluent-texteditor-label-outside-top-offset: 18px !default;
   $fluent-texteditor-label-font-size: 10px !default;
-  $fluent-texteditor-label-top-offset: -1px !default;
   $fluent-filled-texteditor-input-horizontal-padding: 8px !default;
   $fluent-filled-texteditor-input-top-padding: 3px !default;
   $fluent-filled-texteditor-input-with-label-top-padding: 6px !default;
@@ -57,7 +54,6 @@ $texteditor-icon-container-size: $fluent-base-icon-size !default;
   $fluent-standard-texteditor-input-bottom-padding: 3px !default;
   $fluent-standard-texteditor-with-label-input-top-padding: 6px !default;
   $fluent-standard-texteditor-with-label-input-bottom-padding: 2px !default;
-  $fluent-underlined-editor-button-height: 22px !default;
 }
 
 $fluent-filled-texteditor-input-padding:
diff --git a/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss
index 62ab9b9c048a..80bebbfef54f 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss
@@ -2,16 +2,14 @@
 @use "../sizes" as *;
 
 $fluent-tooltip-padding: null !default;
-$fluent-tooltip-font-size: null !default;
+$fluent-tooltip-font-size: 12px !default;
 $fluent-tooltip-arrow-border-radius: 2px !default;
 $fluent-tooltip-shadow: 0 0 2px 0 $base-dropdown-shadow-color1 !default;
 
 @if $size == "default" {
   $fluent-tooltip-padding: 7px 11px !default;
-  $fluent-tooltip-font-size: 12px;
 }
 
 @else if $size == "compact" {
   $fluent-tooltip-padding: 3px 5px !default;
-  $fluent-tooltip-font-size: 12px;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss
index 8f2518ae8958..8cb50f05e334 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss
@@ -1,18 +1,17 @@
 @use "../sizes" as *;
 
 $fluent-treeview-toggle-item-width: null !default;
-$fluent-treeview-item-height: null !default;
 $fluent-checkbox-container-size: null !default;
-$fluent-treeview-container-with-border-offset: 8px;
+$fluent-treeview-container-with-border-offset: 8px !default;
 $fluent-treeview-item-element-gap: 8px !default;
-$fluent-treeview-item-margin: 1px 0;
-$fluent-treeview-item-border-radius: 4px;
-$fluent-treeview-border-padding: 1px;
+$fluent-treeview-item-margin: 1px 0 !default;
+$fluent-treeview-item-border-radius: 4px !default;
+$fluent-treeview-border-padding: 1px !default;
 $fluent-treeview-container-padding:
   $fluent-treeview-border-padding
   $fluent-treeview-border-padding
   $fluent-treeview-border-padding
-  $fluent-treeview-container-with-border-offset;
+  $fluent-treeview-container-with-border-offset !default;
 
 $fluent-treeview-checkbox-offset: null !default;
 $fluent-select-all-item-padding: null !default;
@@ -24,7 +23,6 @@ $fluent-treeview-item-side-padding: 12px !default;
 $fluent-select-all-item-border-visible-padding: 26px !default;
 
 @if $size == "default" {
-  $fluent-treeview-item-height: 44px !default;
   $fluent-treeview-toggle-item-width: 20px !default;
   $fluent-checkbox-container-size: 20px !default;
   $fluent-treeview-checkbox-offset: 42px !default;
@@ -32,11 +30,10 @@ $fluent-select-all-item-border-visible-padding: 26px !default;
   $fluent-treeview-item-padding: 12px $fluent-treeview-item-side-padding !default;
   $fluent-treeview-load-indicator-size: 20px !default;
   $fluent-treeview-searchbox-margin-bottom: 8px !default;
-  $fluent-treeview-search-editor-height: 48px;
+  $fluent-treeview-search-editor-height: 48px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-treeview-item-height: 32px !default;
   $fluent-treeview-toggle-item-width: 16px !default;
   $fluent-treeview-checkbox-offset: 36px !default;
   $fluent-checkbox-container-size: 16px !default;
@@ -44,5 +41,5 @@ $fluent-select-all-item-border-visible-padding: 26px !default;
   $fluent-treeview-item-padding: 10px $fluent-treeview-item-side-padding !default;
   $fluent-treeview-load-indicator-size: 16px !default;
   $fluent-treeview-searchbox-margin-bottom: 4px !default;
-  $fluent-treeview-search-editor-height: 32px;
+  $fluent-treeview-search-editor-height: 32px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss
index 554959097d56..7a73a5756f5e 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss
@@ -4,7 +4,7 @@ $fluent-xl-font-size: null !default;
 $fluent-l-font-size: null !default;
 $fluent-m-font-size: null !default;
 $fluent-s-font-size: null !default;
-$fluent-xs-font-size: null !default;
+$fluent-xs-font-size: 12px !default;
 $fluent-h1-font-size: null !default;
 $fluent-h2-font-size: null !default;
 $fluent-h3-font-size: null !default;
@@ -17,7 +17,6 @@ $fluent-h6-font-size: null !default;
   $fluent-l-font-size: 28px !default;
   $fluent-m-font-size: 20px !default;
   $fluent-s-font-size: 18px !default;
-  $fluent-xs-font-size: 12px !default;
 
   $fluent-h1-font-size: 40px !default;
   $fluent-h2-font-size: 36px !default;
@@ -32,7 +31,6 @@ $fluent-h6-font-size: null !default;
   $fluent-l-font-size: 20px !default;
   $fluent-m-font-size: 16px !default;
   $fluent-s-font-size: 14px !default;
-  $fluent-xs-font-size: 12px !default;
 
   $fluent-h1-font-size: 32px !default;
   $fluent-h2-font-size: 28px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/validation/_sizes.scss
index 408e81922fdd..f46cec6854f2 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/validation/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/validation/_sizes.scss
@@ -1,6 +1,5 @@
 @use "../sizes" as *;
 
-$fluent-validation-message-padding: null !default;
 $fluent-validationsummary-item-margin: null !default;
 $fluent-validation-message-line-height: null !default;
 $fluent-validation-message-horizontal-padding: null !default;
@@ -10,7 +9,6 @@ $fluent-validation-message-vertical-padding: 4px !default;
 $fluent-validation-message-font-size: 12px !default;
 
 @if $size == "default" {
-  $fluent-validation-message-padding: 6px !default;
   $fluent-validationsummary-item-margin: 6px !default;
 
   $fluent-validation-message-horizontal-padding: 8px !default;
@@ -18,7 +16,6 @@ $fluent-validation-message-font-size: 12px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-validation-message-padding: 4px !default;
   $fluent-validationsummary-item-margin: 4px !default;
 
   $fluent-validation-message-horizontal-padding: 6px !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/_sizes.scss
index bfcfe2484d0a..3ad8c9f221f2 100644
--- a/packages/devextreme-scss/scss/widgets/generic/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/_sizes.scss
@@ -69,7 +69,7 @@ $generic-base-inline-borderedwidget-bottom-padding:
   $generic-base-inline-widget-bottom-padding -
   $generic-base-border-width !default;
 
-$generic-treeview-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width;
+$generic-treeview-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width !default;
 
 :root {
   --dx-component-height: #{$generic-base-inline-widget-height};
diff --git a/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss
index 8c648c6e3c96..d8302f0516c3 100644
--- a/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss
@@ -4,7 +4,6 @@ $generic-button-text-line-height: null !default;
 $generic-button-vertical-padding: null !default;
 $generic-button-horizontal-padding: null !default;
 $generic-button-icon-horizontal-padding: null !default;
-$generic-button-box-shadow-size: null !default;
 $generic-button-border-weight: $generic-base-border-width !default;
 
 $generic-button-content-line-height: $generic-base-line-height !default;
@@ -14,7 +13,6 @@ $generic-button-content-line-height: $generic-base-line-height !default;
   $generic-button-vertical-padding: 8px !default;
   $generic-button-horizontal-padding: 12px !default;
   $generic-button-icon-horizontal-padding: 8px !default;
-  $generic-button-box-shadow-size: 0 1px 3px !default;
 }
 
 @else if $size == "compact" {
@@ -22,7 +20,6 @@ $generic-button-content-line-height: $generic-base-line-height !default;
   $generic-button-vertical-padding: 4px !default;
   $generic-button-horizontal-padding: 10px !default;
   $generic-button-icon-horizontal-padding: 5px !default;
-  $generic-button-box-shadow-size: 0 1px 2px !default;
 }
 
 :root {
diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss
index e1f0ed77f527..561619679484 100644
--- a/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss
@@ -17,14 +17,14 @@
 * $name 101. Border radius
 * $type text
 */
-$cardview-generic-common-border-radius: null !default;
+$cardview-generic-common-border-radius: 16px !default;
 
 /**
 * $name 104. Text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-common-text-weight: null !default;
+$cardview-generic-common-text-weight: 400 !default;
 
 /**
 * $name 105. Vertical gap between cards
@@ -46,9 +46,9 @@ $cardview-generic-common-padding: null !default;
 
 // #region CARD
 
-$cardview-generic-card-min-width: null !default;
+$cardview-generic-card-min-width: 250px !default;
 
-$cardview-generic-card-border-width: null !default;
+$cardview-generic-card-border-width: 1px !default;
 
 /**
 * $name 202. Border radius
@@ -67,7 +67,7 @@ $cardview-generic-card__header__selection-checkbox-padding-right: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-card__field-caption-weight: null !default;
+$cardview-generic-card__field-caption-weight: 600 !default;
 
 $cardview-generic-card__cover-max-height: null !default;
 
@@ -90,13 +90,13 @@ $cardview-generic-card__content__cell-padding-horizontal: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-card--selected__field-caption-weight: null !default;
+$cardview-generic-card--selected__field-caption-weight: $cardview-generic-card__field-caption-weight !default;
 
 // #endregion
 
 // #region HEADER
 
-$cardview-generic-header-gap: null !default;
+$cardview-generic-header-gap: 12px !default;
 
 // #endregion
 
@@ -110,13 +110,13 @@ $cardview-generic-header-panel--empty-line-height: null !default;
 
 // #region HEADER PANEL ITEM
 
-$cardview-generic-header-panel__item-border-width: null !default;
+$cardview-generic-header-panel__item-border-width: 1px !default;
 
 /**
 * $name 402. Border radius
 * $type text
 */
-$cardview-generic-header-panel__item-border-radius: null !default;
+$cardview-generic-header-panel__item-border-radius: 4px !default;
 
 $cardview-generic-header-panel__item-padding-vertical: null !default;
 
@@ -129,16 +129,16 @@ $cardview-generic-header-panel__item-line-height: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-header-panel__item-text-weight: null !default;
+$cardview-generic-header-panel__item-text-weight: $cardview-generic-common-text-weight !default;
 
 /**
 * $name 408. Sort index text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-header-panel__item__sort-index-text-weight: null !default;
+$cardview-generic-header-panel__item__sort-index-text-weight: 400 !default;
 
-$cardview-generic-header-panel__item__icon-size: null !default;
+$cardview-generic-header-panel__item__icon-size: $generic-base-icon-size !default;
 
 $cardview-generic-header-item__left-padding: null !default;
 $cardview-generic-header-item__right-padding: null !default;
@@ -152,14 +152,14 @@ $cardview-generic-header-item__right-padding: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-header-panel__item--hovered-text-weight: null !default;
+$cardview-generic-header-panel__item--hovered-text-weight: $cardview-generic-header-panel__item-text-weight !default;
 
 /**
 * $name 507. Sort index text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-header-panel__item--hovered__sort-index-text-weight: null !default;
+$cardview-generic-header-panel__item--hovered__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default;
 
 // #endregion
 
@@ -170,14 +170,14 @@ $cardview-generic-header-panel__item--hovered__sort-index-text-weight: null !def
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-header-panel__item--disabled-text-weight: null !default;
+$cardview-generic-header-panel__item--disabled-text-weight: $cardview-generic-header-panel__item-text-weight !default;
 
 /**
 * $name 607. Sort index text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-header-panel__item--disabled__sort-index-text-weight: null !default;
+$cardview-generic-header-panel__item--disabled__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default;
 
 // #endregion
 
@@ -188,10 +188,10 @@ $cardview-generic-header-panel__item--disabled__sort-index-text-weight: null !de
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-header-panel__item--dragged-text-weight: null !default;
+$cardview-generic-header-panel__item--dragged-text-weight: $cardview-generic-header-panel__item-text-weight !default;
 
-$cardview-generic-header-item__sort-indicator__border-size: null;
-$cardview-generic-header-item__sort-indicator__border-radius: null;
+$cardview-generic-header-item__sort-indicator__border-size: null !default;
+$cardview-generic-header-item__sort-indicator__border-radius: null !default;
 
 // #endregion
 
@@ -199,9 +199,9 @@ $cardview-generic-header-item__sort-indicator__border-radius: null;
 
 $cardview-generic-header-panel__dropzone-height: null !default;
 
-$cardview-generic-header-panel__dropzone-top: null !default;
+$cardview-generic-header-panel__dropzone-top: 0 !default;
 
-$cardview-generic-header-panel__dropzone-border-width: null !default;
+$cardview-generic-header-panel__dropzone-border-width: 1.5px !default;
 
 /**
 * $name 801. Border radius
@@ -217,7 +217,7 @@ $cardview-generic-header-panel__dropzone-border-radius: null !default;
 * $name 901. Border radius
 * $type text
 */
-$cardview-generic-filter-panel-border-radius: null !default;
+$cardview-generic-filter-panel-border-radius: 0 !default;
 
 // #endregion
 
@@ -237,16 +237,16 @@ $cardview-generic-nodata-view__icon-size: null !default;
 * $name 1101. Border radius
 * $type text
 */
-$cardview-generic-card__content__field-value--highlighted-border-radius: null !default;
+$cardview-generic-card__content__field-value--highlighted-border-radius: 5px !default;
 
-$cardview-generic-card__content__field-value--highlighted-border-padding: null !default;
+$cardview-generic-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default;
 
 /**
 * $name 1103. Text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-generic-card__content__field-value--highlighted-text-weight: null !default;
+$cardview-generic-card__content__field-value--highlighted-text-weight: 500 !default;
 
 // #endregion
 
@@ -261,21 +261,16 @@ $cardview-generic-column-chooser__select-all-item-horizontal-padding: null !defa
 @if $size == "default" {
 
   // Common
-  $cardview-generic-common-border-radius: 16px !default;
-  $cardview-generic-common-text-weight: 400 !default;
   $cardview-generic-common-cards-row-gap: 16px !default;
   $cardview-generic-common-cards-column-gap: 16px !default;
   $cardview-generic-common-gap: 20px !default;
   $cardview-generic-common-padding: 24px !default;
 
   // Card
-  $cardview-generic-card-min-width: 250px !default;
-  $cardview-generic-card-border-width: 1px !default;
   $cardview-generic-card-border-radius: 8px !default;
   $cardview-generic-card__header-height: 52px !default;
   $cardview-generic-card__header-text-size: 16px !default;
   $cardview-generic-card__header__selection-checkbox-padding-right: 12px !default;
-  $cardview-generic-card__field-caption-weight: 600 !default;
   $cardview-generic-card__cover-max-height: 180px !default;
   $cardview-generic-card__cover--noimage__icon-size: 48px !default;
   $cardview-generic-card__content-padding: 12px !default;
@@ -283,60 +278,30 @@ $cardview-generic-column-chooser__select-all-item-horizontal-padding: null !defa
   $cardview-generic-card__content__cell-padding-vertical: 6px !default;
   $cardview-generic-card__content__cell-padding-horizontal: 12px !default;
 
-  // Card - selected
-  $cardview-generic-card--selected__field-caption-weight: $cardview-generic-card__field-caption-weight !default;
-
-  // Header
-  $cardview-generic-header-gap: 12px !default;
-
   // Header panel
   $cardview-generic-header-panel-vertical-margin: 4px !default;
   $cardview-generic-header-panel--empty-line-height: 36px !default;
 
   // Header panel item - default
-  $cardview-generic-header-panel__item-border-width: 1px !default;
-  $cardview-generic-header-panel__item-border-radius: 4px !default;
   $cardview-generic-header-panel__item-padding-horizontal: 12px !default;
   $cardview-generic-header-panel__item-padding-vertical: 8px !default;
   $cardview-generic-header-item__left-padding: 6px !default;
   $cardview-generic-header-item__right-padding: 2px !default;
   $cardview-generic-header-panel__item-line-height: 18px !default;
-  $cardview-generic-header-panel__item-text-weight: $cardview-generic-common-text-weight !default;
-  $cardview-generic-header-panel__item__sort-index-text-weight: 400 !default;
-  $cardview-generic-header-panel__item__icon-size: $generic-base-icon-size !default;
-
-  // Header panel item - hovered
-  $cardview-generic-header-panel__item--hovered-text-weight: $cardview-generic-header-panel__item-text-weight !default;
-  $cardview-generic-header-panel__item--hovered__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default;
-
-  // Header panel item - disabled
-  $cardview-generic-header-panel__item--disabled-text-weight: $cardview-generic-header-panel__item-text-weight !default;
-  $cardview-generic-header-panel__item--disabled__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default;
 
   // Header panel item - dragged
-  $cardview-generic-header-panel__item--dragged-text-weight: $cardview-generic-header-panel__item-text-weight !default;
   $cardview-generic-header-item__sort-indicator__border-size: 2px !default;
   $cardview-generic-header-item__sort-indicator__border-radius: 8px !default;
 
   // Header panel Drop-zone
   $cardview-generic-header-panel__dropzone-height: 36px !default;
-  $cardview-generic-header-panel__dropzone-top: 0 !default;
-  $cardview-generic-header-panel__dropzone-border-width: 1.5px !default;
   $cardview-generic-header-panel__dropzone-border-radius: 8px !default;
 
-  // Filter panel
-  $cardview-generic-filter-panel-border-radius: 0 !default;
-
   // Empty view
   $cardview-generic-nodata-view__icon-container-size: 60px !default;
   $cardview-generic-nodata-view__icon-container-margin: 12px !default;
   $cardview-generic-nodata-view__icon-size: 36px !default;
 
-  // Search highlight
-  $cardview-generic-card__content__field-value--highlighted-border-radius: 5px !default;
-  $cardview-generic-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default;
-  $cardview-generic-card__content__field-value--highlighted-text-weight: 500 !default;
-
   // Column chooser
   $cardview-generic-column-chooser--empty__message-horizontal-padding: 24px !default;
   $cardview-generic-column-chooser__select-all-item-horizontal-padding: 10px !default;
@@ -344,21 +309,16 @@ $cardview-generic-column-chooser__select-all-item-horizontal-padding: null !defa
 @else if $size == "compact" {
 
   // Common
-  $cardview-generic-common-border-radius: 16px !default;
-  $cardview-generic-common-text-weight: 400 !default;
   $cardview-generic-common-cards-row-gap: 12px !default;
   $cardview-generic-common-cards-column-gap: 12px !default;
   $cardview-generic-common-gap: 16px !default;
   $cardview-generic-common-padding: 16px !default;
 
   // Card
-  $cardview-generic-card-min-width: 250px !default;
-  $cardview-generic-card-border-width: 1px !default;
   $cardview-generic-card-border-radius: 6px !default;
   $cardview-generic-card__header-height: 48px !default;
   $cardview-generic-card__header-text-size: 14px !default;
   $cardview-generic-card__header__selection-checkbox-padding-right: 8px !default;
-  $cardview-generic-card__field-caption-weight: 600 !default;
   $cardview-generic-card__cover-max-height: 140px !default;
   $cardview-generic-card__cover--noimage__icon-size: 32px !default;
   $cardview-generic-card__content-padding: 8px !default;
@@ -366,60 +326,30 @@ $cardview-generic-column-chooser__select-all-item-horizontal-padding: null !defa
   $cardview-generic-card__content__cell-padding-vertical: 4px !default;
   $cardview-generic-card__content__cell-padding-horizontal: 8px !default;
 
-  // Card - selected
-  $cardview-generic-card--selected__field-caption-weight: $cardview-generic-card__field-caption-weight !default;
-
-  // Header
-  $cardview-generic-header-gap: 12px !default;
-
   // Header panel
   $cardview-generic-header-panel-vertical-margin: 0 !default;
   $cardview-generic-header-panel--empty-line-height: 24px !default;
 
   // Header panel item - default
-  $cardview-generic-header-panel__item-border-width: 1px !default;
-  $cardview-generic-header-panel__item-border-radius: 4px !default;
   $cardview-generic-header-panel__item-padding-horizontal: 8px !default;
   $cardview-generic-header-panel__item-padding-vertical: 5px !default;
   $cardview-generic-header-item__left-padding: 3px !default;
   $cardview-generic-header-item__right-padding: 1px !default;
   $cardview-generic-header-panel__item-line-height: 14px !default;
-  $cardview-generic-header-panel__item-text-weight: $cardview-generic-common-text-weight !default;
-  $cardview-generic-header-panel__item__sort-index-text-weight: 400 !default;
-  $cardview-generic-header-panel__item__icon-size: $generic-base-icon-size !default;
-
-  // Header panel item - hovered
-  $cardview-generic-header-panel__item--hovered-text-weight: $cardview-generic-header-panel__item-text-weight !default;
-  $cardview-generic-header-panel__item--hovered__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default;
-
-  // Header panel item - disabled
-  $cardview-generic-header-panel__item--disabled-text-weight: $cardview-generic-header-panel__item-text-weight !default;
-  $cardview-generic-header-panel__item--disabled__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default;
 
   // Header panel item - dragged
-  $cardview-generic-header-panel__item--dragged-text-weight: $cardview-generic-header-panel__item-text-weight !default;
   $cardview-generic-header-item__sort-indicator__border-size: 1px !default;
   $cardview-generic-header-item__sort-indicator__border-radius: 4px !default;
 
   // Header panel Drop-zone
   $cardview-generic-header-panel__dropzone-height: 24px !default;
-  $cardview-generic-header-panel__dropzone-top: 0 !default;
-  $cardview-generic-header-panel__dropzone-border-width: 1.5px !default;
   $cardview-generic-header-panel__dropzone-border-radius: 6px !default;
 
-  // Filter panel
-  $cardview-generic-filter-panel-border-radius: 0 !default;
-
   // Empty view
   $cardview-generic-nodata-view__icon-container-size: 40px !default;
   $cardview-generic-nodata-view__icon-container-margin: 8px !default;
   $cardview-generic-nodata-view__icon-size: 24px !default;
 
-  // Search highlight
-  $cardview-generic-card__content__field-value--highlighted-border-radius: 5px !default;
-  $cardview-generic-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default;
-  $cardview-generic-card__content__field-value--highlighted-text-weight: 500 !default;
-
   // Column chooser
   $cardview-generic-column-chooser--empty__message-horizontal-padding: 16px !default;
   $cardview-generic-column-chooser__select-all-item-horizontal-padding: 6px !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
index d7d7f7342931..5c6de4412cf1 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -59,7 +59,6 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
 $chat-messagelist-day-header-font-size: 12px !default;
 
 $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default;
-$chat-typingindicator-padding: null !default;
 $chat-typingindicator-row-gap: $chat-messagegroup-gap !default;
 $chat-typingindicator-font-size: $chat-information-font-size !default;
 $chat-typingindicator-bubble-padding-block: null !default;
@@ -119,7 +118,6 @@ $chat-bubble-gap: 8px !default;
   $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default;
   $chat-typingindicator-bubble-padding-block: 12px !default;
   $chat-typingindicator-bubble-padding-inline: 20px !default;
-  $chat-typingindicator-padding: $chat-messagegroup-padding !default;
 
   $chat-confirmation-popup-content-padding: 0 !default;
   $chat-confirmation-popup-toolbar-gap: 8px !default;
@@ -160,10 +158,11 @@ $chat-bubble-gap: 8px !default;
   $chat-typingindicator-circle-size-center: math.div(12, 12) * 1em !default;
   $chat-typingindicator-bubble-padding-block: 8px !default;
   $chat-typingindicator-bubble-padding-inline: 12px !default;
-  $chat-typingindicator-padding: $chat-messagegroup-padding !default;
 
   $chat-confirmation-popup-content-padding: $generic-popup-content-padding !default;
   $chat-confirmation-popup-toolbar-gap: 4px !default;
 
   $chat-file-icon-font-size: 14 !default;
 }
+
+$chat-typingindicator-padding: $chat-messagegroup-padding !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/generic/checkBox/_index.scss
index 740205c5095b..9a808cc9f92a 100644
--- a/packages/devextreme-scss/scss/widgets/generic/checkBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/checkBox/_index.scss
@@ -4,7 +4,7 @@
 @use "../../base/checkBox";
 @use "../../base/checkBox/mixins" as *;
 
-$generic-checkbox-disable-opacity: 0.4;
+$generic-checkbox-disable-opacity: 0.4 !default;
 
 .dx-checkbox {
   line-height: 0;
diff --git a/packages/devextreme-scss/scss/widgets/generic/checkBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/checkBox/_sizes.scss
index 4d759dc73135..bda37bf216e9 100644
--- a/packages/devextreme-scss/scss/widgets/generic/checkBox/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/checkBox/_sizes.scss
@@ -5,7 +5,7 @@
 $generic-checkbox-icon-font-size: null !default;
 
 $generic-checkbox-border-width: 1px !default;
-$generic-checkbox-border-radius: null !default;
+$generic-checkbox-border-radius: if($base-border-radius-exsmall, min($base-border-radius-exsmall, 2px), null) !default;
 
 $generic-checkbox-arrow-icon-size: 1em !default;
 $generic-checkbox-arrow-font-size: null !default;
@@ -16,12 +16,10 @@ $generic-checkbox-indeterminate-icon-border-radius: 2px !default;
   $generic-checkbox-icon-font-size: 22px !default;
   $generic-checkbox-arrow-font-size: 0.727273em !default;
   $generic-checkbox-indeterminate-icon-size: 0.545455em !default;
-  $generic-checkbox-border-radius: if($base-border-radius-exsmall, min($base-border-radius-exsmall, 2px), null) !default;
 }
 
 @else if $size == "compact" {
   $generic-checkbox-icon-font-size: 16px !default;
   $generic-checkbox-arrow-font-size: 0.625em !default;
   $generic-checkbox-indeterminate-icon-size: 0.5em !default;
-  $generic-checkbox-border-radius: if($base-border-radius-exsmall, min($base-border-radius-exsmall, 2px), null) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/generic/colorView/_index.scss
index 05284c86677b..d304e8f7c8d0 100644
--- a/packages/devextreme-scss/scss/widgets/generic/colorView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/colorView/_index.scss
@@ -4,8 +4,8 @@
 @use "../../base/colorView";
 @include dx-base-colorview-styles($colorview-handle-color, $colorview-handle-border-color);
 
-$generic-colorview-alpha-width: $generic-colorview-palette-width + 4;
-$generic-colorview-hue-scale-height: $generic-colorview-palette-height;
+$generic-colorview-alpha-width: $generic-colorview-palette-width + 4 !default;
+$generic-colorview-hue-scale-height: $generic-colorview-palette-height !default;
 
 .dx-colorview-container {
   width: $generic-colorview-container-width;
diff --git a/packages/devextreme-scss/scss/widgets/generic/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/generic/common/_mixins.scss
index c4e2389d750a..004e85bb20cb 100644
--- a/packages/devextreme-scss/scss/widgets/generic/common/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/common/_mixins.scss
@@ -6,10 +6,10 @@
 @use "../../base/validation" as *;
 @use "../list/sizes" as *;
 
-$badge-invalid-bg: $base-invalid-color;
+$badge-invalid-bg: $base-invalid-color !default;
 $generic-dropdownlist-min-height:
   $generic-base-font-size * $generic-base-line-height +
-  2 * $generic-list-item-vertical-padding;
+  2 * $generic-list-item-vertical-padding !default;
 
 @mixin dx-base-typography() {
   @include dx-base-typography-mixin(
diff --git a/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss
index 4fe335a1b57b..5dddf82d1e49 100644
--- a/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss
@@ -8,7 +8,7 @@
 @use "../overlay";
 @use "../menuBase" as *; // need as private
 
-$generic-menu-popup-border: 1px solid;
+$generic-menu-popup-border: 1px solid !default;
 
 .dx-context-menu {
   color: $menu-color;
diff --git a/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss
index f769f5703721..9a546976aa44 100644
--- a/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss
@@ -5,7 +5,7 @@
 @use "../../base/dateView";
 @use "../scrollable";
 
-$generic-dateview-roller-padding: math.div($generic-dateview-roller-height - $generic-dateview-roller-item-height, 2);
+$generic-dateview-roller-padding: math.div($generic-dateview-roller-height - $generic-dateview-roller-item-height, 2) !default;
 
 .dx-dateview-rollers {
   width: auto;
diff --git a/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss
index db120bcabaf2..f226c1eabec4 100644
--- a/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss
@@ -14,11 +14,11 @@
 @use "../fieldset/sizes" as *;
 @use "../menu/colors" as *;
 
-$generic-diagram-toolbar-icon-size: $generic-base-icon-size;
-$diagram-toolbar-colorbutton-border-width: 3px;
-$diagram-touchbar-item-padding: 5px;
+$generic-diagram-toolbar-icon-size: $generic-base-icon-size !default;
+$diagram-toolbar-colorbutton-border-width: 3px !default;
+$diagram-touchbar-item-padding: 5px !default;
 
-$diagram-toolbox-title-size: 12px;
+$diagram-toolbox-title-size: 12px !default;
 
 .dx-diagram {
   border-color: $diagram-border-color;
diff --git a/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss
index e9ba41d0d338..6656681ab031 100644
--- a/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss
@@ -8,20 +8,20 @@
 @use "../../base/icon_fonts" as *;
 @use "../../base/dropDownEditor";
 
-$generic-dropdowneditor-container-button-size: $generic-base-inline-borderedwidget-inner-size;
-$generic-dropdowneditor-button-offset: $generic-base-border-width;
+$generic-dropdowneditor-container-button-size: $generic-base-inline-borderedwidget-inner-size !default;
+$generic-dropdowneditor-button-offset: $generic-base-border-width !default;
 
 $generic-dropdowneditor-button-size:
   $generic-dropdowneditor-container-button-size -
-  $generic-dropdowneditor-button-offset * 2;
+  $generic-dropdowneditor-button-offset * 2 !default;
 
 $generic-dropdowneditor-invalid-badge-offset:
   $generic-dropdowneditor-container-button-size +
-  $generic-invalid-badge-halfhorizontal-padding;
+  $generic-invalid-badge-halfhorizontal-padding !default;
 
-$generic-dropdowneditor-invalid-badge-with-clear-offset: $generic-dropdowneditor-container-button-size * 2;
+$generic-dropdowneditor-invalid-badge-with-clear-offset: $generic-dropdowneditor-container-button-size * 2 !default;
 
-$generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $generic-invalid-badge-horizontal-padding;
+$generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $generic-invalid-badge-horizontal-padding !default;
 
 @mixin dx-dropdowneditor-button-icon() {
   width: $generic-dropdowneditor-button-size;
diff --git a/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss
index 0ea3fc18ff59..a6c5d42e5a62 100644
--- a/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss
@@ -11,8 +11,8 @@
 @use "../slider/sizes" as *;
 @use "../../base/fieldset";
 
-$generic-field-min-height: $generic-base-inline-widget-height;
-$generic-fieldset-attention-icon-offset: $generic-base-inline-horizontal-padding + $generic-invalid-badge-size;
+$generic-field-min-height: $generic-base-inline-widget-height !default;
+$generic-fieldset-attention-icon-offset: $generic-base-inline-horizontal-padding + $generic-invalid-badge-size !default;
 
 @mixin dx-fieldset-styling() {
   .dx-field {
diff --git a/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss
index e7a8071ba5b7..28c2fc9c26b0 100644
--- a/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss
@@ -14,19 +14,15 @@ $filemanager-file-item-select-bg: color.change($base-accent, $alpha: 0.8) !defau
 $filemanager-file-item-select-focus-color: $base-bg !default;
 $filemanager-file-item-select-focus-bg: color.change($base-accent, $alpha: 0.7) !default;
 $filemanager-file-item-hover-bg: null !default;
-$filemanager-file-item-focused-bg: null !default;
 $filemanager-file-item-focused-border: $base-accent !default;
 $filemanager-item-focused-color: null !default;
-$filemanager-progressbox-shadow-color: null !default;
 
 @if $color == "carmine" {
   $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
-  $filemanager-file-item-focused-bg: $base-accent !default;
   $filemanager-item-focused-color: $base-inverted-text-color !default;
-  $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
 }
 
 @if $color == "contrast" {
@@ -34,9 +30,7 @@ $filemanager-progressbox-shadow-color: null !default;
   $filemanager-dirs-tree-item-focus-bg: $base-text-color !default;
   $filemanager-dirs-tree-item-focus-color: $base-bg !default;
   $filemanager-file-item-hover-bg: $base-hover-color !default;
-  $filemanager-file-item-focused-bg: $base-accent !default;
   $filemanager-item-focused-color: $base-text-color !default;
-  $filemanager-progressbox-shadow-color: $base-shadow-color !default;
 }
 
 @if $color == "dark" {
@@ -44,9 +38,7 @@ $filemanager-progressbox-shadow-color: null !default;
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
-  $filemanager-file-item-focused-bg: $base-focus-bg !default;
   $filemanager-item-focused-color: $base-inverted-text-color !default;
-  $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default;
 }
 
 @if $color == "darkmoon" {
@@ -54,9 +46,7 @@ $filemanager-progressbox-shadow-color: null !default;
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
-  $filemanager-file-item-focused-bg: $base-accent !default;
   $filemanager-item-focused-color: $base-inverted-text-color !default;
-  $filemanager-progressbox-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default;
 }
 
 @if $color == "darkviolet" {
@@ -64,9 +54,7 @@ $filemanager-progressbox-shadow-color: null !default;
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
-  $filemanager-file-item-focused-bg: $base-focus-bg !default;
   $filemanager-item-focused-color: $base-inverted-text-color !default;
-  $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default;
 }
 
 @if $color == "greenmist" {
@@ -74,9 +62,7 @@ $filemanager-progressbox-shadow-color: null !default;
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
-  $filemanager-file-item-focused-bg: $base-accent !default;
   $filemanager-item-focused-color: $base-inverted-text-color !default;
-  $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
 }
 
 @if $color == "light" {
@@ -84,9 +70,7 @@ $filemanager-progressbox-shadow-color: null !default;
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
-  $filemanager-file-item-focused-bg: $base-focus-bg !default;
   $filemanager-item-focused-color: $base-inverted-text-color !default;
-  $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
 }
 
 @if $color == "softblue" {
@@ -94,7 +78,5 @@ $filemanager-progressbox-shadow-color: null !default;
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
   $filemanager-dirs-tree-item-focus-color: $base-text-color !default;
   $filemanager-file-item-hover-bg: $base-hover-bg !default;
-  $filemanager-file-item-focused-bg: $base-focus-bg !default;
   $filemanager-item-focused-color: $base-inverted-text-color !default;
-  $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss
index 50a1d5bc883e..ff43e8aea566 100644
--- a/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss
@@ -4,7 +4,7 @@
 $filemanager-toolbar-separator-height: null !default;
 $filemanager-toolbar-viewmode-width: null !default;
 $filemanager-toolbar-viewmode-padding: null !default;
-$filemanager-toolbar-height: null !default;
+$filemanager-toolbar-height: $generic-toolbar-height + 12px !default;
 $filemanager-breadcrumbs-item-padding-top: null !default;
 $filemanager-breadcrumbs-item-padding-bottom: null !default;
 $filemanager-details-view-checkbox-column-width: null !default;
@@ -21,7 +21,6 @@ $filemanager-progress-panel-padding-top: 6px !default;
   $filemanager-toolbar-separator-height: 36px !default;
   $filemanager-toolbar-viewmode-width: 150px !default;
   $filemanager-toolbar-viewmode-padding: 8px !default;
-  $filemanager-toolbar-height: $generic-toolbar-height + 12px;
   $filemanager-breadcrumbs-item-padding-top: 5px !default;
   $filemanager-breadcrumbs-item-padding-bottom: 8px !default;
   $filemanager-details-view-checkbox-column-width: 43px !default;
@@ -37,7 +36,6 @@ $filemanager-progress-panel-padding-top: 6px !default;
   $filemanager-toolbar-separator-height: 26px !default;
   $filemanager-toolbar-viewmode-width: 130px !default;
   $filemanager-toolbar-viewmode-padding: 5px !default;
-  $filemanager-toolbar-height: $generic-toolbar-height + 12px;
   $filemanager-breadcrumbs-item-padding-top: 3px !default;
   $filemanager-breadcrumbs-item-padding-bottom: 7px !default;
   $filemanager-details-view-checkbox-column-width: 39px !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss
index db8ac6f2827f..d9c1d0c3c4b5 100644
--- a/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss
@@ -6,7 +6,7 @@
 @use "../../base/mixins" as *;
 @use "../../base/fileUploader";
 
-$generic-fileuploader-file-wrapper-border-size: 3px;
+$generic-fileuploader-file-wrapper-border-size: 3px !default;
 
 .dx-fileuploader-wrapper {
   padding: $generic-fileuploader-vertical-padding;
diff --git a/packages/devextreme-scss/scss/widgets/generic/filterBuilder/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/filterBuilder/_colors.scss
index 151208112147..238ce96d88f5 100644
--- a/packages/devextreme-scss/scss/widgets/generic/filterBuilder/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/filterBuilder/_colors.scss
@@ -67,7 +67,7 @@ $filterbuilder-item-value-focus-color: null !default;
 * $name 10. Menu icon color
 * $type color
 */
-$filterbuilder-menu-icon-color: null !default;
+$filterbuilder-menu-icon-color: $base-text-color !default;
 
 @if $color == "carmine" {
   $filterbuilder-text-color: $base-text-color !default;
@@ -90,7 +90,6 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "contrast" {
@@ -114,7 +113,6 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-focus-color: $filterbuilder-item-value-color !default;
   $filterbuilder-text-color: $base-text-color !default;
   $filterbuilder-text-focus-color: $base-text-color !default;
-  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "dark" {
@@ -138,13 +136,11 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: rgba(204, 204, 204, 0.8) !default;
   $filterbuilder-item-value-hover-color: color.adjust($filterbuilder-item-value-color, $alpha: -0.1) !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.2) !default;
-  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "darkmoon" {
   $filterbuilder-text-color: #000 !default;
   $filterbuilder-text-focus-color: $filterbuilder-text-color !default;
-  $filterbuilder-menu-icon-color: $base-text-color !default;
   $filterbuilder-plus-icon-color: color.change($base-success, $alpha: 0.8) !default;
   $filterbuilder-plus-icon-hover-color: color.adjust($filterbuilder-plus-icon-color, $alpha: -0.1) !default;
   $filterbuilder-plus-icon-focus-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 0.2) !default;
@@ -186,7 +182,6 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: rgba(204, 204, 204, 0.8) !default;
   $filterbuilder-item-value-hover-color: color.adjust($filterbuilder-item-value-color, $alpha: -0.1) !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.2) !default;
-  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "greenmist" {
@@ -210,7 +205,6 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "light" {
@@ -234,7 +228,6 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "softblue" {
@@ -258,5 +251,4 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss
index aab84e869c3f..5ee45c681393 100644
--- a/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss
@@ -8,7 +8,7 @@
 @use "../toolbar/sizes" as *;
 @use "../splitterBar";
 
-$gantt-successor-background-color: white;
+$gantt-successor-background-color: white !default;
 
 .dx-gantt {
   border: 1px solid;
diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss
index ea37ef5d4fc7..3a3ba9008d53 100644
--- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss
@@ -26,15 +26,15 @@
 @use "../overlay";
 @use "../pagination";
 
-$generic-grid-base-border-hidden: 1px solid transparent;
-$generic-grid-base-row-border: 1px solid transparent;
-$generic-grid-base-drag-header-border: 1px solid;
-$generic-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color;
-$generic-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color;
-$generic-grid-base-checkbox-icon-size: 16px;
-$generic-grid-base-checkbox-indeterminate-icon-size: 6px;
-$generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height;
-$generic-grid-base-cell-input-height: math.round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding;
+$generic-grid-base-border-hidden: 1px solid transparent !default;
+$generic-grid-base-row-border: 1px solid transparent !default;
+$generic-grid-base-drag-header-border: 1px solid !default;
+$generic-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color !default;
+$generic-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color !default;
+$generic-grid-base-checkbox-icon-size: 16px !default;
+$generic-grid-base-checkbox-indeterminate-icon-size: 6px !default;
+$generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height !default;
+$generic-grid-base-cell-input-height: math.round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding !default;
 
 @mixin dx-set-checkbox-border-color-as-background() {
   @if $generic-color-postfix == ".contrast" {
diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss
index 3d9e0643fe47..9ab006263cd5 100644
--- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss
@@ -16,8 +16,8 @@ $generic-grid-base-checkbox-fontsize: null !default;
 $generic-grid-base-adaptive-text-padding: null !default;
 $generic-grid-base-treeview-search-margin: null !default;
 $generic-command-edit-icon-size: null !default;
-$generic-command-edit-icon-margin: null !default;
-$generic-command-edit-text-margin: null !default;
+$generic-command-edit-icon-margin: 5px !default;
+$generic-command-edit-text-margin: 2px !default;
 $generic-grid-base-nodata-font-size: null !default;
 $generic-grid-base-checkbox-padding-bottom: null !default;
 $generic-grid-base-treeview-select-all-item-offset: null !default;
@@ -26,8 +26,8 @@ $generic-grid-base-command-ai-text-content-padding: null !default;
 $generic-grid-base-command-ai-header-button-padding: null !default;
 $generic-grid-base-command-ai-header-button-size: null !default;
 
-$datagrid-text-link-disabled-opacity: $base-disabled-opacity;
-$datagrid-icon-link-disabled-opacity: 0.6;
+$datagrid-text-link-disabled-opacity: $base-disabled-opacity !default;
+$datagrid-icon-link-disabled-opacity: 0.6 !default;
 $generic-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
 
 @if $size == "default" {
@@ -46,11 +46,9 @@ $generic-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
   $generic-grid-base-adaptive-text-padding: 8px !default;
   $generic-grid-base-treeview-search-margin: 10px !default;
   $generic-command-edit-icon-size: 18px !default;
-  $generic-command-edit-icon-margin: 5px !default;
-  $generic-command-edit-text-margin: 2px !default;
   $generic-grid-base-nodata-font-size: 17px !default;
-  $generic-grid-base-checkbox-padding-bottom: 2px;
-  $generic-grid-base-treeview-select-all-item-offset: 34px;
+  $generic-grid-base-checkbox-padding-bottom: 2px !default;
+  $generic-grid-base-treeview-select-all-item-offset: 34px !default;
   $generic-grid-base-command-ai-chatsparkleoutline-icon-size: 18px !default;
   $generic-grid-base-command-ai-text-content-padding: $generic-grid-base-command-ai-chatsparkleoutline-icon-size + 8px !default;
   $generic-grid-base-command-ai-header-button-padding: 6px !default;
@@ -73,11 +71,9 @@ $generic-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
   $generic-grid-base-adaptive-text-padding: 6px !default;
   $generic-grid-base-treeview-search-margin: 5px !default;
   $generic-command-edit-icon-size: 14px !default;
-  $generic-command-edit-icon-margin: 5px !default;
-  $generic-command-edit-text-margin: 2px !default;
   $generic-grid-base-nodata-font-size: 14px !default;
-  $generic-grid-base-checkbox-padding-bottom: 0;
-  $generic-grid-base-treeview-select-all-item-offset: 28px;
+  $generic-grid-base-checkbox-padding-bottom: 0 !default;
+  $generic-grid-base-treeview-select-all-item-offset: 28px !default;
   $generic-grid-base-command-ai-chatsparkleoutline-icon-size: 14px !default;
   $generic-grid-base-command-ai-text-content-padding: $generic-grid-base-command-ai-chatsparkleoutline-icon-size + 6px !default;
   $generic-grid-base-command-ai-header-button-padding: 5px !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_variables.scss
index 4d9254181e0a..58d431d63c19 100644
--- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_variables.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_variables.scss
@@ -1 +1 @@
-$grid-masterdetail-padding: 20px;
+$grid-masterdetail-padding: 20px !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/aiChat/_sizes.scss
index fa9ad84197d8..0b43b77902d3 100644
--- a/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/aiChat/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/aiChat/_sizes.scss
@@ -1,3 +1,3 @@
 @use "../../../sizes" as *;
 
-$ai-chat-message-icon-size: $generic-base-icon-size;
+$ai-chat-message-icon-size: $generic-base-icon-size !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss
index 797aaf643d03..90e0b2e4232c 100644
--- a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss
@@ -9,10 +9,6 @@ $htmleditor-filled-border-color: transparent !default;
 $htmleditor-invalid-border-color: $base-invalid-color !default;
 $htmleditor-invalid-faded-border-color: $base-invalid-faded-border-color !default;
 $htmleditor-toolbar-border-color: $base-border-color !default;
-$htmleditor-normal-format-active-bg: null !default;
-$htmleditor-default-format-active-bg: null !default;
-$htmleditor-danger-format-active-bg: null !default;
-$htmleditor-success-format-active-bg: null !default;
 $htmleditor-variable-bg: color.change($base-accent, $alpha: 0.15) !default;
 $htmleditor-resize-frame-border-color: $base-accent !default;
 $htmleditor-resize-handle-bg: $base-accent !default;
@@ -22,73 +18,41 @@ $htmleditor-table-border-color: $base-border-color !default;
 $htmleditor-cells-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
 
 @if $color == "carmine" {
-  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
   $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -9%, $space: hsl) !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 
 @if $color == "contrast" {
-  $htmleditor-normal-format-active-bg: $base-bg !default;
-  $htmleditor-default-format-active-bg: $base-default !default;
-  $htmleditor-danger-format-active-bg: $base-danger !default;
-  $htmleditor-success-format-active-bg: $base-success !default;
   $htmleditor-mention-bg: extcolor.difference(#fff, $base-bg) !default;
   $htmleditor-mention-color: $base-inverted-text-color !default;
 }
 
 @if $color == "dark" {
-  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
-  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
   $htmleditor-mention-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 
 @if $color == "darkmoon" {
-  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
-  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default;
-  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
-  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default;
   $htmleditor-mention-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 
 @if $color == "darkviolet" {
-  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
-  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default;
-  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
-  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default;
   $htmleditor-mention-bg: $base-select-bg !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 
 @if $color == "greenmist" {
-  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default;
-  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default;
-  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
-  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default;
   $htmleditor-mention-bg: $base-accent !default;
   $htmleditor-mention-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default;
 }
 
 @if $color == "light" {
-  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
   $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
 
 @if $color == "softblue" {
-  $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
-  $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default;
   $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default;
   $htmleditor-mention-color: $base-text-color !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_sizes.scss
index b19b96465f4e..85381b1e0bfc 100644
--- a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_sizes.scss
@@ -10,15 +10,15 @@ $generic-aidialog-content-padding: null !default;
 @if $size == "default" {
   $generic-toolbar-size-editor-width: 105px !default;
   $generic-html-editor-add-image-dialog-fileuploader-padding: 60px 20px !default;
-  $generic-aidialog-selects-gap: 10px;
-  $generic-aidialog-content-gap: 20px;
-  $generic-aidialog-content-padding: 20px;
+  $generic-aidialog-selects-gap: 10px !default;
+  $generic-aidialog-content-gap: 20px !default;
+  $generic-aidialog-content-padding: 20px !default;
 }
 
 @else if $size == "compact" {
   $generic-toolbar-size-editor-width: 80px !default;
   $generic-html-editor-add-image-dialog-fileuploader-padding: 40px 20px !default;
-  $generic-aidialog-selects-gap: 5px;
-  $generic-aidialog-content-gap: 10px;
-  $generic-aidialog-content-padding: 10px;
+  $generic-aidialog-selects-gap: 5px !default;
+  $generic-aidialog-content-gap: 10px !default;
+  $generic-aidialog-content-padding: 10px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss
index 573e09684108..20a972f1246b 100644
--- a/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss
@@ -8,57 +8,57 @@ $informer-info-color: null !default;
 $informer-info-background-color: null !default;
 
 @if $color == "carmine" {
-  $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -351deg, $saturation: -26.91%, $lightness: -5.49%);
-  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -347deg, $saturation: -26.69%, $lightness: 33.14%);
-  $informer-info-color: $base-text-color;
-  $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl);
+  $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -351deg, $saturation: -26.91%, $lightness: -5.49%) !default;
+  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -347deg, $saturation: -26.69%, $lightness: 33.14%) !default;
+  $informer-info-color: $base-text-color !default;
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
-  $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 2deg, $saturation: -16.93%, $lightness: -6.08%);
-  $informer-error-background-color: rgba(212, 63, 58, 0.1);
-  $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl);
-  $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl);
+  $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 2deg, $saturation: -16.93%, $lightness: -6.08%) !default;
+  $informer-error-background-color: rgba(212, 63, 58, 0.1) !default;
+  $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl) !default;
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl) !default;
 }
 
 @if $color == "dark" {
-  $informer-error-color: $base-danger;
-  $informer-error-background-color: rgba(212, 63, 58, 0.1);
-  $informer-info-color: $base-text-color;
-  $informer-info-background-color: color.adjust($base-text-color, $lightness: -55.69%, $space: hsl);
+  $informer-error-color: $base-danger !default;
+  $informer-error-background-color: rgba(212, 63, 58, 0.1) !default;
+  $informer-info-color: $base-text-color !default;
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: -55.69%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
-  $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -342deg, $saturation: -28.85%, $lightness: -6.67%);
-  $informer-error-background-color: rgba(212, 63, 58, 0.1);
-  $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl);
-  $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl);
+  $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -342deg, $saturation: -28.85%, $lightness: -6.67%) !default;
+  $informer-error-background-color: rgba(212, 63, 58, 0.1) !default;
+  $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl) !default;
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {
-  $informer-error-color: $base-danger;
-  $informer-error-background-color: rgba(212, 63, 58, 0.1);
-  $informer-info-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -210deg, $saturation: -11.11%, $lightness: -9.41%);
-  $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -210deg, $saturation: -11.11%, $lightness: -65.10%);
+  $informer-error-color: $base-danger !default;
+  $informer-error-background-color: rgba(212, 63, 58, 0.1) !default;
+  $informer-info-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -210deg, $saturation: -11.11%, $lightness: -9.41%) !default;
+  $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -210deg, $saturation: -11.11%, $lightness: -65.10%) !default;
 }
 
 @if $color == "greenmist" {
-  $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -351deg, $saturation: -27.05%, $lightness: -4.90%);
-  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -348deg, $saturation: -26.83%, $lightness: 33.73%);
-  $informer-info-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -191deg, $saturation: -32.77%, $lightness: -3.33%);
-  $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -191deg, $saturation: -32.77%, $lightness: 68.82%);
+  $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -351deg, $saturation: -27.05%, $lightness: -4.90%) !default;
+  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -348deg, $saturation: -26.83%, $lightness: 33.73%) !default;
+  $informer-info-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -191deg, $saturation: -32.77%, $lightness: -3.33%) !default;
+  $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -191deg, $saturation: -32.77%, $lightness: 68.82%) !default;
 }
 
 @if $color == "light" {
-  $informer-error-color: $base-danger;
-  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 4deg, $saturation: 0.22%, $lightness: 38.63%);
-  $informer-info-color: $base-text-color;
-  $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl);
+  $informer-error-color: $base-danger !default;
+  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 4deg, $saturation: 0.22%, $lightness: 38.63%) !default;
+  $informer-info-color: $base-text-color !default;
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {
-  $informer-error-color: $base-danger;
-  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 4deg, $saturation: 0.22%, $lightness: 38.63%);
-  $informer-info-color: $base-text-color;
-  $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl);
+  $informer-error-color: $base-danger !default;
+  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 4deg, $saturation: 0.22%, $lightness: 38.63%) !default;
+  $informer-info-color: $base-text-color !default;
+  $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/list/_index.scss b/packages/devextreme-scss/scss/widgets/generic/list/_index.scss
index c1dcca0e4a38..ed6b8aed869c 100644
--- a/packages/devextreme-scss/scss/widgets/generic/list/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/list/_index.scss
@@ -13,9 +13,9 @@
 @use "../../base/list/mixins" as *;
 @use "../badge";
 
-$generic-list-border: $generic-list-border-width solid;
-$generic-list-item-border: $generic-list-item-border-width solid;
-$generic-list-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width;
+$generic-list-border: $generic-list-border-width solid !default;
+$generic-list-item-border: $generic-list-item-border-width solid !default;
+$generic-list-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width !default;
 
 .dx-list-item-chevron {
   @include dx-icon(chevronnext);
diff --git a/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss
index a5829b425501..21159495c936 100644
--- a/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss
@@ -8,14 +8,13 @@
 */
 $loadindicator-bg: null !default;
 $loadindicator-segment-shadow-color: null !default;
-$load-indicator-animation-sparkle-bg-color1: null !default;
+$load-indicator-animation-sparkle-bg-color1: $base-accent !default;
 $load-indicator-animation-sparkle-bg-color2: null !default;
 $load-indicator-animation-sparkle-bg-color3: null !default;
 
 @if $color == "carmine" {
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
   $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default;
   $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default;
 }
@@ -23,7 +22,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 @if $color == "contrast" {
   $loadindicator-bg: $base-inverted-bg !default;
   $loadindicator-segment-shadow-color: $base-shadow-color !default;
-  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
   $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default;
   $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default;
 }
@@ -31,7 +29,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 @if $color == "dark" {
   $loadindicator-bg: color.adjust($base-text-color, $lightness: -17.5%, $space: hsl) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
   $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default;
   $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default;
 }
@@ -39,7 +36,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 @if $color == "darkmoon" {
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
   $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default;
   $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default;
 }
@@ -47,7 +43,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 @if $color == "darkviolet" {
   $loadindicator-bg: $base-accent-highlight-color !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
   $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default;
   $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default;
 }
@@ -55,7 +50,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 @if $color == "greenmist" {
   $loadindicator-bg: color.adjust($base-text-color, $lightness: 17.5%, $space: hsl) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
   $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default;
   $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default;
 }
@@ -63,7 +57,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 @if $color == "light" {
   $loadindicator-bg: color.adjust($base-text-color, $lightness: 17.5%, $space: hsl) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
   $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default;
   $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default;
 }
@@ -71,7 +64,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 @if $color == "softblue" {
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
   $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default;
   $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss
index c000cb70ef14..fbfba161c754 100644
--- a/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss
@@ -8,11 +8,11 @@
 @use "../../base/mixins" as *;
 @use "../../base/menuBase";
 
-$generic-menu-item-padding-increased: $generic-menu-item-padding-base + 2px;
-$generic-menu-item-padding-reduced: $generic-menu-item-padding-base - 2px;
-$generic-menu-arrow-image-size: 7px;
+$generic-menu-item-padding-increased: $generic-menu-item-padding-base + 2px !default;
+$generic-menu-item-padding-reduced: $generic-menu-item-padding-base - 2px !default;
+$generic-menu-arrow-image-size: 7px !default;
 
-$generic-menu-popup-border: 1px solid;
+$generic-menu-popup-border: 1px solid !default;
 
 .dx-menu-item {
   color: $menu-color;
diff --git a/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_sizes.scss
index a6c667cfc55b..f1c91857cdf8 100644
--- a/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_sizes.scss
@@ -16,7 +16,7 @@ $pivotgrid-empty-area-text-padding: null !default;
   $pivotgrid-common-top-bottom-padding: 7px !default;
   $pivotgrid-field-indicators-offset: 6px !default;
   $pivotgrid-indicators-line-height: 19px !default;
-  $pivotgrid-button-top-padding: 12px;
+  $pivotgrid-button-top-padding: 12px !default;
   $pivotgrid-empty-area-text-padding: 7px !default;
 }
 
@@ -27,6 +27,6 @@ $pivotgrid-empty-area-text-padding: null !default;
   $pivotgrid-common-top-bottom-padding: 5px !default;
   $pivotgrid-field-indicators-offset: 4px !default;
   $pivotgrid-indicators-line-height: 16px !default;
-  $pivotgrid-button-top-padding: 8px;
+  $pivotgrid-button-top-padding: 8px !default;
   $pivotgrid-empty-area-text-padding: 5px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss b/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss
index 584ad3d8053d..f7cfb912957a 100644
--- a/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss
@@ -11,8 +11,8 @@
 @use "../../base/popup";
 @use "../overlay";
 
-$generic-popup-toolbar-height: $generic-base-inline-widget-height;
-$generic-popup-toolbar-label-font-size: $generic-m-font-size;
+$generic-popup-toolbar-height: $generic-base-inline-widget-height !default;
+$generic-popup-toolbar-label-font-size: $generic-m-font-size !default;
 
 .dx-popup-wrapper {
   & > .dx-overlay-content {
diff --git a/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss
index ed0a16ca0296..0d42ade93bae 100644
--- a/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss
@@ -4,11 +4,11 @@
 @use "../../base/mixins" as *;
 @use "../../base/progressBar";
 
-$generic-bar-height: 6px;
-$generic-background-width: 90%;
-$generic-progressbar-border-radius: 2px;
-$generic-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
-$generic-progress-bar-border: 1px solid;
+$generic-bar-height: 6px !default;
+$generic-background-width: 90% !default;
+$generic-progressbar-border-radius: 2px !default;
+$generic-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95% !default;
+$generic-progress-bar-border: 1px solid !default;
 
 .dx-progressbar-container {
   height: $generic-bar-height;
diff --git a/packages/devextreme-scss/scss/widgets/generic/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/generic/rangeSlider/_index.scss
index d437e5903f72..5e412c3672ef 100644
--- a/packages/devextreme-scss/scss/widgets/generic/rangeSlider/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/rangeSlider/_index.scss
@@ -2,7 +2,7 @@
 @use "sizes" as *;
 @use "../../base/rangeSlider";
 
-$generic-slider-handle-margin: -7px;
+$generic-slider-handle-margin: -7px !default;
 
 .dx-rangeslider-start-handle {
   margin-inline-start: $generic-slider-handle-margin;
diff --git a/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss
index 8ae754ace0b8..58c2cc65dbce 100644
--- a/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss
@@ -3,7 +3,7 @@
 @use "../scheduler/sizes" as *;
 @use "../../base/recurrenceEditor" as *;
 
-$generic-recurrence-number-box-margin-right: 11px;
+$generic-recurrence-number-box-margin-right: 11px !default;
 
 .dx-recurrence-editor-container {
   .dx-recurrence-numberbox-interval {
diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss
index 998c9d6176d5..71c6890c436a 100644
--- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss
@@ -67,32 +67,27 @@ $scheduler-dd-appointment-hover-text-color: null !default;
 $scheduler-form-icon-color: $base-icon-color !default;
 $scheduler-workspace-month-text-color: null !default;
 $scheduler-dropdown-appointment-date-color: null !default;
-$scheduler-workspace-active-cell-color: null !default;
 $scheduler-workspace-hovered-cell-color: null !default;
 $scheduler-group-header-color: null !default;
 $scheduler-header-bg: null !default;
 $scheduler-alldaypanel-bg: null !default;
-$scheduler-tab-selected-bg: null !default;
-$scheduler-tab-selected-before-bg: null !default;
-$scheduler-tab-focused-border-color: null !default;
 $scheduler-other-month-cell-opacity: null !default;
 $scheduler-fill-focused-appointment: null !default;
 $scheduler-is-shadow-color-for-focused-state: true !default;
 $scheduler-time-indicator-background-color: null !default;
 $scheduler-first-month-cell-background-color: null !default;
-$scheduler-time-panel-background-color: null !default;
 
 $scheduler-tooltip-appointment-text-color: null !default;
 $scheduler-appointment-overlay-bg: null !default;
 
-$month-text-color-light: #757575;
-$month-text-color-dark: #9c9c9c;
+$month-text-color-light: #757575 !default;
+$month-text-color-dark: #9c9c9c !default;
 
 // Agenda
 $agenda-appointment-recurrence-icon-color: null !default;
 $agenda-appointment-hover-bg: $base-hover-bg !default;
 $agenda-appointment-active-bg: null !default;
-$agenda-appointment-text-color: null !default;
+$agenda-appointment-text-color: $base-text-color !default;
 
 @if $color == "carmine" {
   $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default;
@@ -112,14 +107,10 @@ $agenda-appointment-text-color: null !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
   $scheduler-workspace-month-text-color: $month-text-color-light !default;
   $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
-  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
   $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
   $scheduler-group-header-color: $scheduler-panel-text-color !default;
   $scheduler-header-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default;
   $scheduler-alldaypanel-bg: $base-element-bg !default;
-  $scheduler-tab-selected-bg: $base-bg !default;
-  $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default;
-  $scheduler-tab-focused-border-color: $base-accent !default;
   $scheduler-other-month-cell-opacity: 0.5 !default;
   $scheduler-fill-focused-appointment: false !default;
   $scheduler-time-indicator-background-color: rgba(51, 51, 51, 0.04) !default;
@@ -129,7 +120,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-appointment-overlay-bg: $base-bg !default;
 
   $agenda-appointment-recurrence-icon-color: $base-inverted-text-color !default;
-  $agenda-appointment-text-color: $base-text-color !default;
   $agenda-appointment-active-bg: color.change($base-accent, $alpha: 0.15) !default;
 }
 
@@ -149,14 +139,10 @@ $agenda-appointment-text-color: null !default;
   $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 5%, $space: hsl) !default;
   $scheduler-panel-text-color: $base-text-color !default;
   $scheduler-dropdown-appointment-date-color: $base-text-color !default;
-  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
   $scheduler-workspace-hovered-cell-color: extcolor.difference(#fff, $base-text-color) !default;
   $scheduler-group-header-color: $base-text-color !default;
   $scheduler-header-bg: $base-bg !default;
   $scheduler-alldaypanel-bg: $base-bg !default;
-  $scheduler-tab-selected-bg: $base-inverted-bg !default;
-  $scheduler-tab-selected-before-bg: transparent !default;
-  $scheduler-tab-focused-border-color: $base-border-color !default;
   $scheduler-other-month-cell-opacity: 1 !default;
   $scheduler-fill-focused-appointment: true !default;
   $scheduler-time-indicator-background-color: color.change(#3806ff, $alpha: 0.6) !default;
@@ -167,7 +153,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-appointment-overlay-bg: $base-inverted-bg !default;
 
   $agenda-appointment-recurrence-icon-color: $base-text-color !default;
-  $agenda-appointment-text-color: $base-text-color !default;
   $agenda-appointment-active-bg: $base-accent !default;
 }
 
@@ -189,14 +174,10 @@ $agenda-appointment-text-color: null !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
   $scheduler-workspace-month-text-color: $month-text-color-dark !default;
   $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
-  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
   $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
   $scheduler-group-header-color: $scheduler-panel-text-color !default;
   $scheduler-header-bg: $base-hover-bg !default;
   $scheduler-alldaypanel-bg: $base-element-bg !default;
-  $scheduler-tab-selected-bg: $scheduler-workspace-background-color !default;
-  $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default;
-  $scheduler-tab-focused-border-color: $base-focus-bg !default;
   $scheduler-other-month-cell-opacity: 0.5 !default;
   $scheduler-fill-focused-appointment: false !default;
   $scheduler-time-indicator-background-color: rgba(222, 222, 222, 0.07) !default;
@@ -206,7 +187,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-appointment-overlay-bg: $base-bg !default;
 
   $agenda-appointment-recurrence-icon-color: $base-text-color !default;
-  $agenda-appointment-text-color: $base-text-color !default;
   $agenda-appointment-active-bg: color.change(#fff, $alpha: 0.15) !default;
 }
 
@@ -230,14 +210,10 @@ $agenda-appointment-text-color: null !default;
   $scheduler-dd-appointment-hover-text-color: #fff !default;
   $scheduler-workspace-month-text-color: $month-text-color-dark !default;
   $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
-  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
   $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
   $scheduler-group-header-color: $scheduler-panel-text-color !default;
   $scheduler-header-bg: $base-hover-bg !default;
   $scheduler-alldaypanel-bg: $base-element-bg !default;
-  $scheduler-tab-selected-bg: $scheduler-workspace-background-color !default;
-  $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default;
-  $scheduler-tab-focused-border-color: $base-accent !default;
   $scheduler-other-month-cell-opacity: 0.5 !default;
   $scheduler-fill-focused-appointment: false !default;
   $scheduler-time-indicator-background-color: rgba(222, 222, 222, 0.07) !default;
@@ -247,7 +223,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-appointment-overlay-bg: $base-bg !default;
 
   $agenda-appointment-recurrence-icon-color: $base-text-color !default;
-  $agenda-appointment-text-color: $base-text-color !default;
   $agenda-appointment-active-bg: color.change(#000, $alpha: 0.15) !default;
 }
 
@@ -269,14 +244,10 @@ $agenda-appointment-text-color: null !default;
   $scheduler-dd-appointment-hover-text-color: $base-text-color !default;
   $scheduler-workspace-month-text-color: $month-text-color-dark !default;
   $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
-  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
   $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
   $scheduler-group-header-color: $scheduler-panel-text-color !default;
   $scheduler-header-bg: $base-hover-bg !default;
   $scheduler-alldaypanel-bg: $base-element-bg !default;
-  $scheduler-tab-selected-bg: $scheduler-workspace-background-color !default;
-  $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default;
-  $scheduler-tab-focused-border-color: $base-accent !default;
   $scheduler-other-month-cell-opacity: 0.5 !default;
   $scheduler-fill-focused-appointment: false !default;
   $scheduler-time-indicator-background-color: rgba(222, 222, 222, 0.07) !default;
@@ -286,7 +257,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-appointment-overlay-bg: $base-bg !default;
 
   $agenda-appointment-recurrence-icon-color: $base-text-color !default;
-  $agenda-appointment-text-color: $base-text-color !default;
   $agenda-appointment-active-bg: color.change(#9e9ec5, $alpha: 0.35) !default;
 }
 
@@ -308,15 +278,10 @@ $agenda-appointment-text-color: null !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
   $scheduler-workspace-month-text-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
   $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
-  $scheduler-time-panel-background-color: $scheduler-workspace-background-color !default;
-  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
   $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
   $scheduler-group-header-color: $scheduler-panel-text-color !default;
   $scheduler-header-bg: $base-hover-bg !default;
   $scheduler-alldaypanel-bg: $base-element-bg !default;
-  $scheduler-tab-selected-bg: $scheduler-time-panel-background-color !default;
-  $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default;
-  $scheduler-tab-focused-border-color: $base-focus-bg !default;
   $scheduler-other-month-cell-opacity: 0.5 !default;
   $scheduler-fill-focused-appointment: false !default;
   $scheduler-time-indicator-background-color: rgba(51, 51, 51, 0.04) !default;
@@ -326,7 +291,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-appointment-overlay-bg: $base-bg !default;
 
   $agenda-appointment-recurrence-icon-color: $base-inverted-text-color !default;
-  $agenda-appointment-text-color: $base-text-color !default;
   $agenda-appointment-active-bg: color.change(#000, $alpha: 0.15) !default;
 }
 
@@ -349,13 +313,9 @@ $agenda-appointment-text-color: null !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
   $scheduler-workspace-month-text-color: $month-text-color-light !default;
   $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
-  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
   $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
   $scheduler-group-header-color: $scheduler-panel-text-color !default;
   $scheduler-alldaypanel-bg: $base-element-bg !default;
-  $scheduler-tab-selected-bg: $scheduler-workspace-background-color !default;
-  $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default;
-  $scheduler-tab-focused-border-color: $base-focus-bg !default;
   $scheduler-other-month-cell-opacity: 0.5 !default;
   $scheduler-fill-focused-appointment: false !default;
   $scheduler-time-indicator-background-color: rgba(51, 51, 51, 0.04) !default;
@@ -365,7 +325,6 @@ $agenda-appointment-text-color: null !default;
   $scheduler-appointment-overlay-bg: $base-bg !default;
 
   $agenda-appointment-recurrence-icon-color: $base-inverted-text-color !default;
-  $agenda-appointment-text-color: $base-text-color !default;
   $agenda-appointment-active-bg: color.change(#000, $alpha: 0.08) !default;
 }
 
@@ -387,14 +346,10 @@ $agenda-appointment-text-color: null !default;
   $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
   $scheduler-workspace-month-text-color: $month-text-color-light !default;
   $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
-  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
   $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
   $scheduler-group-header-color: $scheduler-panel-text-color !default;
   $scheduler-header-bg: $base-hover-bg !default;
   $scheduler-alldaypanel-bg: $base-element-bg !default;
-  $scheduler-tab-selected-bg: $scheduler-workspace-background-color !default;
-  $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default;
-  $scheduler-tab-focused-border-color: $base-accent !default;
   $scheduler-other-month-cell-opacity: 0.5 !default;
   $scheduler-fill-focused-appointment: false !default;
   $scheduler-time-indicator-background-color: rgba(51, 51, 51, 0.04) !default;
@@ -404,8 +359,9 @@ $agenda-appointment-text-color: null !default;
   $scheduler-appointment-overlay-bg: $base-bg !default;
 
   $agenda-appointment-recurrence-icon-color: $base-inverted-text-color !default;
-  $agenda-appointment-text-color: $base-text-color !default;
   $agenda-appointment-active-bg: color.change(#000, $alpha: 0.08) !default;
 }
 
-$scheduler-appointment-active-color: $scheduler-appointment-start-color;
+$scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
+
+$scheduler-appointment-active-color: $scheduler-appointment-start-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss
index 89156a91ae9a..1d8501d7f8bd 100644
--- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss
@@ -52,21 +52,21 @@
 @use "../recurrenceEditor" as *;
 @use "../scrollable";
 
-$generic-scheduler-appointment-reduced-content-padding: 40px;
-$generic-scheduler-appointment-empty-transparent-border: 1px solid transparent;
+$generic-scheduler-appointment-reduced-content-padding: 40px !default;
+$generic-scheduler-appointment-empty-transparent-border: 1px solid transparent !default;
 
-$generic-scheduler-all-day-table-cell-height: $generic-scheduler-workspace-date-table-cell-height * 1.5;
-$generic-scheduler-collapsed-all-day-table-cell-height: $generic-scheduler-workspace-date-table-cell-height * 0.5;
-$generic-scheduler-header-panel-table-cell-height: $generic-scheduler-workspace-date-table-cell-height;
+$generic-scheduler-all-day-table-cell-height: $generic-scheduler-workspace-date-table-cell-height * 1.5 !default;
+$generic-scheduler-collapsed-all-day-table-cell-height: $generic-scheduler-workspace-date-table-cell-height * 0.5 !default;
+$generic-scheduler-header-panel-table-cell-height: $generic-scheduler-workspace-date-table-cell-height !default;
 
-$generic-scheduler-current-time-cell-border-size: 2px;
+$generic-scheduler-current-time-cell-border-size: 2px !default;
 
-$generic-scheduler-month-date-text-size: $generic-h5-font-size;
+$generic-scheduler-month-date-text-size: $generic-h5-font-size !default;
 
-$scheduler-first-of-month-border: 1px solid;
+$scheduler-first-of-month-border: 1px solid !default;
 
-$generic-scheduler-agenda-time-cell-padding: 10px;
-$generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-cell-padding 0 0 10px;
+$generic-scheduler-agenda-time-cell-padding: 10px !default;
+$generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-cell-padding 0 0 10px !default;
 
 @include baseScheduler.scheduler-mixin();
 
diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss
index 46750f3037f9..cab02338233c 100644
--- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss
@@ -7,32 +7,29 @@ $generic-scheduler-timeline-date-table-cell-height: null !default;
 $generic-scheduler-header-height: null !default;
 $generic-scheduler-header-offset: null !default;
 $generic-scheduler-toolbar-item-offset: null !default;
-$generic-scheduler-navigator-height: null !default;
-$generic-scheduler-navigation-buttons-padding: null !default;
 $generic-scheduler-appointment-month-text-size: null !default;
 $generic-scheduler-workspace-info-text-size: null !default;
 $generic-scheduler-all-day-title-font-size: null !default;
 $generic-scheduler-appointment-content-padding: null !default;
 $generic-scheduler-appointment-recurrence-content-padding: null !default;
 $generic-scheduler-appointment-recurrence-content-padding-rtl: null !default;
-$generic-scheduler-agenda-appointment-font-size: null !default;
 $generic-scheduler-group-header-table-cell-width: null !default;
 $generic-scheduler-appointment-transparent-left-border: null !default;
 $generic-scheduler-appointment-transparent-right-border: null !default;
 $generic-scheduler-dropdown-button-height: null !default;
 $generic-scheduler-dropdown-button-margin: null !default;
 $generic-scheduler-dropdown-button-vertical-margin: null !default;
-$generic-scheduler-dropdown-button-adaptive-margin: null !default;
-$generic-scheduler-dropdown-button-adaptive-vertical-margin: null !default;
+$generic-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
+$generic-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 0 !default;
 
 $generic-scheduler-appointment-popup-toolbar-height: null !default;
 $generic-scheduler-appointment-popup-toolbar-label-size: null !default;
 $generic-scheduler-appointment-popup-icon-size: null !default;
 $generic-scheduler-appointment-popup-icon-container-height: null !default;
-$generic-scheduler-appointment-popup-icon-padding-right: null !default;
+$generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
 $generic-scheduler-appointment-popup-icon-margin-top: null !default;
 $generic-scheduler-appointment-popup-icon-inner-label-margin-top: null !default;
-$generic-scheduler-appointment-popup-item-padding-horizontal: null !default;
+$generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default;
 $generic-scheduler-appointment-popup-item-padding-top: null !default;
 $generic-scheduler-appointment-popup-all-day-item-height: null !default;
 $generic-scheduler-appointment-popup-days-of-week-button-size: null !default;
@@ -42,22 +39,22 @@ $generic-scheduler-appointment-popup-repeat-end-item-height: null !default;
 
 $generic-scheduler-appointment-short-content-padding: null !default;
 $generic-scheduler-appointment-10min-height: null !default;
-$generic-scheduler-appointment-15min-height: null !default;
-$generic-scheduler-appointment-20min-height: null !default;
-$generic-scheduler-appointment-25min-height: null !default;
-$generic-scheduler-appointment-10min-recurrence-padding-right: null !default;
-$generic-scheduler-appointment-10min-title-font-size: null !default;
-$generic-scheduler-appointment-10min-title-line-height: null !default;
-$generic-scheduler-appointment-10min-icon-font-size: null !default;
-$generic-scheduler-appointment-10min-icon-right: null !default;
+$generic-scheduler-appointment-15min-height: 23px !default;
+$generic-scheduler-appointment-20min-height: 32px !default;
+$generic-scheduler-appointment-25min-height: 41px !default;
+$generic-scheduler-appointment-10min-recurrence-padding-right: 16px !default;
+$generic-scheduler-appointment-10min-title-font-size: 8px !default;
+$generic-scheduler-appointment-10min-title-line-height: 16px !default;
+$generic-scheduler-appointment-10min-icon-font-size: 14px !default;
+$generic-scheduler-appointment-10min-icon-right: 2px !default;
 $generic-scheduler-appointment-15min-recurrence-padding-right: null !default;
-$generic-scheduler-appointment-15min-title-font-size: null !default;
+$generic-scheduler-appointment-15min-title-font-size: 12px !default;
 $generic-scheduler-appointment-15min-title-line-height: null !default;
 $generic-scheduler-appointment-15min-icon-font-size: null !default;
-$generic-scheduler-appointment-15min-icon-right: null !default;
+$generic-scheduler-appointment-15min-icon-right: 2px !default;
 $generic-scheduler-appointment-20min-recurrence-padding-right: null !default;
 
-$agenda-appointment-title-font-size: null !default;
+$agenda-appointment-title-font-size: 16px !default;
 $scheduler-timeline-cell-height: null !default;
 
 $scheduler-left-column-width: 100px !default;
@@ -70,8 +67,6 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-header-height: 36px !default;
   $generic-scheduler-header-offset: 9px 10px !default;
   $generic-scheduler-toolbar-item-offset: 2px !default;
-  $generic-scheduler-navigator-height: 36px !default;
-  $generic-scheduler-navigation-buttons-padding: 6px !default;
 
   $generic-scheduler-appointment-month-text-size: 13px !default;
   $generic-scheduler-workspace-info-text-size: 14px !default;
@@ -81,7 +76,6 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-recurrence-content-padding: 5px 25px 5px 7px !default;
   $generic-scheduler-appointment-recurrence-content-padding-rtl: 5px 7px 5px 25px !default;
 
-  $generic-scheduler-agenda-appointment-font-size: 16px !default;
   $generic-scheduler-group-header-table-cell-width: 80px !default;
   $generic-scheduler-appointment-transparent-left-border: 3px solid transparent !default;
   $generic-scheduler-appointment-transparent-right-border: 2px solid transparent !default;
@@ -89,17 +83,13 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-dropdown-button-height: 20px !default;
   $generic-scheduler-dropdown-button-margin: 3px 2px 3px 3px !default;
   $generic-scheduler-dropdown-button-vertical-margin: 3px 2px 3px 0 !default;
-  $generic-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
-  $generic-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 0 !default;
 
   $generic-scheduler-appointment-popup-toolbar-height: 43px !default;
   $generic-scheduler-appointment-popup-toolbar-label-size: 20px !default;
   $generic-scheduler-appointment-popup-icon-size: 18px !default;
   $generic-scheduler-appointment-popup-icon-container-height: 36px !default;
-  $generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
   $generic-scheduler-appointment-popup-icon-margin-top: 22px !default;
   $generic-scheduler-appointment-popup-icon-inner-label-margin-top: 7px !default;
-  $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default;
   $generic-scheduler-appointment-popup-item-padding-top: 20px !default;
   $generic-scheduler-appointment-popup-all-day-item-height: 36px !default;
   $generic-scheduler-appointment-popup-repeat-end-radio-margin-top: 10px !default;
@@ -107,27 +97,14 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-popup-days-of-week-buttons-gap: 10px !default;
   $generic-scheduler-appointment-popup-repeat-end-item-height: 36px !default;
 
-  $agenda-appointment-title-font-size: 16px;
-
   $scheduler-timeline-cell-height: 78px !default;
 
   $generic-scheduler-appointment-short-content-padding: 0 7px !default;
   $generic-scheduler-appointment-10min-height: 23px !default;
-  $generic-scheduler-appointment-15min-height: 23px !default;
-  $generic-scheduler-appointment-20min-height: 32px !default;
-  $generic-scheduler-appointment-25min-height: 41px !default;
-
-  $generic-scheduler-appointment-10min-recurrence-padding-right: 16px !default;
-  $generic-scheduler-appointment-10min-title-font-size: 8px !default;
-  $generic-scheduler-appointment-10min-title-line-height: 16px !default;
-  $generic-scheduler-appointment-10min-icon-font-size: 14px !default;
-  $generic-scheduler-appointment-10min-icon-right: 2px !default;
 
   $generic-scheduler-appointment-15min-recurrence-padding-right: 20px !default;
-  $generic-scheduler-appointment-15min-title-font-size: 12px !default;
   $generic-scheduler-appointment-15min-title-line-height: 24px !default;
   $generic-scheduler-appointment-15min-icon-font-size: 18px !default;
-  $generic-scheduler-appointment-15min-icon-right: 2px !default;
 
   $generic-scheduler-appointment-20min-recurrence-padding-right: 24px !default;
 }
@@ -139,8 +116,6 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-header-height: 26px !default;
   $generic-scheduler-header-offset: 6px 7px !default;
   $generic-scheduler-toolbar-item-offset: 0 !default;
-  $generic-scheduler-navigator-height: 25px !default;
-  $generic-scheduler-navigation-buttons-padding: 4px !default;
 
   $generic-scheduler-appointment-month-text-size: 11px !default;
   $generic-scheduler-workspace-info-text-size: 12px !default;
@@ -150,7 +125,6 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-recurrence-content-padding: 2px 25px 2px 5px !default;
   $generic-scheduler-appointment-recurrence-content-padding-rtl: 2px 5px 2px 25px !default;
 
-  $generic-scheduler-agenda-appointment-font-size: 14px !default;
   $generic-scheduler-group-header-table-cell-width: 60px !default;
   $generic-scheduler-appointment-transparent-left-border: 2px solid transparent !default;
   $generic-scheduler-appointment-transparent-right-border: 1px solid transparent !default;
@@ -158,17 +132,13 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-dropdown-button-height: 17px !default;
   $generic-scheduler-dropdown-button-margin: 3px 1px 3px 3px !default;
   $generic-scheduler-dropdown-button-vertical-margin: 3px 1px 3px 0 !default;
-  $generic-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
-  $generic-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 0 !default;
 
   $generic-scheduler-appointment-popup-toolbar-height: 39px !default;
   $generic-scheduler-appointment-popup-toolbar-label-size: 18px !default;
   $generic-scheduler-appointment-popup-icon-size: 14px !default;
   $generic-scheduler-appointment-popup-icon-container-height: 26px !default;
-  $generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
   $generic-scheduler-appointment-popup-icon-margin-top: 18px !default;
   $generic-scheduler-appointment-popup-icon-inner-label-margin-top: 6px !default;
-  $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default;
   $generic-scheduler-appointment-popup-item-padding-top: 10px !default;
   $generic-scheduler-appointment-popup-all-day-item-height: 24px !default;
   $generic-scheduler-appointment-popup-repeat-end-radio-margin-top: 6px !default;
@@ -176,27 +146,14 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-popup-days-of-week-buttons-gap: 6px !default;
   $generic-scheduler-appointment-popup-repeat-end-item-height: 26px !default;
 
-  $agenda-appointment-title-font-size: 16px;
-
   $scheduler-timeline-cell-height: 50px !default;
 
   $generic-scheduler-appointment-short-content-padding: 0 5px !default;
   $generic-scheduler-appointment-10min-height: 14px !default;
-  $generic-scheduler-appointment-15min-height: 23px !default;
-  $generic-scheduler-appointment-20min-height: 32px !default;
-  $generic-scheduler-appointment-25min-height: 41px !default;
-
-  $generic-scheduler-appointment-10min-title-font-size: 8px !default;
-  $generic-scheduler-appointment-10min-title-line-height: 16px !default;
-  $generic-scheduler-appointment-10min-recurrence-padding-right: 16px !default;
-  $generic-scheduler-appointment-10min-icon-font-size: 14px !default;
-  $generic-scheduler-appointment-10min-icon-right: 2px !default;
 
   $generic-scheduler-appointment-15min-recurrence-padding-right: 16px !default;
-  $generic-scheduler-appointment-15min-title-font-size: 12px !default;
   $generic-scheduler-appointment-15min-title-line-height: 16px !default;
   $generic-scheduler-appointment-15min-icon-font-size: 14px !default;
-  $generic-scheduler-appointment-15min-icon-right: 2px !default;
 
   $generic-scheduler-appointment-20min-recurrence-padding-right: 20px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/scrollable/_sizes.scss
index 721bcb419a19..7e5c45388a59 100644
--- a/packages/devextreme-scss/scss/widgets/generic/scrollable/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/scrollable/_sizes.scss
@@ -1,2 +1,2 @@
-$generic-scrollbar-size-thin: 8px;
-$generic-scrollbar-size: 15px;
+$generic-scrollbar-size-thin: 8px !default;
+$generic-scrollbar-size: 15px !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss
index 6e7b828ad034..4ffcbc4e0e48 100644
--- a/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss
@@ -18,7 +18,6 @@ $slider-handle-bg: null !default;
 $slider-handle-border-color: null !default;
 $slider-handle-active-bg: null !default;
 $slider-handle-hover-bg: null !default;
-$slider-handle-focused-bg: null !default;
 $slider-invalid-handle-accent-bg: null !default;
 $slider-handle-border-radius: $base-border-radius - 1px !default;
 
@@ -27,7 +26,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default;
   $slider-handle-border-color: $base-bg !default;
   $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default;
   $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default;
-  $slider-handle-focused-bg: $slider-handle-hover-bg !default;
   $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
 }
 
@@ -36,7 +34,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default;
   $slider-handle-border-color: extcolor.difference(#fff, $base-border-color) !default;
   $slider-handle-active-bg: $base-inverted-bg !default;
   $slider-handle-hover-bg: $slider-range-bg !default;
-  $slider-handle-focused-bg: $slider-handle-hover-bg !default;
   $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
 }
 
@@ -45,7 +42,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default;
   $slider-handle-border-color: $base-bg !default;
   $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default;
   $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default;
-  $slider-handle-focused-bg: $slider-handle-hover-bg !default;
   $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
 }
 
@@ -54,7 +50,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default;
   $slider-handle-border-color: $base-bg !default;
   $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default;
   $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default;
-  $slider-handle-focused-bg: $slider-handle-hover-bg !default;
   $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
 }
 
@@ -63,7 +58,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default;
   $slider-handle-border-color: $base-bg !default;
   $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default;
   $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default;
-  $slider-handle-focused-bg: $slider-handle-hover-bg !default;
   $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default;
 }
 
@@ -72,7 +66,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default;
   $slider-handle-border-color: $base-bg !default;
   $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default;
   $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default;
-  $slider-handle-focused-bg: $slider-handle-hover-bg !default;
   $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
 }
 
@@ -81,7 +74,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default;
   $slider-handle-border-color: $base-bg !default;
   $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default;
   $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default;
-  $slider-handle-focused-bg: $slider-handle-hover-bg !default;
   $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
 }
 
@@ -90,6 +82,7 @@ $slider-handle-border-radius: $base-border-radius - 1px !default;
   $slider-handle-border-color: $base-bg !default;
   $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default;
   $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default;
-  $slider-handle-focused-bg: $slider-handle-hover-bg !default;
   $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default;
 }
+
+$slider-handle-focused-bg: $slider-handle-hover-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss b/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss
index b9459bab9b75..c036962f113b 100644
--- a/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss
@@ -5,7 +5,7 @@
 @use "sizes" as *;
 @use "../../base/slider";
 
-$generic-slider-radius: 2px;
+$generic-slider-radius: 2px !default;
 
 .dx-slider {
   .dx-tooltip-wrapper {
diff --git a/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_index.scss
index 396fe10c61a2..1089f51ba2a1 100644
--- a/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_index.scss
@@ -5,9 +5,9 @@
 @use "../button/colors" as *;
 @use "../overlay";
 
-$generic-fa-button-size: 30px;
-$generic-fa-button-label-padding: 5px 10px;
-$generic-fa-button-label-offset: 10px;
+$generic-fa-button-size: 30px !default;
+$generic-fa-button-label-padding: 5px 10px !default;
+$generic-fa-button-label-offset: 10px !default;
 
 @include dx-fa-button-mixin(
   $generic-main-fa-button-size,
diff --git a/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_sizes.scss
index 650d9654e9bd..5e8f7e17bc8e 100644
--- a/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_sizes.scss
@@ -7,10 +7,10 @@ $generic-fa-button-label-font-size: 12px !default;
 
 @if $size == "default" {
   $generic-main-fa-button-size: 48px !default;
-  $generic-main-fa-button-label-padding: 0 25px 0 10px;
+  $generic-main-fa-button-label-padding: 0 25px 0 10px !default;
 }
 
 @else if $size == "compact" {
   $generic-main-fa-button-size: 34px !default;
-  $generic-main-fa-button-label-padding: 0 15px 0 5px;
+  $generic-main-fa-button-label-padding: 0 15px 0 5px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/splitter/_sizes.scss
index 839b901f0580..b4d9ec2a53d7 100644
--- a/packages/devextreme-scss/scss/widgets/generic/splitter/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/splitter/_sizes.scss
@@ -1 +1 @@
-$splitter-resize-handle-icon-size: 18px;
+$splitter-resize-handle-icon-size: 18px !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss
index a4e5208391da..85340cd00c40 100644
--- a/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss
@@ -35,7 +35,6 @@ $switch-active-border-color: null !default;
 $switch-off-color: null !default;
 $switch-handle-off-bg: null !default;
 $switch-readonly-border-color: null !default;
-$switch-container-readonly-bg: null !default;
 $switch-border-radius: null !default;
 
 @if $color == "carmine" {
@@ -51,7 +50,6 @@ $switch-border-radius: null !default;
   $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
   $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default;
   $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default;
-  $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
 
@@ -67,7 +65,6 @@ $switch-border-radius: null !default;
   $switch-off-color: $base-text-color !default;
   $switch-handle-off-bg: $base-inverted-bg !default;
   $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -50%, $space: hsl) !default;
-  $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius - 2px !default;
 }
 
@@ -83,7 +80,6 @@ $switch-border-radius: null !default;
   $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default;
   $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default;
   $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default;
-  $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
 
@@ -99,7 +95,6 @@ $switch-border-radius: null !default;
   $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default;
   $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default;
   $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default;
-  $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
 
@@ -115,7 +110,6 @@ $switch-border-radius: null !default;
   $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default;
   $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default;
   $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default;
-  $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
 
@@ -131,7 +125,6 @@ $switch-border-radius: null !default;
   $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
   $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default;
   $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default;
-  $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
 
@@ -147,7 +140,6 @@ $switch-border-radius: null !default;
   $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
   $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default;
   $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default;
-  $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
 
@@ -163,6 +155,7 @@ $switch-border-radius: null !default;
   $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
   $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default;
   $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default;
-  $switch-container-readonly-bg: $switch-bg !default;
   $switch-border-radius: $base-border-radius-exsmall !default;
 }
+
+$switch-container-readonly-bg: $switch-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss b/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss
index 7b3bf528f688..de3aee4096fd 100644
--- a/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss
@@ -4,8 +4,8 @@
 @use "../../base/mixins" as *;
 @use "../../base/switch";
 
-$generic-switch-border-weight: 1px;
-$generic-switch-inner-size: $generic-switch-height - $generic-switch-border-weight * 2;
+$generic-switch-border-weight: 1px !default;
+$generic-switch-inner-size: $generic-switch-height - $generic-switch-border-weight * 2 !default;
 
 .dx-switch {
   width: $generic-switch-width;
diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss
index 7065d72a2709..89b71d9318f2 100644
--- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss
@@ -1,93 +1,4 @@
-@use "../../colors" as *;
-@use "../variables/sizes" as *;
-@use "../../button/colors" as *;
 @use "../../tabs/variables/sizes" as *;
-@use "../../tabs/variables/colors" as *;
 
-$generic-tabpanel-tab-border-transparent: null !default;
-$generic-tabpanel-tab-border-selected-bottom: null !default;
-$generic-tabpanel-tab-border-active-bottom: null !default;
-
-$generic-tabpanel-tab-border-focused-bottom: null !default;
-$generic-tabpanel-tab-border-focused-left: null !default;
-$generic-tabpanel-tab-border-focused-right: null !default;
-
-@if $color == "carmine" {
-  $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
-  $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-}
-
-@if $color == "contrast" {
-  $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-}
-
-@if $color == "dark" {
-  $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
-  $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-}
-
-@if $color == "darkmoon" {
-  $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
-  $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-}
-
-@if $color == "darkviolet" {
-  $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
-  $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-}
-
-@if $color == "greenmist" {
-  $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
-  $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-}
-
-@if $color == "light" {
-  $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
-  $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-}
-
-@if $color == "softblue" {
-  $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
-  $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-
-  $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default;
-  $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-  $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default;
-}
+$generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default;
+$generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss
index 63fc74fbffb6..99b07836830a 100644
--- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss
@@ -50,8 +50,7 @@ $tabs-focused-disabled-border-color: null !default;
 $tabs-tab-hover-bg: null !default;
 $tabs-tab-active-bg: null !default;
 $tabs-tab-active-border-color: null !default;
-$tabs-tab-hover-border-color-horizontal: null !default;
-$tabs-tab-hover-border-color-vertical: null !default;
+$tabs-tab-hover-border-color-horizontal: $base-border-color !default;
 
 @if $color == "carmine" {
   $tabs-tab-selected-color: $base-text-color !default;
@@ -64,8 +63,6 @@ $tabs-tab-hover-border-color-vertical: null !default;
   $tabs-tab-hover-bg: $base-hover-bg !default;
   $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $tabs-tab-active-border-color: color.change(color.adjust($base-border-color, $lightness: -2.55%, $space: hsl)) !default;
-  $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
-  $tabs-tab-hover-border-color-vertical: color.change(color.adjust($base-accent, $lightness: 33.92%, $space: hsl)) !default;
 }
 
 @if $color == "contrast" {
@@ -79,8 +76,6 @@ $tabs-tab-hover-border-color-vertical: null !default;
   $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
   $tabs-tab-active-bg: $base-inverted-bg !default;
   $tabs-tab-active-border-color: $base-border-color !default;
-  $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
-  $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
 }
 
 @if $color == "dark" {
@@ -94,8 +89,6 @@ $tabs-tab-hover-border-color-vertical: null !default;
   $tabs-tab-hover-bg: $base-element-bg !default;
   $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $tabs-tab-active-border-color: color.change(color.adjust($tabs-tab-bg, $lightness: 12.55%, $space: hsl)) !default;
-  $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
-  $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
 }
 
 @if $color == "darkmoon" {
@@ -109,8 +102,6 @@ $tabs-tab-hover-border-color-vertical: null !default;
   $tabs-tab-hover-bg: $base-element-bg !default;
   $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $tabs-tab-active-border-color: transparent !default;
-  $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
-  $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
 }
 
 @if $color == "darkviolet" {
@@ -124,8 +115,6 @@ $tabs-tab-hover-border-color-vertical: null !default;
   $tabs-tab-hover-bg: $base-hover-bg !default;
   $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $tabs-tab-active-border-color: color.change(color.adjust($base-bg, $lightness: 15.49%, $space: hsl)) !default;
-  $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
-  $tabs-tab-hover-border-color-vertical: color.change(color.adjust($tabs-tab-bg, $lightness: 16.86%, $space: hsl)) !default;
 }
 
 @if $color == "greenmist" {
@@ -139,8 +128,6 @@ $tabs-tab-hover-border-color-vertical: null !default;
   $tabs-tab-hover-bg: $base-element-bg !default;
   $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default;
-  $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
-  $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
 }
 
 @if $color == "light" {
@@ -154,8 +141,6 @@ $tabs-tab-hover-border-color-vertical: null !default;
   $tabs-tab-hover-bg: $base-element-bg !default;
   $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default;
-  $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
-  $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
 }
 
 @if $color == "softblue" {
@@ -169,6 +154,4 @@ $tabs-tab-hover-border-color-vertical: null !default;
   $tabs-tab-hover-bg: $base-element-bg !default;
   $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default;
-  $tabs-tab-hover-border-color-horizontal: $base-border-color !default;
-  $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss
index 9aa3bb5dc194..5183306a42b6 100644
--- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss
@@ -3,11 +3,10 @@
 
 $generic-tabs-item-gap: null !default;
 $generic-tabs-item-padding: null !default;
-$generic-tabs-item-padding-disabled-focused: null !default;
 $generic-tabs-border-width: $generic-base-border-width !default;
 
-$generic-tabs-nav-button-height: null !default;
-$generic-tabs-nav-button-width: null !default;
+$generic-tabs-nav-button-height: 38px !default;
+$generic-tabs-nav-button-width: 25px !default;
 $generic-tab-text-line-height: null !default;
 $generic-tabs-icon-margin: null !default;
 $generic-tabs-icon-size: $generic-base-icon-size !default;
@@ -16,10 +15,7 @@ $generic-badge-min-size: null !default;
 @if $size == "default" {
   $generic-tabs-item-gap: 4px !default;
   $generic-tabs-item-padding: 10px 9px !default;
-  $generic-tabs-item-padding-disabled-focused: 10px !default;
-  $generic-tabs-nav-button-width: 25px !default;
   $generic-tab-text-line-height: 1.285715 !default;
-  $generic-tabs-nav-button-height: 38px !default;
   $generic-tabs-icon-margin: 8px !default;
   $generic-badge-min-size: 18px !default;
 }
@@ -27,10 +23,7 @@ $generic-badge-min-size: null !default;
 @else if $size == "compact" {
   $generic-tabs-item-gap: 2px !default;
   $generic-tabs-item-padding: 5px 4px !default;
-  $generic-tabs-item-padding-disabled-focused: 5px !default;
-  $generic-tabs-nav-button-width: 25px !default;
   $generic-tab-text-line-height: 1.75 !default;
-  $generic-tabs-nav-button-height: 38px !default;
   $generic-tabs-icon-margin: 7px !default;
   $generic-badge-min-size: 21px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss
index eed206407654..42077dcc6b05 100644
--- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss
@@ -8,243 +8,27 @@
 $generic-tabs-border: $generic-tabs-border-width solid !default;
 $generic-tabs-border-transparent: $generic-tabs-border-width solid transparent !default;
 
-$generic-tabs-border-hover-top: null !default;
-$generic-tabs-border-hover-bottom: null !default;
-$generic-tabs-border-hover-left: null !default;
-$generic-tabs-border-hover-right: null !default;
-
-$generic-tabs-border-selected-top: null !default;
-$generic-tabs-border-selected-bottom: null !default;
-$generic-tabs-border-selected-left: null !default;
-$generic-tabs-border-selected-right: null !default;
-
-$generic-tabs-border-focused-top: null !default;
-$generic-tabs-border-focused-bottom: null !default;
-$generic-tabs-border-focused-left: null !default;
-$generic-tabs-border-focused-right: null !default;
-
-$generic-tabs-border-focused-disabled-top: null !default;
-$generic-tabs-border-focused-disabled-bottom: null !default;
-$generic-tabs-border-focused-disabled-left: null !default;
-$generic-tabs-border-focused-disabled-right: null !default;
-
-$generic-tabs-border-active-top: null !default;
-$generic-tabs-border-active-bottom: null !default;
-$generic-tabs-border-active-left: null !default;
-$generic-tabs-border-active-right: null !default;
-
-@if $color == "carmine" {
-  $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-left: none !default;
-  $generic-tabs-border-hover-right: none !default;
-
-  $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "contrast" {
-  $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-left: none !default;
-  $generic-tabs-border-hover-right: none !default;
-
-  $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "dark" {
-  $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-left: none !default;
-  $generic-tabs-border-hover-right: none !default;
-
-  $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "darkmoon" {
-  $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-left: none !default;
-  $generic-tabs-border-hover-right: none !default;
-
-  $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "darkviolet" {
-  $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-left: none !default;
-  $generic-tabs-border-hover-right: none !default;
-
-  $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "greenmist" {
-  $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-left: none !default;
-  $generic-tabs-border-hover-right: none !default;
-
-  $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "light" {
-  $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-left: none !default;
-  $generic-tabs-border-hover-right: none !default;
-
-  $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "softblue" {
-  $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-hover-left: none !default;
-  $generic-tabs-border-hover-right: none !default;
-
-  $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-border-active-right: $generic-tabs-border-width solid !default;
-}
+$generic-tabs-border-hover-top: $generic-tabs-border-width solid !default;
+$generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default;
+$generic-tabs-border-hover-left: none !default;
+$generic-tabs-border-hover-right: none !default;
+
+$generic-tabs-border-selected-top: $generic-tabs-border-width solid !default;
+$generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default;
+$generic-tabs-border-selected-left: $generic-tabs-border-width solid !default;
+$generic-tabs-border-selected-right: $generic-tabs-border-width solid !default;
+
+$generic-tabs-border-focused-top: $generic-tabs-border-width solid !default;
+$generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default;
+$generic-tabs-border-focused-left: $generic-tabs-border-width solid !default;
+$generic-tabs-border-focused-right: $generic-tabs-border-width solid !default;
+
+$generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default;
+$generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
+$generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default;
+$generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default;
+
+$generic-tabs-border-active-top: $generic-tabs-border-width solid !default;
+$generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default;
+$generic-tabs-border-active-left: $generic-tabs-border-width solid !default;
+$generic-tabs-border-active-right: $generic-tabs-border-width solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss
index f9d01c04e193..04cc910391e2 100644
--- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss
@@ -6,243 +6,27 @@
 @use "../../variables/sizes" as *;
 @use "../../variables/borders/borders-horizontal";
 
-$generic-tabs-vertical-border-hover-top: null !default;
-$generic-tabs-vertical-border-hover-bottom: null !default;
-$generic-tabs-vertical-border-hover-left: null !default;
-$generic-tabs-vertical-border-hover-right: null !default;
-
-$generic-tabs-vertical-border-selected-top: null !default;
-$generic-tabs-vertical-border-selected-bottom: null !default;
-$generic-tabs-vertical-border-selected-left: null !default;
-$generic-tabs-vertical-border-selected-right: null !default;
-
-$generic-tabs-vertical-border-focused-top: null !default;
-$generic-tabs-vertical-border-focused-bottom: null !default;
-$generic-tabs-vertical-border-focused-left: null !default;
-$generic-tabs-vertical-border-focused-right: null !default;
-
-$generic-tabs-vertical-border-focused-disabled-top: null !default;
-$generic-tabs-vertical-border-focused-disabled-bottom: null !default;
-$generic-tabs-vertical-border-focused-disabled-left: null !default;
-$generic-tabs-vertical-border-focused-disabled-right: null !default;
-
-$generic-tabs-vertical-border-active-top: null !default;
-$generic-tabs-vertical-border-active-bottom: null !default;
-$generic-tabs-vertical-border-active-left: null !default;
-$generic-tabs-vertical-border-active-right: null !default;
-
-@if $color == "carmine" {
-  $generic-tabs-vertical-border-hover-top: none !default;
-  $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "contrast" {
-  $generic-tabs-vertical-border-hover-top: none !default;
-  $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "dark" {
-  $generic-tabs-vertical-border-hover-top: none !default;
-  $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "darkmoon" {
-  $generic-tabs-vertical-border-hover-top: none !default;
-  $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "darkviolet" {
-  $generic-tabs-vertical-border-hover-top: none !default;
-  $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "greenmist" {
-  $generic-tabs-vertical-border-hover-top: none !default;
-  $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "light" {
-  $generic-tabs-vertical-border-hover-top: none !default;
-  $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
-}
-
-@if $color == "softblue" {
-  $generic-tabs-vertical-border-hover-top: none !default;
-  $generic-tabs-vertical-border-hover-bottom: none !default;
-  $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
-
-  $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
-  $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
-}
+$generic-tabs-vertical-border-hover-top: none !default;
+$generic-tabs-vertical-border-hover-bottom: none !default;
+$generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default;
+
+$generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default;
+
+$generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default;
+
+$generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default;
+
+$generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default;
+$generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss
index a342938c89a6..294bb2ffc202 100644
--- a/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss
@@ -23,7 +23,6 @@ $tagbox-tag-button-remove-bg: null !default;
 $tagbox-tag-button-remove-active-bg: null !default;
 $tagbox-tag-focused-bg: null !default;
 $tagbox-tag-focused-color: null !default;
-$tagbox-tag-focused-button-remove-bg: null !default;
 $tagbox-select-all-border-color: $base-border-color !default;
 
 @if $color == "carmine" {
@@ -33,7 +32,6 @@ $tagbox-select-all-border-color: $base-border-color !default;
   $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default;
   $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
-  $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "contrast" {
@@ -43,7 +41,6 @@ $tagbox-select-all-border-color: $base-border-color !default;
   $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default;
   $tagbox-tag-focused-bg: $base-focus-color !default;
   $tagbox-tag-focused-color: $base-text-color !default;
-  $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "dark" {
@@ -53,7 +50,6 @@ $tagbox-select-all-border-color: $base-border-color !default;
   $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default;
   $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
-  $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "darkmoon" {
@@ -63,7 +59,6 @@ $tagbox-select-all-border-color: $base-border-color !default;
   $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default;
   $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
-  $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "darkviolet" {
@@ -73,7 +68,6 @@ $tagbox-select-all-border-color: $base-border-color !default;
   $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default;
   $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
-  $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "greenmist" {
@@ -83,7 +77,6 @@ $tagbox-select-all-border-color: $base-border-color !default;
   $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default;
   $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
-  $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "light" {
@@ -93,7 +86,6 @@ $tagbox-select-all-border-color: $base-border-color !default;
   $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default;
   $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
-  $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
 
 @if $color == "softblue" {
@@ -103,5 +95,6 @@ $tagbox-select-all-border-color: $base-border-color !default;
   $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default;
   $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default;
   $tagbox-tag-focused-color: $tagbox-tag-color !default;
-  $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
 }
+
+$tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss
index f6c080b13de3..79a778f4d217 100644
--- a/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss
@@ -54,7 +54,7 @@ $texteditor-readonly-border-color: $base-border-color !default;
 $texteditor-label-transition:
   font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
   transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
-  top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;
+  top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms !default;
 
 @if $color == "carmine" {
   $texteditor-placeholder-color: $base-label-color !default;
@@ -128,7 +128,7 @@ $texteditor-label-transition:
   $texteditor-filled-invalid-background: color.change($texteditor-invalid-faded-border-color, $alpha: 0.1) !default;
 }
 
-$texteditor-label-color: $texteditor-placeholder-color;
+$texteditor-label-color: $texteditor-placeholder-color !default;
 
 :root {
   --dx-texteditor-color-text: #{$texteditor-color};
diff --git a/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss
index 67a56708f324..d3b4dc45bebc 100644
--- a/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss
@@ -13,21 +13,21 @@
 @use "../../base/textEditor/mixins" as *;
 @use "../colorBox/sizes" as *;
 
-$generic-texteditor-border-width: $generic-base-border-width;
+$generic-texteditor-border-width: $generic-base-border-width !default;
 $generic-texteditor-input-padding:
   $generic-base-inline-borderedwidget-top-padding
   $generic-base-inline-borderedwidget-horizontal-padding
-  $generic-base-inline-borderedwidget-bottom-padding;
+  $generic-base-inline-borderedwidget-bottom-padding !default;
 
-$generic-texteditor-input-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding;
+$generic-texteditor-input-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding !default;
 
-$generic-texteditor-icon-container-size: $generic-base-inline-borderedwidget-inner-size;
-$generic-texteditor-icon-size: $generic-base-icon-size;
+$generic-texteditor-icon-container-size: $generic-base-inline-borderedwidget-inner-size !default;
+$generic-texteditor-icon-size: $generic-base-icon-size !default;
 
-$generic-texteditor-clear-icon-size: $generic-texteditor-icon-size + $generic-texteditor-clear-icon-oversize;
+$generic-texteditor-clear-icon-size: $generic-texteditor-icon-size + $generic-texteditor-clear-icon-oversize !default;
 
-$generic-texteditor-custom-button-margin: 1px;
-$generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $generic-invalid-badge-horizontal-padding;
+$generic-texteditor-custom-button-margin: 1px !default;
+$generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $generic-invalid-badge-horizontal-padding !default;
 
 @mixin dx-texteditor-icon() {
   position: absolute;
diff --git a/packages/devextreme-scss/scss/widgets/generic/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/textEditor/_sizes.scss
index ebbe32e60ef1..6520341bb9fe 100644
--- a/packages/devextreme-scss/scss/widgets/generic/textEditor/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/textEditor/_sizes.scss
@@ -7,7 +7,7 @@ $generic-texteditor-label-outside-font-size: null !default;
 $generic-texteditor-label-outside-height: null !default;
 $generic-texteditor-label-outside-top-offset: null !default;
 $generic-texteditor-button-icononly-bottom-padding: null !default;
-$generic-texteditor-button-icononly-horizontal-padding: null !default;
+$generic-texteditor-button-icononly-horizontal-padding: $generic-button-icon-horizontal-padding - 2px !default;
 
 $generic-texteditor-button-top-padding: $generic-base-inline-widget-top-padding - $generic-button-border-weight - 2px !default;
 $generic-texteditor-button-bottom-padding: $generic-base-inline-widget-bottom-padding - $generic-button-border-weight - 2px !default;
@@ -26,7 +26,6 @@ $generic-texteditor-underlined-input-with-label-bottom-padding: $generic-base-in
   $generic-texteditor-label-outside-height: 20px !default;
   $generic-texteditor-label-outside-top-offset: 24px !default;
   $generic-texteditor-button-icononly-bottom-padding: $generic-texteditor-button-bottom-padding !default;
-  $generic-texteditor-button-icononly-horizontal-padding: $generic-button-icon-horizontal-padding - 2px !default;
 }
 
 @else if $size == "compact" {
@@ -36,5 +35,4 @@ $generic-texteditor-underlined-input-with-label-bottom-padding: $generic-base-in
   $generic-texteditor-label-outside-height: 16px !default;
   $generic-texteditor-label-outside-top-offset: 18px !default;
   $generic-texteditor-button-icononly-bottom-padding: $generic-texteditor-button-bottom-padding + 1px !default;
-  $generic-texteditor-button-icononly-horizontal-padding: $generic-button-icon-horizontal-padding - 2px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/toast/_index.scss b/packages/devextreme-scss/scss/widgets/generic/toast/_index.scss
index 3be2e70bcbaf..8ae3fbf94cd5 100644
--- a/packages/devextreme-scss/scss/widgets/generic/toast/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/toast/_index.scss
@@ -4,7 +4,7 @@
 @use "../../base/toast";
 @use "../overlay";
 
-$generic-toast-shadow: 0 2px 3px 0 $toast-shadow-color;
+$generic-toast-shadow: 0 2px 3px 0 $toast-shadow-color !default;
 
 .dx-toast-content {
   color: $toast-color;
diff --git a/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss
index 86c52ae07a9f..b46d475d6eeb 100644
--- a/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss
@@ -2,45 +2,37 @@
 @use "../colors" as *;
 @use "../gridBase/colors" as *;
 
-$treelist-spin-icon-color: null !default;
+$treelist-spin-icon-color: $datagrid-spin-icon-color !default;
 $treelist-selection-spin-icon-color: null !default;
 
 @if $color == "carmine" {
-  $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
   $treelist-selection-spin-icon-color: color.adjust($datagrid-spin-icon-color, $lightness: 100%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
-  $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
   $treelist-selection-spin-icon-color: $base-inverted-text-color !default;
 }
 
 @if $color == "dark" {
-  $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
   $treelist-selection-spin-icon-color: $treelist-spin-icon-color !default;
 }
 
 @if $color == "darkmoon" {
-  $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
   $treelist-selection-spin-icon-color: $base-bg !default;
 }
 
 @if $color == "darkviolet" {
-  $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
   $treelist-selection-spin-icon-color: $base-icon-color !default;
 }
 
 @if $color == "greenmist" {
-  $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
   $treelist-selection-spin-icon-color: color.adjust($treelist-spin-icon-color, $lightness: 100%, $space: hsl) !default;
 }
 
 @if $color == "light" {
-  $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
   $treelist-selection-spin-icon-color: $treelist-spin-icon-color !default;
 }
 
 @if $color == "softblue" {
-  $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
   $treelist-selection-spin-icon-color: $base-icon-color !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss
index 1a618a1088fe..b69ae56ce488 100644
--- a/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss
@@ -29,7 +29,6 @@ $treeview-border-color: $base-border-color !default;
 */
 $treeview-item-selected-color: null !default;
 $treeview-item-selected-bg: null !default;
-$treeview-item-selected-hover-bg: null !default;
 $treeview-item-content-disabled: null !default;
 
 /**
@@ -38,7 +37,7 @@ $treeview-item-content-disabled: null !default;
 */
 $treeview-spin-icon-color: null !default;
 
-$generic-treeview-focused-row-load-indicator-color: #fff;
+$generic-treeview-focused-row-load-indicator-color: #fff !default;
 
 @if $color == "carmine" {
   $treeview-color: $base-text-color !default;
@@ -48,7 +47,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-hover-color: $base-hover-color !default;
   $treeview-item-selected-color: $treeview-color !default;
   $treeview-item-selected-bg: color.change($base-accent, $alpha: 0.48) !default;
-  $treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.3) !default;
   $treeview-spin-icon-color: $base-header-color !default;
   $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
 }
@@ -60,7 +58,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-hover-color: $base-text-color !default;
   $treeview-item-selected-color: $base-inverted-text-color !default;
   $treeview-item-selected-bg: $base-inverted-bg !default;
-  $treeview-item-selected-hover-bg: $base-inverted-bg !default;
   $treeview-spin-icon-color: $base-icon-color !default;
   $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: -48.24%, $space: hsl) !default;
 }
@@ -73,7 +70,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-hover-color: $base-hover-color !default;
   $treeview-item-selected-color: $treeview-color !default;
   $treeview-item-selected-bg: color.change(#fff, $alpha: 0.12) !default;
-  $treeview-item-selected-hover-bg: color.change(#fff, $alpha: 0.09) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
   $treeview-item-content-disabled: color.change($base-text-color, $lightness: 51.8%, $space: hsl) !default;
 }
@@ -86,7 +82,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-hover-color: $treeview-color !default;
   $treeview-item-selected-color: $treeview-color !default;
   $treeview-item-selected-bg: color.change(#748fbc, $alpha: 0.42) !default;
-  $treeview-item-selected-hover-bg: color.change(#748fbc, $alpha: 0.3) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
   $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: -48.24%, $space: hsl) !default;
 }
@@ -99,7 +94,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-hover-color: $base-hover-color !default;
   $treeview-item-selected-color: $treeview-color !default;
   $treeview-item-selected-bg: color.change($base-accent, $alpha: 0.46) !default;
-  $treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.6) !default;
   $treeview-spin-icon-color: $base-header-color !default;
   $treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 51.76%, $space: hsl) !default;
 }
@@ -112,7 +106,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-hover-color: $base-hover-color !default;
   $treeview-item-selected-color: $treeview-color !default;
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
-  $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.2) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
   $treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 60%, $space: hsl) !default;
 }
@@ -125,7 +118,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-hover-color: $treeview-color !default;
   $treeview-item-selected-color: $treeview-color !default;
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
-  $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.07) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
   $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
 }
@@ -138,7 +130,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-hover-color: $treeview-color !default;
   $treeview-item-selected-color: $treeview-color !default;
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
-  $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.15) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
   $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss
index e24765ccb446..aa86eaa7255c 100644
--- a/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss
@@ -3,10 +3,8 @@
 $generic-treeview-container-with-border-offset: null !default;
 $generic-treeview-base-container-size: null !default;
 $generic-treeview-toggle-item-width: null !default;
-$generic-treeview-item-height: null !default;
 $generic-select-all-item-padding: null !default;
 $generic-treeview-item-padding: null !default;
-$generic-treeview-load-indicator-size: null !default;
 $generic-checkbox-container-size: null !default;
 $generic-treeview-searchbox-margin-bottom: null !default;
 $generic-treeview-border-padding: 1px !default;
@@ -14,29 +12,27 @@ $generic-treeview-item-element-gap: 8px !default;
 $generic-select-all-item-border-visible-padding: 20px !default;
 
 @if $size == "default" {
-  $generic-treeview-item-height: 32px;
   $generic-treeview-base-container-size: 22px !default;
   $generic-treeview-container-with-border-offset: 7px !default;
   $generic-checkbox-container-size: 22px !default;
   $generic-treeview-toggle-item-width: 22px !default;
   $generic-select-all-item-padding: 9px 40px 11px 40px !default;
   $generic-treeview-item-padding: 5px 10px !default;
-  $generic-treeview-load-indicator-size: $generic-treeview-toggle-item-width !default;
   $generic-treeview-searchbox-margin-bottom: 5px !default;
 }
 
 @else if $size == "compact" {
-  $generic-treeview-item-height: 28px;
   $generic-treeview-container-with-border-offset: 6px !default;
   $generic-treeview-base-container-size: 16px !default;
   $generic-checkbox-container-size: 16px !default;
   $generic-treeview-toggle-item-width: 16px !default;
   $generic-select-all-item-padding: 6px 30px 8px 30px !default;
   $generic-treeview-item-padding: 4px 6px !default;
-  $generic-treeview-load-indicator-size: $generic-treeview-toggle-item-width !default;
   $generic-treeview-searchbox-margin-bottom: 3px !default;
 }
 
+$generic-treeview-load-indicator-size: $generic-treeview-toggle-item-width !default;
+
 $generic-treeview-container-padding:
   $generic-treeview-border-padding
   $generic-treeview-border-padding
diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss
index 6b8686ed2905..cdf27f7e9c34 100644
--- a/packages/devextreme-scss/scss/widgets/material/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss
@@ -31,18 +31,6 @@ $base-text-color: null !default;
 */
 $base-label-color: null !default;
 
-/**
-* $name 40. Icon color
-* $type color
-*/
-$base-icon-color: null !default;
-
-/**
-* $name 50. Arrow icon color
-* $type color
-*/
-$base-spin-icon-color: null !default;
-
 /**
 * $name 30. Background color
 * $type color
@@ -55,7 +43,6 @@ $base-bg: null !default;
 */
 $base-border-color: null !default;
 $base-inverted-bg: null !default;
-$base-element-bg: null !default;
 $base-shadow-color: null !default;
 
 /**
@@ -76,12 +63,6 @@ $base-warning: null !default;
 */
 $base-danger: null !default;
 
-/**
-* $name 80. Hover state text color
-* $type color
-*/
-$base-hover-color: null !default;
-
 /**
 * $name 90. Hover state background color
 * $type color
@@ -89,18 +70,11 @@ $base-hover-color: null !default;
 $base-hover-bg: null !default;
 $base-inverted-text-color: null !default;
 
-/**
-* $name 100. Focused state text color
-* $type color
-*/
-$base-focus-color: null !default;
-
 /**
 * $name 110. Focused state background color
 * $type color
 */
 $base-focus-bg: null !default;
-$base-inverted-icon-color: null !default;
 $base-disabled-opacity: 0.38 !default;
 $base-disabled-color: null !default;
 $base-dropdown-shadow-color: null !default;
@@ -155,19 +129,13 @@ $scrollview-pulldown-path: null !default;
   $base-text-color: rgba(0, 0, 0, 0.87) !default;
   $base-label-color: rgba(0, 0, 0, 0.6) !default;
   $base-disabled-color: rgba(0, 0, 0, $base-disabled-opacity) !default;
-  $base-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
-  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
   $base-bg: #fff !default;
   $base-border-color: #e0e0e0 !default;
   $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
-  $base-element-bg: $base-bg !default;
   $base-shadow-color: $base-inverted-bg !default;
-  $base-hover-color: $base-text-color !default;
   $base-hover-bg: color.change(#000, $alpha: 0.04) !default;
   $base-inverted-text-color: #fff !default;
-  $base-focus-color: $base-inverted-text-color !default;
   $base-focus-bg: color.change(#000, $alpha: 0.04) !default;
-  $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
 
   $scrollview-pulldown-path: data-uri("images/widgets/material/color-schemes/light/pulldown.png") !default;
@@ -185,24 +153,44 @@ $scrollview-pulldown-path: null !default;
   $base-text-color: #fff !default;
   $base-label-color: rgba(255, 255, 255, 0.6) !default;
   $base-disabled-color: rgba(255, 255, 255, $base-disabled-opacity) !default;
-  $base-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
-  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
   $base-bg: #292929 !default;
   $base-border-color: #515159 !default;
   $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default;
-  $base-element-bg: $base-bg !default;
   $base-shadow-color: #000 !default;
-  $base-hover-color: $base-text-color !default;
   $base-hover-bg: color.change(#fff, $alpha: 0.04) !default;
   $base-inverted-text-color: rgba(0, 0, 0, 0.87) !default;
-  $base-focus-color: $base-inverted-text-color !default;
   $base-focus-bg: color.change(#fff, $alpha: 0.04) !default;
-  $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
 
   $scrollview-pulldown-path: data-uri("images/widgets/material/color-schemes/dark/pulldown.png") !default;
 }
 
+/**
+* $name 40. Icon color
+* $type color
+*/
+$base-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
+
+/**
+* $name 50. Arrow icon color
+* $type color
+*/
+$base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
+$base-element-bg: $base-bg !default;
+
+/**
+* $name 80. Hover state text color
+* $type color
+*/
+$base-hover-color: $base-text-color !default;
+
+/**
+* $name 100. Focused state text color
+* $type color
+*/
+$base-focus-color: $base-inverted-text-color !default;
+$base-inverted-icon-color: $base-inverted-text-color !default;
+
 /**
 * $name 30. Link color
 * $type color
diff --git a/packages/devextreme-scss/scss/widgets/material/actionSheet/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/actionSheet/_sizes.scss
index 01d93773d6c3..14a898935fca 100644
--- a/packages/devextreme-scss/scss/widgets/material/actionSheet/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/actionSheet/_sizes.scss
@@ -1,2 +1,2 @@
-$material-actionsheet-item-margin-value: 20px;
+$material-actionsheet-item-margin-value: 20px !default;
 $material-actionsheet-item-margin: 0 0 $material-actionsheet-item-margin-value 0 !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss
index d14a977b8059..8e2218b4706a 100644
--- a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss
@@ -13,7 +13,7 @@ $button-shadow-color: null !default;
 * $type color
 */
 $button-normal-color: $base-text-color !default;
-$button-normal-border-color: color.change($button-normal-color, $alpha: 0.24);
+$button-normal-border-color: color.change($button-normal-color, $alpha: 0.24) !default;
 
 /**
 * $name 20. Selected state text color
diff --git a/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss
index 7de9889ee26f..88e97b8ff4a4 100644
--- a/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss
@@ -2,7 +2,6 @@
 
 $material-button-horizontal-padding: null !default;
 $material-button-vertical-padding: null !default;
-$material-button-icon-padding: null !default;
 $material-button-icon-text-padding: null !default;
 $material-button-min-width: null !default;
 
@@ -19,16 +18,14 @@ $material-button-active-box-shadow-size: 0 4px 6px !default;
 @if $size == "default" {
   $material-button-horizontal-padding: 16px !default;
   $material-button-vertical-padding: 6px !default;
-  $material-button-icon-padding: 8px !default;
-  $material-button-icon-text-padding: 12px;
+  $material-button-icon-text-padding: 12px !default;
   $material-button-min-width: 64px !default;
 }
 
 @else if $size == "compact" {
   $material-button-horizontal-padding: 12px !default;
   $material-button-vertical-padding: 5px !default;
-  $material-button-icon-padding: 5px !default;
-  $material-button-icon-text-padding: 8px;
+  $material-button-icon-text-padding: 8px !default;
   $material-button-min-width: 48px !default;
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss
index f5b547710de0..3f3c19fa0907 100644
--- a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss
@@ -19,19 +19,19 @@
 * $name 100. Background color
 * $type color
 */
-$cardview-material-common-bg-color: null !default;
+$cardview-material-common-bg-color: $base-bg !default;
 
 /**
 * $name 102. Link color
 * $type color
 */
-$cardview-material-common-link-color: null !default;
+$cardview-material-common-link-color: $base-link-color !default;
 
 /**
 * $name 103. Text color
 * $type color
 */
-$cardview-material-common-text-color: null !default;
+$cardview-material-common-text-color: $base-text-color !default;
 
 // #endregion
 
@@ -41,31 +41,31 @@ $cardview-material-common-text-color: null !default;
 * $name 200. Background color
 * $type color
 */
-$cardview-material-card-bg-color: null !default;
+$cardview-material-card-bg-color: $base-bg !default;
 
 /**
 * $name 201. Border color
 * $type color
 */
-$cardview-material-card-border-color: null !default;
+$cardview-material-card-border-color: $base-border-color !default;
 
 /**
 * $name 203. Divider color
 * $type color
 */
-$cardview-material-card-divider-color: null !default;
+$cardview-material-card-divider-color: $cardview-material-card-border-color !default;
 
 /**
 * $name 204. Text color
 * $type color
 */
-$cardview-material-card-text-color: null !default;
+$cardview-material-card-text-color: $cardview-material-common-text-color !default;
 
 /**
 * $name 206. Cover background color
 * $type color
 */
-$cardview-material-card__cover-bg-color: null !default;
+$cardview-material-card__cover-bg-color: #FFF !default;
 
 /**
 * $name 207. "Empty cover" background color
@@ -77,9 +77,9 @@ $cardview-material-card__cover--noimage-bg-color: null !default;
 * $name 208. "Empty cover" icon color
 * $type color
 */
-$cardview-material-card__cover--noimage__icon-color: null !default;
+$cardview-material-card__cover--noimage__icon-color: color.change($cardview-material-common-text-color, $alpha: 0.38) !default;
 
-$cardview-material-card--focused-outline-color: null !default;
+$cardview-material-card--focused-outline-color: $base-accent !default;
 
 // #endregion
 
@@ -97,35 +97,23 @@ $cardview-material-card--selected-bg-color: null !default;
 */
 $cardview-material-card--selected-border-color: null !default;
 
-/**
-* $name 302. Divider color
-* $type color
-*/
-$cardview-material-card--selected-divider-color: null !default;
-
 /**
 * $name 303. Text color
 * $type color
 */
-$cardview-material-card--selected-text-color: null !default;
+$cardview-material-card--selected-text-color: $cardview-material-card-text-color !default;
 
 /**
 * $name 305. Cover background color
 * $type color
 */
-$cardview-material-card--selected__cover-bg-color: null !default;
-
-/**
-* $name 306. "Empty cover" background color
-* $type color
-*/
-$cardview-material-card--selected__cover--noimage-bg-color: null !default;
+$cardview-material-card--selected__cover-bg-color: $cardview-material-card__cover-bg-color !default;
 
 /**
 * $name 307. "Empty cover" icon color
 * $type color
 */
-$cardview-material-card--selected__cover--noimage__icon-color: null !default;
+$cardview-material-card--selected__cover--noimage__icon-color: $cardview-material-card__cover--noimage__icon-color !default;
 
 // #endregion
 
@@ -137,37 +125,31 @@ $cardview-material-card--selected__cover--noimage__icon-color: null !default;
 */
 $cardview-material-header-panel__item-bg-color: null !default;
 
-/**
-* $name 401. Border color
-* $type color
-*/
-$cardview-material-header-panel__item-border-color: null !default;
-
 /**
 * $name 403. Text color
 * $type color
 */
-$cardview-material-header-panel__item-text-color: null !default;
+$cardview-material-header-panel__item-text-color: $cardview-material-common-text-color !default;
 
 /**
 * $name 405. Icon color
 * $type color
 */
-$cardview-material-header-panel__item__icon-color: null !default;
+$cardview-material-header-panel__item__icon-color: $cardview-material-common-text-color !default;
 
 /**
 * $name 406. Active "Filter" icon color
 * $type color
 */
-$cardview-material-header-panel__item__header-filter-icon--selected-color: null !default;
+$cardview-material-header-panel__item__header-filter-icon--selected-color: $base-accent !default;
 
 /**
 * $name 407. Sort index text color
 * $type color
 */
-$cardview-material-header-panel__item__sort-index-text-color: null !default;
+$cardview-material-header-panel__item__sort-index-text-color: $cardview-material-common-text-color !default;
 
-$cardview-material-header-panel__item--focused-outline-color: null !default;
+$cardview-material-header-panel__item--focused-outline-color: $base-accent !default;
 
 // #endregion
 
@@ -179,103 +161,73 @@ $cardview-material-header-panel__item--focused-outline-color: null !default;
 */
 $cardview-material-header-panel__item--hovered-bg-color: null !default;
 
-/**
-* $name 501. Border color
-* $type color
-*/
-$cardview-material-header-panel__item--hovered-border-color: null !default;
-
 /**
 * $name 502. Text color
 * $type color
 */
-$cardview-material-header-panel__item--hovered-text-color: null !default;
+$cardview-material-header-panel__item--hovered-text-color: $cardview-material-header-panel__item-text-color !default;
 
 /**
 * $name 504. Icon color
 * $type color
 */
-$cardview-material-header-panel__item--hovered__icon-color: null !default;
+$cardview-material-header-panel__item--hovered__icon-color: $cardview-material-header-panel__item__icon-color !default;
 
 /**
 * $name 505. Active "Filter" icon color
 * $type color
 */
-$cardview-material-header-panel__item--hovered__header-filter-icon--selected-color: null !default;
+$cardview-material-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-material-header-panel__item__header-filter-icon--selected-color !default;
 
 /**
 * $name 506. Sort index text color
 * $type color
 */
-$cardview-material-header-panel__item--hovered__sort-index-text-color: null !default;
+$cardview-material-header-panel__item--hovered__sort-index-text-color: $cardview-material-header-panel__item__sort-index-text-color !default;
 
 // #endregion
 
 // #region HEADER PANEL ITEM (DISABLED)
 
-/**
-* $name 600. Background color
-* $type color
-*/
-$cardview-material-header-panel__item--disabled-bg-color: null !default;
-
-/**
-* $name 601. Border color
-* $type color
-*/
-$cardview-material-header-panel__item--disabled-border-color: null !default;
-
 /**
 * $name 602. Text color
 * $type color
 */
-$cardview-material-header-panel__item--disabled-text-color: null !default;
+$cardview-material-header-panel__item--disabled-text-color: color.change($cardview-material-header-panel__item-text-color, $alpha: 0.38) !default;
 
 /**
 * $name 604. Icon color
 * $type color
 */
-$cardview-material-header-panel__item--disabled__icon-color: null !default;
+$cardview-material-header-panel__item--disabled__icon-color: color.change($cardview-material-header-panel__item__icon-color, $alpha: 0.38) !default;
 
 /**
 * $name 605. Active "Filter" icon color
 * $type color
 */
-$cardview-material-header-panel__item--disabled__header-filter-icon--selected-color: null !default;
+$cardview-material-header-panel__item--disabled__header-filter-icon--selected-color: color.change($cardview-material-header-panel__item__header-filter-icon--selected-color, $alpha: 0.38) !default;
 
 /**
 * $name 606. Sort index text color
 * $type color
 */
-$cardview-material-header-panel__item--disabled__sort-index-text-color: null !default;
+$cardview-material-header-panel__item--disabled__sort-index-text-color: color.change($cardview-material-header-panel__item__sort-index-text-color, $alpha: 0.38) !default;
 
 // #endregion
 
 // #region HEADER PANEL ITEM (ON DRAG)
 
-/**
-* $name 700. Background color
-* $type color
-*/
-$cardview-material-header-panel__item--dragged-bg-color: null !default;
-
-/**
-* $name 701. Border color
-* $type color
-*/
-$cardview-material-header-panel__item--dragged-border-color: null !default;
-
 /**
 * $name 702. Text color
 * $type color
 */
-$cardview-material-header-panel__item--dragged-text-color: null !default;
+$cardview-material-header-panel__item--dragged-text-color: $cardview-material-header-panel__item-text-color !default;
 
 /**
 * $name 704. "Drag allowed" icon color
 * $type color
 */
-$cardview-material-header-panel__item--dragged__allowance-icon-color: null !default;
+$cardview-material-header-panel__item--dragged__allowance-icon-color: $cardview-material-common-text-color !default;
 
 /**
 * $name 705. "Drag blocked" icon color
@@ -287,7 +239,7 @@ $cardview-material-header-panel__item--dragged__prohibition-icon-color: null !de
 * $name 706. Box shadow color
 * $type color
 */
-$cardview-material-header-panel__item--dragged-box-shadow-color: null !default;
+$cardview-material-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
 
 // #endregion
 
@@ -303,19 +255,19 @@ $cardview-material-header-panel__dropzone-bg-color: null !default;
 * $name 802. Border color
 * $type color
 */
-$cardview-material-header-panel__dropzone-border-color: null !default;
+$cardview-material-header-panel__dropzone-border-color: $base-accent !default;
 
 /**
 * $name 803. Text color
 * $type color
 */
-$cardview-material-header-panel__dropzone-text-color: null !default;
+$cardview-material-header-panel__dropzone-text-color: $base-accent !default;
 
 /**
 * $name 804. Icon color
 * $type color
 */
-$cardview-material-header-panel__dropzone__icon-color: null !default;
+$cardview-material-header-panel__dropzone__icon-color: $base-accent !default;
 
 // #endregion
 
@@ -325,25 +277,25 @@ $cardview-material-header-panel__dropzone__icon-color: null !default;
 * $name 900. Background color
 * $type color
 */
-$cardview-material-filter-panel-bg-color: null !default;
+$cardview-material-filter-panel-bg-color: $cardview-material-common-bg-color !default;
 
 /**
 * $name 902. Border color
 * $type color
 */
-$cardview-material-filter-panel-border-color: null !default;
+$cardview-material-filter-panel-border-color: $base-border-color !default;
 
 /**
 * $name 903. Text color
 * $type color
 */
-$cardview-material-filter-panel-text-color: null !default;
+$cardview-material-filter-panel-text-color: $base-accent !default;
 
 /**
 * $name 904. Icon color
 * $type color
 */
-$cardview-material-filter-panel__icon-color: null !default;
+$cardview-material-filter-panel__icon-color: $base-accent !default;
 
 // #endregion
 
@@ -353,19 +305,19 @@ $cardview-material-filter-panel__icon-color: null !default;
 * $name 1000. Background color
 * $type color
 */
-$cardview-material-nodata-view-bg-color: null !default;
+$cardview-material-nodata-view-bg-color: $cardview-material-common-bg-color !default;
 
 /**
 * $name 1001. Text color
 * $type color
 */
-$cardview-material-nodata-view-text-color: null !default;
+$cardview-material-nodata-view-text-color: $base-label-color !default;
 
 /**
 * $name 1002. Icon color
 * $type color
 */
-$cardview-material-nodata-view__icon-color: null !default;
+$cardview-material-nodata-view__icon-color: $cardview-material-nodata-view-text-color !default;
 
 /**
 * $name 1003. Icon background color
@@ -393,190 +345,120 @@ $cardview-material-card__content__field-value--highlighted-text-color: null !def
 * $name 1104. Box shadow color
 * $type color
 */
-$cardview-material-card__content__field-value--highlighted-box-shadow-color: null !default;
+$cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
 
 // #endregion
 
 // #region COLUMN CHOOSER
 
-$cardview-material-columnchooser--empty__message-color: null !default;
+$cardview-material-columnchooser--empty__message-color: color.adjust($cardview-material-common-text-color, $lightness: 26%, $space: hsl) !default;
 
 // #endregion
 
 @if $mode == "light" {
 
-  // Common
-  $cardview-material-common-bg-color: $base-bg !default;
-  $cardview-material-common-link-color: $base-link-color !default;
-  $cardview-material-common-text-color: $base-text-color !default;
-
   // Card
-  $cardview-material-card-bg-color: $base-bg !default;
-  $cardview-material-card-border-color: $base-border-color !default;
-  $cardview-material-card-divider-color: $cardview-material-card-border-color !default;
-  $cardview-material-card-text-color: $cardview-material-common-text-color !default;
-  $cardview-material-card__cover-bg-color: #FFF !default;
   $cardview-material-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
-  $cardview-material-card__cover--noimage__icon-color: color.change($cardview-material-common-text-color, $alpha: 0.38) !default;
-
-  $cardview-material-card--focused-outline-color: $base-accent !default;
 
   // Card - selected
   $cardview-material-card--selected-bg-color: color.change($base-accent, $alpha: 0.08) !default;
   $cardview-material-card--selected-border-color: color.change($base-accent, $alpha: 0.32) !default;
-  $cardview-material-card--selected-divider-color: $cardview-material-card--selected-border-color !default;
-  $cardview-material-card--selected-text-color: $cardview-material-card-text-color !default;
-  $cardview-material-card--selected__cover-bg-color: $cardview-material-card__cover-bg-color !default;
-  $cardview-material-card--selected__cover--noimage-bg-color: $cardview-material-card__cover--noimage-bg-color !default;
-  $cardview-material-card--selected__cover--noimage__icon-color: $cardview-material-card__cover--noimage__icon-color !default;
 
   // Header panel item - default state
   $cardview-material-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
-  $cardview-material-header-panel__item-border-color: $cardview-material-header-panel__item-bg-color !default;
-  $cardview-material-header-panel__item-text-color: $cardview-material-common-text-color !default;
-  $cardview-material-header-panel__item__icon-color: $cardview-material-common-text-color !default;
-  $cardview-material-header-panel__item__header-filter-icon--selected-color: $base-accent !default;
-  $cardview-material-header-panel__item__sort-index-text-color: $cardview-material-common-text-color !default;
-
-  $cardview-material-header-panel__item--focused-outline-color: $base-accent !default;
 
   // Header panel item - hovered
   $cardview-material-header-panel__item--hovered-bg-color: color.adjust($cardview-material-header-panel__item-bg-color, $lightness: -4.31%, $space: hsl) !default;
-  $cardview-material-header-panel__item--hovered-border-color: $cardview-material-header-panel__item--hovered-bg-color !default;
-  $cardview-material-header-panel__item--hovered-text-color: $cardview-material-header-panel__item-text-color !default;
-  $cardview-material-header-panel__item--hovered__icon-color: $cardview-material-header-panel__item__icon-color !default;
-  $cardview-material-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-material-header-panel__item__header-filter-icon--selected-color !default;
-  $cardview-material-header-panel__item--hovered__sort-index-text-color: $cardview-material-header-panel__item__sort-index-text-color !default;
-
-  // Header panel item - disabled
-  $cardview-material-header-panel__item--disabled-bg-color: $cardview-material-header-panel__item-bg-color !default;
-  $cardview-material-header-panel__item--disabled-border-color: $cardview-material-header-panel__item--disabled-bg-color !default;
-  $cardview-material-header-panel__item--disabled-text-color: color.change($cardview-material-header-panel__item-text-color, $alpha: 0.38) !default;
-  $cardview-material-header-panel__item--disabled__icon-color: color.change($cardview-material-header-panel__item__icon-color, $alpha: 0.38) !default;
-  $cardview-material-header-panel__item--disabled__header-filter-icon--selected-color: color.change($cardview-material-header-panel__item__header-filter-icon--selected-color, $alpha: 0.38) !default;
-  $cardview-material-header-panel__item--disabled__sort-index-text-color: color.change($cardview-material-header-panel__item__sort-index-text-color, $alpha: 0.38) !default;
 
   // Header panel item - dragged
-  $cardview-material-header-panel__item--dragged-bg-color: $cardview-material-header-panel__item-bg-color !default;
-  $cardview-material-header-panel__item--dragged-border-color: $cardview-material-header-panel__item--dragged-bg-color !default;
-  $cardview-material-header-panel__item--dragged-text-color: $cardview-material-header-panel__item-text-color !default;
-  $cardview-material-header-panel__item--dragged__allowance-icon-color: $cardview-material-common-text-color !default;
   $cardview-material-header-panel__item--dragged__prohibition-icon-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -4deg, $saturation: 22.8%, $lightness: -9.61%) !default;
-  $cardview-material-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
 
   // Header panel Drop-zone
   $cardview-material-header-panel__dropzone-bg-color: color.mix($base-accent, $base-bg, 8%) !default;
-  $cardview-material-header-panel__dropzone-border-color: $base-accent !default;
-  $cardview-material-header-panel__dropzone-text-color: $base-accent !default;
-  $cardview-material-header-panel__dropzone__icon-color: $base-accent !default;
-
-  // Filter panel
-  $cardview-material-filter-panel-bg-color: $cardview-material-common-bg-color !default;
-  $cardview-material-filter-panel-border-color: $base-border-color !default;
-  $cardview-material-filter-panel-text-color: $base-accent !default;
-  $cardview-material-filter-panel__icon-color: $base-accent !default;
 
   // Empty view
-  $cardview-material-nodata-view-bg-color: $cardview-material-common-bg-color !default;
-  $cardview-material-nodata-view-text-color: $base-label-color !default;
-  $cardview-material-nodata-view__icon-color: $cardview-material-nodata-view-text-color !default;
   $cardview-material-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
 
   // Search highlight
   $cardview-material-card__content__field-value--highlighted-text-color: rgba(0, 0, 0, 1) !default;
-  $cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
-
-  // Column chooser
-  $cardview-material-columnchooser--empty__message-color: color.adjust($cardview-material-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
 
-  // Common
-  $cardview-material-common-bg-color: $base-bg !default;
-  $cardview-material-common-link-color: $base-link-color !default;
-  $cardview-material-common-text-color: $base-text-color !default;
-
   // Card
-  $cardview-material-card-bg-color: $base-bg !default;
-  $cardview-material-card-border-color: $base-border-color !default;
-  $cardview-material-card-divider-color: $cardview-material-card-border-color !default;
-  $cardview-material-card-text-color: $cardview-material-common-text-color !default;
-  $cardview-material-card__cover-bg-color: #FFF !default;
   $cardview-material-card__cover--noimage-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default;
-  $cardview-material-card__cover--noimage__icon-color: color.change($cardview-material-common-text-color, $alpha: 0.38) !default;
-
-  $cardview-material-card--focused-outline-color: $base-accent !default;
 
   // Card - selected
   $cardview-material-card--selected-bg-color: color.change(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $alpha: 0.08) !default;
   $cardview-material-card--selected-border-color: color.change(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $alpha: 0.32) !default;
-  $cardview-material-card--selected-divider-color: $cardview-material-card--selected-border-color !default;
-  $cardview-material-card--selected-text-color: $cardview-material-card-text-color !default;
-  $cardview-material-card--selected__cover-bg-color: $cardview-material-card__cover-bg-color !default;
-  $cardview-material-card--selected__cover--noimage-bg-color: $cardview-material-card__cover--noimage-bg-color !default;
-  $cardview-material-card--selected__cover--noimage__icon-color: $cardview-material-card__cover--noimage__icon-color !default;
 
   // Header panel item - default
   $cardview-material-header-panel__item-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default;
-  $cardview-material-header-panel__item-border-color: $cardview-material-header-panel__item-bg-color !default;
-  $cardview-material-header-panel__item-text-color: $cardview-material-common-text-color !default;
-  $cardview-material-header-panel__item__icon-color: $cardview-material-common-text-color !default;
-  $cardview-material-header-panel__item__header-filter-icon--selected-color: $base-accent !default;
-  $cardview-material-header-panel__item__sort-index-text-color: $cardview-material-common-text-color !default;
-
-  $cardview-material-header-panel__item--focused-outline-color: $base-accent !default;
 
   // Header panel item - hovered
   $cardview-material-header-panel__item--hovered-bg-color: color.adjust($cardview-material-header-panel__item-bg-color, $saturation: -3.47%, $space: hsl, $lightness: 2.16%) !default;
-  $cardview-material-header-panel__item--hovered-border-color: $cardview-material-header-panel__item--hovered-bg-color !default;
-  $cardview-material-header-panel__item--hovered-text-color: $cardview-material-header-panel__item-text-color !default;
-  $cardview-material-header-panel__item--hovered__icon-color: $cardview-material-header-panel__item__icon-color !default;
-  $cardview-material-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-material-header-panel__item__header-filter-icon--selected-color !default;
-  $cardview-material-header-panel__item--hovered__sort-index-text-color: $cardview-material-header-panel__item__sort-index-text-color !default;
-
-  // Header panel item - disabled
-  $cardview-material-header-panel__item--disabled-bg-color: $cardview-material-header-panel__item-bg-color !default;
-  $cardview-material-header-panel__item--disabled-border-color: $cardview-material-header-panel__item--disabled-bg-color !default;
-  $cardview-material-header-panel__item--disabled-text-color: color.change($cardview-material-header-panel__item-text-color, $alpha: 0.38) !default;
-  $cardview-material-header-panel__item--disabled__icon-color: color.change($cardview-material-header-panel__item__icon-color, $alpha: 0.38) !default;
-  $cardview-material-header-panel__item--disabled__header-filter-icon--selected-color: color.change($cardview-material-header-panel__item__header-filter-icon--selected-color, $alpha: 0.38) !default;
-  $cardview-material-header-panel__item--disabled__sort-index-text-color: color.change($cardview-material-header-panel__item__sort-index-text-color, $alpha: 0.38) !default;
 
   // Header panel item - dragged
-  $cardview-material-header-panel__item--dragged-bg-color: $cardview-material-header-panel__item-bg-color !default;
-  $cardview-material-header-panel__item--dragged-border-color: $cardview-material-header-panel__item--dragged-bg-color !default;
-  $cardview-material-header-panel__item--dragged-text-color: $cardview-material-header-panel__item-text-color !default;
-  $cardview-material-header-panel__item--dragged__allowance-icon-color: $cardview-material-common-text-color !default;
   $cardview-material-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default;
-  $cardview-material-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
 
   // Header panel Drop-zone
   $cardview-material-header-panel__dropzone-bg-color: color.mix(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $base-bg, 8%) !default;
-  $cardview-material-header-panel__dropzone-border-color: $base-accent !default;
-  $cardview-material-header-panel__dropzone-text-color: $base-accent !default;
-  $cardview-material-header-panel__dropzone__icon-color: $base-accent !default;
-
-  // Filter panel
-  $cardview-material-filter-panel-bg-color: $cardview-material-common-bg-color !default;
-  $cardview-material-filter-panel-border-color: $base-border-color !default;
-  $cardview-material-filter-panel-text-color: $base-accent !default;
-  $cardview-material-filter-panel__icon-color: $base-accent !default;
 
   // Empty view
-  $cardview-material-nodata-view-bg-color: $cardview-material-common-bg-color !default;
-  $cardview-material-nodata-view-text-color: $base-label-color !default;
-  $cardview-material-nodata-view__icon-color: $cardview-material-nodata-view-text-color !default;
   $cardview-material-nodata-view__icon-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default;
 
   // Search highlight
   $cardview-material-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default;
-  $cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
-
-  // Column chooser
-  $cardview-material-columnchooser--empty__message-color: color.adjust($cardview-material-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 
+/**
+* $name 302. Divider color
+* $type color
+*/
+$cardview-material-card--selected-divider-color: $cardview-material-card--selected-border-color !default;
+
+/**
+* $name 306. "Empty cover" background color
+* $type color
+*/
+$cardview-material-card--selected__cover--noimage-bg-color: $cardview-material-card__cover--noimage-bg-color !default;
+
+/**
+* $name 401. Border color
+* $type color
+*/
+$cardview-material-header-panel__item-border-color: $cardview-material-header-panel__item-bg-color !default;
+
+/**
+* $name 501. Border color
+* $type color
+*/
+$cardview-material-header-panel__item--hovered-border-color: $cardview-material-header-panel__item--hovered-bg-color !default;
+
+/**
+* $name 600. Background color
+* $type color
+*/
+$cardview-material-header-panel__item--disabled-bg-color: $cardview-material-header-panel__item-bg-color !default;
+
+/**
+* $name 601. Border color
+* $type color
+*/
+$cardview-material-header-panel__item--disabled-border-color: $cardview-material-header-panel__item--disabled-bg-color !default;
+
+/**
+* $name 700. Background color
+* $type color
+*/
+$cardview-material-header-panel__item--dragged-bg-color: $cardview-material-header-panel__item-bg-color !default;
+
+/**
+* $name 701. Border color
+* $type color
+*/
+$cardview-material-header-panel__item--dragged-border-color: $cardview-material-header-panel__item--dragged-bg-color !default;
+
 $cardview-bg-color: $cardview-material-common-bg-color !default;
 $cardview-link-color: $cardview-material-common-link-color !default;
 $cardview-text-color: $cardview-material-common-text-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss
index c7ef0ddf524f..e67175a11df0 100644
--- a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss
@@ -17,14 +17,14 @@
 * $name 101. Border radius
 * $type text
 */
-$cardview-material-common-border-radius: null !default;
+$cardview-material-common-border-radius: 16px !default;
 
 /**
 * $name 104. Text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-common-text-weight: null !default;
+$cardview-material-common-text-weight: 400 !default;
 
 /**
 * $name 105. Vertical gap between cards
@@ -46,9 +46,9 @@ $cardview-material-common-padding: null !default;
 
 // #region CARD
 
-$cardview-material-card-min-width: null !default;
+$cardview-material-card-min-width: 250px !default;
 
-$cardview-material-card-border-width: null !default;
+$cardview-material-card-border-width: 1px !default;
 
 /**
 * $name 202. Border radius
@@ -73,7 +73,7 @@ $cardview-material-card__content-line-height: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-card__field-caption-weight: null !default;
+$cardview-material-card__field-caption-weight: 500 !default;
 
 $cardview-material-card__cover-max-height: null !default;
 
@@ -85,7 +85,7 @@ $cardview-material-card__content-row-gap: null !default;
 
 $cardview-material-card__content__cell-padding-vertical: null !default;
 
-$cardview-material-card__content__cell-padding-horizontal: null !default;
+$cardview-material-card__content__cell-padding-horizontal: 12px !default;
 
 // #endregion
 
@@ -96,19 +96,19 @@ $cardview-material-card__content__cell-padding-horizontal: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-card--selected__field-caption-weight: null !default;
+$cardview-material-card--selected__field-caption-weight: $cardview-material-card__field-caption-weight !default;
 
 // #endregion
 
 // #region HEADER
 
-$cardview-material-header-gap: null !default;
+$cardview-material-header-gap: 4px !default;
 
 // #endregion
 
 // #region HEADER PANEL
 
-$cardview-material-header-panel-vertical-margin: null !default;
+$cardview-material-header-panel-vertical-margin: 4px !default;
 
 $cardview-material-header-panel--empty-line-height: null !default;
 
@@ -116,13 +116,13 @@ $cardview-material-header-panel--empty-line-height: null !default;
 
 // #region HEADER PANEL ITEM
 
-$cardview-material-header-panel__item-border-width: null !default;
+$cardview-material-header-panel__item-border-width: 1px !default;
 
 /**
 * $name 402. Border radius
 * $type text
 */
-$cardview-material-header-panel__item-border-radius: null !default;
+$cardview-material-header-panel__item-border-radius: 99px !default;
 
 $cardview-material-header-panel__item-padding-vertical: null !default;
 
@@ -135,14 +135,14 @@ $cardview-material-header-panel__item-line-height: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-header-panel__item-text-weight: null !default;
+$cardview-material-header-panel__item-text-weight: $cardview-material-common-text-weight !default;
 
 /**
 * $name 408. Sort index text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-header-panel__item__sort-index-text-weight: null !default;
+$cardview-material-header-panel__item__sort-index-text-weight: 400 !default;
 
 $cardview-material-header-panel__item__icon-size: null !default;
 
@@ -158,14 +158,14 @@ $cardview-material-header-item__right-padding: null !default;
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-header-panel__item--hovered-text-weight: null !default;
+$cardview-material-header-panel__item--hovered-text-weight: $cardview-material-header-panel__item-text-weight !default;
 
 /**
 * $name 507. Sort index text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-header-panel__item--hovered__sort-index-text-weight: null !default;
+$cardview-material-header-panel__item--hovered__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
 
 // #endregion
 
@@ -176,14 +176,14 @@ $cardview-material-header-panel__item--hovered__sort-index-text-weight: null !de
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-header-panel__item--disabled-text-weight: null !default;
+$cardview-material-header-panel__item--disabled-text-weight: $cardview-material-header-panel__item-text-weight !default;
 
 /**
 * $name 607. Sort index text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-header-panel__item--disabled__sort-index-text-weight: null !default;
+$cardview-material-header-panel__item--disabled__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
 
 // #endregion
 
@@ -194,10 +194,10 @@ $cardview-material-header-panel__item--disabled__sort-index-text-weight: null !d
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-header-panel__item--dragged-text-weight: null !default;
+$cardview-material-header-panel__item--dragged-text-weight: $cardview-material-header-panel__item-text-weight !default;
 
-$cardview-material-header-item__sort-indicator__border-size: null;
-$cardview-material-header-item__sort-indicator__border-radius: null;
+$cardview-material-header-item__sort-indicator__border-size: null !default;
+$cardview-material-header-item__sort-indicator__border-radius: null !default;
 
 // #endregion
 
@@ -207,7 +207,7 @@ $cardview-material-header-panel__dropzone-height: null !default;
 
 $cardview-material-header-panel__dropzone-top: null !default;
 
-$cardview-material-header-panel__dropzone-border-width: null !default;
+$cardview-material-header-panel__dropzone-border-width: 1.5px !default;
 
 /**
 * $name 801. Border radius
@@ -223,7 +223,7 @@ $cardview-material-header-panel__dropzone-border-radius: null !default;
 * $name 901. Border radius
 * $type text
 */
-$cardview-material-filter-panel-border-radius: null !default;
+$cardview-material-filter-panel-border-radius: 0 !default;
 
 // #endregion
 
@@ -243,16 +243,16 @@ $cardview-material-nodata-view__icon-size: null !default;
 * $name 1101. Border radius
 * $type text
 */
-$cardview-material-card__content__field-value--highlighted-border-radius: null !default;
+$cardview-material-card__content__field-value--highlighted-border-radius: 5px !default;
 
-$cardview-material-card__content__field-value--highlighted-border-padding: null !default;
+$cardview-material-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default;
 
 /**
 * $name 1103. Text weight
 * $type select
 * $type-values 100|200|300|400|500|600|700|800|900
 */
-$cardview-material-card__content__field-value--highlighted-text-weight: null !default;
+$cardview-material-card__content__field-value--highlighted-text-weight: 500 !default;
 
 // #endregion
 
@@ -267,84 +267,48 @@ $cardview-material-column-chooser__select-all-item-horizontal-padding: null !def
 @if $size == "default" {
 
   // Common
-  $cardview-material-common-border-radius: 16px !default;
-  $cardview-material-common-text-weight: 400 !default;
   $cardview-material-common-cards-row-gap: 16px !default;
   $cardview-material-common-cards-column-gap: 16px !default;
   $cardview-material-common-gap: 24px !default;
   $cardview-material-common-padding: 24px !default;
 
   // Card
-  $cardview-material-card-min-width: 250px !default;
-  $cardview-material-card-border-width: 1px !default;
   $cardview-material-card-border-radius: 8px !default;
   $cardview-material-card__header-height: 52px !default;
   $cardview-material-card__header-text-size: 16px !default;
   $cardview-material-card__header__toolbar-override-height: 52px !default;
   $cardview-material-card__header__selection-checkbox-padding-right: 12px !default;
-  $cardview-material-card__header-toolbar-override-height: 52px !default;
-  $cardview-material-card__field-caption-weight: 500 !default;
   $cardview-material-card__cover-max-height: 180px !default;
   $cardview-material-card__cover--noimage__icon-size: 48px !default;
   $cardview-material-card__content-padding: 12px !default;
   $cardview-material-card__content-row-gap: 4px !default;
   $cardview-material-card__content__cell-padding-vertical: 6px !default;
-  $cardview-material-card__content__cell-padding-horizontal: 12px !default;
-
-  // Card - selected
-  $cardview-material-card--selected__field-caption-weight: $cardview-material-card__field-caption-weight !default;
-
-  // Header
-  $cardview-material-header-gap: 4px !default;
 
   // Header panel
-  $cardview-material-header-panel-vertical-margin: 4px !default;
   $cardview-material-header-panel--empty-line-height: 36px !default;
 
   // Header panel item - default
-  $cardview-material-header-panel__item-border-width: 1px !default;
-  $cardview-material-header-panel__item-border-radius: 99px !default;
   $cardview-material-header-panel__item-padding-horizontal: 16px !default;
   $cardview-material-header-panel__item-padding-vertical: 7px !default;
   $cardview-material-header-item__left-padding: 6px !default;
   $cardview-material-header-item__right-padding: 2px !default;
   $cardview-material-header-panel__item-line-height: 20px !default;
-  $cardview-material-header-panel__item-text-weight: $cardview-material-common-text-weight !default;
-  $cardview-material-header-panel__item__sort-index-text-weight: 400 !default;
   $cardview-material-header-panel__item__icon-size: 20px !default;
 
-  // Header panel item - hovered
-  $cardview-material-header-panel__item--hovered-text-weight: $cardview-material-header-panel__item-text-weight !default;
-  $cardview-material-header-panel__item--hovered__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
-
-  // Header panel item - disabled
-  $cardview-material-header-panel__item--disabled-text-weight: $cardview-material-header-panel__item-text-weight !default;
-  $cardview-material-header-panel__item--disabled__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
-
   // Header panel item - dragged
-  $cardview-material-header-panel__item--dragged-text-weight: $cardview-material-header-panel__item-text-weight !default;
   $cardview-material-header-item__sort-indicator__border-size: 2px !default;
   $cardview-material-header-item__sort-indicator__border-radius: 8px !default;
 
   // Header panel Drop-zone
   $cardview-material-header-panel__dropzone-height: 44px !default;
   $cardview-material-header-panel__dropzone-top: -4px !default;
-  $cardview-material-header-panel__dropzone-border-width: 1.5px !default;
   $cardview-material-header-panel__dropzone-border-radius: 8px !default;
 
-  // Filter panel
-  $cardview-material-filter-panel-border-radius: 0 !default;
-
   // Empty view
   $cardview-material-nodata-view__icon-container-size: 64px !default;
   $cardview-material-nodata-view__icon-container-margin: 12px !default;
   $cardview-material-nodata-view__icon-size: 40px !default;
 
-  // Search highlight
-  $cardview-material-card__content__field-value--highlighted-border-radius: 5px !default;
-  $cardview-material-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default;
-  $cardview-material-card__content__field-value--highlighted-text-weight: 500 !default;
-
   // Column chooser
   $cardview-material-column-chooser--empty__message-horizontal-padding: 24px !default;
   $cardview-material-column-chooser__select-all-item-horizontal-padding: 19px !default;
@@ -353,22 +317,16 @@ $cardview-material-column-chooser__select-all-item-horizontal-padding: null !def
 @else if $size == "compact" {
 
   // Common
-  $cardview-material-common-border-radius: 16px !default;
-  $cardview-material-common-text-weight: 400 !default;
   $cardview-material-common-cards-row-gap: 12px !default;
   $cardview-material-common-cards-column-gap: 12px !default;
   $cardview-material-common-gap: 16px !default;
   $cardview-material-common-padding: 16px !default;
 
   // Card
-  $cardview-material-card-min-width: 250px !default;
-  $cardview-material-card-border-width: 1px !default;
   $cardview-material-card-border-radius: 6px !default;
   $cardview-material-card__header-height: 44px !default;
   $cardview-material-card__header-text-size: 14px !default;
   $cardview-material-card__header__selection-checkbox-padding-right: 8px !default;
-  $cardview-material-card__header-toolbar-override-height: 44px !default;
-  $cardview-material-card__field-caption-weight: 500 !default;
   $cardview-material-card__cover-max-height: 140px !default;
   $cardview-material-card__cover--noimage__icon-size: 32px !default;
   $cardview-material-card__content-padding: 8px !default;
@@ -376,62 +334,32 @@ $cardview-material-column-chooser__select-all-item-horizontal-padding: null !def
   $cardview-material-card__content-font-size: 12px !default;
   $cardview-material-card__content-line-height: 16px !default;
   $cardview-material-card__content__cell-padding-vertical: 4px !default;
-  $cardview-material-card__content__cell-padding-horizontal: 12px !default;
-
-  // Card - selected
-  $cardview-material-card--selected__field-caption-weight: $cardview-material-card__field-caption-weight !default;
-
-  // Header
-  $cardview-material-header-gap: 4px !default;
 
   // Header panel
-  $cardview-material-header-panel-vertical-margin: 4px !default;
   $cardview-material-header-panel--empty-line-height: 32px !default;
 
   // Header panel item - default
-  $cardview-material-header-panel__item-border-width: 1px !default;
-  $cardview-material-header-panel__item-border-radius: 99px !default;
   $cardview-material-header-panel__item-padding-horizontal: 12px !default;
   $cardview-material-header-panel__item-padding-vertical: 5px !default;
   $cardview-material-header-item__left-padding: 3px !default;
   $cardview-material-header-item__right-padding: 1px !default;
   $cardview-material-header-panel__item-line-height: 16px !default;
-  $cardview-material-header-panel__item-text-weight: $cardview-material-common-text-weight !default;
-  $cardview-material-header-panel__item__sort-index-text-weight: 400 !default;
   $cardview-material-header-panel__item__icon-size: 16px !default;
 
-  // Header panel item - hovered
-  $cardview-material-header-panel__item--hovered-text-weight: $cardview-material-header-panel__item-text-weight !default;
-  $cardview-material-header-panel__item--hovered__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
-
-  // Header panel item - disabled
-  $cardview-material-header-panel__item--disabled-text-weight: $cardview-material-header-panel__item-text-weight !default;
-  $cardview-material-header-panel__item--disabled__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
-
   // Header panel item - dragged
-  $cardview-material-header-panel__item--dragged-text-weight: $cardview-material-header-panel__item-text-weight !default;
   $cardview-material-header-item__sort-indicator__border-size: 1px !default;
   $cardview-material-header-item__sort-indicator__border-radius: 4px !default;
 
   // Header panel Drop-zone
   $cardview-material-header-panel__dropzone-height: 38px !default;
   $cardview-material-header-panel__dropzone-top: -3px !default;
-  $cardview-material-header-panel__dropzone-border-width: 1.5px !default;
   $cardview-material-header-panel__dropzone-border-radius: 6px !default;
 
-  // Filter panel
-  $cardview-material-filter-panel-border-radius: 0 !default;
-
   // Empty view
   $cardview-material-nodata-view__icon-container-size: 48px !default;
   $cardview-material-nodata-view__icon-container-margin: 8px !default;
   $cardview-material-nodata-view__icon-size: 32px !default;
 
-  // Search highlight
-  $cardview-material-card__content__field-value--highlighted-border-radius: 5px !default;
-  $cardview-material-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default;
-  $cardview-material-card__content__field-value--highlighted-text-weight: 500 !default;
-
   // Column chooser
   $cardview-material-column-chooser--empty__message-horizontal-padding: 16px !default;
   $cardview-material-column-chooser__select-all-item-horizontal-padding: 17px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
index eee7e7d54d74..8bb57067f07c 100644
--- a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -56,7 +56,6 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
 $chat-messagelist-day-header-font-size: 12px !default;
 
 $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default;
-$chat-typingindicator-padding: null !default;
 $chat-typingindicator-row-gap: $chat-messagegroup-gap !default;
 $chat-typingindicator-font-size: $chat-information-font-size !default;
 $chat-typingindicator-bubble-padding-block: null !default;
@@ -115,7 +114,6 @@ $chat-bubble-gap: 8px !default;
   $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default;
   $chat-typingindicator-bubble-padding-block: 11px !default;
   $chat-typingindicator-bubble-padding-inline: 20px !default;
-  $chat-typingindicator-padding: $chat-messagegroup-padding !default;
 
   $chat-confirmation-popup-content-padding: 16px !default;
   $chat-confirmation-popup-toolbar-padding-block: 0 16px !default;
@@ -156,7 +154,6 @@ $chat-bubble-gap: 8px !default;
   $chat-typingindicator-circle-size-center: math.div(12, 13) * 1em !default;
   $chat-typingindicator-bubble-padding-block: 8px !default;
   $chat-typingindicator-bubble-padding-inline: 12px !default;
-  $chat-typingindicator-padding: $chat-messagegroup-padding !default;
 
   $chat-confirmation-popup-content-padding: 8px !default;
   $chat-confirmation-popup-toolbar-padding-block: 0 8px !default;
@@ -165,3 +162,5 @@ $chat-bubble-gap: 8px !default;
 
   $chat-file-icon-font-size: 16px !default;
 }
+
+$chat-typingindicator-padding: $chat-messagegroup-padding !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss
index 119dfc9588ae..cb1034a3b0dd 100644
--- a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss
@@ -7,7 +7,7 @@
 @use "../../base/checkBox";
 @use "../../base/checkBox/mixins" as *;
 
-$material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+$material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !default;
 
 .dx-checkbox {
   .dx-checkbox-container {
diff --git a/packages/devextreme-scss/scss/widgets/material/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/material/colorView/_index.scss
index 556fe5fe74c5..deb1bfcbfced 100644
--- a/packages/devextreme-scss/scss/widgets/material/colorView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/colorView/_index.scss
@@ -4,8 +4,8 @@
 @use "../../base/colorView";
 @include dx-base-colorview-styles($colorview-handle-color, $colorview-handle-border-color);
 
-$material-colorview-alpha-width: $material-colorview-palette-width + 4;
-$material-colorview-hue-scale-height: $material-colorview-palette-height;
+$material-colorview-alpha-width: $material-colorview-palette-width + 4 !default;
+$material-colorview-hue-scale-height: $material-colorview-palette-height !default;
 
 .dx-colorview-container {
   width: $material-colorview-container-width;
diff --git a/packages/devextreme-scss/scss/widgets/material/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/material/common/_mixins.scss
index 9d81f4600169..a4c30cea256a 100644
--- a/packages/devextreme-scss/scss/widgets/material/common/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/material/common/_mixins.scss
@@ -8,7 +8,7 @@
 @use "../../base/validation" as *;
 @use "../list/sizes" as *;
 
-$badge-invalid-bg: $base-invalid-color;
+$badge-invalid-bg: $base-invalid-color !default;
 
 @mixin dx-base-typography() {
   @include dx-base-typography-mixin(
diff --git a/packages/devextreme-scss/scss/widgets/material/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/dateRangeBox/_index.scss
index 38c27e283940..902b0493def2 100644
--- a/packages/devextreme-scss/scss/widgets/material/dateRangeBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/dateRangeBox/_index.scss
@@ -9,7 +9,7 @@
 @use "../../base/icon_fonts" as *;
 @use "../textEditor" as *;
 
-$material-editor-custom-button-margin: 5px;
+$material-editor-custom-button-margin: 5px !default;
 
 .dx-daterangebox {
   @include dx-dropdowneditor-button-icon-styling(daterangepicker);
diff --git a/packages/devextreme-scss/scss/widgets/material/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/material/dateView/_index.scss
index 936652fe63ca..003ec8b587fe 100644
--- a/packages/devextreme-scss/scss/widgets/material/dateView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/dateView/_index.scss
@@ -6,7 +6,7 @@
 @use "../../base/dateView";
 @use "../scrollable";
 
-$material-dateview-roller-padding: math.div($material-dateview-roller-height - $material-dateview-roller-item-height, 2);
+$material-dateview-roller-padding: math.div($material-dateview-roller-height - $material-dateview-roller-item-height, 2) !default;
 
 .dx-dateview-rollers {
   width: auto;
diff --git a/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss
index eb57e7b9e913..c436fcd6eebe 100644
--- a/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss
@@ -15,10 +15,10 @@
 @use "../fieldset/sizes" as *;
 @use "../menu/colors" as *;
 
-$material-diagram-toolbar-icon-size: $material-base-icon-size;
-$diagram-toolbar-colorbutton-border-width: 3px;
+$material-diagram-toolbar-icon-size: $material-base-icon-size !default;
+$diagram-toolbar-colorbutton-border-width: 3px !default;
 
-$diagram-toolbox-title-size: 18px;
+$diagram-toolbox-title-size: 18px !default;
 
 .dx-diagram {
   border-color: $diagram-border-color;
diff --git a/packages/devextreme-scss/scss/widgets/material/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/dropDownButton/_sizes.scss
index 57c4be674692..60ff376fd31c 100644
--- a/packages/devextreme-scss/scss/widgets/material/dropDownButton/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/dropDownButton/_sizes.scss
@@ -5,10 +5,10 @@ $material-dropdownbutton-icon-spindown-size: null !default;
 
 @if $size == "default" {
   $material-dropdownbutton-action-horizontal-padding: 12px !default;
-  $material-dropdownbutton-icon-spindown-size: 24px;
+  $material-dropdownbutton-icon-spindown-size: 24px !default;
 }
 
 @else if $size == "compact" {
   $material-dropdownbutton-action-horizontal-padding: 8px !default;
-  $material-dropdownbutton-icon-spindown-size: 18px;
+  $material-dropdownbutton-icon-spindown-size: 18px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/material/dropDownEditor/_index.scss
index aecf0ce9c787..e71b1065dae8 100644
--- a/packages/devextreme-scss/scss/widgets/material/dropDownEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/dropDownEditor/_index.scss
@@ -8,17 +8,17 @@
 @use "../../base/dropDownEditor";
 @use "../../base/dropDownEditor/mixins" as *;
 
-$material-dropdowneditor-container-button-size: $material-base-icon-size;
+$material-dropdowneditor-container-button-size: $material-base-icon-size !default;
 
 $material-dropdowneditor-invalid-badge-offset:
   $material-dropdowneditor-container-button-size +
-  $material-invalid-badge-halfhorizontal-padding;
+  $material-invalid-badge-halfhorizontal-padding !default;
 
 $material-dropdowneditor-invalid-badge-with-clear-offset:
   $material-dropdowneditor-container-button-size * 2 +
-  $material-invalid-badge-halfhorizontal-padding;
+  $material-invalid-badge-halfhorizontal-padding !default;
 
-$material-dropdowneditor-invalid-badge-size: $material-invalid-badge-size + $material-invalid-badge-horizontal-padding;
+$material-dropdowneditor-invalid-badge-size: $material-invalid-badge-size + $material-invalid-badge-horizontal-padding !default;
 
 @mixin dx-dropdowneditor-button-icon() {
   width: $material-dropdowneditor-container-button-size;
diff --git a/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss
index ed7f90e27e38..f0a6358c9177 100644
--- a/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss
@@ -16,14 +16,11 @@ $filemanager-file-item-hover-bg: $base-hover-bg !default;
 $filemanager-file-item-focused-border: $base-accent !default;
 $filemanager-item-focused-color: $base-inverted-text-color !default;
 $filemanager-dirs-tree-item-focus-bg: null !default;
-$filemanager-progressbox-shadow-color: null !default;
 
 @if $mode == "light" {
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default;
-  $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
 }
 
 @if $mode == "dark" {
   $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
-  $filemanager-progressbox-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/fileManager/_sizes.scss
index 8a8635282724..710c1b09d13f 100644
--- a/packages/devextreme-scss/scss/widgets/material/fileManager/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/fileManager/_sizes.scss
@@ -15,7 +15,7 @@ $filemanager-large-icon-size: null !default;
 $filemanager-progress-panel-title-padding: null !default;
 $filemanager-progress-box-button-close-margin-top: null !default;
 
-$filemanager-toolbar-height: $material-toolbar-height;
+$filemanager-toolbar-height: $material-toolbar-height !default;
 
 @if $size == "default" {
   $filemanager-toolbar-separator-height: 36px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss
index bb9fcb08ec53..1d2218ae1772 100644
--- a/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss
@@ -6,7 +6,7 @@
 @use "../../base/mixins" as *;
 @use "../../base/fileUploader";
 
-$material-fileuploader-file-wrapper-border-size: 3px;
+$material-fileuploader-file-wrapper-border-size: 3px !default;
 
 .dx-fileuploader-wrapper {
   padding: $material-fileuploader-vertical-padding;
diff --git a/packages/devextreme-scss/scss/widgets/material/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/fileUploader/_sizes.scss
index 7956eae8fdf4..a0d2d94e429e 100644
--- a/packages/devextreme-scss/scss/widgets/material/fileUploader/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/fileUploader/_sizes.scss
@@ -3,7 +3,7 @@
 $material-fileuploader-file-container-padding: null !default;
 $material-fileuploader-file-container-text-margin: null !default;
 $material-fileuploader-file-container-button-margin: null !default;
-$material-fileuploader-file-cancel-button-margin-left: 4px;
+$material-fileuploader-file-cancel-button-margin-left: 4px !default;
 $material-fileuploader-file-container-button-size: null !default;
 $material-fileuploader-file-icon-font-size: null !default;
 
diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss
index de5874276173..fe96fa4a1ac0 100644
--- a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss
@@ -12,8 +12,8 @@ $gantt-task-background-color: null !default;
 @if $color == "lime" {
   $gantt-parent-task-background-color: #f44336 !default;
   $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
-  $gantt-task-color: #fff;
-  $gantt-task-background-color: #999;
+  $gantt-task-color: #fff !default;
+  $gantt-task-background-color: #999 !default;
 }
 
 @if $color == "blue" {
@@ -34,8 +34,8 @@ $gantt-task-background-color: null !default;
 @if $color == "orange" or $color == "purple" or $color == "teal" {
   $gantt-parent-task-background-color: #8bc34a !default;
   $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
-  $gantt-task-color: #fff;
-  $gantt-task-background-color: #999;
+  $gantt-task-color: #fff !default;
+  $gantt-task-background-color: #999 !default;
 }
 
 @if $mode == "light" {
diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss
index fcdcfef389c2..4a5b51c944b4 100644
--- a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss
@@ -9,7 +9,7 @@
 @use "../form/sizes" as *;
 @use "../splitterBar";
 
-$gantt-successor-background-color: white;
+$gantt-successor-background-color: white !default;
 
 .dx-gantt {
   border: 1px solid;
diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss
index 3c3662d4e159..ce10df69f8c6 100644
--- a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss
@@ -35,7 +35,6 @@ $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !def
 $datagrid-drag-header-shadow-color: null !default;
 $datagrid-drag-header-second-shadow-color: null !default;
 $datagrid-header-drag-bg: $datagrid-base-background-color !default;
-$header-filter-color: null !default;
 
 /**
 * $name 51. Selected row background color
@@ -82,7 +81,6 @@ $datagrid-menu-icon-color: inherit !default;
 $datagrid-cell-modified-border-color: null !default;
 $datagrid-cell-removed-border-color: $datagrid-border-color !default;
 $datagrid-row-removed-bg: $datagrid-border-color !default;
-$datagrid-cell-removed-text-color: null !default;
 
 /**
 * $name 45. Invalid data faded color
@@ -166,8 +164,8 @@ $datagrid-text-stub-background-image-path: null !default;
 $datagrid-filter-panel-color: $base-accent !default;
 $datagrid-draggable-column-text-color: color.change($base-text-color, $alpha: 0.38) !default;
 
-$datagrid-text-link-disabled-opacity: $base-disabled-opacity;
-$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
+$datagrid-text-link-disabled-opacity: $base-disabled-opacity !default;
+$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity !default;
 
 @if $mode == "light" {
   $datagrid-cell-modified-border-color: color.adjust($base-success, $lightness: 51%, $space: hsl) !default;
@@ -175,12 +173,10 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
   $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default;
   $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $header-filter-color: $datagrid-columnchooser-item-color !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
   $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
   $datagrid-text-stub-background-image-path: data-uri("images/widgets/material/color-schemes/light/grid/text-stub.png") !default;
-  $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
   $datagrid-row-invalid-faded-border-color: color.adjust($base-danger, $lightness: 44%, $space: hsl) !default;
 }
 
@@ -190,15 +186,16 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
   $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default;
   $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
-  $header-filter-color: $datagrid-columnchooser-item-color !default;
   $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
   $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
   $datagrid-text-stub-background-image-path: data-uri("images/widgets/material/color-schemes/dark/grid/text-stub.png") !default;
-  $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
   $datagrid-row-invalid-faded-border-color: color.adjust($base-danger, $lightness: -31%, $space: hsl) !default;
 }
 
+$header-filter-color: $datagrid-columnchooser-item-color !default;
+$datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
+
 $header-filter-color-empty: $header-filter-color !default;
 
 :root {
diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss
index 1afc72cc3cfb..7ea5a0c74fb6 100644
--- a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss
@@ -28,12 +28,12 @@
 @use "../overlay";
 @use "../pagination";
 
-$material-grid-base-border-hidden: 1px solid transparent;
-$material-grid-base-row-border: 1px solid transparent;
-$material-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color;
-$material-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color;
+$material-grid-base-border-hidden: 1px solid transparent !default;
+$material-grid-base-row-border: 1px solid transparent !default;
+$material-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color !default;
+$material-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color !default;
 
-$material-grid-base-group-panel-message-line-height: $material-button-text-line-height;
+$material-grid-base-group-panel-message-line-height: $material-button-text-line-height !default;
 
 @mixin grid-base($widget-name) {
   @include material-grid-base-cell($widget-name);
diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss
index 0ea533d4e9aa..928d14b042ab 100644
--- a/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss
@@ -15,11 +15,10 @@ $material-grid-base-grouppanel-item-margin: null !default;
 $material-grid-base-command-edit-column-width: null !default;
 $material-grid-base-command-edit-column-with-icons-width: null !default;
 $material-grid-base-adaptive-column-height: null !default;
-$material-grid-base-treeview-search-margin: null !default;
+$material-grid-base-treeview-search-margin: 10px !default;
 $material-grid-base-nodata-font-size: null !default;
 $material-command-edit-icon-size: null !default;
 $material-filter-row-between-editor-padding: null !default;
-$material-command-column-additional-right-margin: null !default;
 $material-grid-base-treeview-select-all-item-offset: null !default;
 $material-grid-base-command-ai-chatsparkleoutline-icon-size: null !default;
 $material-grid-base-command-ai-text-content-padding: null !default;
@@ -51,12 +50,10 @@ $material-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
   $material-grid-base-command-edit-column-width: 115px !default;
   $material-grid-base-command-edit-column-with-icons-width: 93px !default;
   $material-grid-base-adaptive-column-height: 40px !default;
-  $material-grid-base-treeview-search-margin: 10px !default;
   $material-grid-base-nodata-font-size: 17px !default;
   $material-command-edit-icon-size: 18px !default;
 
   $material-filter-row-between-editor-padding: 12px !default;
-  $material-command-column-additional-right-margin: 0 !default;
 
   $material-grid-base-treeview-select-all-item-offset: 43px !default;
   $material-grid-base-command-ai-chatsparkleoutline-icon-size: 24px !default;
@@ -83,12 +80,10 @@ $material-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
   $material-grid-base-command-edit-column-width: 105px !default;
   $material-grid-base-command-edit-column-with-icons-width: 80px !default;
   $material-grid-base-adaptive-column-height: 26px !default;
-  $material-grid-base-treeview-search-margin: 10px !default;
   $material-grid-base-nodata-font-size: 14px !default;
   $material-command-edit-icon-size: 16px !default;
 
   $material-filter-row-between-editor-padding: 8px !default;
-  $material-command-column-additional-right-margin: 2px !default;
 
   $material-grid-base-treeview-select-all-item-offset: 35px !default;
   $material-grid-base-command-ai-chatsparkleoutline-icon-size: 18px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_variables.scss
index 9ad1220cd023..4014da737971 100644
--- a/packages/devextreme-scss/scss/widgets/material/gridBase/_variables.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_variables.scss
@@ -2,9 +2,9 @@
 @use "colors" as *;
 @use "sizes" as *;
 
-$grid-masterdetail-padding: 16px;
-$material-grid-base-border-color: $datagrid-border-color;
-$material-grid-base-header-cell-vertical-padding: math.round(math.div($material-grid-base-header-height - $material-grid-base-header-line-height, 2));
-$material-grid-base-command-select-column-width: $material-grid-base-checkbox-size + 2 * $material-grid-base-cell-horizontal-padding;
-$material-grid-base-cell-vertical-padding: math.round(math.div($material-grid-base-cell-height - $material-grid-base-cell-line-height, 2));
-$material-grid-base-cell-padding: $material-grid-base-cell-vertical-padding $material-grid-base-cell-horizontal-padding;
+$grid-masterdetail-padding: 16px !default;
+$material-grid-base-border-color: $datagrid-border-color !default;
+$material-grid-base-header-cell-vertical-padding: math.round(math.div($material-grid-base-header-height - $material-grid-base-header-line-height, 2)) !default;
+$material-grid-base-command-select-column-width: $material-grid-base-checkbox-size + 2 * $material-grid-base-cell-horizontal-padding !default;
+$material-grid-base-cell-vertical-padding: math.round(math.div($material-grid-base-cell-height - $material-grid-base-cell-line-height, 2)) !default;
+$material-grid-base-cell-padding: $material-grid-base-cell-vertical-padding $material-grid-base-cell-horizontal-padding !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/layout/aiChat/_sizes.scss
index a5cd8a835bab..c8f045a350f9 100644
--- a/packages/devextreme-scss/scss/widgets/material/gridBase/layout/aiChat/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gridBase/layout/aiChat/_sizes.scss
@@ -1,3 +1,3 @@
 @use "../../../sizes" as *;
 
-$ai-chat-message-icon-size: $material-base-icon-size - 4px;
+$ai-chat-message-icon-size: $material-base-icon-size - 4px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/htmlEditor/_sizes.scss
index 03c12ee590fa..adbf5ec48cd4 100644
--- a/packages/devextreme-scss/scss/widgets/material/htmlEditor/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/htmlEditor/_sizes.scss
@@ -4,7 +4,7 @@
 $material-toolbar-size-editor-width: null !default;
 $material-htmleditor-toolbar-padding: null !default;
 $material-html-editor-add-image-dialog-fileuploader-padding: null !default;
-$material-aidialog-selects-gap: null !default;
+$material-aidialog-selects-gap: 8px !default;
 $material-aidialog-content-gap: null !default;
 $material-aidialog-content-padding: null !default;
 $material-aidialog-toolbar-padding: null !default;
@@ -14,7 +14,6 @@ $material-aidialog-border-radius: $base-border-radius * 2 !default;
   $material-toolbar-size-editor-width: 120px !default;
   $material-htmleditor-toolbar-padding: 16px !default;
   $material-html-editor-add-image-dialog-fileuploader-padding: 50px 40px !default;
-  $material-aidialog-selects-gap: 8px !default;
   $material-aidialog-content-gap: 24px !default;
   $material-aidialog-content-padding: 24px !default;
   $material-aidialog-toolbar-padding: 0 24px 16px !default;
@@ -24,7 +23,6 @@ $material-aidialog-border-radius: $base-border-radius * 2 !default;
   $material-toolbar-size-editor-width: 90px !default;
   $material-htmleditor-toolbar-padding: 11px !default;
   $material-html-editor-add-image-dialog-fileuploader-padding: 40px 30px !default;
-  $material-aidialog-selects-gap: 8px !default;
   $material-aidialog-content-gap: 16px !default;
   $material-aidialog-content-padding: 16px !default;
   $material-aidialog-toolbar-padding: 0 16px 8px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss
index d8059cab008d..fd8e7ba5a2e7 100644
--- a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss
@@ -7,11 +7,11 @@ $informer-info-color: $base-text-color !default;
 $informer-info-background-color: null !default;
 
 @if $mode == "light" {
-  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1deg, $saturation: -24.92%, $lightness: 38.24%);
-  $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -240deg, $saturation: -100.00%, $lightness: 48.63%);
+  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1deg, $saturation: -24.92%, $lightness: 38.24%) !default;
+  $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -240deg, $saturation: -100.00%, $lightness: 48.63%) !default;
 }
 
 @if $mode == "dark" {
-  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1deg, $saturation: -41.80%, $lightness: -53.92%);
-  $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: 240deg, $saturation: 6.04%, $lightness: -70.78%);
+  $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1deg, $saturation: -41.80%, $lightness: -53.92%) !default;
+  $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: 240deg, $saturation: 6.04%, $lightness: -70.78%) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/list/_index.scss b/packages/devextreme-scss/scss/widgets/material/list/_index.scss
index 0394033ee1eb..1f6f61db64c5 100644
--- a/packages/devextreme-scss/scss/widgets/material/list/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/list/_index.scss
@@ -13,11 +13,11 @@
 @use "../radioGroup/colors" as *;
 @use "../badge";
 
-$material-list-item-border-width: 1px;
-$material-list-border-width: 1px;
-$material-list-border: $material-list-border-width solid;
-$material-list-item-border: $material-list-item-border-width solid;
-$material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding - 2px;
+$material-list-item-border-width: 1px !default;
+$material-list-border-width: 1px !default;
+$material-list-border: $material-list-border-width solid !default;
+$material-list-item-border: $material-list-item-border-width solid !default;
+$material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding - 2px !default;
 
 .dx-list-item-chevron {
   @include dx-icon(chevronnext);
diff --git a/packages/devextreme-scss/scss/widgets/material/menu/_index.scss b/packages/devextreme-scss/scss/widgets/material/menu/_index.scss
index 86d8eec7b186..74feb67ec42e 100644
--- a/packages/devextreme-scss/scss/widgets/material/menu/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/menu/_index.scss
@@ -9,7 +9,7 @@
 @use "../menuBase" as *;
 @use "../../base/menu";
 
-$material-menu-font-size: $material-base-font-size;
+$material-menu-font-size: $material-base-font-size !default;
 
 .dx-context-menu-container-border {
   background-color: transparent;
diff --git a/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss
index c58fb28cc838..e9cff178ebc9 100644
--- a/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss
@@ -8,7 +8,7 @@
 @use "../../base/mixins" as *;
 @use "../../base/menuBase";
 
-$material-menu-arrow-image-size: 7px;
+$material-menu-arrow-image-size: 7px !default;
 
 .dx-menu-item {
   color: $menu-color;
diff --git a/packages/devextreme-scss/scss/widgets/material/menuBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/menuBase/_sizes.scss
index cbcdc4c94b66..697bd594e2e1 100644
--- a/packages/devextreme-scss/scss/widgets/material/menuBase/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/menuBase/_sizes.scss
@@ -3,7 +3,7 @@
 $material-menu-item-line-height: null !default;
 $material-menu-item-with-icon-horizontal-padding: null !default;
 $material-menu-horizontal-padding: null !default;
-$material-menu-icon-to-text-offset: 8px;
+$material-menu-icon-to-text-offset: 8px !default;
 
 @if $size == "default" {
   $material-menu-item-line-height: 18px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_index.scss
index e8f0a912e74c..fedacbe636cf 100644
--- a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_index.scss
@@ -32,12 +32,12 @@
   $pivotgrid-button-top-padding: $pivotgrid-button-top-padding,
 );
 
-$material-pivotgrid-headers-font-size: 12px;
-$material-pivotgrid-area-font-size: 13px;
-$material-pivotgrid-chevron-icon-size: 20px;
+$material-pivotgrid-headers-font-size: 12px !default;
+$material-pivotgrid-area-font-size: 13px !default;
+$material-pivotgrid-chevron-icon-size: 20px !default;
 
-$material-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15);
-$material-pivotgridfieldchooser-field-min-height: 36px;
+$material-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15) !default;
+$material-pivotgridfieldchooser-field-min-height: 36px !default;
 
 .dx-pivotgrid-fields-container {
   &.dx-drag {
diff --git a/packages/devextreme-scss/scss/widgets/material/popup/_index.scss b/packages/devextreme-scss/scss/widgets/material/popup/_index.scss
index 0082098d5238..bfbb2902eed0 100644
--- a/packages/devextreme-scss/scss/widgets/material/popup/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/popup/_index.scss
@@ -8,7 +8,7 @@
 @use "../../base/popup";
 @use "../overlay";
 
-$material-popup-toolbar-label-font-size: $material-m-font-size;
+$material-popup-toolbar-label-font-size: $material-m-font-size !default;
 
 .dx-popup-wrapper {
   & > .dx-overlay-content {
diff --git a/packages/devextreme-scss/scss/widgets/material/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/material/progressBar/_index.scss
index 58b93ad7bfc8..66c0e933c0fa 100644
--- a/packages/devextreme-scss/scss/widgets/material/progressBar/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/progressBar/_index.scss
@@ -4,9 +4,9 @@
 @use "../../base/mixins" as *;
 @use "../../base/progressBar";
 
-$material-bar-height: 4px;
-$material-background-width: 90%;
-$material-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
+$material-bar-height: 4px !default;
+$material-background-width: 90% !default;
+$material-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95% !default;
 
 .dx-progressbar-container {
   height: $material-bar-height;
diff --git a/packages/devextreme-scss/scss/widgets/material/radioButton/_index.scss b/packages/devextreme-scss/scss/widgets/material/radioButton/_index.scss
index 960a46991c2a..f42753264aab 100644
--- a/packages/devextreme-scss/scss/widgets/material/radioButton/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/radioButton/_index.scss
@@ -6,7 +6,7 @@
 @use "../radioGroup/colors" as *;
 @use "../../base/radioButton";
 
-$material-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+$material-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !default;
 
 @include dx-radiobutton-icon-mixin(
   $material-radiobutton-size,
diff --git a/packages/devextreme-scss/scss/widgets/material/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/material/rangeSlider/_index.scss
index 583170ede72f..d73e48a91ceb 100644
--- a/packages/devextreme-scss/scss/widgets/material/rangeSlider/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/rangeSlider/_index.scss
@@ -2,7 +2,7 @@
 @use "sizes" as *;
 @use "../../base/rangeSlider";
 
-$material-slider-handle-margin: -14px;
+$material-slider-handle-margin: -14px !default;
 
 .dx-rangeslider-start-handle {
   margin-inline-start: $material-slider-handle-margin;
diff --git a/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss
index 2ca39d753187..48e26a618efb 100644
--- a/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss
@@ -4,9 +4,9 @@
 @use "../scheduler/sizes" as *;
 @use "../../base/recurrenceEditor" as *;
 
-$material-recurrence-number-box-margin: 11px;
-$material-recurrence-button-group-padding: 6px;
-$material-recurrence-radio-group-margin: 15px;
+$material-recurrence-number-box-margin: 11px !default;
+$material-recurrence-button-group-padding: 6px !default;
+$material-recurrence-radio-group-margin: 15px !default;
 
 .dx-recurrence-numberbox-interval {
   margin-right: $material-recurrence-number-box-margin;
diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss
index 1d3349f02d9d..1468a9d68cfb 100644
--- a/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss
@@ -35,7 +35,7 @@ $scheduler-appointment-base-color: $base-accent !default;
 * $type color
 */
 $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default;
-$scheduler-appointment-active-color: $scheduler-appointment-start-color;
+$scheduler-appointment-active-color: $scheduler-appointment-start-color !default;
 
 /**
 * $name 60. Focused cell color
@@ -74,8 +74,8 @@ $scheduler-fill-focused-appointment: false !default;
 $scheduler-is-shadow-color-for-focused-state: true !default;
 $scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default;
 $scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default;
-$material-scheduler-toolbar-color: $base-accent;
-$material-scheduler-toolbar-active-color: color.change($base-accent, $alpha: 0.08);
+$material-scheduler-toolbar-color: $base-accent !default;
+$material-scheduler-toolbar-active-color: color.change($base-accent, $alpha: 0.08) !default;
 
 $scheduler-tooltip-appointment-text-color: $base-text-color !default;
 $scheduler-appointment-overlay-bg: $base-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss
index e655da5b8b04..7b42c6fb901a 100644
--- a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss
@@ -53,17 +53,17 @@
 @use "../recurrenceEditor" as *;
 @use "../scrollable";
 
-$scheduler-appointment-recurrence-content-padding: 5px 25px 5px 7px;
-$scheduler-appointment-recurrence-content-padding-rtl: 5px 7px 5px 25px;
+$scheduler-appointment-recurrence-content-padding: 5px 25px 5px 7px !default;
+$scheduler-appointment-recurrence-content-padding-rtl: 5px 7px 5px 25px !default;
 
-$material-scheduler-all-day-table-cell-height: $material-scheduler-workspace-date-table-cell-height * 1.5;
-$material-scheduler-collapsed-all-day-table-cell-height: $material-scheduler-workspace-date-table-cell-height * 0.5;
+$material-scheduler-all-day-table-cell-height: $material-scheduler-workspace-date-table-cell-height * 1.5 !default;
+$material-scheduler-collapsed-all-day-table-cell-height: $material-scheduler-workspace-date-table-cell-height * 0.5 !default;
 
-$material-scheduler-month-date-text-size: 14px;
+$material-scheduler-month-date-text-size: 14px !default;
 
-$scheduler-first-of-month-border: 1px solid;
+$scheduler-first-of-month-border: 1px solid !default;
 
-$material-scheduler-agenda-time-panel-cell-padding: 8px;
+$material-scheduler-agenda-time-panel-cell-padding: 8px !default;
 
 @include baseScheduler.scheduler-mixin();
 
diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss
index 26815ff6d53b..d8178c42da4d 100644
--- a/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss
@@ -4,45 +4,43 @@
 
 $material-scheduler-workspace-date-table-cell-height: null !default;
 $material-scheduler-toolbar-item-offset: null !default;
-$material-scheduler-navigator-height: null !default;
 $material-scheduler-header-panel-day-font-size: null !default;
 $material-scheduler-appointment-tooltip-title-font-size: null !default;
 $material-scheduler-appointment-tooltip-date-font-size: null !default;
 $material-scheduler-workspace-month-cell-left-offset: null !default;
 $material-scheduler-header-panel-table-cell-height: null !default;
 $material-scheduler-appointment-content-padding: null !default;
-$material-scheduler-dropdown-appointment-margin-top: null !default;
 $material-scheduler-dropdown-button-height: null !default;
 $material-scheduler-dropdown-button-padding: null !default;
 $material-scheduler-dropdown-button-margin: null !default;
 $material-scheduler-dropdown-button-vertical-margin: null !default;
-$material-scheduler-dropdown-button-adaptive-margin: null !default;
-$material-scheduler-dropdown-button-adaptive-vertical-margin: null !default;
+$material-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
+$material-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default;
 $material-scheduler-appointment-tooltip-content-margin-left: null !default;
 $material-tooltip-marker-dimension: null !default;
 $material-scheduler-appointment-tooltip-title-margin-top: null !default;
 $material-scheduler-appointment-tooltip-remove-padding-top: null !default;
 
-$material-scheduler-appointment-short-content-padding: null !default;
-$material-scheduler-appointment-15min-height: null !default;
-$material-scheduler-appointment-20min-height: null !default;
-$material-scheduler-appointment-25min-height: null !default;
-$material-scheduler-appointment-10min-recurrence-padding-right: null !default;
-$material-scheduler-appointment-10min-title-font-size: null !default;
-$material-scheduler-appointment-10min-title-line-height: null !default;
-$material-scheduler-appointment-10min-icon-font-size: null !default;
-$material-scheduler-appointment-10min-icon-right: null !default;
+$material-scheduler-appointment-short-content-padding: 0 7px !default;
+$material-scheduler-appointment-15min-height: 17px !default;
+$material-scheduler-appointment-20min-height: 24px !default;
+$material-scheduler-appointment-25min-height: 32px !default;
+$material-scheduler-appointment-10min-recurrence-padding-right: 14px !default;
+$material-scheduler-appointment-10min-title-font-size: 8px !default;
+$material-scheduler-appointment-10min-title-line-height: 12px !default;
+$material-scheduler-appointment-10min-icon-font-size: 12px !default;
+$material-scheduler-appointment-10min-icon-right: 2px !default;
 $material-scheduler-appointment-15min-recurrence-padding-right: null !default;
-$material-scheduler-appointment-15min-title-font-size: null !default;
+$material-scheduler-appointment-15min-title-font-size: 12px !default;
 $material-scheduler-appointment-15min-title-line-height: null !default;
 $material-scheduler-appointment-15min-icon-font-size: null !default;
-$material-scheduler-appointment-15min-icon-right: null !default;
-$material-scheduler-appointment-20min-recurrence-padding-right: null !default;
-$material-scheduler-appointment-20min-icon-right: null !default;
+$material-scheduler-appointment-15min-icon-right: 2px !default;
+$material-scheduler-appointment-20min-recurrence-padding-right: 25px !default;
+$material-scheduler-appointment-20min-icon-right: 4px !default;
 
 $scheduler-left-column-width: 65px !default;
 $material-scheduler-timeline-date-table-cell-height: 50px !default;
-$material-scheduler-navigator-icon-font-size: $material-base-icon-size;
+$material-scheduler-navigator-icon-font-size: $material-base-icon-size !default;
 $material-scheduler-appointment-month-text-size: 12px !default;
 $material-scheduler-workspace-info-text-size: 16px !default;
 $material-scheduler-all-day-title-font-size: 12px !default;
@@ -80,7 +78,6 @@ $scheduler-timeline-cell-height: 50px !default;
 @if $size == "default" {
   $material-scheduler-workspace-date-table-cell-height: 38px !default;
 
-  $material-scheduler-navigator-height: 36px !default;
   $material-scheduler-header-panel-day-font-size: 30px !default;
   $material-scheduler-header-height: 54px !default;
   $material-scheduler-header-offset: 2px 16px !default;
@@ -92,13 +89,10 @@ $scheduler-timeline-cell-height: 50px !default;
 
   $material-scheduler-header-panel-table-cell-height: 56px !default;
   $material-scheduler-appointment-content-padding: 5px 7px !default;
-  $material-scheduler-dropdown-appointment-margin-top: 7px !default;
   $material-scheduler-dropdown-button-height: 22px !default;
   $material-scheduler-dropdown-button-padding: 4px !default;
   $material-scheduler-dropdown-button-margin: 5px 1px 3px 3px !default;
   $material-scheduler-dropdown-button-vertical-margin: 5px 2px 3px 1px !default;
-  $material-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
-  $material-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default;
 
   $material-scheduler-appointment-tooltip-content-margin-left: 10px !default;
   $material-tooltip-marker-dimension: 24px !default;
@@ -120,33 +114,16 @@ $scheduler-timeline-cell-height: 50px !default;
   $material-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default;
   $material-scheduler-appointment-popup-repeat-end-item-height: 48px !default;
 
-  $agenda-appointment-title-font-size: 14px;
-
-  $material-scheduler-appointment-short-content-padding: 0 7px !default;
-  $material-scheduler-appointment-15min-height: 17px !default;
-  $material-scheduler-appointment-20min-height: 24px !default;
-  $material-scheduler-appointment-25min-height: 32px !default;
-
-  $material-scheduler-appointment-10min-recurrence-padding-right: 14px !default;
-  $material-scheduler-appointment-10min-title-font-size: 8px !default;
-  $material-scheduler-appointment-10min-title-line-height: 12px !default;
-  $material-scheduler-appointment-10min-icon-font-size: 12px !default;
-  $material-scheduler-appointment-10min-icon-right: 2px !default;
+  $agenda-appointment-title-font-size: 14px !default;
 
   $material-scheduler-appointment-15min-recurrence-padding-right: 18px !default;
-  $material-scheduler-appointment-15min-title-font-size: 12px !default;
   $material-scheduler-appointment-15min-title-line-height: 18px !default;
   $material-scheduler-appointment-15min-icon-font-size: 16px !default;
-  $material-scheduler-appointment-15min-icon-right: 2px !default;
-
-  $material-scheduler-appointment-20min-recurrence-padding-right: 25px !default;
-  $material-scheduler-appointment-20min-icon-right: 4px !default;
 }
 
 @else if $size == "compact" {
   $material-scheduler-workspace-date-table-cell-height: 28px !default;
 
-  $material-scheduler-navigator-height: 28px !default;
   $material-scheduler-header-panel-day-font-size: 20px !default;
   $material-scheduler-header-height: 38px !default;
   $material-scheduler-header-offset: 0 8px !default;
@@ -158,13 +135,10 @@ $scheduler-timeline-cell-height: 50px !default;
 
   $material-scheduler-header-panel-table-cell-height: 40px !default;
   $material-scheduler-appointment-content-padding: 2px 4px !default;
-  $material-scheduler-dropdown-appointment-margin-top: 3px !default;
   $material-scheduler-dropdown-button-height: 18px !default;
   $material-scheduler-dropdown-button-padding: 2px !default;
   $material-scheduler-dropdown-button-margin: 2px 1px 2px 2px !default;
   $material-scheduler-dropdown-button-vertical-margin: 2px 1px 2px 1px !default;
-  $material-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
-  $material-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default;
 
   $material-scheduler-appointment-tooltip-content-margin-left: 8px !default;
   $material-tooltip-marker-dimension: 18px !default;
@@ -186,25 +160,9 @@ $scheduler-timeline-cell-height: 50px !default;
   $material-scheduler-appointment-popup-days-of-week-buttons-gap: 4px !default;
   $material-scheduler-appointment-popup-repeat-end-item-height: 32px !default;
 
-  $agenda-appointment-title-font-size: 13px;
-
-  $material-scheduler-appointment-short-content-padding: 0 7px !default;
-  $material-scheduler-appointment-15min-height: 17px !default;
-  $material-scheduler-appointment-20min-height: 24px !default;
-  $material-scheduler-appointment-25min-height: 32px !default;
-
-  $material-scheduler-appointment-10min-recurrence-padding-right: 14px !default;
-  $material-scheduler-appointment-10min-title-font-size: 8px !default;
-  $material-scheduler-appointment-10min-title-line-height: 12px !default;
-  $material-scheduler-appointment-10min-icon-font-size: 12px !default;
-  $material-scheduler-appointment-10min-icon-right: 2px !default;
+  $agenda-appointment-title-font-size: 13px !default;
 
   $material-scheduler-appointment-15min-recurrence-padding-right: 14px !default;
-  $material-scheduler-appointment-15min-title-font-size: 12px !default;
   $material-scheduler-appointment-15min-title-line-height: 12px !default;
   $material-scheduler-appointment-15min-icon-font-size: 12px !default;
-  $material-scheduler-appointment-15min-icon-right: 2px !default;
-
-  $material-scheduler-appointment-20min-recurrence-padding-right: 25px !default;
-  $material-scheduler-appointment-20min-icon-right: 4px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/material/scrollView/_index.scss
index b91875142119..ea4f3b80cd11 100644
--- a/packages/devextreme-scss/scss/widgets/material/scrollView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/scrollView/_index.scss
@@ -6,7 +6,7 @@
 @use "../scrollable";
 @use "../../base/scrollView";
 
-$scrollview-loading-indicator-size: 42px;
+$scrollview-loading-indicator-size: 42px !default;
 
 .dx-scrollview-scrollbottom-text,
 .dx-scrollview-pull-down-text {
diff --git a/packages/devextreme-scss/scss/widgets/material/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/scrollable/_sizes.scss
index 28567ffc4f8a..08d5cbb4b37b 100644
--- a/packages/devextreme-scss/scss/widgets/material/scrollable/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/scrollable/_sizes.scss
@@ -1,2 +1,2 @@
-$material-scrollbar-size-thin: 6px;
-$material-scrollbar-size: 13px;
+$material-scrollbar-size-thin: 6px !default;
+$material-scrollbar-size: 13px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/slider/_index.scss b/packages/devextreme-scss/scss/widgets/material/slider/_index.scss
index 36bf203145da..9c819f8ec0b2 100644
--- a/packages/devextreme-scss/scss/widgets/material/slider/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/slider/_index.scss
@@ -6,11 +6,11 @@
 @use "../../material/tooltip/colors" as *;
 @use "../../base/slider";
 
-$material-slider-radius: 50%;
-$material-slider-handle-active-border-width: 2px;
-$material-slider-handle-inner-size: 12px;
-$material-slider-handle-inner-border-width: 1px;
-$material-slider-handle-inner-disabled-size: 2px;
+$material-slider-radius: 50% !default;
+$material-slider-handle-active-border-width: 2px !default;
+$material-slider-handle-inner-size: 12px !default;
+$material-slider-handle-inner-border-width: 1px !default;
+$material-slider-handle-inner-disabled-size: 2px !default;
 
 .dx-slider-wrapper {
   height: $material-slider-wrapper-height;
diff --git a/packages/devextreme-scss/scss/widgets/material/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/slider/_sizes.scss
index 6a7fa38a0fdd..9b1763a9f246 100644
--- a/packages/devextreme-scss/scss/widgets/material/slider/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/slider/_sizes.scss
@@ -3,7 +3,6 @@
 $material-slider-handle-size: null !default;
 $material-slider-wrapper-height: null !default;
 $material-slider-tooltip-width: null !default;
-$material-slider-top-tooltip-margin: null !default;
 $material-slider-tooltip-popup-content-padding: null !default;
 
 $material-slider-track-height: 2px !default;
@@ -13,7 +12,6 @@ $material-slider-height: 28px !default;
   $material-slider-handle-size: 32px !default;
   $material-slider-wrapper-height: 32px !default;
   $material-slider-tooltip-width: 34px !default;
-  $material-slider-top-tooltip-margin: -5px !default;
   $material-slider-tooltip-popup-content-padding: 5px 7px !default;
 }
 
@@ -21,6 +19,5 @@ $material-slider-height: 28px !default;
   $material-slider-handle-size: 26px !default;
   $material-slider-wrapper-height: 26px !default;
   $material-slider-tooltip-width: 28px !default;
-  $material-slider-top-tooltip-margin: -2px !default;
   $material-slider-tooltip-popup-content-padding: 3px 5px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_index.scss
index ac08160d72be..615c8df0cf78 100644
--- a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_index.scss
@@ -5,9 +5,9 @@
 @use "../button/colors" as *;
 @use "../overlay";
 
-$material-fa-button-size: 40px;
-$material-fa-button-label-offset: 16px;
-$material-fa-button-label-padding: 4px 8px;
+$material-fa-button-size: 40px !default;
+$material-fa-button-label-offset: 16px !default;
+$material-fa-button-label-padding: 4px 8px !default;
 
 @include dx-fa-button-mixin(
   $material-main-fa-button-size,
diff --git a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss
index bc68610c12b7..ffdd306ceace 100644
--- a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss
@@ -3,16 +3,12 @@
 $material-main-fa-button-label-padding: null !default;
 $material-main-fa-button-size: null !default;
 
-$material-fa-button-label-font-size: null !default;
-
 @if $size == "default" {
   $material-main-fa-button-size: 56px !default;
-  $material-main-fa-button-label-padding: 0 24px 0 8px;
-  $material-fa-button-label-font-size: 14px;
+  $material-main-fa-button-label-padding: 0 24px 0 8px !default;
 }
 
 @else if $size == "compact" {
   $material-main-fa-button-size: 42px !default;
-  $material-main-fa-button-label-padding: 0 20px 0 8px;
-  $material-fa-button-label-font-size: 12px;
+  $material-main-fa-button-label-padding: 0 20px 0 8px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/splitter/_sizes.scss
index 3af001d1096d..a97016b18725 100644
--- a/packages/devextreme-scss/scss/widgets/material/splitter/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/splitter/_sizes.scss
@@ -1 +1 @@
-$splitter-resize-handle-icon-size: 24px;
+$splitter-resize-handle-icon-size: 24px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/switch/_index.scss b/packages/devextreme-scss/scss/widgets/material/switch/_index.scss
index 9b7f631c40ef..59f2347d69ed 100644
--- a/packages/devextreme-scss/scss/widgets/material/switch/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/switch/_index.scss
@@ -6,10 +6,10 @@
 @use "../../base/switch";
 @use "../../base/switch/mixins" as *;
 
-$material-switch-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-$material-switch-handle-on-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1);
-$material-switch-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($base-text-color, $alpha: 0.1);
-$material-invalid-switch-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($switch-invalid-handle-bg, $alpha: 0.1);
+$material-switch-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !default;
+$material-switch-handle-on-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1) !default;
+$material-switch-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($base-text-color, $alpha: 0.1) !default;
+$material-invalid-switch-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($switch-invalid-handle-bg, $alpha: 0.1) !default;
 
 @include dx-switch(
   $material-switch-width,
diff --git a/packages/devextreme-scss/scss/widgets/material/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/switch/_sizes.scss
index edc230fb821e..5688f2501bf0 100644
--- a/packages/devextreme-scss/scss/widgets/material/switch/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/switch/_sizes.scss
@@ -3,28 +3,25 @@
 $material-switch-width: null !default;
 $switch-padding: 10px !default;
 $switch-container-vertical-margin: null !default;
-$switch-container-horizontal-padding: null !default;
 $material-switch-height: null !default;
-$switch-handle-height: null !default;
 $switch-container-height: 14px !default;
 $switch-handle-margin: 0 !default;
 
 $material-switch-shadow-blur-radius: 10px !default;
 $material-switch-handle-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2) !default;
 $material-switch-container-adjustment: 6px !default;
+$switch-container-horizontal-padding: $switch-handle-margin !default;
 
 @if $size == "default" {
   $material-switch-width: 36px !default;
   $switch-container-vertical-margin: 3px !default;
-  $switch-container-horizontal-padding: $switch-handle-margin !default;
   $material-switch-height: 20px !default;
-  $switch-handle-height: $material-switch-height !default;
 }
 
 @else if $size == "compact" {
   $material-switch-width: 32px !default;
   $switch-container-vertical-margin: 2px !default;
-  $switch-container-horizontal-padding: $switch-handle-margin !default;
   $material-switch-height: 18px !default;
-  $switch-handle-height: $material-switch-height !default;
 }
+
+$switch-handle-height: $material-switch-height !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/tabs/variables/_sizes.scss
index 97c92422d3a9..c50cef3909cf 100644
--- a/packages/devextreme-scss/scss/widgets/material/tabs/variables/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/tabs/variables/_sizes.scss
@@ -1,21 +1,20 @@
 @use "../../sizes" as *;
 
 $material-tabs-item-gap: 4px !default;
-$material-tabs-item-padding: null !default;
 $material-tabs-item-padding-horizontal: null !default;
 $material-tabs-item-padding-vertical: null !default;
-$material-tab-height: null !default;
+$material-tab-height: auto !default;
 $material-tab-min-width: null !default;
 
 $material-tab-text-line-height: 1.714286 !default;
 $material-base-icon-margin: null !default;
 
-$material-tab-nav-button-icon-width: null !default;
-$material-tab-nav-button-icon-height: null !default;
-$material-tab-nav-button-icon-font-size: null !default;
-$material-tab-nav-button-content-padding: null !default;
+$material-tab-nav-button-icon-width: 24px !default;
+$material-tab-nav-button-icon-height: 24px !default;
+$material-tab-nav-button-icon-font-size: 24px !default;
+$material-tab-nav-button-content-padding: 0 4px !default;
 
-$material-tab-vertical-nav-button-content-padding: null !default;
+$material-tab-vertical-nav-button-content-padding: 4px 0 !default;
 
 $material-indicator-thickness-primary: 2px !default;
 $material-indicator-thickness-secondary: 3px !default;
@@ -30,27 +29,15 @@ $material-tabs-icon-size: $material-base-icon-size !default;
 @if $size == "default" {
   $material-tabs-item-padding-horizontal: 12px !default;
   $material-tabs-item-padding-vertical: 16px !default;
-  $material-tabs-item-padding: $material-tabs-item-padding-horizontal $material-tabs-item-padding-vertical !default;
-  $material-tab-height: auto !default;
   $material-tab-min-width: 90px !default;
   $material-base-icon-margin: 8px !default;
-  $material-tab-nav-button-icon-width: 24px !default;
-  $material-tab-nav-button-icon-height: 24px !default;
-  $material-tab-nav-button-icon-font-size: 24px !default;
-  $material-tab-nav-button-content-padding: 0 4px !default;
-  $material-tab-vertical-nav-button-content-padding: 4px 0 !default;
 }
 
 @else if $size == "compact" {
   $material-tabs-item-padding-horizontal: 6px !default;
   $material-tabs-item-padding-vertical: 12px !default;
-  $material-tabs-item-padding: $material-tabs-item-padding-horizontal $material-tabs-item-padding-vertical !default;
-  $material-tab-height: auto !default;
   $material-tab-min-width: 82px !default;
   $material-base-icon-margin: 7px !default;
-  $material-tab-nav-button-icon-width: 24px !default;
-  $material-tab-nav-button-icon-height: 24px !default;
-  $material-tab-nav-button-icon-font-size: 24px !default;
-  $material-tab-nav-button-content-padding: 0 4px !default;
-  $material-tab-vertical-nav-button-content-padding: 4px 0 !default;
 }
+
+$material-tabs-item-padding: $material-tabs-item-padding-horizontal $material-tabs-item-padding-vertical !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss
index af20f502f158..0a55098aa46e 100644
--- a/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss
@@ -4,7 +4,6 @@ $material-tagbox-tag-content-padding-left: null !default;
 $material-tagbox-tag-content-padding-right: null !default;
 $material-tagbox-tag-content-vertical-padding: null !default;
 $material-tagbox-tag-content-font-size: null !default;
-$material-tagbox-tag-container-padding: null !default;
 $material-tagbox-tag-container-padding-left: null !default;
 $material-tagbox-tag-container-vertical-padding: null !default;
 $material-tagbox-tag-height: null !default;
@@ -15,21 +14,19 @@ $material-tagbox-select-all-padding-bottom: 12px !default;
 $material-tagbox-select-all-margin-bottom: 3px !default;
 $tagbox-tag-border-radius: 2em !default;
 $material-tagbox-filled-with-label-top-padding: null !default;
-$material-tagbox-filled-with-label-bottom-padding: null !default;
+$material-tagbox-filled-with-label-bottom-padding: 4px !default;
 
 @if $size == "default" {
   $material-tagbox-tag-content-padding-left: 8px !default;
   $material-tagbox-tag-content-padding-right: 30px !default;
   $material-tagbox-tag-content-vertical-padding: 4px !default;
   $material-tagbox-tag-content-font-size: 14px !default;
-  $material-tagbox-tag-container-padding: 0 12px 11px 16px !default;
   $material-tagbox-tag-container-padding-left: 16px !default;
   $material-tagbox-tag-container-vertical-padding: 11px !default;
   $material-tagbox-tag-height: 26px !default;
   $material-tagbox-remove-button-width: 26px !default;
   $material-tagbox-remove-button-icon-size: 16px !default;
   $material-tagbox-filled-with-label-top-padding: 18px !default;
-  $material-tagbox-filled-with-label-bottom-padding: 4px !default;
 }
 
 @else if $size == "compact" {
@@ -37,12 +34,10 @@ $material-tagbox-filled-with-label-bottom-padding: null !default;
   $material-tagbox-tag-content-padding-right: 20px !default;
   $material-tagbox-tag-content-vertical-padding: 2px !default;
   $material-tagbox-tag-content-font-size: 12px !default;
-  $material-tagbox-tag-container-padding: 0 8px 3px 11px !default;
   $material-tagbox-tag-container-padding-left: 12px !default;
   $material-tagbox-tag-container-vertical-padding: 7px !default;
   $material-tagbox-tag-height: 18px !default;
   $material-tagbox-remove-button-width: 18px !default;
   $material-tagbox-remove-button-icon-size: 12px !default;
   $material-tagbox-filled-with-label-top-padding: 10px !default;
-  $material-tagbox-filled-with-label-bottom-padding: 4px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/textBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/textBox/_index.scss
index dacb0d90e04e..da0905c94c67 100644
--- a/packages/devextreme-scss/scss/widgets/material/textBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/textBox/_index.scss
@@ -8,15 +8,15 @@
 @use "../../base/textBox";
 @use "../textEditor" as *;
 
-$textbox-search-icon-right-padding: math.div($material-filled-texteditor-input-horizontal-padding, 2);
+$textbox-search-icon-right-padding: math.div($material-filled-texteditor-input-horizontal-padding, 2) !default;
 $textbox-standard-search-icon-size:
   $material-texteditor-icon-container-size +
   $material-base-standard-texteditor-input-horizontal-padding +
-  $textbox-search-icon-right-padding;
+  $textbox-search-icon-right-padding !default;
 $textbox-filled-search-icon-size:
   $material-texteditor-icon-container-size +
   $material-filled-texteditor-input-horizontal-padding +
-  $textbox-search-icon-right-padding;
+  $textbox-search-icon-right-padding !default;
 
 @mixin dx-texteditor-search-icon($texteditor-icon-size, $texteditor-padding) {
   position: absolute;
diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss
index e05f1ab8f71e..e7495f66bedd 100644
--- a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss
@@ -13,7 +13,7 @@ $texteditor-color: $base-text-color !default;
 * $type color
 */
 $texteditor-placeholder-color: $base-label-color !default;
-$texteditor-label-color: $texteditor-placeholder-color;
+$texteditor-label-color: $texteditor-placeholder-color !default;
 
 /**
 * $name 30. Background color
@@ -59,7 +59,7 @@ $texteditor-input-border-radius: $base-border-radius !default;
 $texteditor-label-transition:
   font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
   transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
-  top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;
+  top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms !default;
 
 @if $mode == "light" {
   $texteditor-disabled-color: rgba(0, 0, 0, 0.6) !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss
index ae152575c305..c9e40f7baa5b 100644
--- a/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss
@@ -13,10 +13,10 @@
 @use "../../base/textEditor/mixins" as *;
 @use "../colorBox/sizes" as *;
 
-$material-base-standard-texteditor-input-horizontal-padding: 0;
-$material-texteditor-icon-container-size: $material-base-icon-size - 2px;
-$material-texteditor-invalid-badge-size: $material-invalid-badge-size + 2 * $material-invalid-badge-horizontal-padding;
-$material-editor-custom-button-margin: 5px;
+$material-base-standard-texteditor-input-horizontal-padding: 0 !default;
+$material-texteditor-icon-container-size: $material-base-icon-size - 2px !default;
+$material-texteditor-invalid-badge-size: $material-invalid-badge-size + 2 * $material-invalid-badge-horizontal-padding !default;
+$material-editor-custom-button-margin: 5px !default;
 
 @mixin dx-texteditor-icon() {
   position: absolute;
diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_sizes.scss
index 8082b872260d..1e206df56fc9 100644
--- a/packages/devextreme-scss/scss/widgets/material/textEditor/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_sizes.scss
@@ -28,9 +28,9 @@ $material-filled-texteditor-input-with-label-bottom-padding: null !default;
   $material-texteditor-label-outside-top-offset: 24px !default;
   $material-filled-texteditor-input-horizontal-padding: 16px !default;
   $material-filled-texteditor-input-top-padding: 15px !default;
-  $material-filled-texteditor-input-with-label-top-padding: 21px;
+  $material-filled-texteditor-input-with-label-top-padding: 21px !default;
   $material-filled-texteditor-input-bottom-padding: 14px !default;
-  $material-filled-texteditor-input-with-label-bottom-padding: 8px;
+  $material-filled-texteditor-input-with-label-bottom-padding: 8px !default;
   $material-standard-texteditor-input-top-padding: 15px !default;
   $material-standard-texteditor-input-bottom-padding: 14px !default;
   $material-standard-texteditor-with-label-input-top-padding: 21px !default;
@@ -47,10 +47,10 @@ $material-filled-texteditor-input-with-label-bottom-padding: null !default;
   $material-texteditor-label-outside-height: 16px !default;
   $material-texteditor-label-outside-top-offset: 18px !default;
   $material-filled-texteditor-input-horizontal-padding: 12px !default;
-  $material-filled-texteditor-input-top-padding: 9px;
-  $material-filled-texteditor-input-with-label-top-padding: 15px;
-  $material-filled-texteditor-input-bottom-padding: 9px;
-  $material-filled-texteditor-input-with-label-bottom-padding: 3px;
+  $material-filled-texteditor-input-top-padding: 9px !default;
+  $material-filled-texteditor-input-with-label-top-padding: 15px !default;
+  $material-filled-texteditor-input-bottom-padding: 9px !default;
+  $material-filled-texteditor-input-with-label-bottom-padding: 3px !default;
   $material-standard-texteditor-input-top-padding: 9px !default;
   $material-standard-texteditor-input-bottom-padding: 9px !default;
   $material-standard-texteditor-with-label-input-top-padding: 14px !default;
@@ -68,5 +68,5 @@ $material-standard-texteditor-input-padding:
   $material-base-standard-texteditor-input-horizontal-padding
   $material-standard-texteditor-input-bottom-padding !default;
 
-$material-filled-texteditor-input-button-horizontal-padding: $material-filled-texteditor-input-horizontal-padding - 4px;
-$material-filled-texteditor-spin-button-horizontal-padding: $material-filled-texteditor-input-horizontal-padding - 8px;
+$material-filled-texteditor-input-button-horizontal-padding: $material-filled-texteditor-input-horizontal-padding - 4px !default;
+$material-filled-texteditor-spin-button-horizontal-padding: $material-filled-texteditor-input-horizontal-padding - 8px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss
index a9a01c5e3df1..b1bdbb525bb6 100644
--- a/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss
@@ -4,11 +4,10 @@ $material-treeview-toggle-item-width: null !default;
 $material-treeview-checkbox-offset: null !default;
 $material-treeview-item-padding: null !default;
 $material-select-all-item-padding: null !default;
-$material-treeview-item-height: null !default;
 $material-checkbox-container-size: null !default;
 
 $material-treeview-load-indicator-size: null !default;
-$material-treeview-item-element-gap: null !default;
+$material-treeview-item-element-gap: 12px !default;
 $material-treeview-searchbox-margin-bottom: null !default;
 $material-treeview-search-editor-height: null !default;
 
@@ -20,30 +19,26 @@ $material-treeview-container-padding:
   $material-treeview-border-padding
   $material-treeview-border-padding
   $material-treeview-border-padding
-  $material-treeview-container-with-border-offset;
+  $material-treeview-container-with-border-offset !default;
 
 @if $size == "default" {
-  $material-treeview-item-element-gap: 12px !default;
   $material-treeview-toggle-item-width: 24px !default;
   $material-treeview-checkbox-offset: 55px !default;
   $material-select-all-item-padding: 15px $material-treeview-checkbox-offset !default;
   $material-checkbox-container-size: 24px !default;
   $material-treeview-item-padding: 12px $material-treeview-item-side-padding !default;
-  $material-treeview-item-height: 48px !default;
   $material-treeview-load-indicator-size: 24px !default;
   $material-treeview-searchbox-margin-bottom: 8px !default;
-  $material-treeview-search-editor-height: 48px;
+  $material-treeview-search-editor-height: 48px !default;
 }
 
 @else if $size == "compact" {
-  $material-treeview-item-element-gap: 12px !default;
   $material-treeview-toggle-item-width: 18px !default;
   $material-treeview-checkbox-offset: 47px !default;
   $material-select-all-item-padding: 10px $material-treeview-checkbox-offset !default;
   $material-treeview-item-padding: 9px $material-treeview-item-side-padding !default;
-  $material-treeview-item-height: 36px !default;
   $material-treeview-load-indicator-size: 18px !default;
-  $material-checkbox-container-size: 18px;
+  $material-checkbox-container-size: 18px !default;
   $material-treeview-searchbox-margin-bottom: 4px !default;
-  $material-treeview-search-editor-height: 32px;
+  $material-treeview-search-editor-height: 32px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss
index c9ab6f8f1224..8cf4574b658d 100644
--- a/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss
@@ -4,7 +4,7 @@ $material-xl-font-size: null !default;
 $material-l-font-size: null !default;
 $material-m-font-size: null !default;
 $material-s-font-size: null !default;
-$material-xs-font-size: null !default;
+$material-xs-font-size: 12px !default;
 $material-h1-font-size: null !default;
 $material-h2-font-size: null !default;
 $material-h3-font-size: null !default;
@@ -17,7 +17,6 @@ $material-h6-font-size: null !default;
   $material-l-font-size: 28px !default;
   $material-m-font-size: 20px !default;
   $material-s-font-size: 18px !default;
-  $material-xs-font-size: 12px !default;
 
   $material-h1-font-size: 96px !default;
   $material-h2-font-size: 60px !default;
@@ -32,7 +31,6 @@ $material-h6-font-size: null !default;
   $material-l-font-size: 20px !default;
   $material-m-font-size: 16px !default;
   $material-s-font-size: 14px !default;
-  $material-xs-font-size: 12px !default;
 
   $material-h1-font-size: 64px !default;
   $material-h2-font-size: 42px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/validation/_sizes.scss
index ba97716f3337..5fec857c6d92 100644
--- a/packages/devextreme-scss/scss/widgets/material/validation/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/validation/_sizes.scss
@@ -1,6 +1,5 @@
 @use "../sizes" as *;
 
-$material-validation-message-padding: null !default;
 $material-validationsummary-item-margin: null !default;
 $material-validation-message-line-height: null !default;
 
@@ -10,7 +9,6 @@ $material-validation-overlay-border-radius: 4px !default;
 $material-validation-message-font-size: 12px !default;
 
 @if $size == "default" {
-  $material-validation-message-padding: 6px !default;
   $material-validationsummary-item-margin: 10px !default;
 
   $material-validation-message-horizontal-padding: 8px !default;
@@ -18,7 +16,6 @@ $material-validation-message-font-size: 12px !default;
 }
 
 @else if $size == "compact" {
-  $material-validation-message-padding: 4px !default;
   $material-validationsummary-item-margin: 6px !default;
 
   $material-validation-message-horizontal-padding: 6px !default;
diff --git a/packages/devextreme-scss/tests/module-variable-default.test.ts b/packages/devextreme-scss/tests/module-variable-default.test.ts
new file mode 100644
index 000000000000..92edb88505f2
--- /dev/null
+++ b/packages/devextreme-scss/tests/module-variable-default.test.ts
@@ -0,0 +1,90 @@
+import { createRunner, scss } from './stylelint-rule';
+
+const ruleName = 'dx/module-variable-default';
+const { lint, fix } = createRunner('module-variable-default.mjs', ruleName);
+
+test('a module-level variable without the flag is reported, at the top level and inside @if branches', () => {
+  const { warnings } = lint('missing.scss', scss(
+    '$top: 7px;',
+    '$flagged: 8px !default;',
+    '$global: 9px !global;',
+    '',
+    '@if $size == "default" {',
+    '  $branch: 1px;',
+    '}',
+    '',
+    '@else {',
+    '  $branch: 2px;',
+    '}',
+  ));
+
+  expect(warnings).toEqual([
+    { line: 1, rule: ruleName, text: `Expected the !default flag on "$top": without it a value passed through @use … with() is ignored (${ruleName})` },
+    { line: 6, rule: ruleName, text: `Expected the !default flag on "$branch": without it a value passed through @use … with() is ignored (${ruleName})` },
+    { line: 10, rule: ruleName, text: `Expected the !default flag on "$branch": without it a value passed through @use … with() is ignored (${ruleName})` },
+  ]);
+});
+
+test('variables local to a mixin, function or rule are not module variables', () => {
+  const { warnings } = lint('local.scss', scss(
+    '@mixin size($base) {',
+    '  $double: $base * 2;',
+    '  width: $double;',
+    '}',
+    '',
+    '@function half($value) {',
+    '  $result: $value / 2;',
+    '  @return $result;',
+    '}',
+    '',
+    '.dx-widget {',
+    '  $gap: 4px;',
+    '  margin: $gap;',
+    '',
+    '  @if $size == "compact" {',
+    '    $gap: 2px;',
+    '  }',
+    '}',
+  ));
+
+  expect(warnings).toEqual([]);
+});
+
+test('reassigning a variable that already holds a value is not a default', () => {
+  const { warnings } = lint('reassign.scss', scss(
+    '$offset: 4px !default;',
+    '$offset: $offset + 1px;',
+    '',
+    '$late: null !default;',
+    '$late: 2px;',
+  ));
+
+  expect(warnings.map((warning) => warning.line)).toEqual([5]);
+});
+
+test('--fix appends the flag, also to a multi-line value', () => {
+  const { warnings, output } = fix('fix.scss', scss(
+    '$top: 7px;',
+    '$map: (',
+    '  "a": 1,',
+    '  "b": 2,',
+    ');',
+    '',
+    '@if $size == "default" {',
+    '  $branch: 1px;',
+    '}',
+  ));
+
+  expect(warnings).toEqual([]);
+  expect(output).toBe(scss(
+    '$top: 7px !default;',
+    '$map: (',
+    '  "a": 1,',
+    '  "b": 2,',
+    ') !default;',
+    '',
+    '@if $size == "default" {',
+    '  $branch: 1px !default;',
+    '}',
+  ));
+});
diff --git a/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts b/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts
new file mode 100644
index 000000000000..1c70a11fe2f9
--- /dev/null
+++ b/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts
@@ -0,0 +1,392 @@
+import { createRunner, scss } from './stylelint-rule';
+
+const ruleName = 'dx/no-identical-branch-declarations';
+const { lint, fix } = createRunner('no-identical-branch-declarations.mjs', ruleName);
+
+test('a variable set to one value in every @else branch is reported once, on the first branch', () => {
+  const { warnings } = lint('else-chain.scss', scss(
+    '$same: null !default;',
+    '$differs: null !default;',
+    '',
+    '@if $size == "default" {',
+    '  $same: 8px !default;',
+    '  $differs: 8px !default;',
+    '}',
+    '',
+    '@else if $size == "compact" {',
+    '  $same: 8px !default;',
+    '  $differs: 4px !default;',
+    '}',
+  ));
+
+  expect(warnings).toEqual([{
+    line: 5,
+    rule: ruleName,
+    text: `"$same" has the same value in all 2 branches of the @if chain; declare it once outside the chain (${ruleName})`,
+  }]);
+});
+
+test('consecutive @if blocks testing one variable against different constants form a chain', () => {
+  const { warnings } = lint('if-if.scss', scss(
+    '@if $size == "default" {',
+    '  $same: 8px !default;',
+    '}',
+    '',
+    '@if $size == "compact" {',
+    '  $same: 8px !default;',
+    '}',
+    '',
+    '@if $mode == "dark" {',
+    '  $same: 8px !default;',
+    '}',
+  ));
+
+  expect(warnings.map((warning) => warning.line)).toEqual([2]);
+});
+
+test('nothing is reported for a value that differs, a variable missing from a branch, or a repeated constant', () => {
+  const { warnings } = lint('clean.scss', scss(
+    '@if $size == "default" {',
+    '  $a: 8px !default;',
+    '  $only-here: 1px !default;',
+    '}',
+    '',
+    '@else if $size == "compact" {',
+    '  $a: 4px !default;',
+    '}',
+    '',
+    '@if $size == "default" {',
+    '  $b: 8px !default;',
+    '}',
+    '',
+    '@if $size == "default" {',
+    '  $b: 8px !default;',
+    '}',
+  ));
+
+  expect(warnings).toEqual([]);
+});
+
+test('--fix replaces the null pre-declaration with a literal and removes the emptied chain', () => {
+  const { warnings, output } = fix('fix-literal.scss', scss(
+    '$x: null !default;',
+    '$keep: 1px !default;',
+    '',
+    '@if $size == "default" {',
+    '  $x: ds.$spacing-480 !default;',
+    '}',
+    '',
+    '@else if $size == "compact" {',
+    '  $x: ds.$spacing-480 !default;',
+    '}',
+  ));
+
+  expect(warnings).toEqual([]);
+  expect(output).toBe(scss(
+    '$x: ds.$spacing-480 !default;',
+    '$keep: 1px !default;',
+  ));
+});
+
+test('--fix puts a value that reads a branch-bound variable after the chain', () => {
+  const { output } = fix('fix-after.scss', scss(
+    '$height: null !default;',
+    '$handle: null !default;',
+    '',
+    '@if $size == "default" {',
+    '  $height: 20px !default;',
+    '  $handle: $height !default;',
+    '}',
+    '',
+    '@else if $size == "compact" {',
+    '  $height: 18px !default;',
+    '  $handle: $height !default;',
+    '}',
+  ));
+
+  expect(output).toBe(scss(
+    '$height: null !default;',
+    '',
+    '@if $size == "default" {',
+    '  $height: 20px !default;',
+    '}',
+    '',
+    '@else if $size == "compact" {',
+    '  $height: 18px !default;',
+    '}',
+    '',
+    '$handle: $height !default;',
+  ));
+});
+
+test('--fix leaves no blank first line when the removed declaration opened its group', () => {
+  const { output } = fix('fix-first-line.scss', scss(
+    '$same: null !default;',
+    '',
+    '@if $size == "default" {',
+    '  $same: 1px !default;',
+    '',
+    '  $width: 36px !default;',
+    '}',
+    '',
+    '@else if $size == "compact" {',
+    '  $same: 1px !default;',
+    '',
+    '  $width: 32px !default;',
+    '}',
+  ));
+
+  expect(output).toBe(scss(
+    '$same: 1px !default;',
+    '',
+    '@if $size == "default" {',
+    '  $width: 36px !default;',
+    '}',
+    '',
+    '@else if $size == "compact" {',
+    '  $width: 32px !default;',
+    '}',
+  ));
+});
+
+test('--fix moves a value that reads a variable declared below its pre-declaration to just before the chain', () => {
+  const { output } = fix('fix-before.scss', scss(
+    '$padding: null !default;',
+    '$margin: 0 !default;',
+    '',
+    '@if $size == "default" {',
+    '  $padding: $margin !default;',
+    '  $width: 36px !default;',
+    '}',
+    '',
+    '@if $size == "compact" {',
+    '  $padding: $margin !default;',
+    '  $width: 32px !default;',
+    '}',
+  ));
+
+  expect(output).toBe(scss(
+    '$margin: 0 !default;',
+    '$padding: $margin !default;',
+    '',
+    '@if $size == "default" {',
+    '  $width: 36px !default;',
+    '}',
+    '',
+    '@if $size == "compact" {',
+    '  $width: 32px !default;',
+    '}',
+  ));
+});
+
+test('--fix only removes branch declarations that a non-null default above the chain already overrides', () => {
+  const { output } = fix('fix-dead.scss', scss(
+    '$x: 10px !default;',
+    '',
+    '@if $size == "default" {',
+    '  $x: 12px !default;',
+    '}',
+    '',
+    '@else if $size == "compact" {',
+    '  $x: 12px !default;',
+    '}',
+  ));
+
+  expect(output).toBe(scss('$x: 10px !default;'));
+});
+
+test('--fix settles a duplicate that only appears in the outer chain after the inner one is hoisted', () => {
+  const { warnings, output } = fix('fix-nested.scss', scss(
+    '$focused: null !default;',
+    '',
+    '@if $mode == "light" {',
+    '  @if $color == "blue" {',
+    '    $hover: #00f !default;',
+    '    $focused: $hover !default;',
+    '  }',
+    '',
+    '  @if $color == "saas" {',
+    '    $hover: #0ff !default;',
+    '    $focused: $hover !default;',
+    '  }',
+    '}',
+    '',
+    '@if $mode == "dark" {',
+    '  @if $color == "blue" {',
+    '    $hover: #008 !default;',
+    '    $focused: $hover !default;',
+    '  }',
+    '',
+    '  @if $color == "saas" {',
+    '    $hover: #088 !default;',
+    '    $focused: $hover !default;',
+    '  }',
+    '}',
+  ));
+
+  expect(warnings).toEqual([]);
+  expect(output).toBe(scss(
+    '@if $mode == "light" {',
+    '  @if $color == "blue" {',
+    '    $hover: #00f !default;',
+    '  }',
+    '',
+    '  @if $color == "saas" {',
+    '    $hover: #0ff !default;',
+    '  }',
+    '}',
+    '',
+    '@if $mode == "dark" {',
+    '  @if $color == "blue" {',
+    '    $hover: #008 !default;',
+    '  }',
+    '',
+    '  @if $color == "saas" {',
+    '    $hover: #088 !default;',
+    '  }',
+    '}',
+    '',
+    '$focused: $hover !default;',
+  ));
+});
+
+test('--fix keeps a declaration behind the chain ahead of the declarations that read it', () => {
+  const { warnings, output } = fix('fix-order.scss', scss(
+    '$item-bg: null !default;',
+    '$disabled-bg: null !default;',
+    '$disabled-border: null !default;',
+    '',
+    '@if $mode == "light" {',
+    '  $item-bg: #eee !default;',
+    '  $disabled-bg: $item-bg !default;',
+    '  $disabled-border: $disabled-bg !default;',
+    '}',
+    '',
+    '@if $mode == "dark" {',
+    '  $item-bg: #333 !default;',
+    '  $disabled-bg: $item-bg !default;',
+    '  $disabled-border: $disabled-bg !default;',
+    '}',
+  ));
+
+  expect(warnings).toEqual([]);
+  expect(output).toBe(scss(
+    '$item-bg: null !default;',
+    '',
+    '@if $mode == "light" {',
+    '  $item-bg: #eee !default;',
+    '}',
+    '',
+    '@if $mode == "dark" {',
+    '  $item-bg: #333 !default;',
+    '}',
+    '',
+    '$disabled-bg: $item-bg !default;',
+    '$disabled-border: $disabled-bg !default;',
+  ));
+});
+
+test('a duplicate that a branch-bound declaration still reads is reported but not moved', () => {
+  const source = scss(
+    '$item-bg: null !default;',
+    '$disabled-bg: null !default;',
+    '$hovered-bg: null !default;',
+    '',
+    '@if $mode == "light" {',
+    '  $item-bg: #eee !default;',
+    '  $disabled-bg: $item-bg !default;',
+    '  $hovered-bg: color.adjust($disabled-bg, $lightness: -4%) !default;',
+    '}',
+    '',
+    '@if $mode == "dark" {',
+    '  $item-bg: #333 !default;',
+    '  $disabled-bg: $item-bg !default;',
+    '  $hovered-bg: color.adjust($disabled-bg, $lightness: 4%) !default;',
+    '}',
+  );
+
+  const { warnings, output } = fix('fix-blocked.scss', source);
+
+  expect(warnings.map((warning) => warning.line)).toEqual([7]);
+  expect(output).toBe(source);
+});
+
+test('--fix keeps a declaration under its doc comment when what it reads is not reassigned in between', () => {
+  const { output } = fix('fix-doc-in-place.scss', scss(
+    '@use "../colors" as *;',
+    '',
+    '/**',
+    '* $name 100. Background color',
+    '* $type color',
+    '*/',
+    '$common-bg: null !default;',
+    '',
+    '@if $mode == "light" {',
+    '  $common-bg: $base-bg !default;',
+    '  $accent: #00f !default;',
+    '}',
+    '',
+    '@if $mode == "dark" {',
+    '  $common-bg: $base-bg !default;',
+    '  $accent: #0ff !default;',
+    '}',
+  ));
+
+  expect(output).toBe(scss(
+    '@use "../colors" as *;',
+    '',
+    '/**',
+    '* $name 100. Background color',
+    '* $type color',
+    '*/',
+    '$common-bg: $base-bg !default;',
+    '',
+    '@if $mode == "light" {',
+    '  $accent: #00f !default;',
+    '}',
+    '',
+    '@if $mode == "dark" {',
+    '  $accent: #0ff !default;',
+    '}',
+  ));
+});
+
+test('--fix takes the doc comment along when the declaration has to move', () => {
+  const { output } = fix('fix-doc-moves.scss', scss(
+    '/**',
+    '* $name 302. Divider color',
+    '* $type color',
+    '*/',
+    '$divider: null !default;',
+    '',
+    '$border: null !default;',
+    '',
+    '@if $mode == "light" {',
+    '  $border: #ccc !default;',
+    '  $divider: $border !default;',
+    '}',
+    '',
+    '@if $mode == "dark" {',
+    '  $border: #444 !default;',
+    '  $divider: $border !default;',
+    '}',
+  ));
+
+  expect(output).toBe(scss(
+    '$border: null !default;',
+    '',
+    '@if $mode == "light" {',
+    '  $border: #ccc !default;',
+    '}',
+    '',
+    '@if $mode == "dark" {',
+    '  $border: #444 !default;',
+    '}',
+    '',
+    '/**',
+    '* $name 302. Divider color',
+    '* $type color',
+    '*/',
+    '$divider: $border !default;',
+  ));
+});
diff --git a/packages/devextreme-scss/tests/stylelint-rule.ts b/packages/devextreme-scss/tests/stylelint-rule.ts
new file mode 100644
index 000000000000..c8e8d5bafbf7
--- /dev/null
+++ b/packages/devextreme-scss/tests/stylelint-rule.ts
@@ -0,0 +1,49 @@
+import { execFileSync } from 'child_process';
+import { mkdtempSync, readFileSync, writeFileSync } from 'fs';
+import { tmpdir } from 'os';
+import { basename, join } from 'path';
+
+export type Warning = { line: number; rule: string; text: string };
+export type Result = { warnings: Warning[]; output: string };
+export type Runner = {
+  lint: (name: string, source: string) => Result;
+  fix: (name: string, source: string) => Result;
+};
+
+const packageRoot = process.cwd();
+const stylelintBin = join(packageRoot, 'node_modules', '.bin', 'stylelint');
+
+export const scss = (...rows: string[]): string => `${rows.join('\n')}\n`;
+
+export const createRunner = (pluginFile: string, ruleName: string): Runner => {
+  const fixture = mkdtempSync(join(tmpdir(), `${basename(pluginFile, '.mjs')}-`));
+  const configPath = join(fixture, 'config.json');
+  writeFileSync(configPath, JSON.stringify({
+    customSyntax: require.resolve('postcss-scss', { paths: [require.resolve('stylelint-scss')] }),
+    plugins: [join(packageRoot, 'tools', 'stylelint', pluginFile)],
+    rules: { [ruleName]: true },
+  }));
+
+  const run = (name: string, source: string, fix: boolean): Result => {
+    const file = join(fixture, name);
+    const reportFile = join(fixture, `${name}.report.json`);
+    writeFileSync(file, source);
+    writeFileSync(reportFile, '');
+    const args = [file, '--config', configPath, '--formatter', 'json', '--output-file', reportFile, ...(fix ? ['--fix'] : [])];
+    try {
+      execFileSync(stylelintBin, args, { stdio: 'ignore' });
+    } catch (error) {
+      if ((error as { status?: number }).status !== 2) throw error;
+    }
+    const [{ warnings }] = JSON.parse(readFileSync(reportFile, 'utf8') || '[{"warnings":[]}]');
+    return {
+      warnings: warnings.map(({ line, rule, text }: Warning) => ({ line, rule, text })),
+      output: readFileSync(file, 'utf8'),
+    };
+  };
+
+  return {
+    lint: (name, source) => run(name, source, false),
+    fix: (name, source) => run(name, source, true),
+  };
+};
diff --git a/packages/devextreme-scss/tests/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts
index 559096b709b3..52180125fabf 100644
--- a/packages/devextreme-scss/tests/unused-elements.test.ts
+++ b/packages/devextreme-scss/tests/unused-elements.test.ts
@@ -47,24 +47,41 @@ const removeAllCommentsFromContent = (content: string): string => content
   .filter((_, index) => index % 2 === 0)
   .join('');
 
-const extractVariables = (filePath: string): string[] => {
+const variableRegex = new RegExp(`\\$[${VAR_NAME_CHARS}]+`, 'y');
+
+type VariableUsage = { declared: Set<string>; read: Set<string> };
+
+const collectVariableUsage = (filePath: string, usage: VariableUsage): void => {
   const content = removeAllCommentsFromContent(readFileSync(filePath, 'utf8'));
-  const regex = new RegExp(`\\$[${VAR_NAME_CHARS}]+`, 'g');
-  return content.match(regex) ?? [];
+  let depth = 0;
+  let index = 0;
+  while (index < content.length) {
+    const char = content[index];
+    if (char === '(') depth += 1;
+    if (char === ')') depth -= 1;
+    if (char === '$') {
+      variableRegex.lastIndex = index;
+      const [variable] = variableRegex.exec(content) ?? [];
+      if (!variable) {
+        index += 1;
+        continue;
+      }
+      const assigned = /^\s*:/.test(content.slice(index + variable.length));
+      if (assigned && depth === 0) usage.declared.add(variable);
+      if (!assigned) usage.read.add(variable);
+      index += variable.length;
+      continue;
+    }
+    index += 1;
+  }
 };
 
-const findUniqueVariables = (variables: string[]): string[] => {
-  const variableCounts = new Map<string, number>();
-  variables.forEach((variable) => {
-    variableCounts.set(variable, (variableCounts.get(variable) ?? 0) + 1);
-  });
-  return Array.from(variableCounts.entries())
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    // @ts-ignore
-    .filter(([variable, count]) => count === 1)
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    // @ts-ignore
-    .map(([variable, count]) => variable);
+const variableUsageOf = (directories: string[]): VariableUsage => {
+  const usage: VariableUsage = { declared: new Set(), read: new Set() };
+  directories
+    .flatMap((directory) => getFilesFromDirectory(join('scss', 'widgets', directory), ['.scss']))
+    .forEach((filePath) => collectVariableUsage(filePath, usage));
+  return usage;
 };
 
 test('There are no unused images in repository', () => {
@@ -85,29 +102,14 @@ test('There are no unused images in repository', () => {
   expect(fullImagesFileList).toEqual(usedImagesFileList);
 });
 
-['generic', 'material', 'fluent'].forEach((themeName) => {
-  test(`There are no unused variables in ${themeName} SCSS files`, () => {
-    const baseScssFiles = getFilesFromDirectory(join('scss', 'widgets', 'base'), ['.scss'])
-      .map((fileName) => resolve(fileName));
-
-    const genericScssFiles = getFilesFromDirectory(join('scss', 'widgets', themeName), ['.scss'])
-      .map((fileName) => resolve(fileName));
-
-    const scssFiles = [...baseScssFiles, ...genericScssFiles];
-
-    let variables: string[] = [];
-    scssFiles.forEach((filePath) => {
-      variables = variables.concat(extractVariables(getFilePath(filePath.substring(filePath.indexOf('/scss')))));
-    });
-
-    const uniqueVariables = findUniqueVariables(variables);
+const themes = ['generic', 'material', 'fluent'];
+const readAnywhere = variableUsageOf(['base', ...themes]).read;
 
-    const exclusions: { generic: string[]; material: string[]; fluent: string[] } = {
-      generic: [],
-      material: [],
-      fluent: [],
-    };
+themes.forEach((themeName) => {
+  test(`There are no unused variables in ${themeName} SCSS files`, () => {
+    const { declared } = variableUsageOf(['base', themeName]);
+    const unused = [...declared].filter((variable) => !readAnywhere.has(variable)).sort();
 
-    expect(uniqueVariables).toEqual(exclusions[themeName]);
+    expect(unused).toEqual([]);
   });
 });
diff --git a/packages/devextreme-scss/tools/stylelint/module-variable-default.mjs b/packages/devextreme-scss/tools/stylelint/module-variable-default.mjs
new file mode 100644
index 000000000000..1bf97bfbf8ce
--- /dev/null
+++ b/packages/devextreme-scss/tools/stylelint/module-variable-default.mjs
@@ -0,0 +1,55 @@
+import stylelint from 'stylelint';
+
+const {
+  createPlugin,
+  utils: { report, ruleMessages, validateOptions },
+} = stylelint;
+
+const ruleName = 'dx/module-variable-default';
+
+const messages = ruleMessages(ruleName, {
+  expected: (name) => `Expected the !default flag on "${name}": without it a value passed through @use … with() is ignored`,
+});
+
+const meta = { fixable: true };
+
+const isConditional = (node) => node.type === 'atrule' && ['if', 'else'].includes(node.name);
+const isModuleLevel = (decl) => {
+  let node = decl.parent;
+  while (isConditional(node)) node = node.parent;
+  return node.type === 'root';
+};
+const hasFlag = (decl, flag) => new RegExp(`!${flag}\\b`, 'i').test(decl.value);
+const isNull = (decl) => /^null(\s+!default)?$/.test(decl.value.trim());
+
+const ruleFunction = (primary) => (root, result) => {
+  if (!validateOptions(result, ruleName, { actual: primary, possible: [true] })) return;
+
+  const assigned = new Set();
+
+  root.walkDecls((decl) => {
+    if (!decl.prop.startsWith('$') || !isModuleLevel(decl)) return;
+
+    const reassignment = assigned.has(decl.prop);
+    if (decl.parent.type === 'root' && !isNull(decl)) assigned.add(decl.prop);
+    if (reassignment || hasFlag(decl, 'default') || hasFlag(decl, 'global')) return;
+
+    report({
+      message: messages.expected,
+      messageArgs: [decl.prop],
+      node: decl,
+      result,
+      ruleName,
+      fix: () => {
+        decl.value = `${decl.value} !default`;
+        if (decl.raws.value) decl.raws.value = { value: decl.value, raw: `${decl.raws.value.raw} !default` };
+      },
+    });
+  });
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = meta;
+
+export default createPlugin(ruleName, ruleFunction);
diff --git a/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs b/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs
new file mode 100644
index 000000000000..088b41e742bd
--- /dev/null
+++ b/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs
@@ -0,0 +1,238 @@
+import stylelint from 'stylelint';
+
+const {
+  createPlugin,
+  utils: { report, ruleMessages, validateOptions },
+} = stylelint;
+
+const ruleName = 'dx/no-identical-branch-declarations';
+
+const messages = ruleMessages(ruleName, {
+  rejected: (name, count) => `"${name}" has the same value in all ${count} branches of the @if chain; declare it once outside the chain`,
+});
+
+const meta = { fixable: true };
+
+const isElse = (node) => node.type === 'atrule' && node.name === 'else';
+const isIf = (node) => node.type === 'atrule' && node.name === 'if';
+const isVariable = (node) => node.type === 'decl' && node.prop.startsWith('$');
+const isEmpty = (block) => (block.nodes ?? []).length === 0;
+const normalise = (value) => value.replace(/\s+/g, ' ').trim();
+const isNull = (value) => /^null(\s+!default)?$/.test(normalise(value));
+const hasDefaultFlag = (value) => /!default\b/.test(value);
+const indentOf = (node) => (node.raws.before ?? '').match(/[ \t]*$/)[0];
+
+const localReferences = (value) => [...value.matchAll(/(^|[^\w.-])(\$[\w-]+)/g)].map((match) => match[2]);
+
+const equalityTest = (atRule) => {
+  const match = atRule.params.trim().match(/^(\$[\w-]+)\s*==\s*("[^"]*"|'[^']*'|[\w.-]+)$/);
+  return match && { variable: match[1], literal: match[2] };
+};
+
+const chainOf = (ifRule) => {
+  const branches = [ifRule];
+  let next = ifRule.next();
+
+  while (next && (next.type === 'comment' || isElse(next))) {
+    if (isElse(next)) branches.push(next);
+    next = next.next();
+  }
+  if (branches.length > 1) return { branches, independent: false };
+
+  const test = equalityTest(ifRule);
+  const literals = new Set([test?.literal]);
+
+  while (test && next && (next.type === 'comment' || isIf(next))) {
+    if (isIf(next)) {
+      const other = equalityTest(next);
+      if (other?.variable !== test.variable || literals.has(other.literal)) break;
+      literals.add(other.literal);
+      branches.push(next);
+    }
+    next = next.next();
+  }
+  return { branches, independent: true };
+};
+
+const collectChains = (root) => {
+  const chains = [];
+  const seen = new WeakSet();
+
+  root.walkAtRules('if', (ifRule) => {
+    if (seen.has(ifRule)) return;
+    const chain = chainOf(ifRule);
+    chain.branches.forEach((branch) => seen.add(branch));
+    if (chain.branches.length > 1) chains.push(chain);
+  });
+  return chains.reverse();
+};
+
+const directDeclarations = (block) => {
+  const byName = new Map();
+  (block.nodes ?? []).filter(isVariable).forEach((decl) => byName.set(decl.prop, decl));
+  return byName;
+};
+
+const identicalDeclarations = (branches) => {
+  const [first, ...rest] = branches.map(directDeclarations);
+  const identical = new Map();
+
+  for (const [name, decl] of first) {
+    const declarations = [decl, ...rest.map((byName) => byName.get(name))];
+    const value = normalise(decl.value);
+    if (declarations.every((other) => other && normalise(other.value) === value)) identical.set(name, declarations);
+  }
+  return identical;
+};
+
+const walkFinds = (branches, predicate) => branches.some((branch) => {
+  let found = false;
+  branch.walkDecls((decl) => {
+    if (!predicate(decl, branch)) return undefined;
+    found = true;
+    return false;
+  });
+  return found;
+});
+
+const assignedInside = (branches, name) => walkFinds(branches, (decl) => decl.prop === name);
+
+const planMoves = (branches, identical) => {
+  const movable = new Set(identical.keys());
+  const placement = new Map();
+
+  const settle = () => {
+    placement.clear();
+    for (const name of movable) {
+      const behind = localReferences(identical.get(name)[0].value).some((ref) => (
+        movable.has(ref) ? placement.get(ref) === 'after' : assignedInside(branches, ref)
+      ));
+      placement.set(name, behind ? 'after' : 'before');
+    }
+  };
+  const readByStaying = (name) => walkFinds(branches, (decl, branch) => (
+    !(movable.has(decl.prop) && decl.parent === branch) && localReferences(decl.value).includes(name)
+  ));
+
+  for (let changed = true; changed;) {
+    settle();
+    changed = false;
+    for (const name of movable) {
+      if (placement.get(name) === 'after' && readByStaying(name)) {
+        movable.delete(name);
+        changed = true;
+      }
+    }
+  }
+  return { movable, placement };
+};
+
+const earlierDeclaration = (parent, ifRule, name) => {
+  let found;
+  for (const sibling of parent.nodes) {
+    if (sibling === ifRule) break;
+    if (isVariable(sibling) && sibling.prop === name) found = sibling;
+  }
+  return found;
+};
+
+const declaredBetween = (parent, after, before, name) => parent.nodes
+  .slice(parent.index(after) + 1, parent.index(before))
+  .some((node) => isVariable(node) && node.prop === name);
+
+const attachedComment = (decl) => {
+  const previous = decl.prev();
+  const attached = previous?.type === 'comment' && !/\n[ \t]*\n/.test(decl.raws.before ?? '');
+  return attached ? previous : undefined;
+};
+
+const dropEmptyBranches = (branches, independent) => {
+  if (independent) {
+    branches.filter(isEmpty).forEach((branch) => branch.remove());
+    return;
+  }
+  while (branches.length && isEmpty(branches[branches.length - 1])) {
+    branches.pop().remove();
+  }
+};
+
+const ruleFunction = (primary) => (root, result) => {
+  if (!validateOptions(result, ruleName, { actual: primary, possible: [true] })) return;
+
+  const lastHoisted = new WeakMap();
+
+  for (const { branches, independent } of collectChains(root)) {
+    const ifRule = branches[0];
+    const { parent } = ifRule;
+    const identical = identicalDeclarations(branches);
+    const { movable, placement } = planMoves(branches, identical);
+
+    for (const [name, declarations] of identical) {
+      const [first] = declarations;
+      const earlier = earlierDeclaration(parent, ifRule, name);
+      const overridden = earlier !== undefined && !isNull(earlier.value);
+      const fixable = overridden ? declarations.every((decl) => hasDefaultFlag(decl.value)) : movable.has(name);
+
+      const fix = () => {
+        const live = branches.filter((branch) => branch.parent);
+        const tidy = () => {
+          dropEmptyBranches(live, independent);
+          live.forEach((branch) => {
+            if (branch.parent && branch.first?.type === 'decl') branch.first.raws.before = branch.first.raws.before.replace(/^\s*\n/, '\n');
+          });
+          parent.raws.semicolon = true;
+          if (parent.type === 'root' && parent.first) parent.first.raws.before = '';
+        };
+
+        if (overridden) {
+          declarations.forEach((decl) => decl.remove());
+          tidy();
+          return;
+        }
+
+        const hoisted = first.clone();
+        const references = localReferences(first.value);
+        const comment = earlier && attachedComment(earlier);
+        declarations.forEach((decl) => decl.remove());
+
+        const relocate = (insert, gap) => {
+          const indent = indentOf(ifRule);
+          const moved = comment?.clone({ raws: { ...comment.raws, before: `${gap}${indent}` } });
+          hoisted.raws.before = moved ? `\n${indent}` : `${gap}${indent}`;
+          if (moved) insert(moved);
+          insert(hoisted, moved);
+          comment?.remove();
+          earlier?.remove();
+        };
+
+        if (placement.get(name) === 'after') {
+          const anchor = lastHoisted.get(ifRule) ?? live[live.length - 1];
+          relocate((node, previous) => parent.insertAfter(previous ?? anchor, node), lastHoisted.has(ifRule) ? '\n' : '\n\n');
+          lastHoisted.set(ifRule, hoisted);
+        } else if (earlier && !references.some((ref) => declaredBetween(parent, earlier, ifRule, ref))) {
+          hoisted.raws.before = earlier.raws.before;
+          earlier.replaceWith(hoisted);
+        } else {
+          relocate((node, previous) => (previous ? parent.insertAfter(previous, node) : parent.insertBefore(ifRule, node)), '\n');
+        }
+
+        tidy();
+      };
+
+      report({
+        message: messages.rejected,
+        messageArgs: [name, branches.length],
+        node: first,
+        result,
+        ruleName,
+        ...(fixable && { fix: { apply: fix, node: parent } }),
+      });
+    }
+  }
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = meta;
+
+export default createPlugin(ruleName, ruleFunction);

From 5a13cc52dd46092398708af09a0c13cf29bc7816 Mon Sep 17 00:00:00 2001
From: Arman Jivanyan <arman.jivanyan@devexpress.com>
Date: Mon, 7 Sep 2026 11:53:45 +0000
Subject: [PATCH 14/45] fix (demos): Workaround the broken pivotgrid demo
 (#35044)

---
 .../Angular/app/app.component.ts              | 121 +++++++++++++++---
 apps/demos/testing/skipped-tests.js           |   2 -
 ...onflict-informer (material.blue.light).png | Bin 58678 -> 58592 bytes
 ...ct-informer (material.blue.light)_mask.png | Bin 0 -> 3484 bytes
 apps/demos/utils/server/csp-bundle-angular.js |   6 -
 apps/demos/utils/server/csp-check.js          |   6 -
 6 files changed, 106 insertions(+), 29 deletions(-)
 create mode 100644 apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (material.blue.light)_mask.png

diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts
index 9b0bcfb6a7c5..1079a7780bf7 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.ts
@@ -1,20 +1,111 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component } from '@angular/core';
-
-// TODO: restore the original demo (see git history for this file, app.component.html,
-// app.component.css, app.service.ts). Disabled because combining DxPivotGridModule and
-// DxPivotGridFieldChooserModule here reproducibly triggers, in CI only (not locally, likely a
-// devextreme-angular artifacts staleness difference between environments):
-//   NG8023: Multiple components match node with tagname dxo-pivot-grid-field-chooser-texts:
-//   'DxoPivotGridFieldChooserTextsComponent', 'DxoPivotGridFieldChooserTextsComponent'.
-// Both modules generate their own nested-options component for that tag name, and combining
-// them in one standalone component's imports puts both in scope at once. Needs a real fix in
-// devextreme-angular's generated wrappers (or dropping one of the two imports if one turns out
-// to be redundant here) rather than a demo-side workaround.
+import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import {
+  DxRadioGroupComponent,
+  DxButtonComponent,
+  DxSelectBoxComponent,
+} from 'devextreme-angular';
+import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import {
+  DxPivotGridComponent,
+  DxoPivotGridFieldChooserComponent,
+  DxPivotGridTypes,
+} from 'devextreme-angular/ui/pivot-grid';
+import {
+  DxPivotGridFieldChooserComponent,
+  DxoPivotGridFieldChooserTextsComponent,
+} from 'devextreme-angular/ui/pivot-grid-field-chooser';
+import { Service, Layout, Sale } from './app.service';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
 @Component({
   selector: 'demo-app',
-  template: '<p>This demo is temporarily disabled. See the TODO in app.component.ts.</p>',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  providers: [Service],
+  preserveWhitespaces: true,
+  imports: [
+    DxPivotGridComponent,
+    DxoPivotGridFieldChooserComponent,
+    DxRadioGroupComponent,
+    DxPivotGridFieldChooserComponent,
+    DxoPivotGridFieldChooserTextsComponent,
+    DxSelectBoxComponent,
+    DxButtonComponent,
+  ],
 })
-export class AppComponent {}
+export class AppComponent {
+  pivotGridDataSource: PivotGridDataSource;
+
+  layouts: Layout[];
+
+  layout = 0;
+
+  applyChangesModes: DxPivotGridTypes.ApplyChangesMode[] = ['instantly', 'onDemand'];
+
+  applyChangesMode = this.applyChangesModes[0];
+
+  state: Record<string, unknown>;
+
+  constructor(service: Service) {
+    this.pivotGridDataSource = new PivotGridDataSource({
+      fields: [{
+        caption: 'Region',
+        width: 120,
+        dataField: 'region',
+        area: 'row',
+        headerFilter: {
+          search: {
+            enabled: true,
+          },
+        },
+      }, {
+        caption: 'City',
+        dataField: 'city',
+        width: 150,
+        area: 'row',
+        headerFilter: {
+          search: {
+            enabled: true,
+          },
+        },
+        selector(data: Sale) {
+          return `${data.city} (${data.country})`;
+        },
+      }, {
+        dataField: 'date',
+        dataType: 'date',
+        area: 'column',
+      }, {
+        caption: 'Sales',
+        dataField: 'amount',
+        dataType: 'number',
+        summaryType: 'sum',
+        format: 'currency',
+        area: 'data',
+      }],
+      store: service.getSales(),
+    });
+
+    this.state = this.pivotGridDataSource.state();
+
+    this.layouts = service.getLayouts();
+  }
+
+  applyClick() {
+    this.pivotGridDataSource.state(this.state);
+  }
+
+  cancelClick() {
+    this.state = this.pivotGridDataSource.state();
+  }
+}
 
-bootstrapApplication(AppComponent);
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
+  ],
+});
diff --git a/apps/demos/testing/skipped-tests.js b/apps/demos/testing/skipped-tests.js
index 52bd9f86578d..cdd9e5ce7dcf 100644
--- a/apps/demos/testing/skipped-tests.js
+++ b/apps/demos/testing/skipped-tests.js
@@ -6,8 +6,6 @@ export const skippedTests = {
   Angular: {
     // WebGL initialization error at the provider. There is no point in adding a mask
     Map: ['ProvidersAndTypes', 'Markers', 'Routes'],
-    // Demo is stubbed out (see the TODO in its app.component.ts) pending a devextreme-angular fix
-    PivotGrid: ['StandaloneFieldChooser'],
   },
   React: {
     // WebGL initialization error at the provider. There is no point in adding a mask
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (material.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (material.blue.light).png
index ef926159c9c3e865688d5f7c1216cbd6a5925342..410371c30851f7ca2b946e6b350d948012317381 100644
GIT binary patch
delta 20523
zcmch;2|Sf++cv&;<E}K&WGW>xW!^$WA#=vnKq8qcl|o6$-5^7z7M3AXGNnS4jHQwx
zW2s1{WNJc4X8y;u^gPdg-tT$e@A=;M{r&ANYq-~SU)MPt=W!0}VfpM2FJ|A9xbXYE
z`;r$Puu-ceQWlL*4fpjq*t%Erp5Qng(I$0aQ`xmY%)QSnFcLq^P?y|!FVx)cnApy<
z*Gsxz_-MT!tl8;**zL{r!R+v^R;8yU;nTr)Qr}12nD#hi@M>B8q8oRg@b=o;%s;*Q
zok?g!^ypeDBls>?=)OxItGkEZFUve&8TwFQ%b8vD0Dn>H!Jm94r}Z@BXuP_A8ZeGt
zP|>F!Oxl(a!WYr8%TiOyqh*%YN>8nz3DYBI1FZE$jy;lJm2_su#eklze36k_rx|i=
zqi!+ITm1dj;;-hG=&l1z(QQr9aZS;}E~U*WjxM~t0r|^Mx-><5=ePH&HLby`J~;|A
zFA6i3FYMJzFcULQp`CD1Q&ZEM<L~butQ{jlMR3@vGa@8IA|#_C*3S>C>Gnx@ec1X(
zS@$5f-jkDtH&Sh87tdW3AtTvQuX0`7w0giv%A=UK_~0xR^E=Pe`9`wl@GnVIbJ#O~
z|Ni~XrydN9ykB+JxXRk7K$yNhOtki4t}k!;r=A;GcD%Vq*;vUB-E>vAoZy44+jS&M
z6(~ocXDX}buk`fTrd-4~!eA@heQ-|ktRB(8*TEMgA}s4Be9!1Rc`o}jOPjx}<NAX7
z<9rsn^rQBP*Gx1wHxzra@iKp8M5_BtGkh0|9{Uk`cBFrJ-$k}ZkLI4;lYY^~Oiipf
zoiF(1zD>WcryDJJX07?|+B)5B8PD%r-Ep;;n&ZP)D5RTl;IreZBz8mI*Scb(R+}Fj
z7igH*z<-#{c|CJ^ql%9cX;(O^O{Uzd+X`2jnw+P&s&vG8!{%TOOHIwIw0Wkc3ZITu
z(}kU1zBlA`Jw4mw+RmS~@9TCPx12X{%sC`z(;un<JFlAL`aHO6qO+&#s924M$9`{b
z${Rm#9>}HN;XM}Eq^k3gH&pb+wHKn+yX%+Vo!Y&qSmolqQQlA)uWe;_ugJfzOKXd%
z<GrGydHRKsqfmfJc(nfJw>#F?>n>!9met3pfZu7;etP?^^;N4=Z$wOo9_@-stlG5c
zNA12N>w*`iER<eklINy$rNvx(F^AFmLQ1HivUX*aAD>gT<L>XR&scOq(?9HyT4eHg
z){L^Quk4<)Y@@NYT=+F>;mc&V-rf_vb7vlC?p(O+*JUf#{nCWcHrN+_ju>5-x#&&8
zZ!?=q(fWPn8l&J@GuI?+r2f}d!a@ZBYu&zY-<@vmPwrgM|Iyo<`&nX`dHG<Ca?J_Z
zmNOfupLSHqtFc#s?rOPawx4Sgsi?At4z1M}XU`9pby!Qb7r%>}m0pzd<@TMNAGJCh
zw{vqNUVTf;@BP>rW?|b|&LB(s?LMidwq!$Om1A#iw^Y-I59=&O%lC`~D~~SUe7vd5
zSNw5V5Wh~if{WO$*|TRWPJAyaz*+@8#~iHqE?>Uv)+u7qR;wd!GdV^LRfbDmF7{o$
z+;yVA)b(eBU4*37Jm1ygwoN%FSNQIDJoYx-v6Hc9;KytI*DWp89ClGpBkW>c80>p^
zwC$A!PvYapG5B<Fm2JwF6CZw49(|$zF2ibmu2}$iRg-Vz%bvpW`!z~B78X3&t?mju
zV=ujK-MOO*`CC8m*}zLV`jvM|WjCMZ8g4l!KG<C&u*&yj(PG)}5jAd}!;kvT(}Y(l
zjXYgii+dNZwx~Q+zhA@7PM|xMQYvCp*c{LA+5C94%E58qg~0uz4N|<ZQ$LbNA>QXU
zVf#z;-3OK*e>AikLR!m9?lIlZGyU}D4qtY5_76OGGRi|uw^QFA4?hYldo<iqk*qW%
z)G`<|{Ia#R#$UFjtl6ctYGQP-;qiF|YG@Bt{3gX%zB9ylq@J4GQ@!Qurrl{~K2V2d
zs`mz7NA}jyYL~tFr$u)O#JWkvjyHAR8jCC(<x0!>xRCeMsZ)3NWe1QGDgJn=syO-M
z^+bn&avYVC;`8+B_O!=iN0xMM;2Hg6&;C;@=|f-ZoocoY-#a^WBuPJ3uVbJ>yt{Df
zYhli}%nEO}jtxAPqXV64T{W>aYh0S1zTIQ7Gh=T@-q*DDu1E*lhD;l^<2h~fcBh&a
zi)J@H3)WY9L5xs9c~pycwfUL#)Myy>Vrp`H^t+cbrMqX(YVpDeDW1ts8pKUFQi;`;
z_;E;|X>4p!e;XoX%>E@ISnuW$ymqwlp}(e%&LZDcqBpT|O~ti#U6m0b6*lSvq1gpj
zZWHNO#wy4D{CWC)W2295jADd8m#kxhO&Dv0ywk>AVP=jCEXHcXh=~-A6pOzrq$uU!
zjXMuE=bci+`bAcOTh*;`HdtQWU6Z1&s>p_1Cjt87$4XzmekI#WnM*9cy~(MjvxsL(
zLZiIdXT`#~C4oFO8DDyOY)S*x+%?M$ij#_9nJ<0vqZ;q|^XGs3_+gMj+nejiuUZu$
z?N#<#U%5)A-mJ*AJG%4@m14|Xb_bRX2-XVTm|<BoFJRZkV9W9lp(a=x%O1fM?7fg5
zuaxV6_0PUm{Y0a-pN$Rz3~kA#XqT23b61-^8LGF?w;t@OniwyfRv=EC#kWnZL(U}A
zdV#2@=v~vSg)ZH>-7)QPUTZ&UJ{oWCOUlY(DD>uBE~8?$o*RK7ydWokdw#gN^vRRo
z;G#{=uXk?Rd+&no#v<Zw1+IfRKi}JPaC2LqIB{*)o!uu(*SIW8xpT*A{AZ7|i_7cA
z#)`s;ib4q*RMPtRJQE~rnW9RHJpK{C2XE=SeOz8JJ=xc7ptp61cD!)%^znjzN}ZU>
zM&0lym*y^#Gio>*s!xr*c57Q?@ga2I@%5Q!`VW$;Z^uwmu6pvFD|j8K@kU_HV--F)
z>f})UU^X?L-Qg(Dd*8O|W9;;3tj|Pq>*Si)u{X(k9~@$(uN2w6jOg&Q^L3H5oJ%6<
z1wjq>?FL8M1B3OFSy?4uamT)$YaNeq`h!U@c8XSX5B`k;sMUV{bAEd-OLs3zXD=;R
zp;wO)Ja%_2MOXxHr(=Y6;-!2iDD%6mgq&QNvHsR#2#Q_yIJbs<U(2JT?;rSNSe0fT
zcsdIq>muG}klp{ed9#sNSOmbah@s6NbM}i+rJr=Q+~qTh)dt6o9Si5cNe<?$Q8;a|
zXHRLzi(u@q2N<=B0EpLMM&Nlr>NZ1U&q3Qc+qZ36wSoM-5Wy-bUCAPiC*j~T&nqRQ
zd2KzJFZy{$7~0^~UA83#wk0QQJ-N-4Vg-WqlIgED#MVFt@*#4(yrm}4+pC*9xbO70
zmpTzpCsL9QQsaGUVi#Skc|9_c<3(kJG_h5VD(YjIW#a3@1EY#kV;zI8OG=tKs+&2=
z2@4~nY>kV+$KD(T))@xII`gbo?|E|yO_&DI6lQ>oiTV~FjB;sl_2ZIV!piDub;`xX
zYUV`o!hg)F#I`N5YgTe3wZEN=Rl2B>y}D9@lD=K(7gy=mR>>m&z)dOeO{kpX-v1Fj
z{0log(hx3bmGd<%e;F%X*4)Z!gRT0qInNJD@{+$~M@5y?jCd{od1u~4$eu*nEcoBf
zw(M!=peyfZXHJf-kd)W*{~kg3SNwn?F3!s<^Z!OQ{?$tVy@i;h4Pobh%zpl@Ek(5_
zWFMOynZJ;BWqD*oY{fDuibijF=>Oos>FrV#cjwAqH(sAE{4yi%N?pJ#YsbnOnP9B}
z(_-`Yrn0YheF%Hjp=K1p(x7{Fnc(TH%nXt3PH7ReGW!)<Ob_>Hy)3v9v0_FDSppw&
z1Yf?*qX)FGc^Q2>bBRa!)pp)UtKCUqp>ORE^>nV>k!M<W?_rkO7AkDRzNWJ4Zv$WN
z>d4aG`rzS%+E+E=D+iA~xI3jZtlYAl_0uu?HXn_;?`JeF)(f7_u<YTCIdnKNnZP2E
z+f^sC5Wx^O>l&p<C#m(SEA!u%d6{IUur<m$)6GVfgmxHhTeYP(IqOcCnd(LVV>=vm
zLNnIQwhneabvH3JTT^@E@&QiEpsp+3_autNSLU1MP*w9D)>H)XZoj#HyMz7wM^*Ah
z1-IX2(0hvKaX!1Yfv%VQqI<CHQ*ceUJiCjXoQs{HOLBShNf*!HbJ1LsQHsGXu`qaN
z4hbFtmwJ1TSNg5{!@Kw(ZSG&OMQz3{|L%`P|CBs=h1PV_-?Md}5nLs>BJO3KicYDT
zQNyOH2tI=ZE2~AKi?u?dmm3K({#d@4#?N)*rEx;IkijN?t&NoHF7_anxa=pES1g10
z3PZ2QY-o6`z0V=wijcYC4XblYUv$|9?dK0r18_y_ZHU*H0kD5Q$?bn6et$=wlgy-$
zWP{NJsh10dRe;Vltw9d9eEUB<oBE4u|F=B*L{o_1kZQ)erzJA2-BY1rS3Ul;co5au
zZT*KYQmi>11-pGLw7%Of(B?MtX-Qj>mzVeH%c0KxEYTlH*Iy)@p?2}AitS4{=Cpc;
z`K!k5_BCpb4Sc_ha#MBxGFy{Ox4FBDKilV0J?dM!><%q~z}RL@vIKwFqdj5j!@6S8
zgKR}T{aMefJxvD1KW?q!P`R;4kg+b<exq4F-A!^wW-3F)c722OYA)>=6MS=5u2eN6
ztYvDRQOY$+GhCN-;{Z#Tu8Kp(91k^Z{y&1(TdH1?_`R4dU3itys^xq^6G;-qml7*X
z!VjwX=t}2y1U9_Pi?-&n4olE_d1c0`MHk7fJ=?f<yj=s%5_YyxLGT*y3lSuUYDNiC
zFW<i3E}kyP%nl=tTsXnoU@hL*m?t=^*o})?lgJk#(eW-JoDr$nx7_~lB0EX(<-amp
zqsEWiOCv_3nhQK-TBkV!1#Ya^eBb)Bo0KK}q0I2hpd4=-9Vu(aMG<d@=G-ZKtCC@`
z?&xE0o2vE8r0gvN9%k9+Bxh;HEeqP88De(TYL#tw@Xk|)Wir7kY5}`)XDwB{9~nwL
ze55#T#8Xp{6Ik|Hz`y-XMEjY2gK}a@sXk9gdPiSw7S+zncmITtNZ0C5J)(5YL`}~L
zqrn{_hq?;+BjxQ5OD|gV=tn4LS%S*#XO$|UVzK&h*<nVip0qLt?alX{cSvt|5p_Rm
z<wUkbQBbGI2m{xoZ&M3+_H*Jlo-qq5^30KOCC_o?n$v?+OwUHgx~Tq%3X9lheo0$M
zp4jnxW%rqd!3k2_yTf(qZ3k3>QdoEgO7aKeEWS559J9GWYrEYVS?(nsQ~idvroH63
z_ct!V*9}e=6xP0bI_+*PP&nKmkken&HLzMIi5Z0il72&uH}d|v#rGEu1=IzOiSN^{
zT+_~{0$h!`*e!U9SSk;=o%eHn%{f9%e-WMd(6{>IlhUd4($iB00;L~G>Q;PpWsZVs
zv-@~Y0r;dk*{AzC<hNcgLwP<7wl-+<+A6v<x)!9ma(mrBRDC99Jh_<fV2NGfqbsXj
z7N6MU{_}q9$?j+u*g3*ksRoixRvP!z*c~no!Cg7S!FDf~&7-BdpOuwu&5rKbKU>Y#
zrsR8yi;PqMVShEwF9+Sar<I~zS|?WUjAnP|^cgRbY`+zC`u*Xi(~ZZ>-1>`kW0j)m
zM;kJ)Xz-j585=vhO59v`b7W#-;uX8t^PzXrA78&MV_#<=xMJ@^>L>?Ybl=18pW*|J
zEG%k17W=-iy|1?R{13yt{CqrAoEm9&`+k{+Z*AZPY**_29Av;B?DqZqUg>+@%=NgZ
zQ@7rYFVqwz-rqvCJdqavnc*_M?%eRw0lYs^+*9LNI=hD^TD|i_;HpH|gI~?vTONkR
zpZc5_=2&N9*T0mS{=U?&qvc#*C&{x$yJNfQ8f)7!E5xkYOZ@%TD1_EfQ-jW@P8pu6
z5Y2x1`nBqRb}e(yAl2$=kA9l2b?smU(;_$$Z+OAG?2kH!MxBoKu$r4kdIlf4wT(Bj
zzvwQ!&+ytz4H*pixK#0Gx_>nfC?<I)Nl{!L53ccSEToj{_q(i-ZFQ5jnE1GQbRev-
za^)Vgr?+?AA?bZ`^l8qeN+av&4<BxRc(mbJe#?*;a+De*E~Qnnt(B__M|M1(=oEJ<
zUb*Mqk+;IPIXO8;YNjXjd-J}EJ(D0-WBn(EA_~XTn(Q8aDOVNEx5uW3c)bQ0^WUdj
z54yd9xv9{6X`AvDO8q|iCtmNA&9JW*^E``;y8*lVmA#SVR?@2E-r?69dBZH+<(Zq}
znfmS(MNN(BhD%&TP8>8jJ}iB>mai^#UuoW{uk6ycERma!-8@1ehlH3{5m$e;DFC8^
zf&w)&#nj)v7XNutj;nF}7N_h+^$xqnpN@Ca^1cZ77EZe>4Mx;RP*ZM|ewzCFOBvc%
zz{#cFM9DjO6Nl(RCY+R<>@}aq?HVz*|8Na~l@xyDN9qP*3KadS>VXNP{m%|4dv#Q&
z%cTp4MO)d}y7l{7kjy*z{{7(Fx*Jvhk@uMy8!soBMDBQRzH8f+)n~dDTDACsUm(rQ
znf%$Pm1sl|`OR%OIqRly$xu!GIJLJzuS*@}7TNkG-p)@~>v$7kHF^w$-Yd}k2Nkb4
zSSd}5cI}F&jFb(uPk$7OlEA$A^G&jjtaNEQIe%A0sAzkI#gr7upHWFrt5zJ;MQ&W0
zRc~H_;t%pg<d|2HP|hYYG-X@ID|KnEbSc~6ukZEWwu(kSZJX$+<)9sN&5bR)MD9E}
zWHBv+YD=;(vN#H9-2Id7>W;bGsN3ZC=J_rXFSvGFd7?;}kFI$F*}LIN-{PF9v9Ap|
zCpX{{GqKYBF3rVPR-2P^YKo$cL+)3?mfM!!I8vh@v%TYz@kYmHhEvYexkkY~QE>+^
z_K%9#IZf>|rZtaD9#hkcmJf~Zzsxgnq3vToB{$sc!lNo`mUGRE$2~kb=Ilc0cBEwM
z)&?3gbT_&p9b!M;_UsC&V<`^3F%Cx&>g2rsGf`zYzb|tKsJ}>EQdW%jX$b!6`t8cr
zi8HFQeS2SOc1-74ZwZTPdA??8!Sg^_=U{IRofav2;HK!OQ7?v=_!j6uHRw1c#pvkS
ze>|hb#};*}&V)O4Ch;PXRWtP}SzOZR0yX~KEwp9CY3k!oyM_VfuxodHStF!#WA?R1
zTJfEqUq1164c8y-CH2ag7bJa{HAndjKo$41OB`BC<E8h7_8fRx%G3Gc;d$=rv18}t
zhuQ;;(w=muQ&B|)hZhr3miY+4{4L!^mL>(?_3e*vIM%teaD;EqWD8Bnt=~B*=?nWF
zp4ndKXWMK!x8y|WY=x25z;D*y!r4jaxa001Owh*hAU5ncCvEIeirJrq^rh43JKfro
zqsgzIb$`K%>4B%&Qv55)rMv=ZNIoeI!N$F%lT_igZt7J{eB?Pu(0r|ZvnsD`)cJuq
zEisW#8oQIiWmA8Lb+O9#7vmpohlsi-`;uh7Px&S>Yt#<r|7UUa-%2kocx#fQd;gbZ
z+P|-Kb%Ph<|3@;du|$NKq%)KC<yy(Fx&88`qw=Lg@{K!@V(%hZ^$g4XTkB)}ugsgg
zs+VZ=wAlycF_Liy5cS^3$Y2eYxhYHuBaOW!CGCm-rKLMQAVH=7t+`UP;D1=t{=2aL
z^Wr%5m+CkyfLA5gEQuy;C>F*lZ-`u*&1X)=UKUn*`+5}96G~7sm^W{pU|5BBlqM=6
zC@JGisF!)c$myJWHmzcnr?2$g@sC$hXv^g3yM$N%dWD$HKNsIA5_u9f{u?{}%SQjX
zjPF=kmu^urHuP0KDt3CJ`>sXdS};W|@R;}?mC`jY>*`7Z)+mrlqiqR*mee0fiR!^?
zJrtjDe?2!+@-tA1?Y6fV=WKj<%qoX46Y^X3t>M1w^mwcOmS}avM-&!25lH7wPEOKN
zEec~cWVlbBMIa5|e2g=Nwh(0sBiwbvz0*CWk0*N^oIX7H9TBYv1-}YZPsvqu61$yG
zpB{K;6_|0Xar1GC)MxMReTo{Smv`BrK`^?L_*lR$)I)oEdJ>F;)YMuune{tTGmLDV
z*yy8ni4@RK+h>=yx@9J&Ar{s?F<8@masJv5kH>r4zgkRhK_D<Y@pLY?FDW2@P0h{(
zs*~CtO5P()-AWq53>CEwf9DTRsNdc9L5*lqyh1Bv$@<uu!R9{qurdLq{sm&W9c-0;
z^l%QHFtN_}_UZfs<SjR)npa~DHSQ&-HdhUFR=AF|dF2jPD@aO{+O>8f8?OMTiyf+N
z-<ooR_vfF^pr+lI*c>=;;o`;Lm)PR(`SG7^z1+HqMwX~gQpf{uBf@?D{MoX*I+~Pd
z#lkp_<1+G5@VT+^artmW!Lw)2zC-nJ>(;HL$}A-z@g!}3{-?e^4ag@7TUY<k>(*m$
z5x;lSfClwLBg(l}i#x^SzHNV+%Ol@|8D-!}CtLzbQnOpiNpaE%t&AY;#BfU5ZV4$w
zf9mb+Lh*4ey{9pI&|&(g18S+H@_qsl>HfLl<7zE`pd|PpD=WjUW-UtE4G#`4N5$2O
z5ABb*!ot`#xI=1c>d}@0)FPifC6(Bg7QJP2)Xd#SZDQQV4&yVQdwXra*8RFhWtW44
zIM-(C=z-zhW|)~*Riy0TM_=)ey|hOY0~Mq%@E|+;b#rqSSW-iQt2BsB9BxAFv&eI?
zv$L~-FoRUalHs-+4%ypV;hoAT`C!n+Xzo-U@kb$qX{GMVu7v~O2J&p@etv875s3M4
z-9F9omIMnaN(WL~f3j0!$y7O9Bxk5@A8hrU-1xWq<c_hUm3BGk#+ckY@H=mM*w%AD
zUp6=I6brMO80m)+-oJl;2Gm&&eGvBJP$gd4s25ds0%psyWQn6-b8|B)tZbkA`jQ_#
ziiRpALHS4>UU7P2@LS8HNarm(6DYh@Qlf5K6SFhHK=7XHpe>wL2eb-4hVx6?*KOLk
z^SW9>dU_yQJu%JsE~u0eB;D-LqT7+`a9-qvb&%=9L$7!PiowpEP*b4Gni7_c?Rgip
zujzYIDQ9Y10*a!UkecehAqzIe`#Nc-RnF1P6&2!Cq3*5}+Q$He-VaW(<J_$yC9-m(
z9l<8q$Jg+tC%3ei2fg5HFAWr6^DPeFa!MGxLYKj_G0T4S&Ye5MIaGU^^TV(y!iv>v
zTU+(f-NGAcKYJQAmd*K7M#fO)^tZieS#YqkufzK_DC&bK-xQ9}4bt7%knci?)8P-S
zbAHFCX#PkskRbtLZ+-dl<t9y7(xF8W8<5(vGfIxG8i5V)N^N;ApLTUc-heYB$ojsJ
zil<0z<3oCAotUO=MAkYDC*h7=bGK}MfadQ7-GI?tTPZE`JMVP%eYMS7IAIhXr70Y|
zK2nQyR&m<y&8PVfRZ}v-3tjzHG(=LjF1Wt>Ph{guY|+0^+o&H?nQ>jpW+DAp<HLS*
zGsd|WOShxde|zty5-ovfHNHP)Wj1VrNp0^K`cqC$lb3$r7WU3NKHMh|p=%_Am%zpy
zTr2jm-!>B?mK{`O>r;HtFCjlak|w-EajgL9qfq2V2C!|oIL_>ieh+Dpv8?o5Uwn{W
zhN^pnqN|iDLI^+tZI1XO^=bP_I|*nqHa6y6+K#$)fCLNul~qfDD@i`+mDgn!v2v`L
z6%c%|e%@~C>)PGQueA5Xl|5ad5c8o_-}zcuS2*KyqRkMe={Z+w2R$uR=I$|3dUa>n
zD%niip?2q$uBk>#Q$<sqe+=rNDk6HPux2vQ#bD0aM$<DN=`xBfh96|E?mxOW-&4TU
z^s^A$@7=>=Ty)se-z9c3AxSqvCE?B;-!?>a<0RcSgQhj~dSiCaZ>@!~ai9Toz=Q$x
z-<O2Osi)^W&m#^FXnE3KShM@&6U5=<;*t-kuGZrv_Jo>Rgd}a*9D;qd4GmfeXu6ew
z@XueueE<S^@bF<RkOEdma4FGf0ms&ArSYSr`9&HFU+>;uMt`-wy5Hd22cN7|4?A(I
z!%jhQSN9+5po%s%(0qEh@-)TV=Ib~Lty{Ea`1Sj@I%#oFN*?m&@>lG=_IsvQ-j=%B
zx_x}X3tasrv<9C!?G67Jc6GmKQ=#qb#%>!e`np%wZe(X&Zt3C{GT-&>UD?lrvlm;I
z(KVA_qbp(k10~OYrb|VngTo|D)XZE6C=z)}N{5&Xxg|VPAB?WAKtCK^;`Y5c3Us5C
z=X6eGcSX{Zo*Ww@^qe#?V%!F_TE<(3c^!Ep<WBM`xb!B($6r4DI*G(lbGQB-yxW&a
z&|F+(NrHL{4aCzu?~C`fj_pQh`_@3+_kuxtELhI2g-fENqodpgUXUh3Z}qD$y}e0D
z`Or3v*t<zRfhNqFlAhijVyw6Rk6BB&<({CKua6eAv|Y8D`!Vc@B^xl*!g4T!U1ay&
z4=5d20+PQqW(S^ZFOfX=^Juj~pCaB={cDGX`oFbU{?86e>Gq6xhL}{x!qf*3__S>9
z|7jPrjZF6Zw+4Ht|GmkczqD=wvN@z}NeRIG>}P(`oz5Wii;fph{HgRaBe1_^_;FZL
z(#EL~DsVa+f#v%Zakq=`2=EC|NK$GE*4yHP`auNofY-_Tq?h@;{p4-X0YE9(GyOI$
zhrttgSiE>Kw>H$rgyi}69a@zzN};zolAocCCJ?tj5H{od_-Wu(3hgRBr@|Mlw|vg;
z^t`++93*75JUT~z#lJSt>FM0nU`?w}$o)G*Nm1=L3Jq?^wif-YRB?=0Yg(^ZT{0SW
z|LFFsUB02OD@CsEU*Wsp57$(-!k`cJY$0+vY>)P@abCIH;7ej^;+2*+DpEp%16S2N
z%^qG3t=eCyETH;srsljT_`&HRph~19Wi=0lk&kFPADo&P<@QA{av2%R&}av-?I1)i
zcJiCuDB$_r$9_3d6mV%hFYBW=i@tp4mgtSqdd7k)0FeY#hlYk|J@2!85o}?DyWl3)
zAXzGL+wAQ{=m1~dec8ut5ZHAiq^=yy&;&Vw)T!<R2u1|mi1U1Tlfr`h-y4+86CMh6
zcyh9{AAphTUjNf4#W-0CO=r~n33!8mBF%}^k7|#b^P-7O%%oQLk4o(yPE>_$o@4j5
z1^-^*och<5^Ro41R;8?Hsd6RH#8aMSfu-`Ch!$k%K+U!?{OK!GG@O+&Eb=bXW)b?$
z3zlz`c!P3Y4N4^(N8aAv<y}BWSVh!XZQ({oqt$rN9t{ko5!lsJ8nyPk4j{2A4X~kZ
z5z>ROjW~qhvmp}~5Prh$$+Ab7aRwD1b^sCpz&giT$|vGgeSIl<mbVb^<B5d=u~0yH
zGSc5pl8&OcZ{Hf?MxY4GH|pN_^5o)d3|GuU&vnqpNs(_k-`O~HD0my5JpKES81)~g
z#Qv{CVqU1cCey2IKY#kfOa`|0xh~acM_Le%unQGAj(tvcx=RkJrsoU+sKh-%7=blB
zZ;k*J-UWWm$F`uvpR3fss>F}7grHeY0Z55B_*eO|Hat2fi*RO{<Ct3+D!LDyDUh5D
zc$}y9#$ezkqSj|n7sND>0U+&;6xzYs1T8f%S1{%Et9)O*dGq}7`EhnIAhtQbW2rbW
zK*T@dhrP}DWPNGdN@SZYZXda+`6;^6FBUg`7XI^f)TY|TP%ocBtt;CyG$mOUXwl2J
z>CAN4t}HQC(B`W-eqmYW3v<)PyfV?sZIAr}jDqG`mSt#3ipbJKW$ZtfM^$x3T)Vf3
zRo)Mduk`)m(i83evICeNxprmIYAG<yfaed7HJ<r!aXyaa_DPk8mts*>Q@;=IAZ&Bf
zDxy?i*s?jl?*h3cMsG!qj<YQn(6i1#Y*~0^7QL=+x92`kX2{PHqb$f7`Z1-#y5Q1<
zt}a`=pi0Or94`T*A8o5P?R^51L8L@zCj($$`wNP$A$*}#NT=$FC8Ii%hc1zDsr;fX
z7%40)dCwMNBrj(AURRU;P@^}F|0HWgsC8M#DychP7wo3)TsauG?VTHI#dXzn)^*Rg
zkJ;Cs(6^_ntmn(O7Rp^wx~Z~SAo9!2YxWzjcyp(KwU9D$cH!i)<GG!yT87eGPWBhC
zwz5UUzE5H9h?H1)_n4iW3(~A={a{hiwH>~zPD;Sva9;5CDth>zhuH|Jy$ursr~_V#
zcB0TrE|WuXF4w8sNSJ|1s{=457}xDziKrYKF{FWx7labQ0?=Qns=x$RpS;(#nr>2J
ziKKWRJ(}b*5(@IWyZ2LK_M2@RR}Pr&Sor8s2&YtnN{ht*)~G>RZWpJy_)_HwiPp(p
z7kSLDIdxUGH96_l*Z}l&BRBgaXdu*sA1MBOX9blSqCatUrO27_#@2u`pELu(b&h|=
zod0P;c!7fz4oYTrHlS!J9|Q9!J%V|?;QxBc6{9Xo_^VH@4AQ>Bt@qdVk^<7D2xUqM
zGa3RU#ca-F&@pF24EUOMA}aR&7!9k2<s!em5&_=_qQsNZoC@Nh+eAB$9TMw;@6Q&2
zB~k;=7Ktw-BQH+f)i%9Nxq$n*D7GK{_}nK7WoOg@8kkkRU;%wwsAiK%<{VPAaUJ~6
zOGy7|VTPCYFY}c%6&~u}omC*UD4F9ZcY8;D(o>#vMpLUE^Jw00a?lbXePh#qIp<lh
zo^-}hhcxn?dEnsp8>@WUuNQf}C_6GL!Ycn56@&kx@+7cA8nq$oKc%G6^FtAx`SY))
zJmh!>xGGs(G}Ml0{Hwy*Xiqo???B`%wT_)nE0@vR<0&&SX$gsKxn}AZhCrbMR0heB
z?Lk|_N>y(8yGV(ZVl~ubQDo6%&Q$*ztHxLlW~h-fs5~bR$V5-dZ89dn>XQ7|p@D&X
z!@m{b5QO9n|4KCp)1<s3kZY3Z7|bc5+m0*_|2}69^Za6(ahT;P_}8;MwtT(S1~dO7
zbO@7qB4j3-iAL-H_TcGXx3%n~3lg19M-IrxU6!=K1gK1~HlMpFeoAjZG@0`|a|=X0
z%xz(?hdJ6nz!EPpx43KB95Tkk{J*U1Kdp~C$Ptw#gc5<5Ec#2~RO5Lip3#@b!YnkX
zjoZ}BWtkILPs2IpTQRKxZ~Bm%Eh(v#LrF~#3z;kb&g<9|!BMDV>*?(sm9s@b;q$j|
zWOe2%+|)_64i9TvGNv)mMG`U%jrqHbll2noA~;ZYU$~5Z8McG6qB>Ax&6+i|Q_jvW
z8ybA5f(&AQIlr;GHivU)lvm0zElrOb$byoNgc;VsLqA*Fk~rr3%jos`7rdjERr+0)
zBt>G<g#LBE4T$kKke|G&u4KnT?AW#*3-*;GDGk$sRVJ5Lo^WZ=jdAVbKrw_ca0Tl0
zw~^@u5B&9h`)ysTmfCh&<K;$!!oIPo_L}bQiQ2B)I~#w{tRjU|QzM@>y_?tQA!K!Q
zVvVq_Z0QM>0?BzF*GZiG(94p|)x!3pgnjm!*NZpqTC}`@UGB~Py)QF%`tOaTMQ+}y
zn4xujk<+Qi>B_NO7E>1P(@u`nT6$vFAM-2?&U(I;YkBO*ocT-FTDQm+j_xEwyR};}
z30nZ<w+UWc%)bDGgtDZmcOqD!c<rB~vC}V}UY<{8R4emaCy%%MNRmA%8m;IWRO8kq
zJ@H|_@&~k!){*vDVu(>%wTAMTVX%Mk+U4kW4yNdzziP=&+Hx=ED}Dbx_;E3Z_|v8C
z*IFm4TCLgVP5pG34i%?HE6n`Sk{o=gy0l+^`iFicm*>Udg6^%Ppx7QfuS83SeAvCG
z-hDCS?X8Ki^yw|sL@A{^OscpK9z17^O>`^QAaaw@>4;%O`~DsWDpGm;zH<9yAEgY2
z+-@8@wt{E;U8!L3^%8aJxq#ABkd8B@3N26XSWF(N`zn*}x|rEYJkd5Q78Ai*&(!x9
zoS~QUP*F?Ie^Pb(tYh)<)2nzt5+M6!sX<w1YS@J;C4JqgFX>ZP9oz>aNzsr1em6#y
zomY#QeXyA7v>5qXIAu?!w=)Y0bX`8z@+(dCFAXHM>8UoJsf*JifzvmFkC)n0XTR=i
zEuXzq5xjK%8PLRrTjJ+G>r~oGyLY>|d&Q1M#I_B_PAhVq`uWYI1!0mo0hyS{KlM?3
z>e5oT53`*sDk|K5#Pf6#(rGdBY_**8r)7y|K8se1eOI0yR3<TqOwxwfi!Z2A8Yji0
zxU7=1&D8WHx4a|ef$I$FNTTOVDy#fjdws5!hm@Pr#558^GF@#$jCLmmc?=n8sU$Q1
zJX7aZIPFLJy7rx)lVg*{85W}}X`8h>MIBrhkzBwPhj9HA=k?CJ=6tUcbLidD@*<c{
z4+dakKP*MJ|1)XMyF-v+`jq=XFw+K4o}~ABDNn4|2;gob+G{3Klwz4p2DwQ>L4BW3
zJrSR*74Ij7W>UKCJ>PeZr_Z(KoM5MRR^6HAujUv(R**aOWd+u-d{iB?wF2Z?lccL;
z0(MX@RtW>hb_NYdtccwjuNF7&pfFQzmUH4_<MDidG7*eHh?i@W-J?1?ZF(OKo2w`5
z$9CZo=KYXSY!Vm0k5Z;yjN*&xXaz%g*8x5<I4__dlaN)ib+}2@Wop7zFM3PyzyPTk
zx1;!A?L0AZ($n$-DR%z&{5ndRifK4nf^m1>@<Z(NC{ioIQl&>XgX^y$6W%GvY)*{*
zIBaT9YWXMxN^Zezz$V&z^ZRVS)F$c>4e*iSj%Wp!%u`=?t1F!T_5nlDc83r9jQ17B
zW-1X?%5>Mn+Qrj0t8{9oK#TQ)iATN5Z4FGs8G4DvpCPJ}tRKx3dJDZP)6dM^^M#S_
z#@`H|Z}29==o2tt5#k!3TYf&wJ~{H;^6}JA`h8Z5$uE0c+qqiHWFPl0e*7~lz5k7|
z{>i>a!viP_`@Yhjc&=|y{x-bI_S?IR%l=!={t#r6yYpjzk`utnxwklbr;s+!?D<Ph
z^ioao)lu?AFn&3=5s7&4qyFeVH!sNIB%H>5q=+XIoeVLvoNX=;qdV+e@)TsVgh#3J
z({rEYig0^3u)!`=nm;_dvM6fnxlq*71Nz*$6-dE5O2H+d7kYDpmw{|8C-0-def9GE
zrLe7LpXHRm8T7Z$V46bSsf)#~CZ=<~^2qOKL2$>z1c=*{ql@j&!-oYhFRu($TRVSx
zxt<ijh~ALLk~s{Gz_m8c107nYdz)T7dp3)Fm|Q`m3{wy<_&y6I+HQP>!uktrq63+2
zNL4?|vs7)0vv73z*_5O67)IqKm4b;)Cxo@wQ~25(p?^^H*s0I4Nm(UXC%%8!o=21`
zGKBH(pxzHpFCTs0tu!o8_NJjUz^YEZ-$7b&qq(u;@^xQ{bo!q!C+Ot2)_uehR8?I_
zwiX^h03uLv;E(*%JvXU+W@gsYQ<KEh^7|e~BATA;C}TCB9;?5P;!Pf^@J_fh@dff_
z4|mJ~-Gc+HJ^N|BIyq4peS_l2hs$^CC0G;($~H8iqvi}djwj33#B3$tM5Zg6P$Bt-
zqWy8ST@+F22Uu?<pyW)2iS7S5lum6$AtX`Z%=dMrfjp$Ac0&P{L%?*g!<pHsGI@3}
zuAW4(=ue&Os^kb*yS1DYBJd57oi0$&k~LeNBae-!vLzZuH%a;w%!NPzSL=v6MsrkL
zNPmx8{u%ksz#;U5CJ@;Wizrk35RotsftWLw>NxEUBa9-FjkI$g1NJsEwApsY2YE1V
z@mVGWdFb&k5Z3yn7bW*}xxV64alo&mXf%Ae(V;L}gznLcv8kia@hyT9Qsgur&a0O^
zJ9NjQYW3sqbCrI?EhUw(IxB!2na3ibrBZ>KQcP^31a)+Dj<!CI#=#`t1DT+dgK%S_
z3pfGk#gY8<5X#L3Uv{M*WS>Wj4kd*%9dwQGyy>a&+%x^WT%@bnTQI2C1%aIRBk+Xp
z|F{;5m_PkQAP8`P$sA8ITXLMB43e2wfJJ%t2}&-W_!<oUrKy#3>-pgfn~GIHEASR_
z71_qCj~{uxmhzydD*X+mEVLyhBdfx%SJ^rX=tYq}+Jm|?=tf3l<C8%r;I+h1${8pQ
zKQ1L-J+k))-f*PorkDxA#JjE=YB#J9)(SV$dKRM1wz}?SkOy6xt!olr>RFwBzQ^7K
zmUF)+c+E>rirE)JT1ZU~Q#DX82Z_zpR5#V-YcavwceXx%?~9|G+kwx1?&H}A{iDIk
zZ6ppkoP8ZRGBsRSLz<3*^guTcAf-{czhm38xet#wmlvQx=LiGILsi?c@mRLxTT?4y
zt>TYIc$<%9H<!FYn=^-6RUNCWKa4I+VI{zvE1pj`h0oF%YmgHrk%jQ}kx#g&2HEz=
zSbbr20T!%XT(r&JKZOVzb*vKvEAZ_NGVw)f;8-~PNa`z5adG3crbL~vk#Ba&6=a-8
zks-twGKff)(ns8thXJNh3Jg9NpEmyj5yQ{4pqGn_o)81W{8-K4ebAg+M?)W-8z%Tj
z%%7{}`@FR0(lv^z*)DzNbzl2SdAh3{+@<qf`fQINr6XOr59G!DeP>sTxDs;aFj?o&
zPw3b4<@(>b3j4X3-%J~J?;HMPYCkbW^-U|`(_P>-A&&76>h_wO+qMAB;Er{iMH2U}
z*KsyWu$V0s77kPz6C5N1aA&jXG@l)riChG%TnQ-cxA(VX4|kcK9Cm_%^|$j(hXYmy
zN!%a?hux|dNxT%@w8<c?@>RUX=#OOOD%@rRwQ?nhU#0P9nzm4VtDjN14a5&=MDFBY
z5Um~N;VKN|BqAK9rd>!0K!2)3-;sQA3k5^KUCG;b`7Ywkdmaz0bjR1n7zn%SB-W?9
z58ZJ-H{5IUNNJ*N>HX`<ldqL+eta)lN{}vz3_ecbi)!>n3a(vTydy6VU->HNJKxv-
zy{$;``;*z^*O?p)bUGn~%Mu<1CglOhU$tu0r=ahEbw_+Z=;blEHJF;G<&7+LLIIbo
zRV<qvZmq%A4yB$%6g&Ox-P2E?mt<4WWUZ+c`@AGLpEjWZd=IEPl0A@6f_3+%qYQll
z(3eCQ13@y(O_&lJ#0c94thC+U{}rURXwf2P^5sC#1l>oVeteejP{I`y`U-;UI7uWT
zM|Z}4Xtwt`Y|aOr=>NEba3kVn_hC%#;Ii?xDYx!YYCCKa97Ul4p+vJ7Qu8jd*(55O
zk&{za(NJ5<=IiSlvab{mnt>2s=^n0Hn$Ku#>RRkDR2o~*H4m``TAzYm@~>Y|Bq71+
zdGR>=JWtDYcyi5ykEQ5|1Pe>iHa1Vo1MKr~EgzpH`@B3$c1;yomf0d&Sg4K)^7#50
zk<yt2swPgLnpQSuAInqQ{`R7oJR|FtZpz(+EcN7C(|G&TxSKa`;z5?Dw!MEHXR1s9
zk8(gc;abe+FhoQ9#VZN_fkV+~Nv8IGG<9KPVc|hq`52D&N>ohD==d5y@+L7cM@n8=
zTS(SJo2`zinXVLE4BNM4Ka`5Y3S%`sXJMQfFs3fNAHl+LYgQdRCuE<hy?<Jkdald^
z=2LrBo0xJ%7_;6E+!#NHQ{%`c)st@$F@rgty%l0~+>awML<DG9b)%M_L>wUs?(eL1
zC{>bWcC<Dd)8}5AZh-u5fV-s11l<Vo06wf=uphS%3-;hj$x^R3jc?*KwRcXHDNl`K
zK0UgYF=T|pZeiY@yrjA#F{?z==8b7QkwO=M`PR`@KxRgSp|(k|Hrr+u;$CcBDHNZj
zD3goC;X+e;mZA&VY*-tffA1c&_W-Ug!2$_<g8E#w*!eAE$^{qHM`|Y<9bYUQt(_}#
z%UQVd%Pq5ja!s3<tJ=v@N1z|3nqHB6Lkc%<N*P5MnJi^6ZuudH0PsD85F#&WvjOh1
zs5*Afi+YJVD$p%FgO<m4>j8NQq9xMM!ow?9<_2Ax13CG@juNC8Fu6fmT6P^Ll;dcB
zDD_oVonW>n^J(TNZ42Y=gSv1c4SZY}3S7)cgQ-9bS#<^+DYyKHJ#2v}sw~xoI<HcI
z8|Z-$fEdCBYWcVC;9szTVMy@o6D{aQCQ}a1!opAq(S>e`U(mf!KE5_}1IR06-(_v4
zKFHlVzd+M)Cn^0Mi7?aJlm~SN!~{+4Z{5P@ASvOncqt=}l)LISkb`3<0svKq+ZhXM
z?e!<}kTBAMT-1fNa=00=yLdh*IW#QnFl>>}8D3AEDUT@+;!E0zI+x06P@<V0TT;+H
z6CBIY9(OEH-JWPHBw`$4)F8-k6&4}ph<!k<!bBkcbg0S5#1|Q$HjUcCs4yga$Rrk8
z`Krzj*#<F<vz9*&sEo%c&RTo-?j;_41KPz-__p&eKu{nO3-h3tS6Oe4d{t#DU7l+B
zA0G_GWpXm=IHMtc_$*j(stmDFq$Y4l;*-%7_5kFs0rKxM)OvP=7Icpl#Nh~Wh-Q#%
za7#bzoN1T%3uVDCX3TL$4q1Gb()?{lh#A&luS6lqMpHbDs)Wo{Gu{X_`9TXa24M^-
z!UQUfA({$9p+w3o8s|P`%p@vxI?Ut0giXL0n9g|3Lk|kVzG43`h#=ye!deDeDr_)S
z2*wBQut%p8_b2YS9eOu}V?fB6xwJYQ8F${oJTTJ;pnwgK#|EY^?7o@FDohRH_+Mq?
zLmc129cE%5%mFt@hAA?gbPG&>CNRGtE}{-gB+iLA00(5Fd0KAU0Yf0M5`@bnkk3ry
z?~cio$dF+!8^8}32<bCYAU2#V8fI&CJIj+Iw!i_+U}Jg&!WeXIq0TQ=B#{J6AQIaf
z!X}|-roSS9-zzAnyan%67j8yA3#)jU0<*OD7h4bwS$t)9aM_?1a2&sm_OP29`|#Vu
zNunlx1tV2$9s!S-UP$yp!5+w#)Dh-GfFGG_h4-icBP6BEudiCYS|~dd(K$_)!FLo0
zOdRBM&<rxc65!FA&;t~)Y11Y|7s8`#S|nKRs&%T9X)D3(&~v@HUXJ$6C-oZk{#nEa
z$&Ie!pqMNV)T4I56^$XF&M{LnvxEZ0s=Z!_=h{Nk`tYfj{Bb(ZwDHF>1gK*S27^Fn
zOoHFGFb{;fJifcgFM=c(9(=m|mXCrAAiFVRWZyz7!Sw1l!Rd(C5uYQcgUE3+B5gwU
zw%`&Y3i;sPBE;6jkZB9t@tTJrTNiG!pN*JTxV8#gkOcn8;{*8J&`}8^elNTr9$X6#
zb@}5$jLLPwuy%O?F)JYwfMA1?1pnY+a54BE0#GIH3J5~Rb6j1><~1ZGgJ=ezp$xR1
zY1)L4)MpUx6{mCQsx}Gh1d<W^Amy92*bbm51Ub_v2_$#b5aJ??3=Od)p4cP+;S+1g
zJ7xjeLN<fQZ_QX4d}a$6FbQBP!W|P$|8}PxHef&i7NDuK7R3%+)B?~#hDM0Q0YD{9
z8-C$v5=+vvN{FgLn1ZvB5#F$pA(Dt~NFioN!ZhyyG0xuNL#a!G1s25w31UdhXNX}E
z#IlJHlMyxE@)2QW#RHKT1jT7xS#{y{6rxmw5wxU>u+H>Y<{_Nm0A`X5J`mHOdz=hD
zKN#6vH4+%`lGco5-T(@a#XD;maPV)piKh|m+YF{46ds`^!NzAGUj+H4iT~Adbt0=@
zpuhPFT<a!t*Ay1^gD|ADFX6x}vx)C>0C^*@X@bBU{Fd6Cj<|@3|15k1K1w8%K+qH#
zLt%j^7{bQ^-U*WAE8I{!R~Q(IS{}k$9H32;8Db1bYyrqH87Pte94Lr_8PL>!-80N1
z3nWE5SBbVeUMdm)F_GaPcd3M^n9+-0I5FgoG(fA08LTS|KL<%LAzOri1@k6M+3;;A
zA*z5G%5K3!5;9q}1mWH8!h5utV53LbXd_@I5|ZRc+x;32vcpC+RR$rUnuG*nvRs`i
zQ}7TI;v-6wa~OtX&z~R_7&0UQvxSNwF-Lh4NQDwZs^S17gK#khJf7(UU?C(wCI8(G
zLx_Mhi4{>GLO39(YUeEy*9e9&iP0@s6M`!NUzia5DUT1bG|^&90$?YaQ3&NX9p!<V
zB$^&c&ERA{z;%R368Tg~#)o94V9zM6x*}pREq<oLz<ihjcB6TTg0#9|J|QI28Du&h
zth7pX2VgRZ2@!fbY+?vVlaLwB^bHa+BJF?qF^R!LBwRo&gsK`q6-Mw2atv4iUfR!A
zck^cET97y50AsNH&A|jQ6v0((sF)dJ@}t%1?10~4-_R@B_dPZS$%SD*zd{l749pM(
zjS)-5$}n7p$DKGSBgov*3NT}6vXg)v!brI$3G+$V^&rg2NV~y|$UBW#J(h*2Vd|e~
z6wxU$PzW8e)`dHP(IL4|TnR0Meg(|{&#k-aOv6wIbaLPbNxxR!!f++l66pXkcO3|$
zjg6ZVvWAU<zYvrGiwC9kgKQyUW36{AOcUG!C;<zimJ+0X%e0dCI!>-czynYMx^vt~
z;t6wOz)6BofFmXsM&%B6{Y;VI+f|4kh>acX4ubbEF=krdW-Bet1A>hK6p-8lE0b+A
zQ3oKL<`2$c53Y5`kow!<fkvMY%9%`<e`a|@NQ9J4_}d(5b*gB=0KKI2p(Mg0;fYyw
zd;M_};y|b;IQ9_WmBwMQU2O4JK}&>59*LhwiKE5<JW0qjVM0|q*(22n%9?0w;sc6?
zqa#d}cisXBq!C(V4~9u}vtb6wp&tVGFe<2tBt=JHx|Ru!{4>xuN!xsx33Jd?0&^`Q
z0E9iE&i5z?<%+?D@G%sHV5}tIAP5FgHxM3xsfHZTxhbuV2oVs}U?v<1ST`k6><$o=
zBZWjTY%7+-UXB#iLhcZ`1C%!+R3-(Tkk<-F_Bn)53GZymqtWW_Ab8*`WUF@&ZPf{6
zxs3N@JCTg99tccan~$>OCv1zH5?3K1sUz7eq9ZJ2#$l@TaT->_8qhEyE=i1K1B_&d
z7>OzqHD=_Bl#WDI@IC$o@q8pD>U0dcXGqK~Oq$`3FN))HuEMB5CKKq0hG0r4g4V|g
zvOzPrE2N68gdq=so<hNT%GGgf?cAR<&_y;<JTfvg@g>fS4G;w0PdFpg1g!zYG?|b5
zuv|pg97Yz?9Q_HY3X9J)C-LI0*RRjY;IqvsI6nZFeI7t7UPlF67X#mm(0+!q2HikB
z?(DjeX(-HvSa37bJXL1*O>AWfY0L3H5D4v=jtU(?Vg$j43;>VB)rC3}w}TQB(SJqN
zO$MUpvVwzp0++PGGS-uuV1I^en<;IZ4NThf-Z;08>C<0vE8>Ix<aDYy9Y4qi(kgxu
zq}ogkfHVWO%;41U2Pi9Zae!f`Cjy-|4SCR7=m0DIVie*$@IMhlaxLO07)A@?%1+{7
z+QfP(Q7HNoF3;nu)KS6OVQZlxNXrnqA_+p1A~`M;gTTVva-FJ;FtBS7pC))(rP`@|
z3tUGCRSH}v2IG=l12HnKiR6mr!goks1G6mn^A<V)!~n2t6j|0(m?Ej37(C2X3(@-y
zosghC`kiNubGe~xTvtG@JAxyLX)uGtV9*IsrbUdV-1S0F0q?rwp5hB|N!?ALG2<3|
z0$_1`4fKX%;79@R<**eHH*@dyhPg&e2ppxQ@ly<uI3sP>!*Ed77ld51A_^guBwo}+
zOA95sJO=6V>*MYsahc}ila7OiP?ok(Hd%PzRfNgSk@!GJ*nH?Ml_(=L31~wQi`Xer
zIQ#=z#8h-07@SZ%J}4FEm>6V3DD!(1pF*l6;z3V+$U4~2=R^2+=Ap@v|A&WTg>l^r
W=k$(0SNIJ-T08XA(o_yy`u_m>>lXq5

delta 20530
zcmcJ%2_Tm1+BUpat5#`7rijduS&@h`Pf=JEi6v7-WGGbJt3t-~7(%9G$|@Ae7^Tcp
zv?3v8Oo|W^@gLV??fvfk{qOt#@BjVZYi)Vl?)w_f>pYM1IEQ<`tNrCs-7oj0{`fgR
zPx_CCOce8nU2En>XL=T8Wy8cmqaXBhNalw2+r}Ty+Z7{NWvjEs=}Bs!$XPbkxHKK-
zm;Lcw*Ha%m=l#UHZsoQj$(<+PPCwt_TPnO={6*JK&b@orviELf?R;IKU8P;q_B!10
zq>Y!R>|#Ch?!W`3!s|6B=Pt_mi<xz4&qXAZrtcj}XQj+OhTq#IFJLLgB=qr)cH6$P
zg1x*E83**k^(Ssh32>-dCi1U-CZOXZvQt(sw;*b|Of1;ARMc>2+9JHMQJ^H4E7V*<
zYj=WX)iwMSNHB1d8f`i;+N3>d;8)T&YEr1k=uzDrSg1H^@Vwi_gKzX2uBvx!S-Lpj
zN^y7y8;M43i>@zJ<m2NLzViM1`G%0Ks{$&ItCOEnvV3;_u~v5K4QpkeH3Y<P*l9j*
zSh~n4Eh~zvDHRRuwGHfz4cD*K54ftg4)2gT*YB!uP2inx&C9pBw2Ir6JNB=iO}joA
zd^mTaYpqrC-sJ0lTyNh#v4+7%gxW{Dvc0vvTgSsgzB?gH=|Q$%nTc%drW_rc8adVz
zJ#Y43Iy`l@^^IbzqcsyF`J$a-9a>&fprWJ4Ti=-{QgKm!C5ylBldUNN-~9N>P5L*k
z_S$WhcuW3gD;c$y6~SH}ZvGoT{2HWDV-v^Fewy#FHqFslFv(QkIyWv<L!DA5Uw<Bo
z?|G;y&w2FC@b>A6l(GC}8sEQ9eBE=O^{tO|$ENb@`l^=6t9;diG*(6MS{=JA^|K#e
zj>x8Mo0tT`=l_(dygjhpG`{ybQ><NXEzg4oXBBJDoiM*4v`-!)#n&sbCTFvl_gztA
zedY^C%c53}I%jyzR@y}DO{Vtpu4T}n)$P@D5cX~~HJUXrQw$bp&b+d5bA<Q9M;;N!
z;xCyiCR7RpS6uIlxGka>dn143LsR@Sme}j}IhO?TC+kqbpL^$0W?qCB#<0}O*yIME
z{OA+DvaCauH%ZvBEQY0#cVp|rU3zoH`CTu~wkB;jY5pkQF{qDKPJ&96ezjk@Q-3vm
zD8@jy+k$ywmQe#cc^lbsZpSX(a2)I!XcTLjX*qn4KVo&}D%oJuGFRT&GUcGN97eq5
zq8$wrzcq5{4t7P|>n-==xRGUEDQUx+=gP9Q_20HP>1@?cuQ?;dTWj*`(j>EuYc~G9
z@=es%zwZ;-OFs$qKaKtfpnsX9{j_v@rtZ&6_ZUSjTe>Gzbj8v=+P|&-=Scs115y7v
z(yaLT56M?O-(6ZsMy1JHa52)J6@JRCf1PW)CZ*f6FLZu5X+fm=<5iV;-ZZ1Yf%<4S
zna(nA#g*&1et&wIK2*qWF6!#n-hI5AGniX1VVycSXjhe6GFlv*py-i%e(Dt2LDiqT
z`1rJ5ynbEdMGYlXpLq7{*~Qs<%fYb4Z($t|PclnB{>oH;L)>~{e%55|x^?3<{9#`v
z>Ln-J3d*9?IJmh7>n#^#qK}>9;FNRxz3rZ<*s<cs8fHVKr*6%As_&WR9VvDfVHVQA
zbzs|<sGN&_ce9Iw>=V8GuU%W;q%^7Dw0lHM^Ub5voMC&W*{S^eeDZizm8R%=u3b;U
zsCnyipI+~ii?bbWO%q^ZD4U4N`O@XqEG;GV<a0q!(@K?Z`%axYMFhm*&>IlIm0^_m
z{B%Kg)#I7B^%Z_=0xOSqoq4wI;`f(HgOA6&B?nw%H(Y%8i@Uq~nOec<Gu>y~TVB1Y
zT)}4k<OC$xNja5-I$!MLY>1N&W7&Ra<Lp)H+e)8r&v;yC2cjqYcot)hIzNuOFj{oA
zhD<`uS5x<GYMK1~{l8UH^I8kli{E%kXC99Ux{f`bnaDKs4)Q3U>t4Hly=z~nyz5N2
zN8XwDs*jv|nk*LvEM>gEyBqA8GFh0iT#U+VR*rjhmpaT3<uVc{J9%1A{^N98)={m>
zQm@HxpX^oiDlHeMEZqj84l`wDW?KFDK1HS)cz=~=FxEcteYMJh^tyHH)^6C~*0{6%
z%r2gVFIS7cf4m#$`1<}OvgDQAo`1y3+A|gP25tYAv-n+7qI}+!kKATj<SIz>Tf^o`
zRd4Y)gQpK{+f+DOJW@D27-#z6_zD`QQ{knZ4sB=Z#S6atWo+ouVH-VOYv>bRqrrCU
zx#fJN<$Y?=NBL{=hL-N`#-;?t*%~e7%P@+XBP?3#{j2O6Z&n`d`F=<=eSch)c1FDG
zYL+~^#@kt0q1t+SYxHi2B_}6e(pKWOr=~x3MCuBz9}su;TEn6;TWffv@C@&kEn9G4
z8)J8$6^)ZS-3#3lmbozPC@S&zt5MmvO37U7>h%_011!^HJ<X9K#z)G1_Rw7Vs>Z+d
zg)x(@`KeyYcWBQ&J96mU=QkQQzyJQnn>S`e^Z(ojlj7esRyz6Z#Z~3!Ev}RY-|WT2
zKxSdr((m8DzkXo7^6udryHtIlXHWGLm11k2Jo)MI<HwQpwuf>o8nxYqngk~rWShUV
zg!x2HHmf8Jzs#VYUntHmeyef1zExjUC|3?1e|Yj`;YfA~yLeKw?3;SYa($bRe`S8^
zDNk}OYJeUah(;ZMs5n+iMXZr5y*`pto>+sEpPiu=J?QJy`6Hl)A=j}(#>~v@NS@ug
z(I!mS{A`0tL(BR0lD8TT4%<DtTvpN^UznL7=Tgl>#RtuemV_lI^ZH-CS~Q#<cjVy-
z##nv-yr$j3E7q`{`JCS_qomaE<%^U<+r9VK6i2rj85=*NrayNM4-Y5j<b+YP(UeuH
zr;-6hsSv=kHYKtu#7N|ueV94v+w!psJ#)L_Um7Teb~=|Qa5|UL6-6gP=)s8=zH5i9
zt@#(fY*>6Uq_XJcR5ZZKrxz_T@bINU%5lI+{P~ZW>TjnX6^su^QnA`%tbN}{a;PEa
zg+b>UyFB%qH*bC$q89A=sJQ~FK0|p*<c653s?DoEe^V!ixI1C6ZhKDupLes5H^nO`
zjX!5jeR-0Is%rDxs7Lt-m!?ECe}aK=qiYe@u={2XMf{|>?{0irsF+fu$X}$$0_tJ>
zp3Xgldq@AlODIKLW_IxaBf(Xib60|Prpaw{iN4W`UsHGn8h`injLAsyxd{<USye2*
z_NvT#?sch`Y+rSleameP^@&-fjD&NWd%m|7+{wwwFcFoe7A|UTXAM^R@%3d42XIel
z+%ul`rn6I87F%RLU43oKUw{22b@rnP)?UnHl&M}xkcD>flQmDu@u`omB2>z^pC&}d
zFIGA{R{CZv@5<=<fdFjR=2OjpD}JsQz6R}J4XZZIwPC1s=zSg-@A1})t1e!_ZC9i^
z-_s8Jq{ieO^73xm^6Z;6AtM{HV1BJggN)h%*P7Q6^#i-uJ?wXQ*b8`MRDhIeMr=*y
zq|7CZ5B^QWUWu^=yDZEO$zsFm>iwawUcS5%%eegK2S-AJ{*{u21jK@bHQ>h*L9^Zg
zj&?^%R#Qe+Q&zVB3y#3(SZ@vEfUCkkXc^zI`^_tu(#=ED)k73g#|r4|aOXeh;Xe;!
zi8G22W=MmSip;CJGwonrec2_Ws_N=*J*TFoh^(mpT2@>zqyKSdPW=zif`4TNgoV)l
z-1J}a3+jJ@skj(iFPjc^{M=;BXy9aLC8t)Sz2f^D`Igo<>uNP`vf7?B@GBKE9I9e9
zQ=}%Z*XBxf>I>D5uzWw^+^y@8n6xG$LdRBShn<n{-sF;~{oM>V^BPlCErfeIbRC>8
z4{9`~F7c*J<)4Ms6Gz+jyHB$y#H$WP%zvmgU<x(8DdYW6>Hdv2WsBc#mDq}pm<6Zi
znQmSacVzAfvpbvT<KvQ9;#uzNC*1tZ6)Euz7sKX~KBWHiHNW6Xe~N?GZQ16LO~oCB
zPU41-9=0A`Vs@#bl?uE;{lN^In-#9Q$@22E6nED8h3-fXa_o7%-*vpx^v3?5Ltl8Q
zWOaMnj7&J5lDvNG(Pa&eThclnL%ZM1t+tWj&0!WgX>m~^*m&MNxx{a--N|O|vL<CD
zp#7KN2Zzt8ISP6~?VEPXKX`mV>lnN14k&$*`Ff5Eu!EI-qalN%A^jvGA_3A8=p+Qt
zqapnGr`7|4M0L}c23$Ejv|xKSFaBR`kNSTyzW7ysO0&!QJCB|ij@SS50c}v9Y1@mU
zOurk&0^6I`)v^Wq2JRLOKYM*l{6I~=$fgK^h*F`oI{q)BhXN|3biyrl8ymtuolbi!
zS>L-Ur|xCZ<7gW<+1gP)E&k|wnn4Eb0e`esJ)=&>ORkU-*_$P@;RIs~0k;1P_sGuZ
z`&@!t5(63#TMmTVuN#mVy#~@yd#kLBJ7QawD7E_E5aitwh=+!3DKfvt&#=oXXw%B%
z10QT&z8Q0&^yF8l-juYct#gz0^;_nrx=hs~r$$oXTiSAs_1W5%9>U$--R>TbCY~3w
zem82gF)9_J@pc}$<?SH9!s1oCj>DKuZm16NAfN@N@yxuAHXU`;Zzh}Uvila!#(gl4
zNml6JX{Ehtt&Hwv%WV^S8tap<XQT`;oM+xBB)dbrG{!^Te$^$XTSt8LAH|;O7IO95
zR6BiWBDQjeP)Wy;rGZmVRVpy9_WruAji&3TUSSg?MYDcr!}NW%##R9%G1Zv03?odw
z4BIw&?I%&`RvOiR*iVF2+_JWJ)78kD9TEE%0z$Jobsnkp<?di8CP=`@m}&R3u&Slv
zh|kw;S>E&JmRiDIMgm^HCGWkY9c1!r@lnO$zTcL@IODS$4br7Ms;8%&R`2C)H?Wu1
z5n8LDEOIk9V)%mVmd{qqYh-wNmx7yD;!T0qO{p4%MhDZm$2k+~%Yv+A>u*R3FteVp
zys$w$Fxd2gn3_;YO!}y>*Sk3JO%q-fgTbaPT+4X(2j@M^Ia<FbYsJLu^(x!?+Vovc
zR(-0Qjl26{^&4q@zllD((ma}+=FQXmSm{Zg<P@_)UnE1k+=XS%rxTwDX2@@3CyQ_m
z52oByeQj7J?O#<Wd3$RxWp1jyp5##G$<jDqU?V#u;cVwp7FKqAORR~uMvQ60MAVwv
znW=;K>aVY!{jJvSM$W0h12RL|HY|(c4fh=fM16SkVxsPDq*>qJBmaEmV!K`9+qcap
z7Ke(s7n<Gns5d1l(x}<H#<8ysTp?Z}zO<K$*R~2b@#kM1AtJ-2uPqa`4}Qi&d46@$
z>|pR(mU{CaB`;@R2+GDL{%KWF$WB{GW;*tGWntgbE%Req9^)lRUg4aJ?#fh|<7WDf
zToE5CT+Ye%_A~VPv7+JK%EjiRvl$M#Vlfug&)=}y{r)SngSA-9!Rp1iXy^BH6ji{!
zQh9m|MDS|KE^ZQH-9405(akYD-RV4ZZ0tN68FgX=@vB0}bl1kDx#?hm<5iOd3C&02
zgwF`*4I1>%Qf9h*b{7Yac6y$i*;w6|q4Gln>_C{lp5xCM85MkUpILg_GOJa}%=k>`
zf2{Z;Xk}u@v&Naz_7|v`jkNTJUCL8Ub`lDY6Sa@+4{=`XvHy}Cmo)fnaaw7{`;@dD
zSHw$0m4r@2PI?kWz6dZ}w{<=`-S?oHJLS=%8)<sct*>7bn%}%<hO6D&Z5@k4d$wRw
zbKddF)qMZ=8~e#~85vg*0VaA<y$s4<E^XKtR!uaW!vO*J`u7=~(-WWcelb65;XgTO
zc)OQcpd=>~skb$GlI!j}FG|f#Z<xg2=Vw1RyHsD<Vj|XP(7Pcz)oY^Cd;Xp`PxVIx
z!hN6eng_=g7seDKFN{5o-kx1}S^VguFCS9ENT8Q@@}*E!7*F#Mr97ihTvC!*IB?_W
zhtHqsQJrfg%i;UB^{m|9Uk{Q1O78R<b+YKbDo*GAHx4-iEm}Nj<`N_hkYR=6=Bn_2
z<gKpkqruEF^62aM>{!0bHgZr(rA5&}hNXFdHU4ZfE=o?N<C=+HgB)c)K0C|4S@<zm
zg!qdh0oZH>TiKK7vaf>Kr4zacub<7&PAY&+dLcOw@UWmD?{uf!+u0_MT!diYLc5*H
zX6?$p_(^_Alk^VUo>Ll*!0o`n!-uP>g(1qd{g?-%Ki$Z!4<e}GoxgXQhn5+kD(W<s
z6TK^3Qswo&%7-TFXzL_L`;JgWiZ9dm_YtZu-|fy^;xT5Invr-u=*QfQtZm(<wj9gm
z?^7cj@=jcF^3Fm;GGAV(ZD5>zy20lOiK$a{B0N84X1p$^R7fy{i1nUjc_Koy2VRqQ
zqIS)Rjo-%m=to;mBHoJTH*<jk4#!QDCR=~f%FVQ<{s>~|JFf2Y=22MR*{N5D-4=h$
zOb#1THxa8Iw^KiV;R5*JJ&VUTX@gA(di}&A<a;j4B1BXA`a;bdaq$0gPcZCSduJd&
zpX;i$aApz3<yFnE1lCTw9T}a!JbBZoR>8uqimmL+itNJP)y2id)SVg|8Mt7l@*n4n
zGB>5{+_B@!qk_kwC1YiAY!;rEJWBhvsLRBzMOJ|XKqjJoWc++$<-QtuRm{VUY?-^x
z4tid*X}LFU@^$T|K%ksb`L!aqp$S^pMPK_Q?;An?Wkh!CI8_<Ma&cJCvbR-FGA%vb
zzsA%)q4M&IHHFh}9FTaiLoh<3as=&!4jSzz_F>iXX<YqH$&B%MLA||;0F`%<m8J9C
zdM48ym^r)r``z;6?<@RFo*$RaE?+oLv{x=pFs_j(hD(bE+rjab)R&dWv=H5<M2|mU
zZ?~lOAnfLgYYcC+D?$)k_~CXi;cJ;f$Sq;Md*kX(-wZexXKQ5x%{@QbWS5+hXr~H7
zjXF3)SlN?GPOWE~HwX&iEN|EBf7sEdz}mC8FvB6v9p={KJtN)PTN&)tPt)@JKAa&f
zOEN;e<GWaDZNi6=C@QgqRnnq?KTN3t7!w-nf<y;XSaqQJh0pl}qD`(Kb9MF0N_#me
z`%~g!<@cj`PJep;IrwAXyk&G#f2-_fU~%+pOBFYhv~|Z(p~?3Hc`=IlH|Pk*+&SG6
zpE=O_l5^KVroiPm3%P1hn)aFL4tshKpVb>cK_?5<pOkx_;H`I_=b(J%+#KhU>b2XR
z2Q(y@)n|>>x^DYrrSAN|7EXq~s&?hl0GB{|noyx=IrO>ewyBQtq?X&ZD65ugp1#a!
zpKCU1oyrDt->f6+z7*XZ%>7++3mu3jh)OQ!`Tipo>VNTjoaDqxOV6OY6y>p-r`Sg5
zrSVSvJE51<77qkwzx}0a{N4J6nUoTC6^Sa9V-W)%dlJB!;IQI}5&7N4Lu``whSU}v
zWGxqU*vR+QT=#uJ)a;WnDe<LDsBjL+`DH#R^PgLEl0Is|(f=UJTWLX+C#+ypkWscN
zRz9%6R+t)pG%Lc|a7T^M7Xu%XN^Ci5_t*Fhj<cm>y&PoHnz+ONb3v8xf8<&bH>SNj
z2?8iHjdcF{s&0<PZjRdS%rl^qEfMDvHah_dO#Y2TW@N0C<zKZ7D$KHP<M01bGhmeE
zKW-Pp!T5Itq3Q%m3J0z1LTv0p?CfgZBRowleoo`BqX*aYAe)pC{*AI5_(klC=cXj0
z!C#R#bS(-gfzG(fAm*=bSatc2BVwpath)Tu(o9Q5ivI|V|DGPD3MteqLTC*kEe&fG
z3YRJ-{MK3$(S6$go!m0@e=bW+6zBlreb!)zP~CtPvAsIqJ~37`^?vnLF!oGWY!k^O
z#3Fpc5y-K=c(E~!GGbt)G4mpzO08pAy+Yl<&QJB{e_n~Ix5X7iE`MJkI`n@wolZgB
z3)XSU-M4!7>$QG+l{u1u-is)S2}wuxJ#(M(h<ikG5GmwKvC>Ex!sYBYHfBZ!XZMob
z1;g$lp;eYYJ{~^l;9&i5DDlEI@?C@MiD%E;TT;wI!sO$~NMF=p3#&6{t_NYpGdtuQ
zU+<-k9or&n*RVB8mzQrsGYCU%Le{RjplnK<B(J-Q+!T;njFCINncOvjgw+cqoBP64
z42~Y<l<zw83)o!m{A9D1y3IW=@D7DD?|!Owz!XT0!`<-lIj0gU{qp76hDoHQuOOF$
zH6U+oemPd!NG^^dxczhm+n0A&Hn;*y$MbW%L*Ku*k|_P6dac@j9cSTG+fkCij}Y2_
zyf$3$;&fh;;L>7uW2*9O94Im;Cs5G1N~<6E*5py9)=!*$w8eQ5yQ<_Ej{0cHA#fVO
ziG;C>SIs4=AAE=Rt=rjd{;V!)yB7u6E}U#ql$Omd8r&RIiGm%chkZ|(_op}c!QCYu
zd0-^#?N6Ktz&xS|?&hXHTeoK)`#L>MQjf`Stl#J6h}j}%{j#&OKKob+SXLU6W^bTg
zgl*t%l026}NdiyhI<!j=pC6^mRYz{1aL1W5&`vKm;&PXJ4BfT-A&P9T%KS5x{zzkk
z_a}Dl+&PYIMW`k}xw+HfjK{Ugtb(_7Nk2N0TweWln5LT+qv#=FIp52MtmpfZo*xpl
z&z%L6&WqE|U%!4m1Il`aB<<~+xz*pU`uzDb(I<~Fi`~0-lcXQ@<HrxKx<{uw*}1p`
zT6=n$t3o-UM1;OhPoGPq7QB#qRftJU<i-O)g&JhWz2L$=eE4t+_pn)Bq-7l~Fp`MQ
z{4g?Nja=5Jj=ZZ#;gU?X#ra{uu7n_zX-J0oMN7**L&FV{W#9OY7C3=k${HapNg;tA
z$|>L4(V_EzM3`^s4nXz71;x{+Pd6m)i6i`k>u$Y7NeE$WWIn8Gup#zY%j*&kNkipX
z0iGWpv^Yf8s@)JjS_Q>yN}8`tx(|zSdOUS#v}lOCNnwcVkyCda!iJNhk7q1c#m#(c
zoa^5{z5szyym5^(F1_ji1<0m!exjZvbwk>EdJHp7j!*R07AoSpevH(m^mL(ykmC<(
zNY)xch*fYCN}2ll^?;?Nq0N%MBN-YaW4oGm>C(@S96Kr!_gv7<c&QG#0aERe;w70?
zY~6PL+xU(hJEV5)($><VR_@=wUq4pHkL2Z#K612bPTYfhC_!Y%m1#DiXLd_?t-vcs
z=ss6i(vMH}q^j)v@Fzx^+6iZ8;fd*j@-4D`M`AhHj=3`u*<5Rb4hA&DNMC8$%*okN
z<R;8gd7P#=T6m?|XFBiVj}c4zx20YnvD~zt^fIbU8N)LR8wfB3SH>uN@4j;7O8=yn
zX6NGz@~FhbaDW#g=lpf}rL-(xp!#JSnc8>nwx+CGzg|X4YOk8wFSLaPpUYcsq4*Ir
z-dAmW^k_ZQn)dYRJ`|LQGzbmCL&z})e4UwLUj8#iH3{KSNkshuw@`OJjE<%s5zGDk
z=`t)tMs7c96whL@5Iz~X=L*TI`%B#1*&=qxrLW@1+G{x{WM)>v+oApPwpe54_4fYZ
zuGgv#_S`b2tafp=0$z_*c|K<y9d4R*vvQTm)c3E_58AlRy&yMJai80xSd*HOe#N6F
zKkt80dM9=hpQ{uOgA$ZM-uhZQiW>nB^Yh0ql+Rq?S|i){I~4bbSd~adysE&eWkitB
zHoo%xuwoEP%|ElU1WB-hC9^CU_QZ{XQa_XctiOL94mtPk$<IRiF;7nH*|R6rNCa$<
zmT8<pX3`Xmt_M^Y8yl;o9@w@qlR_0NRcfusrq$}{1_^b4Wg2s2!ZehW^!M*y$3pM}
zMHW;nQ7qhx;!=e#gRfOU$d)y%V!tC4;nIaCfS{JgZ}l4uRr=C+!Sh}1q2kFE>(gJ%
z3aFgVjZn9~k*?1pzTsY4e%N7_4^F1_#ch1UjyI|*gxZw9EbpdPSmeCcbI{wKaAn>c
z36=U^dioZGcZ>Yw{aIXT_JdjChla`Beok`PN9!ZRv%a!!gxWbc@FO0s8NUgyKzsB^
z?phm>p1X&KteHf#^_zz$xvrJ)Pjqhb=bf7wvrly`(oe;fT44`&va-^$v#+(B8||t^
zSXa@OMI8lr5@n@zCG5E{4QpzC?|$|y<H-{zw)T#qVS)zbG7)vzcI?<O_05|%2awtz
zq<e1c?S52@AYaFxvV_Jsd1EnF+JnA$w<g|*+A~tf$)g&{$;iRki+rI$qItWnXVdB%
z^1>XMFS-pR98;x#vze=M3J-SdY07n6eZseC?&RlD{-e?M#uqMq%4HF&`zchXSh2n3
z?cuEv3|<LRI+ML_Xh;}Z-7Vf#evZGBZAUoYzS|P}ESH)LO4DBy1%CG1{juVD3X+Kb
z&8kGXILh3&5ES*HiUZ%HMG7CJc1+weI6Ns|kl@p^`NG>PHMKT?BjT2tnhfk3VxC_5
zWu@nET6DnjeNVI@2Ld8jIM~@yqb8M1(7k;drCNb<s2}U!+!3foieh)~Qo&x6gN(tI
z0fmaye*(d?vn2)_<Fv$B`HjR_1OIAkbH#*A%YP;Xc$Bzs7KC*4M}sUpIe{|g`^K%T
z!4FQo5+%ulH*em27#ky6*$^vxm6Q)*Gh{I_9Q!tI46eNMZ~PIxE{w9&zx2GIq|y+w
zTGm=X7IhZ2^^(!`ysreC7!G`JOp9CFadEr2xQ<b1=nnhvy_cHyi$DBJ(A33AyX=U7
z{$B@a_pV%YzN9K-m>eSzOOl#0zGX^UoBVac=Z#L;-LP@q{@L4<HN*3_#HP=W1>)j#
z&ao+MM#|NF^X{eGt2WASF!GkJ1ZduBH1A}diFi=9g(3-DgH#jIgM=6xJT%R-BZ0n!
z&#W!0gn7+4si)F#(M3#o`a#%u;!NpPfB#<>K7=g<kiz9`GnI&PD3}GKLM%Z!V*>?0
zIKb9duQY7nwFm@;RcFH4+JIA_GibdXz*v2?-!fo7@2X{X#!c}$8gP?z>|Oa14jJXl
zla7u8QM%ywT){wF)ZPtHmdrE>3W8~&K?$HryLof7kYQp2VD|b0L4>96{n%W|x4?g=
zq!iEmyHrw!WPAN|!|~i$3$u3Rr|Eu&?;k%Hgbt(DhP$h~H?3w^<@K1a{QA3SrcDZk
zeBRv&?rcm4KBYWP^DF!7xQxiQFMq20J6a2iA1yKUbn?HS6Vdjz)`m?OR;8xC{&X94
z&(!g4X>7EmPb?|YE0K-}8)SmGf=TWm$NRIx#X;Gm_hSpAV*%BD=I4jgy1Zw)0k!G|
zaxiB1-TRf3gt^0vw`~f5jv76<FyjP13)SW_VE6y4y`AtIJID^8`l7wP8tSMJ1Ih*k
zB~IvN24!fUiim~)5oiY=cbIG|{1i9_F&ospWsQ`$Q7#PuXaUbjOlTO-oV=>`lZ?c%
zHvLsQ1b;0mx82^|;a2O5astDpeVRI7)@b--*6?ncaDS+@&v{vejeoiy+vMorTHY7y
zHU(d=m1EBCRL{Q7*YQ?YIgg5|vXSQu4ydtexVbYJ?I%hVBzFg8P+$eyOPcQ&Rwpe6
z56n;iCCP;jw3A@tC`3!Qk~|bxImgMyn>zzaX>dC5${@IbsPd!atp;^{fc?XctF__3
ziJ)gEhh$H-3XsAJymrtY>cX^?&%9@al+8nM7*yz=JP%}!-E%=MMKD6AAq12K#80ad
zBm@d$vME@@!t?zKA%plD@HvhwKok`0*I$2)*>RGIg+N1Bq08Sw;*H(fvQlGf|8KRs
z*9*n^mZ>tX3fvUDQAn+#c)8WG)fyJY+YW3KptJ>Mf3phGs6U*$tCCkxrqL!s<+%08
zx$w^~3dQzcc2e*EVxaQF9gcSR)2IHjxzWDvF(3KrUVI{46er|X#bJM@6nnf{Q=4rr
z5z#zE(nny|g^FlmNV{E75RKr%mw}l*6E22<SqOoO#_7}IR_wXXJ<8Pi^XEwv!*XHz
zlNDT4$RW|F*AOv+MA$DlJcmfEJ}3~Wc$bvKft;LjaOeOD0(TNIPTvT^?%4S#6e<MH
z1I`>0sV~HE`Hzz?(_6r65ky4@8zM5>L+CHy0oh4sWfy}#Owwcft3JCA#Ze~>SU)&4
zKkfHRRlRlK)<%EdRBhW^Y55UlgJPK%g|iYg!iWCaw<@$&*{rjqR-$Qdc0$wfa1E=P
zah;aP1pWFqXWi|a-UsPxzYY!H+6QhhMlH@2jaPBf6P3t6oji4__XJ@u2&Ax&Z|_#B
zXtVnVgxErz9lMLEC@kIEdk=b6_*N|wCDMRhtdzBH;sQbSgtG~Z;Rp>4)sK@4)keDn
z_-Ac|u<RQs1iDGI;c8RF%^n6I?<wujCWhL-7pm!j%lGYdbCU(@=O=6s7TWseP2GuL
zR`KJ|571a>UuS{yP$iosC9qZvPHP`RQ442qS)_VC!8K=!4M}|L*Xo%Q9SJ(1Z(HQ)
zCCj_w4bS7NH=bACJ92|J;+VeiOazDx>*`r0tI5iHC)QuOo?dDCrafyQv2EGxMeV-a
z0UKkkg8MGKp_xt-9d<?mH7%zc9s5aZ1^RVZ3%Xp_j9na}6pQ-9^`vBxb@4(sTH)ft
zT%ftvKoqFQFSG{|h#tgDE1qszy@DvYto{0x5!wPLoSX>zLN)>IS*xC14?+|~C`je;
z5INWud4l%5&t<SV$?(Aug6EJ9O<Uj&F%se_PY_{(_YtCK{PE+*jc9<A{MXhFw~MR4
zPOS^qPSbWh;dhb8yK=V-NbUCPV<Ra?qIp>+{J|q2#s7BxW|B1V^xV+m_VUG+6}fhu
z`2%TM*SB6n(&*D7;x95!zk4?rKA)SKcfl!UW@Xu;AEos3X=k;5o9N~tMg>+<<ba94
zYnOKF+J#{0d5f-4M7%aMqAwrqcK_bXO8sv(vx1&nWghZft&^sDP2fMe8NK?Boq4)K
z%)IbAI*B6M+74M<9M@Qn9KpoGOnDMXPS+gS;WnrbTt^^$HMWI%{TevLDUSA$gQrfM
zc!&PBT_xu}_xiC}+{(|7A{p))6dPhyDCNnaW_wtE0Bi!rI(RRyNmaeSQ36j&-$YxM
zafX3yN3QMv$AlpAHv#|udnPMMD%us5BpiYVaBeH#L>w!M<*9WEE>$E)X_E4vwQlyW
zv!X~&khJjH&_8%tFGnAZ?b1a?1sRgO3#bWX`7c{7NT-EDW()^XN!GMjUOwUI|7;?X
z_fki@0VB=Q$_@dj(H>YfkkKfU@~x@mV-1Gd!z^l$IowFI#B9#1?fe7c+5eM-n^B-V
zv#gr>Tdw~l8(K+Hq5sT=lKMI`A_H~$2U2eb*9jp#1>k2a7<MULS<XQrT}O*BO+Ii7
zg}R8}z?|$fH!eqIK=ks~C#1W2-^K%0^h_xvp?-PmR{TrPRsN&Py0+muKf0{7&jzBO
zsD1zud(CSkl1OvX`hTp6gk<zatAAS+mRG1qv5>xorA8}y8$h~===;%t8fVQSbIpF6
zLlV&nv9H?Ot?jTR`ihqC`-8L?A*!h$Syp<#5g*7h!fTRa1!MjL$yECP)+#*wukxui
zoJ|cRr71)~&ZXo3l4-3uC@qV_>hHJ5!M8AMr1fkj1iSC|hL9^{4u6<S?Q<fTmDYA#
zA*3OTm#=)!&wQ>Gu^i<(<nQsNs2hFw`0@75n58T6o-XSBsW#-~`6dPlm$kPSW_g)m
znDK^+<=}HgO_+8?hD>`+<M3g&goFeW_jBiPpI_+%Xs1HqPmHr!(z4fX#JcRFPoP95
z`1Hx<Awn5^WUp@sc}D);u_&Xzc>JfIc%^jI_nGu?clm$!ZlB?ylvReJ<qn^Ilb*4;
z)8ypo?oESLa<7H-IjsAr^5hD4x3$$zIIXv?U&g$0wCPOAd+~kFA<{3TyMH&zm!hHO
z(CxQkOB@@cL&T|<>4Cy>I&N0kO*2zNZhiHO^<$JllR|B+#><&L-n7V(jDxyGB6seo
z+v=u88r3xp%nl_D6%8d??<A<$tg@(7uscd5D(X(8k<)rvU6FRK5M8EplW-{`oeI5L
z`LgkKi9X*?k|HSij`;ogp5+9QB9fmoFCW@7W))HRT#$jZL@NInHgt;^e9pZCowJos
zudJLU-J2zErzGBfO_z5OPf+p-H>AG5oQEHO_Y2RrpGa>cmXzJ3r98nHv8$5%=+`t!
zdIPH!yJxlH+oy9qi#|SRc#PHJ@s1>|(QZQqBu0BXKPW$WX~V@odcJ4%9B2O(413|4
zr1!9%c_?b2lPGqMH!sdNH*or2B8|Qmr|wz~L_Da}(W4Lex!q@7)T=x5-*XmsQxn3J
z>db5Fum=wxK9Bm|HKbe(R_ZlBUL8Awe&+Gd&QzSr;-t!u_t*s<QWlR$nx|*yL?Se*
zG^uaZDox=2o^zc&O-OQ{Y8%;^<F(HDLT6{;nfJ?*zC9P#uFyPI>PaJ=pBsF>T)8+N
zY}x;zB_*T`J;LJ!=%RF|7H6ntQr%p@f^ItdOvaI>MAB&32b6bblQ4fr8jNS-%4a!A
zpY{FHQhkr%RzU=78^T<WH&__wS)^gRi>VPD)ehA6(4KGWxIN$fOp@KG&oyd#V^SNr
zxbc$mxsv&Y=J~Zrb6rEP?;yUI$o6;~9Om;iMNC|LJQ}^FrHentGLBkU4D$2Lt{U^1
zDVd!gQfW?BySi;a*Szq|rNtjTivw^(?@-ddZGJ(Au&j<e`wdw;+eQ}V#)fKW6hFBy
zR~cF56c8nz?K%~@CMM}7ZMR(&MAIT0Wm6(^MWY1nMe8!{Uiu-|iwIQd+q)~~+YMEI
z?C8#!ugkfWdr;KbtN!S>zcQ37$tKh`?0K$9GUWqV&feSCtXV_+dmm9m>Z=x|K0~_S
zNuui_)ytgpZqJz4hTz~}ca{0~8x&moSCNj`4+|f27J{tUNzXR207t()Q<+!u8IJY|
zR9Wa#Aw<`G45#chQ_{0v<nW*QRU;NNyAjhp1>M<&F-Fc#e=<eNQ;msqij#Dy$M>%%
zap4NdH5c|>Q;aG09Ot7l3=(?L;@)+x^K_R>^%lpDT)$D&)5Rnu-Ozn5v)lXo4%~8_
z%vT-8WAEh^3(a<&=+{98DX<O<wP@z;1qH7OfvlY*)msc7@AmO8ksHy`Bz_`IA}MHV
zm0kM_F`o>>q(Nv&gPkl%1Dj|*lcK)#21~k*b}889aVVbq^gEPRKS9CGAJF#F%zCIP
zfpGp7Orzj2%H`4HEpHqxag3aRfEA?jsjDagNm`jV$O#nm_$cb>>2*<yKO(0(aFlly
zs0Ag?v|L8f!+?_9VoecSH50ijb>}nPMH6&AKE0OCP8*}3H10W`mD>xAaxM;RA70O`
zRHHfnK})5#XW?^?XJ_YI%^C8F!n3OzCP`r=^jqEGvI@?gZ<=KbQ#q5ba(tplR-E*I
zID3yA4e{v}_PK17UF9fejiy}3zgkkXX3<JqkMN1?fUvq3$!hwftVGD68#UDAGT6XD
zl>hy+s~nK+H9B!rJQspK=kaGe3)g`WZtp8r6hn-YDLg*{G9eqcZ(po5g$?500U7%`
zdluv*OTR25wuk6P2~Ys;+4G(tC(1|U+=d7dC-;-TPyJ=grQ~_tiv5E@JhhAdf<=U(
zaxI!}c3qejQ~CCEgC~xXU0hOf5^p<%Ve4)%V1xKwPtj3Ajygr{>iY5i2t#si*LYN#
z$mR22x21s85zJ#{Wu-q%?tqk`3SLNrkp2x)dN3wBA#9kK>Ua&c1d3*mW;|@tre`Y)
zM3=ME6dCY0)~V1IWQfN3FE0F;|7y6nBWq{2-<6dcTDx($=9!0qEAA^daNF=J&vi7r
z5^#ax$QJ*Y?wlo%*!-ib`GE!5ZJ==CyWxx^yRRsIkq#H#A{s2<834i)Rj1ea4s29+
zZ!aH7l0wx;z9WA3*&u$cYhS*%mnWi#^Ky%dPdsKOZ(_K1o-P=_!ZZH|4rv0QE&T>N
z(z?d={^?2{o5%iE?`T@w@0%3IQlZD}WLN~c$poBY@m>X@XzQ`JkKK_^9;_8k>QB5d
z`ksIiRpLI(ltcX(=_o$Cy&GOg!DoKg2Bj}QbwhKCfXdFE&p1zHwd|Q}kR=C8vX2NE
z&wTxGklW{*)o9tAQ!zQ94=;F;kZp97>%$3?gls0%#SIYf_FI*FE;@~he_6TyOn(jI
zXz8SZCerQ$<b5C5-wU%8^CAJ#`~I-)NN`<bol=xh-PBINUZzR-{msBUbwLLHC;@j-
zodY_m9=*>Q5<Pnve8$-*n!_+`xyxtnvw5I^JDa414L|pVPtrbp@;+DEACI05u|PR=
zlH}uvD<Nx|I%00#kItq6NO9|AQ<93I2qj<F+DbxHd*l&9fJ{}Wog6VU>m4l_8-$q?
z3&%OgzQI}LoPTwf-TxAD4K6?!Zm)jE^wIJ~9|?=n8chNdBw+DErHzLuqU(6ChQ)Z$
zVX0!&7CXwk6;c18OS}_UL25t`z30wd<DpcVK42O+&pi*@*t>x+1Octsci{|)l&}oD
zhlPbTFir)x!L=l?X-(4ufTaVlx{>{PjSNNBPI4B5r}3nKd9iySX=8I8p!-a;h_#xf
zK*KdfjhAq!$PRk$x5Qb}!YSYUI|5dz;l5tPS2a3V&Y7{Yv2{3Jm>IQ&_H*ra50Ec?
zzs@`mP5=H*(4c$m?d1z+30{!;<b7n}G$Hza@+#0b(&MGrGiz{2Ca!VU*^ir2dQiQ3
zZ@Bo?5WeYcMcmu3LS^unlWf#D+eN&OWH;1AB}BTW5En>b)On;Wiwg=rifjgP2>SVL
zui-7bgC)zfJ)r&4cmYNt+Yb=`(z}nd=l8dyYAI-?E69+thE3uO{SH(e@%oLL$HKf9
zoKAIn+4RmqLMfcse>HQ^$E#AuNP>m{2x``D?Iy=O9$-+sjZtah5b6Z?;yNI4toXUT
z@+1d(*CYlr^)v5Xg;IJEZ!Db>>DrwsuuqV|SXAdopl(LEFUF;79oo_oNkvw}Ht$nJ
zXwzmYOl4sgp(iATWQ^SIdypeVa*^PxX|3Yh@%27<D<tkJ_xS+fM9<4T^Nl_I<R!H7
z#kq3BcC)?>3-30N(;aF~%82Al%deW4keLLSoy=;<Z-XAbdf4^>R)7A$L9eeZTCoK%
zvbMYVnoNi2j*Chlo~WS&pfqgeu=d%L(z&tnB=R;5&*HagB4y$?$nVHn%WU?)<YZ-a
z$<_86_ntcXdn(b<9GQ3S+|#s8)Xgx`En0xqNa)e`{n}Af=YvVHK!fqYVG|-N@&efz
zFe@Lh!*KGB7QJc?xXZ30CDyX}0m;d`=-GnS$`M}=KWCZTiE7%&RPqMzfLHS!Nk2GJ
zuJZWA0O@3=(7!lAbcR^An1n>DH#CL*+S}C)JcE~3awB=eeT(c%!Sl=3w60ZvyLUA-
zelUi-`}g-o`;rQ=;wV*k#R;SeOig<2FIhW_;musWyxT_%7Fwg}5DG6wx+*la!ng;p
zs88J`(QTWbNlEQo`^(|upaBBO`Bm4pC=ySCai5(3{QAKaAfMC}Aq)UAi@7)Sx3NG6
zc^+UOGlviyj_Hvjw>t4=V>Bgk?D$7ezpV_Uga@wB<u#P>u+5WrB5XYc>q&;0Y#WL2
z4Q7*c1vi2QEnFpp95jtR%0R<bP*jvZ%3&W)KxANIzQJCZS;G3{$-v4=4U485H*NsT
zQoDBJ!v|QbX_!ERo+?v%xRh?i3HD#p!>Q}O0`5B6s?oj@3_8%37OA!F*xlM+$S(o{
zR_wp}Tm8=dYdEevlfu0MybRBzUaWhzm#Nr_{fG`mx_?8!+>kiRPGH|a+Zk}K;$tP}
z4mz#-=f%3rdm6U7wt`tZcSp5tKIX8Fg@pwlvUZx7Q4SB=PGq^ve{(URb1gIc{sA&F
zbGUN{{3l2^<MwTtS7z3!GDfjR2V*mg+U&76Cl?o*>j?1oI6l<JA{66=7q~$`7(?4s
znNwLUSfWEHln+`hkZi1jJ(J*TnD~m3%zVvuvy`sQW)ALD*3P=DWcu&soT8H^gV1Jo
zQA~_4U59n_Rqke?iy3TOEiKa3x?x+IIb)Q7<F8Q?#N+70(9`r(9YR4=Ou}E#ZLV!I
z#P@TQ75j-S+VUs?f&@ArFnv+HK$kYOtZnl^8$6mr)<Mc?9sPIP$vYtL8Mj+A$@KI~
z<cFqcO50{41sOwIU0?>tM|MMqQQb{!myy_4xRjwFgTp~O6~TS&X4dS#Vijg7h|>K0
zR`^@pf~n(QNFdr5XJ4_6VbVlXr|_-G?kHD>1H+U_UDm!dW0AvJ1Fiu7NfTT@hy$XZ
zQz(6Ia$Hd~xZLw3+)YIckrtWXxGk+~lS%lkaNq3wD(H;pF$5k&{<m5M_W^`(DQhQ@
zhIWP2S}`#(sLmaMeYQK+{=y%X35|=%aDAMQla4TX$w)P3v}WE*&##Ik0?0=LFAnVv
zo;QKyv-ADyv^8x1f(o=|{vAvo)~EY=;_@fy-d}=2R8)sO6I!$O+1`xs<xxvpH$KRL
zQ-JuPe38ES&|Ue<5D`w^gnk6KFxj@lhLnb_I84Y(R1~TiWssKdPqePpOicq?tC41W
zu!sx$*S6gW-<TG;T^^)ELR2RPk^CvT1ZcWUOM(5s9jF?IV6sEj1B8=MKY`?<M~)El
zc_B_00ajoPNtwX@3<q4prJ{TrapF|u(JMetr*+`_rm+yTW@dx2X&})+$OCTqAQ4Ci
zPKH)zhM?~do-w~hXF%VHGRk8yWYa_)B^VOmZkA&gdKDEF%V4w1ah_NSF9X!Y-)bu)
zRxA)=;v|&U5#l5l2Q$s1{`qO?L-qy)@-Rb)A14pu3s*wa5+lpN291E{hi(JxeE{~^
zLAp$bQo?;h59n0DGr|TytB+V%*rm2Esp73xGk&bgiXF5J8n~ni_XHW@L>LaMLGcQH
zjiL<Fa3Z^-CKm5F3Pt5F86Z*R)Z6$X3K44tF+v3rAsX{*z`2ju_q{keJGpN`-@dN_
zT^W|_4>S-w@MIRvR{#nT?F)N6pmSN5DID6FtcTDU7GNfd`C)-h>nNOiC@}^zhsegX
zT-GQ9+f;~{Y`C2$0W^Rk6SOOnuKr9>p$C9Nx~AnEX_0r+!^y;O^H2v&up0+JH_I0U
z73jVg1`I$o;-K3jpdZo;za_Kw7ib$3agTZx6iiFty&3+nWQ!1qLE62rx+u&8*aMhl
z>O+69HTcuE&Bnwqh(glW<xU5!5EEUI!_M^3G5r2Pkd9#JBsphdp~Phm4A^SIAc24&
zgapYAYzfnG2ZU%+I!AH@y0#(wcgJ_+(PvPcZhQ~4-G`?vz;_3i=tvqMh;D^+OT0r?
zgwddmSj^OcA|{wdXzal@uu$!yd^lv+$C(0FDSsPCv@hKvw?Y%L0Z8GuZnp|rVOex&
zq>M!;;bjCx<?Hs$bg32P6Pg=|w`#~Q%4QDt$O+JA0z7wt`{HzsMH3(&k@j{3FarZ8
zt9HYKAJm<th)qc_9Ai2ZjvpxmXuw(E+G6Pbu2=xh?S-I~Adx^O+?y!FNR%&Sg#26*
z0&e}xJNh_iFgAb$@f;y!dqm`z4dONhm21UaBm%7340kG$Hor(_6bK2Ik|YrSf~c1X
zQ}}h?gG~6v3V3&nshC)wu@3t>uq*nUNY7amlc5LUEi&~fy3c_Q(qQkfFqqgdgbLT5
zNT5#_SpgTM5aToj8SWk&CMiT{8ax9Dc4FFLUQi?xOo`u*F~QyOGVrrN4|NUzib!sf
z?mEB{66zv@f-oYX4E(Tc5h%K@2L6vopgeK*2x)`v2)x(5Lv$kiK2wwc9ZvuF$5f)w
z;xr%&KuxbgTLUf+v^G;95<uXBy=aPV#~ESSURgV_GhCs|?Ji8`j=2bewJ5mh4il(m
zs4i2Rnjk~gPMkRuiv3rL?wL*KzY@PiRGUa~H$25XAqJAn+yX=*xmNi0ocyX%_@%l?
zf)Ib^Yi1CGh4aE59LOG^b&0yszOP8U0woh9j)7cSk_@a-N4o;!U#{E6Aj+8*?rWq=
ziNpboO%A2VK*yIL-!u>~e9FW`PL&AjZ_pPZPM5xHGH@znagYfcwqhr?kKq#P$eMw`
z_-rg1odT?Z_+J^rHYVv3;wNAlOV=%OzQm&=Bc@3ag{p>E{|$azX(^OVAY%U;ROmKD
zM-jUGaX<%#0U^3ebCwFgJ}}Qza_(jvsmKyC{L3tf*a~r8+YgGQnI{0W9N=oD)&fVP
zec>9c*eNJHJQ$E-NjQQG1eyi~i7(q{D+-$p)m9Zri<~kpGNPl6JIs$iN`y{}Qgd$-
z`w(?FnFShlj<|%IWVHL-OM*wt2>*zr<ed<*X4MSv1LD1bnuIbO#5Yw>JgKfon&WyP
zNh~1)>W~vL0zy2raqQ&3$B-Gs83#4mL|1&Mj)WE#OE7GS3TXh;;9Tk8t5*R!(JIJ`
z<IoM4N`s9Ld^axQVu`AUN)l&^y}!CcK2Wf`T#!d1AjfME(0-_eNEFDU4s;wEzm!y<
ze?+XQtxAL?Bgp^@L~s)eujURFF>>M-B`BFj5CRA_iIFj|47NdRgSd<i^S{lQ_~3h2
zm&78FOc}$VqkU;`rDPwF6=(#QDl1FWlr{((#%=?v&5fl)#?siDH~_e*Tnkb9xjH8P
zz3eEcJpx^*&yp*G*M*tVT@-P`F>v1Dpahu$=IgLJ94e=pEtMElcZz`BAmpM+ck^lR
zI~mX?qq@PHkT<v(tP|tXRg#Q|GlhN<!VBZlrSo5exM0sAWcVlnI`C*g>xg1V8^NBm
zVY`qH8MrmG0ghL<<02`H`07$jhi-@aP8or%UBXHebfY12Fn7>c>qwAR$XK_+j;?~Q
zGJz#DFi`;YJx!t{90>lm0Ue-sp+vV;>E4(SV<Y<30Y`NDOLBEk>%mL{Z^Si%f<b=a
zupUZ~h<Je#9Z7Z-q?2Gk0m2OoeT1x=ppGG!|7k+DWS0<ZY4cJ!`I_=@<wTR=_{s1g
zkO<r^+(C3oE;rE&fR`5ziB2LT>+a-Nox&W%fJm;u0k}&I++2cnvc{zx))5`T+31Gi
zg$x1!g+Hp1V3i1G2G%H{1;z@!CI&)uI2~620<NFQ3JJr+^4RG+rJoPr9y*0%B5@G*
zCW+CuC)0-;$;joP=rD();-?Qrq5vQ`j;0NmbT%0<hE!)HU0Y!Z0E_75EMz>W4PwZ)
z+qpOXhM+;Cj<txAZo`S0hSE_74h+ls(QxD$`iuZSk0E!s#hoM?it>fs|0T8d9(9;0
z`~b|eE$w!$1@Ru(9@c6aO00)GMBX=}M|l!-eS=uGA6)W*#G6DT1koh%>s@$G-6eZ*
z^1)_84-nGOcAJ<aQ5Fv1Y<3uwgcC|aHbNJx1Or99>I>MF4!huc5(Py^_=f5N@k-+}
z9V6@PfEVE7!F5UmJBA?``6?n9uwEKQz^sre1YXDm9pI13C#*+K7YARLpOMRi5+D*o
zkwIYYurDki2@4p3DUoBssR6MlP5MWKD73m#fjc0_c-Tpauqv*oDI-9+^`5^U&LI!e
ztr_l^1iZ&UGjPyIiJBn7Z39|CN90#V;f1tq1fi!+Wj$absZvBOu4(`W3#6~ep~2#y
zu_=I|I!c#B#duC~9XK&v^f_&t?*a|G*kPgas9YW*ES}7Q^@R|I$w?#1*q&IIpH6Jr
zRFWtnRvk~oi`{KM$RTJYF1nrW7~3xsq=}ZGJ10#<67;c;kg?-2Hg#Jj%6E$H(*V45
zO5rtoAeMjzxj8xo6k{BY#c4I<bm%tJ*8vBunt^i_w6b8r*ri|ZGyvPNYgFJ#d@x8-
zaK><_r(o)2#oVIC@TTC?l62v6iyl@T&?O)Ov!PtwND5&Xj+L%X1~`c+Bh&pb73^^!
zZ6A{UL;=XSJ237`M1BLfnLQKa9RW!wodlg1ZI7!Pz+scykeGHg27;YYpgRfp2nQXa
z5#VBbP(^@EOu~<O5l4QXl_ESx-FBzWHe4S$fP)K#+LyY+m`hXtv3STnis)oyV}`4E
zra1%7RPQC!Q11o|01-(vLP@gP!F1PrsHo&=NLSJev*Xq&`h#&{I4p?rEXM6Jf}6bG
zL7Z->5=9Q~8166F5#>b|VMG)aF&zFmXL2ZloOFQ%6odm&e<VZH_Nb+^$HR{PIPY8?
tG7fg9r<DRaNdH)G^xyx;Uf;U7!fuTO*M8F@w|>Hxj)sAHw(9Sf|1TC(55fQd

diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (material.blue.light)_mask.png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (material.blue.light)_mask.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf66555a702550d873638e2f8cb0d3b8f474414f
GIT binary patch
literal 3484
zcmeAS@N?(olHy`uVBq!ia0y~yU~XYxV2a>i1BzH3)wm55Pxf?i45^s&_U1v(1_uEa
zNB=YSPffWZ7p_*Ck#C%y_Kb;vLE-s5IiQ9Ee2yFp3<9bgj0_BmSQHr;9HuC+Ffeoo
z0nKCxY!Uz}^b!Cncj0tmU}(@7RXiFRqiJI_r;HW_qXpw=H8EOgj<yO0VH?TzHZw!Q
zZOim(CVNxk+rkWXPZdY=Dk865*=)<eu<h)bZ!8QE4@X00wCPVq-)8ko)+=0mYpuAp
StpWCv7(8A5T-G@yGywp@o95U6

literal 0
HcmV?d00001

diff --git a/apps/demos/utils/server/csp-bundle-angular.js b/apps/demos/utils/server/csp-bundle-angular.js
index b6104c09749d..e28b2b36ad53 100644
--- a/apps/demos/utils/server/csp-bundle-angular.js
+++ b/apps/demos/utils/server/csp-bundle-angular.js
@@ -179,11 +179,6 @@ function findAngularEntry(srcDir) {
   return null;
 }
 
-// TODO: remove once PivotGrid/StandaloneFieldChooser/Angular renders reliably (times out in csp-check.js)
-const SKIPPED_DEMOS = new Set([
-  'PivotGrid/StandaloneFieldChooser/Angular',
-]);
-
 function findDemos() {
   const out = [];
   if (!fs.existsSync(SRC_DEMOS_DIR)) return out;
@@ -194,7 +189,6 @@ function findDemos() {
     const demos = fs.readdirSync(widgetDir, { withFileTypes: true }).filter((d) => d.isDirectory());
     for (const demo of demos) {
       const key = `${widget.name}/${demo.name}`;
-      if (SKIPPED_DEMOS.has(`${key}/${FRAMEWORK}`)) continue; // eslint-disable-line no-continue
       const fwDir = path.join(widgetDir, demo.name, FRAMEWORK);
       const matchesFilter = !FILTER || key.includes(FILTER);
       if (matchesFilter && fs.existsSync(path.join(fwDir, 'index.html'))) {
diff --git a/apps/demos/utils/server/csp-check.js b/apps/demos/utils/server/csp-check.js
index b3a8afdfac4a..0e19d27275fa 100644
--- a/apps/demos/utils/server/csp-check.js
+++ b/apps/demos/utils/server/csp-check.js
@@ -176,11 +176,6 @@ function applyShard(demos) {
   return applyShardGeneric(demos, (d) => `${d.widget}/${d.demo}`, { SHARD_TOTAL, SHARD_INDEX });
 }
 
-// TODO: remove once PivotGrid/StandaloneFieldChooser/Angular renders reliably (times out here)
-const SKIPPED_DEMOS = new Set([
-  'PivotGrid/StandaloneFieldChooser/Angular',
-]);
-
 function findDemos() {
   const demosDirName = 'Demos';
   const demosDir = join(DEMO_ROOT, demosDirName);
@@ -202,7 +197,6 @@ function findDemos() {
       .filter((d) => d.isDirectory());
 
     for (const demo of demos) {
-      if (SKIPPED_DEMOS.has(`${widget.name}/${demo.name}/${FRAMEWORK}`)) continue; // eslint-disable-line no-continue
       const fwDir = join(widgetDir, demo.name, FRAMEWORK);
       if (existsSync(join(fwDir, 'index.html'))) {
         result.push({

From 63b1929390fe8b6dca14880936beaf8468edc104 Mon Sep 17 00:00:00 2001
From: Andrei Kharitonov <pharret31@users.noreply.github.com>
Date: Fri, 4 Sep 2026 09:34:47 +0200
Subject: [PATCH 15/45] Core(Data): remove m_ prefix from files

---
 .../js/__internal/data/{m_array_utils.ts => array_utils.ts}   | 0
 .../{m_operation_manager.ts => operation_manager.ts}          | 0
 .../js/__internal/data/data_source/{m_utils.ts => utils.ts}   | 0
 .../data/{m_endpoint_selector.ts => endpoint_selector.ts}     | 0
 .../devextreme/js/__internal/data/{m_errors.ts => errors.ts}  | 0
 .../js/__internal/data/{m_local_store.ts => local_store.ts}   | 0
 packages/devextreme/js/__internal/data/odata/context.ts       | 2 +-
 .../data/odata/{m_query_adapter.ts => query_adapter.ts}       | 4 ++--
 .../odata/{m_request_dispatcher.ts => request_dispatcher.ts}  | 0
 .../devextreme/js/__internal/data/{m_query.ts => query.ts}    | 0
 .../devextreme/js/__internal/data/query_implementation.ts     | 2 +-
 .../js/__internal/data/{m_remote_query.ts => remote_query.ts} | 0
 .../js/__internal/data/{m_store_helper.ts => store_helper.ts} | 0
 .../devextreme/js/__internal/data/{m_utils.ts => utils.ts}    | 0
 .../grids/new/grid_core/data_controller/public_methods.ts     | 2 +-
 .../__internal/grids/new/grid_core/data_controller/utils.ts   | 2 +-
 .../grid_core/filtering/header_filter/legacy_header_filter.ts | 2 +-
 .../devextreme/js/__internal/scheduler/utils/loader/utils.ts  | 2 +-
 packages/devextreme/js/common/data/array_utils.js             | 2 +-
 .../js/common/data/data_source/operation_manager.js           | 2 +-
 packages/devextreme/js/common/data/data_source/utils.js       | 2 +-
 packages/devextreme/js/common/data/endpoint_selector.js       | 2 +-
 packages/devextreme/js/common/data/errors.js                  | 2 +-
 packages/devextreme/js/common/data/local_store.js             | 2 +-
 packages/devextreme/js/common/data/odata/query_adapter.js     | 2 +-
 .../devextreme/js/common/data/odata/request_dispatcher.js     | 2 +-
 packages/devextreme/js/common/data/query.js                   | 2 +-
 packages/devextreme/js/common/data/remote_query.js            | 2 +-
 packages/devextreme/js/common/data/store_helper.js            | 2 +-
 packages/devextreme/js/common/data/utils.js                   | 2 +-
 30 files changed, 20 insertions(+), 20 deletions(-)
 rename packages/devextreme/js/__internal/data/{m_array_utils.ts => array_utils.ts} (100%)
 rename packages/devextreme/js/__internal/data/data_source/{m_operation_manager.ts => operation_manager.ts} (100%)
 rename packages/devextreme/js/__internal/data/data_source/{m_utils.ts => utils.ts} (100%)
 rename packages/devextreme/js/__internal/data/{m_endpoint_selector.ts => endpoint_selector.ts} (100%)
 rename packages/devextreme/js/__internal/data/{m_errors.ts => errors.ts} (100%)
 rename packages/devextreme/js/__internal/data/{m_local_store.ts => local_store.ts} (100%)
 rename packages/devextreme/js/__internal/data/odata/{m_query_adapter.ts => query_adapter.ts} (99%)
 rename packages/devextreme/js/__internal/data/odata/{m_request_dispatcher.ts => request_dispatcher.ts} (100%)
 rename packages/devextreme/js/__internal/data/{m_query.ts => query.ts} (100%)
 rename packages/devextreme/js/__internal/data/{m_remote_query.ts => remote_query.ts} (100%)
 rename packages/devextreme/js/__internal/data/{m_store_helper.ts => store_helper.ts} (100%)
 rename packages/devextreme/js/__internal/data/{m_utils.ts => utils.ts} (100%)

diff --git a/packages/devextreme/js/__internal/data/m_array_utils.ts b/packages/devextreme/js/__internal/data/array_utils.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/m_array_utils.ts
rename to packages/devextreme/js/__internal/data/array_utils.ts
diff --git a/packages/devextreme/js/__internal/data/data_source/m_operation_manager.ts b/packages/devextreme/js/__internal/data/data_source/operation_manager.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/data_source/m_operation_manager.ts
rename to packages/devextreme/js/__internal/data/data_source/operation_manager.ts
diff --git a/packages/devextreme/js/__internal/data/data_source/m_utils.ts b/packages/devextreme/js/__internal/data/data_source/utils.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/data_source/m_utils.ts
rename to packages/devextreme/js/__internal/data/data_source/utils.ts
diff --git a/packages/devextreme/js/__internal/data/m_endpoint_selector.ts b/packages/devextreme/js/__internal/data/endpoint_selector.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/m_endpoint_selector.ts
rename to packages/devextreme/js/__internal/data/endpoint_selector.ts
diff --git a/packages/devextreme/js/__internal/data/m_errors.ts b/packages/devextreme/js/__internal/data/errors.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/m_errors.ts
rename to packages/devextreme/js/__internal/data/errors.ts
diff --git a/packages/devextreme/js/__internal/data/m_local_store.ts b/packages/devextreme/js/__internal/data/local_store.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/m_local_store.ts
rename to packages/devextreme/js/__internal/data/local_store.ts
diff --git a/packages/devextreme/js/__internal/data/odata/context.ts b/packages/devextreme/js/__internal/data/odata/context.ts
index 6e070b4c937c..dbd3dadbde42 100644
--- a/packages/devextreme/js/__internal/data/odata/context.ts
+++ b/packages/devextreme/js/__internal/data/odata/context.ts
@@ -9,7 +9,7 @@ import { each } from '@js/core/utils/iterator';
 import { isDefined, isPlainObject } from '@js/core/utils/type';
 import type { StoreErrorHandler } from '@ts/data/abstract_store';
 
-import { errors, handleError } from '../m_errors';
+import { errors, handleError } from '../errors';
 import { escapeServiceOperationParams, formatFunctionInvocationUrl } from './utils';
 
 export type ServiceOperationParams = Record<string, unknown>;
diff --git a/packages/devextreme/js/__internal/data/odata/m_query_adapter.ts b/packages/devextreme/js/__internal/data/odata/query_adapter.ts
similarity index 99%
rename from packages/devextreme/js/__internal/data/odata/m_query_adapter.ts
rename to packages/devextreme/js/__internal/data/odata/query_adapter.ts
index 6205484aa0a9..3adfa9edc6f9 100644
--- a/packages/devextreme/js/__internal/data/odata/m_query_adapter.ts
+++ b/packages/devextreme/js/__internal/data/odata/query_adapter.ts
@@ -4,12 +4,12 @@ import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
 import { isFunction } from '@js/core/utils/type';
 
-import { errors } from '../m_errors';
+import { errors } from '../errors';
 import {
   isConjunctiveOperator,
   isUnaryOperation,
   normalizeBinaryCriterion,
-} from '../m_utils';
+} from '../utils';
 import {
   convertPrimitiveValue,
   generateExpand,
diff --git a/packages/devextreme/js/__internal/data/odata/m_request_dispatcher.ts b/packages/devextreme/js/__internal/data/odata/request_dispatcher.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/odata/m_request_dispatcher.ts
rename to packages/devextreme/js/__internal/data/odata/request_dispatcher.ts
diff --git a/packages/devextreme/js/__internal/data/m_query.ts b/packages/devextreme/js/__internal/data/query.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/m_query.ts
rename to packages/devextreme/js/__internal/data/query.ts
diff --git a/packages/devextreme/js/__internal/data/query_implementation.ts b/packages/devextreme/js/__internal/data/query_implementation.ts
index 2654903ad637..d7185d49d29e 100644
--- a/packages/devextreme/js/__internal/data/query_implementation.ts
+++ b/packages/devextreme/js/__internal/data/query_implementation.ts
@@ -1,5 +1,5 @@
 import arrayQueryImpl from './array_query';
-import remoteQueryImpl from './m_remote_query';
+import remoteQueryImpl from './remote_query';
 
 export const queryImpl = {
   array: arrayQueryImpl,
diff --git a/packages/devextreme/js/__internal/data/m_remote_query.ts b/packages/devextreme/js/__internal/data/remote_query.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/m_remote_query.ts
rename to packages/devextreme/js/__internal/data/remote_query.ts
diff --git a/packages/devextreme/js/__internal/data/m_store_helper.ts b/packages/devextreme/js/__internal/data/store_helper.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/m_store_helper.ts
rename to packages/devextreme/js/__internal/data/store_helper.ts
diff --git a/packages/devextreme/js/__internal/data/m_utils.ts b/packages/devextreme/js/__internal/data/utils.ts
similarity index 100%
rename from packages/devextreme/js/__internal/data/m_utils.ts
rename to packages/devextreme/js/__internal/data/utils.ts
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.ts
index 4d43b738af41..b1e2ccb921c4 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.ts
@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import type { FilterDescriptor } from '@js/data';
 import type DataSource from '@js/data/data_source';
-import { keysEqual } from '@ts/data/m_utils';
+import { keysEqual } from '@ts/data/utils';
 
 import type { Constructor } from '../types';
 import type { GridCoreNewBase } from '../widget';
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts
index ac96d84c87ac..b03222a5303b 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts
@@ -6,7 +6,7 @@ import type { Store } from '@js/data';
 import type { DataSourceLike } from '@js/data/data_source';
 import DataSource from '@js/data/data_source';
 import { normalizeDataSourceOptions } from '@js/data/data_source/utils';
-import { applyBatch } from '@ts/data/m_array_utils';
+import { applyBatch } from '@ts/data/array_utils';
 
 import type {
   DataObject,
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/legacy_header_filter.ts b/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/legacy_header_filter.ts
index 76ee06aa32f8..761f198bce92 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/legacy_header_filter.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/legacy_header_filter.ts
@@ -16,7 +16,7 @@ import { isDefined, isFunction, isObject } from '@js/core/utils/type';
 import messageLocalization from '@js/localization/message';
 import filteringUtils from '@js/ui/shared/filtering';
 import { extend } from '@ts/core/utils/m_extend';
-import { normalizeDataSourceOptions as oldNormalizeDataSourceOptions } from '@ts/data/data_source/m_utils';
+import { normalizeDataSourceOptions as oldNormalizeDataSourceOptions } from '@ts/data/data_source/utils';
 import {
   convertDataFromUTCToLocal,
   getFormatOptions,
diff --git a/packages/devextreme/js/__internal/scheduler/utils/loader/utils.ts b/packages/devextreme/js/__internal/scheduler/utils/loader/utils.ts
index ccf48a23701c..8a2f31585a13 100644
--- a/packages/devextreme/js/__internal/scheduler/utils/loader/utils.ts
+++ b/packages/devextreme/js/__internal/scheduler/utils/loader/utils.ts
@@ -1,6 +1,6 @@
 import type { DataSourceLike } from '@js/data/data_source';
 import DataSource from '@js/data/data_source';
-import { normalizeDataSourceOptions } from '@ts/data/data_source/m_utils';
+import { normalizeDataSourceOptions } from '@ts/data/data_source/utils';
 
 export const normalizeDataSource = <T>(
   dataSourceOptions: DataSourceLike<T> | null | undefined,
diff --git a/packages/devextreme/js/common/data/array_utils.js b/packages/devextreme/js/common/data/array_utils.js
index 74993adf03d4..d3f8e91646bc 100644
--- a/packages/devextreme/js/common/data/array_utils.js
+++ b/packages/devextreme/js/common/data/array_utils.js
@@ -1 +1 @@
-export * from '../../__internal/data/m_array_utils';
+export * from '../../__internal/data/array_utils';
diff --git a/packages/devextreme/js/common/data/data_source/operation_manager.js b/packages/devextreme/js/common/data/data_source/operation_manager.js
index 059f55b8e65f..6de10df1d202 100644
--- a/packages/devextreme/js/common/data/data_source/operation_manager.js
+++ b/packages/devextreme/js/common/data/data_source/operation_manager.js
@@ -1 +1 @@
-export { default } from '../../../__internal/data/data_source/m_operation_manager';
+export { default } from '../../../__internal/data/data_source/operation_manager';
diff --git a/packages/devextreme/js/common/data/data_source/utils.js b/packages/devextreme/js/common/data/data_source/utils.js
index 8b2686832ca6..52e070da838e 100644
--- a/packages/devextreme/js/common/data/data_source/utils.js
+++ b/packages/devextreme/js/common/data/data_source/utils.js
@@ -1 +1 @@
-export * from '../../../__internal/data/data_source/m_utils';
+export * from '../../../__internal/data/data_source/utils';
diff --git a/packages/devextreme/js/common/data/endpoint_selector.js b/packages/devextreme/js/common/data/endpoint_selector.js
index e613c011c0ce..ea7b56fad2d1 100644
--- a/packages/devextreme/js/common/data/endpoint_selector.js
+++ b/packages/devextreme/js/common/data/endpoint_selector.js
@@ -4,4 +4,4 @@
  * @param1 options:Object
  * @hidden
 */
-export { default } from '../../__internal/data/m_endpoint_selector';
+export { default } from '../../__internal/data/endpoint_selector';
diff --git a/packages/devextreme/js/common/data/errors.js b/packages/devextreme/js/common/data/errors.js
index f2ad9f675151..255b551e3774 100644
--- a/packages/devextreme/js/common/data/errors.js
+++ b/packages/devextreme/js/common/data/errors.js
@@ -88,4 +88,4 @@
 * @name ErrorsData.W4002
 */
 
-export * from '../../__internal/data/m_errors';
+export * from '../../__internal/data/errors';
diff --git a/packages/devextreme/js/common/data/local_store.js b/packages/devextreme/js/common/data/local_store.js
index 2b903d32d98b..48ec3d1bcc87 100644
--- a/packages/devextreme/js/common/data/local_store.js
+++ b/packages/devextreme/js/common/data/local_store.js
@@ -1 +1 @@
-export { default } from '../../__internal/data/m_local_store';
+export { default } from '../../__internal/data/local_store';
diff --git a/packages/devextreme/js/common/data/odata/query_adapter.js b/packages/devextreme/js/common/data/odata/query_adapter.js
index a56104665e6c..dc61288953ee 100644
--- a/packages/devextreme/js/common/data/odata/query_adapter.js
+++ b/packages/devextreme/js/common/data/odata/query_adapter.js
@@ -1 +1 @@
-export * from '../../../__internal/data/odata/m_query_adapter';
+export * from '../../../__internal/data/odata/query_adapter';
diff --git a/packages/devextreme/js/common/data/odata/request_dispatcher.js b/packages/devextreme/js/common/data/odata/request_dispatcher.js
index 13fc3dc1b4c6..434e13d5a8eb 100644
--- a/packages/devextreme/js/common/data/odata/request_dispatcher.js
+++ b/packages/devextreme/js/common/data/odata/request_dispatcher.js
@@ -1 +1 @@
-export { default } from '../../../__internal/data/odata/m_request_dispatcher';
+export { default } from '../../../__internal/data/odata/request_dispatcher';
diff --git a/packages/devextreme/js/common/data/query.js b/packages/devextreme/js/common/data/query.js
index b1e2c444e038..bbb50289ac52 100644
--- a/packages/devextreme/js/common/data/query.js
+++ b/packages/devextreme/js/common/data/query.js
@@ -1 +1 @@
-export { default } from '../../__internal/data/m_query';
+export { default } from '../../__internal/data/query';
diff --git a/packages/devextreme/js/common/data/remote_query.js b/packages/devextreme/js/common/data/remote_query.js
index 592ebfe65d2c..51f3df760e1e 100644
--- a/packages/devextreme/js/common/data/remote_query.js
+++ b/packages/devextreme/js/common/data/remote_query.js
@@ -1 +1 @@
-export { default } from '../../__internal/data/m_remote_query';
+export { default } from '../../__internal/data/remote_query';
diff --git a/packages/devextreme/js/common/data/store_helper.js b/packages/devextreme/js/common/data/store_helper.js
index bb0fca23c7d1..5b66fa3425b1 100644
--- a/packages/devextreme/js/common/data/store_helper.js
+++ b/packages/devextreme/js/common/data/store_helper.js
@@ -1 +1 @@
-export { default } from '../../__internal/data/m_store_helper';
+export { default } from '../../__internal/data/store_helper';
diff --git a/packages/devextreme/js/common/data/utils.js b/packages/devextreme/js/common/data/utils.js
index a59212919375..ba1bc28b4c72 100644
--- a/packages/devextreme/js/common/data/utils.js
+++ b/packages/devextreme/js/common/data/utils.js
@@ -3,7 +3,7 @@ import { compileGetter, compileSetter } from '../../core/utils/data';
 /**
 * @name Utils
 */
-export * from '../../__internal/data/m_utils';
+export * from '../../__internal/data/utils';
 
 export {
     compileGetter,

From b88332b4ff107e18c6b3b5e6199928adb3f2dd0b Mon Sep 17 00:00:00 2001
From: Andrei Kharitonov <pharret31@users.noreply.github.com>
Date: Fri, 4 Sep 2026 11:50:14 +0200
Subject: [PATCH 16/45] Core(Data): fix typing and eslint issues

---
 .../js/__internal/data/abstract_store.ts      |   2 +
 .../js/__internal/data/array_store.ts         |   6 -
 .../js/__internal/data/array_utils.ts         | 379 ++++++++++++------
 .../js/__internal/data/custom_store.ts        |   5 +-
 .../data/data_controller/data_controller.ts   |   1 -
 .../data/data_source/data_source.ts           |   6 +-
 .../data/data_source/operation_manager.ts     |  31 +-
 .../js/__internal/data/data_source/utils.ts   | 183 ++++++---
 .../js/__internal/data/endpoint_selector.ts   |  38 +-
 .../devextreme/js/__internal/data/errors.ts   |  18 +-
 .../js/__internal/data/local_store.ts         |  56 ++-
 .../js/__internal/data/odata/query_adapter.ts | 328 +++++++--------
 .../data/odata/request_dispatcher.ts          |  83 ++--
 .../js/__internal/data/odata/store.ts         |   9 +-
 .../devextreme/js/__internal/data/query.ts    |  17 +-
 .../js/__internal/data/remote_query.ts        | 240 +++++++----
 .../js/__internal/data/store_helper.ts        | 135 +++++--
 .../devextreme/js/__internal/data/utils.ts    | 286 +++++++------
 .../grids/data_grid/grouping/m_grouping.ts    |   1 +
 .../data_grid/grouping/m_grouping_expanded.ts |   1 -
 .../grids/data_grid/summary/m_summary.ts      |   2 -
 .../m_columns_controller.ts                   |   1 -
 .../m_data_source_adapter.ts                  |   3 -
 .../header_filter/m_header_filter.ts          |   4 +-
 .../js/__internal/grids/grid_core/m_utils.ts  |   1 -
 .../grids/grid_core/search/m_search.ts        |   2 -
 .../new/grid_core/data_controller/utils.ts    |   2 +-
 .../header_filter/legacy_header_filter.ts     |   1 -
 .../pivot_grid/data_source/m_data_source.ts   |   1 -
 .../pivot_grid/local_store/m_local_store.ts   |   1 -
 .../pivot_grid/remote_store/m_remote_store.ts |   1 -
 .../m_data_source_adapter.ts                  |   5 -
 .../scheduler/utils/loader/utils.ts           |   1 +
 .../ui/collection/collection_widget.edit.ts   |   1 -
 .../collection_widget.live_update.ts          |   2 -
 .../hierarchical_collection/data_adapter.ts   |   2 +-
 .../selection/selection.strategy.deferred.ts  |   1 -
 .../selection/selection.strategy.standard.ts  |   4 +-
 .../ui/selection/selection.strategy.ts        |   1 -
 .../ui/shared/ui.editor_factory_mixin.ts      |   1 -
 40 files changed, 1120 insertions(+), 742 deletions(-)

diff --git a/packages/devextreme/js/__internal/data/abstract_store.ts b/packages/devextreme/js/__internal/data/abstract_store.ts
index 8987913c2ed7..21bfe4fd6764 100644
--- a/packages/devextreme/js/__internal/data/abstract_store.ts
+++ b/packages/devextreme/js/__internal/data/abstract_store.ts
@@ -156,6 +156,7 @@ class Store {
       loadOptions._langParams = { ...this._langParams, ...loadOptions._langParams };
     }
 
+    // @ts-expect-error public Query.enumerate() is a Promise, the query resolves a Deferred
     const result: DeferredObj<unknown[]> = queryByOptions(
       this.createQuery(loadOptions),
       loadOptions,
@@ -193,6 +194,7 @@ class Store {
   }
 
   _totalCountImpl(options?: StoreLoadOptions): DeferredObj<number> {
+    // @ts-expect-error public Query.count() is a Promise, the query resolves a Deferred
     const result: DeferredObj<number> = queryByOptions(
       this.createQuery(options),
       options,
diff --git a/packages/devextreme/js/__internal/data/array_store.ts b/packages/devextreme/js/__internal/data/array_store.ts
index 7ae9ef524ffc..814e5a272bb9 100644
--- a/packages/devextreme/js/__internal/data/array_store.ts
+++ b/packages/devextreme/js/__internal/data/array_store.ts
@@ -47,27 +47,23 @@ class ArrayStore extends Store {
     const index = indexByKey(this, this._array, key);
 
     if (index === -1) {
-      // @ts-expect-error data/utils is untyped: `rejectedPromise` reads its arguments object
       const rejected: DeferredObj<unknown> = rejectedPromise(errors.Error('E4009'));
 
       return rejected;
     }
 
-    // @ts-expect-error data/utils is untyped: `trivialPromise` reads its arguments object
     const resolved: DeferredObj<unknown> = trivialPromise(this._array[index]);
 
     return resolved;
   }
 
   _insertImpl(values: unknown): DeferredObj<unknown> {
-    // @ts-expect-error array_utils is untyped: `insert` declares every argument as required
     const result: DeferredObj<unknown> = insert(this, this._array, values);
 
     return result;
   }
 
   _pushImpl(changes: StoreChange[]): void {
-    // @ts-expect-error array_utils is untyped: `applyBatch` destructures every option as required
     applyBatch({
       keyInfo: this,
       data: this._array,
@@ -76,14 +72,12 @@ class ArrayStore extends Store {
   }
 
   _updateImpl(key: unknown, values: unknown): DeferredObj<unknown> {
-    // @ts-expect-error array_utils is untyped: `update` declares every argument as required
     const result: DeferredObj<unknown> = update(this, this._array, key, values);
 
     return result;
   }
 
   _removeImpl(key: unknown): DeferredObj<unknown> {
-    // @ts-expect-error array_utils is untyped: `remove` declares every argument as required
     const result: DeferredObj<unknown> = remove(this, this._array, key);
 
     return result;
diff --git a/packages/devextreme/js/__internal/data/array_utils.ts b/packages/devextreme/js/__internal/data/array_utils.ts
index 22d11b7c9c69..2e8dd20a73fd 100644
--- a/packages/devextreme/js/__internal/data/array_utils.ts
+++ b/packages/devextreme/js/__internal/data/array_utils.ts
@@ -3,58 +3,75 @@ import { keysEqual, rejectedPromise, trivialPromise } from '@js/common/data/util
 import config from '@js/core/config';
 import Guid from '@js/core/guid';
 import { compileGetter } from '@js/core/utils/data';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import { deepExtendArraySafe } from '@js/core/utils/object';
 import {
-  isDefined, isEmptyObject, isObject, isPlainObject,
+  isDefined, isEmptyObject, isObject, isPlainObject, isString,
 } from '@js/core/utils/type';
+import type { StoreChange } from '@js/data/store';
 import { isCollectionLike } from '@ts/core/utils/m_object';
+import type { StoreKey } from '@ts/data/abstract_store';
 
-function hasKey(target, keyOrKeys) {
-  let key;
-  // @ts-expect-error
-  const keys = typeof keyOrKeys === 'string' ? keyOrKeys.split() : keyOrKeys.slice();
+export type KeyExpr = StoreKey | Function;
 
-  while (keys.length) {
-    key = keys.shift();
-    if (key in target) {
-      return true;
-    }
-  }
+export interface KeyInfo {
+  /* eslint-disable @typescript-eslint/method-signature-style */
+  key(): KeyExpr | undefined;
+  keyOf(obj: unknown): unknown;
+  /* eslint-enable @typescript-eslint/method-signature-style */
+}
 
-  return false;
+interface CachedArray extends Array<unknown> {
+  _dataByKeyMap?: Record<string, unknown>;
+  _dataByKeyMapLength?: number;
 }
 
-function findItems(keyInfo, items, key, groupCount) {
-  let childItems;
-  let result;
+interface GroupItem {
+  items?: unknown[];
+  collapsedItems?: unknown[];
+}
 
-  if (groupCount) {
-    for (let i = 0; i < items.length; i++) {
-      childItems = items[i].items || items[i].collapsedItems || [];
-      result = findItems(keyInfo, childItems || [], key, groupCount - 1);
-      if (result) {
-        return result;
-      }
-    }
-  } else if (indexByKey(keyInfo, items, key) >= 0) {
-    return items;
-  }
+export interface ApplyBatchOptions {
+  keyInfo: KeyInfo;
+  data: unknown[];
+  changes: StoreChange[];
+  groupCount?: number;
+  useInsertIndex?: boolean;
+  immutable?: boolean;
+  disableCache?: boolean;
+  logError?: boolean;
+  skipCopying?: boolean;
 }
 
-function getItems(keyInfo, items, key, groupCount) {
-  if (groupCount) {
-    return findItems(keyInfo, items, key, groupCount) || [];
+export interface ApplyChangesOptions {
+  keyExpr?: StoreKey;
+  immutable?: boolean;
+}
+
+function hasKey(target: unknown, keyOrKeys: KeyExpr): boolean {
+  let keys: string[] = [];
+  if (isString(keyOrKeys)) {
+    keys = [keyOrKeys];
+  } else if (Array.isArray(keyOrKeys)) {
+    keys = keyOrKeys.slice();
   }
 
-  return items;
+  while (keys.length) {
+    const key = keys.shift();
+    if (isDefined(key) && isObject(target) && key in target) {
+      return true;
+    }
+  }
+
+  return false;
 }
 
-function generateDataByKeyMap(keyInfo, array) {
+function generateDataByKeyMap(keyInfo: KeyInfo, array: CachedArray): void {
   if (keyInfo.key() && (!array._dataByKeyMap || array._dataByKeyMapLength !== array.length)) {
-    const dataByKeyMap = {};
+    const dataByKeyMap: Record<string, unknown> = {};
     const arrayLength = array.length;
-    for (let i = 0; i < arrayLength; i++) {
+    for (let i = 0; i < arrayLength; i += 1) {
       dataByKeyMap[JSON.stringify(keyInfo.keyOf(array[i]))] = array[i];
     }
 
@@ -63,13 +80,11 @@ function generateDataByKeyMap(keyInfo, array) {
   }
 }
 
-function getCacheValue(array, key) {
-  if (array._dataByKeyMap) {
-    return array._dataByKeyMap[JSON.stringify(key)];
-  }
+function getCacheValue(array: CachedArray, key: unknown): unknown {
+  return array._dataByKeyMap?.[JSON.stringify(key)];
 }
 
-function getHasKeyCacheValue(array, key) {
+function getHasKeyCacheValue(array: CachedArray, key: unknown): unknown {
   if (array._dataByKeyMap) {
     return array._dataByKeyMap[JSON.stringify(key)];
   }
@@ -77,39 +92,98 @@ function getHasKeyCacheValue(array, key) {
   return true;
 }
 
-function setDataByKeyMapValue(array, key, data) {
+function setDataByKeyMapValue(array: CachedArray, key: unknown, data: unknown): void {
   if (array._dataByKeyMap) {
     array._dataByKeyMap[JSON.stringify(key)] = data;
-    array._dataByKeyMapLength += data ? 1 : -1;
+    array._dataByKeyMapLength = (array._dataByKeyMapLength ?? 0) + (data ? 1 : -1);
   }
 }
 
-function cloneInstanceWithChangedPaths(instance, changes, clonedInstances) {
+function indexByKey(keyInfo: KeyInfo, array: unknown[], key: unknown): number {
+  const keyExpr = keyInfo.key();
+
+  if (!getHasKeyCacheValue(array, key)) {
+    return -1;
+  }
+
+  for (let i = 0, arrayLength = array.length; i < arrayLength; i += 1) {
+    if (keysEqual(keyExpr, keyInfo.keyOf(array[i]), key)) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+function findItems(
+  keyInfo: KeyInfo,
+  items: unknown[],
+  key: unknown,
+  groupCount: number,
+): unknown[] | undefined {
+  if (groupCount) {
+    for (const item of items) {
+      const group: GroupItem = isObject(item) ? item : {};
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      const childItems = group.items || group.collapsedItems || [];
+      const result = findItems(keyInfo, childItems, key, groupCount - 1);
+      if (result) {
+        return result;
+      }
+    }
+  } else if (indexByKey(keyInfo, items, key) >= 0) {
+    return items;
+  }
+
+  return undefined;
+}
+
+function getItems(
+  keyInfo: KeyInfo,
+  items: unknown[],
+  key: unknown,
+  groupCount: number | undefined,
+): unknown[] {
+  if (groupCount) {
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    return findItems(keyInfo, items, key, groupCount) || [];
+  }
+
+  return items;
+}
+
+function cloneInstanceWithChangedPaths(
+  instance: unknown,
+  changes: unknown,
+  clonedInstances: WeakMap<object, unknown> = new WeakMap<object, unknown>(),
+): unknown {
   if (isCollectionLike(instance)) {
     return instance;
   }
 
-  clonedInstances = clonedInstances || new WeakMap();
+  const source: object = isObject(instance) ? instance : {};
+  const result: object = isObject(instance)
+    ? Object.create(Object.getPrototypeOf(instance))
+    : {};
 
-  const result = instance ? Object.create(Object.getPrototypeOf(instance)) : {};
-  if (instance) {
+  if (isObject(instance)) {
     clonedInstances.set(instance, result);
   }
 
-  const instanceWithoutPrototype = { ...instance };
+  const instanceWithoutPrototype = { ...source };
   deepExtendArraySafe(result, instanceWithoutPrototype, true, true, true);
   // eslint-disable-next-line no-restricted-syntax, guard-for-in
   for (const name in instanceWithoutPrototype) {
-    const value = instanceWithoutPrototype[name];
-    const change = changes?.[name];
+    const value: unknown = instanceWithoutPrototype[name];
+    const change: unknown = isObject(changes) ? changes[name] : undefined;
 
-    if (isObject(value) && !isPlainObject(value) && isObject(change) && !clonedInstances.has(value)) {
+    if (isObject(value) && !isPlainObject(value)
+      && isObject(change) && !clonedInstances.has(value)) {
       result[name] = cloneInstanceWithChangedPaths(value, change, clonedInstances);
     }
   }
   // eslint-disable-next-line no-restricted-syntax, guard-for-in
   for (const name in result) {
-    const prop = result[name];
+    const prop: unknown = result[name];
 
     if (isObject(prop) && clonedInstances.has(prop)) {
       result[name] = clonedInstances.get(prop);
@@ -119,59 +193,51 @@ function cloneInstanceWithChangedPaths(instance, changes, clonedInstances) {
   return result;
 }
 
-function createObjectWithChanges(target, changes) {
-  // @ts-expect-error
+function createObjectWithChanges(
+  target: unknown,
+  changes?: unknown,
+): Record<string, unknown> {
   const result = cloneInstanceWithChangedPaths(target, changes);
+  const extended: Record<string, unknown> = deepExtendArraySafe(result, changes, true, true, true);
 
-  return deepExtendArraySafe(result, changes, true, true, true);
+  return extended;
 }
 
-function applyBatch({
-  keyInfo, data, changes, groupCount, useInsertIndex, immutable, disableCache, logError, skipCopying,
-}) {
-  const resultItems = immutable === true ? [...data] : data;
-
-  changes.forEach((item) => {
-    const items = item.type === 'insert' ? resultItems : getItems(keyInfo, resultItems, item.key, groupCount);
+function getErrorResult(
+  isBatch: boolean | undefined,
+  logError: boolean | undefined,
+  errorCode: string,
+): DeferredObj<unknown> | undefined {
+  if (!isBatch) {
+    const error: unknown = errors.Error(errorCode);
+    return rejectedPromise(error);
+  }
 
-    !disableCache && generateDataByKeyMap(keyInfo, items);
-    // eslint-disable-next-line default-case
-    switch (item.type) {
-      case 'update': update(keyInfo, items, item.key, item.data, true, immutable, logError); break;
-      case 'insert': insert(keyInfo, items, item.data, useInsertIndex && isDefined(item.index) ? item.index : -1, true, logError, skipCopying); break;
-      case 'remove': remove(keyInfo, items, item.key, true, logError); break;
-    }
-  });
-  return resultItems;
-}
+  if (logError) {
+    errors.log(errorCode);
+  }
 
-function getErrorResult(isBatch, logError, errorCode) {
-  // @ts-expect-error
-  return !isBatch ? rejectedPromise(errors.Error(errorCode)) : logError && errors.log(errorCode);
+  return undefined;
 }
 
-function applyChanges(data, changes, options = {}) {
-  // @ts-expect-error
-  const { keyExpr = 'id', immutable = true } = options;
-  const keyGetter = compileGetter(keyExpr);
-  const keyInfo = {
-    key: () => keyExpr,
-    // @ts-expect-error
-    keyOf: (obj) => keyGetter(obj),
-  };
-  // @ts-expect-error
-  return applyBatch({
-    keyInfo,
-    data,
-    changes,
-    immutable,
-    disableCache: true,
-    logError: true,
-  });
-}
-
-function update(keyInfo, array, key, data, isBatch, immutable, logError) {
-  let target;
+function update(
+  keyInfo: KeyInfo, array: unknown[], key: unknown, data: unknown,
+): DeferredObj<unknown>;
+function update(
+  keyInfo: KeyInfo, array: unknown[], key: unknown, data: unknown,
+  isBatch: true, immutable?: boolean, logError?: boolean,
+): undefined;
+function update(
+  keyInfo: KeyInfo,
+  array: unknown[],
+  key: unknown,
+  data: unknown,
+  isBatch?: boolean,
+  immutable?: boolean,
+  logError?: boolean,
+): DeferredObj<unknown> | undefined {
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let target: unknown;
   const extendComplexObject = true;
   const keyExpr = keyInfo.key();
 
@@ -192,8 +258,7 @@ function update(keyInfo, array, key, data, isBatch, immutable, logError) {
       if (immutable === true && isDefined(target)) {
         const newTarget = createObjectWithChanges(target, data);
         array[index] = newTarget;
-        // @ts-expect-error
-        return !isBatch && trivialPromise(newTarget, key);
+        return isBatch ? undefined : trivialPromise(newTarget, key);
       }
     }
   } else {
@@ -203,34 +268,56 @@ function update(keyInfo, array, key, data, isBatch, immutable, logError) {
   deepExtendArraySafe(target, data, extendComplexObject, false, true, true);
   if (!isBatch) {
     if (config().useLegacyStoreResult) {
-      // @ts-expect-error
       return trivialPromise(key, data);
     }
-    // @ts-expect-error
     return trivialPromise(target, key);
   }
+
+  return undefined;
 }
 
-function insert(keyInfo, array, data, index, isBatch, logError, skipCopying) {
-  let keyValue;
+function insert(
+  keyInfo: KeyInfo, array: unknown[], data: unknown, index?: number,
+): DeferredObj<unknown>;
+function insert(
+  keyInfo: KeyInfo, array: unknown[], data: unknown, index: number | undefined,
+  isBatch: true, logError?: boolean, skipCopying?: boolean,
+): undefined;
+function insert(
+  keyInfo: KeyInfo,
+  array: unknown[],
+  data: unknown,
+  index?: number,
+  isBatch?: boolean,
+  logError?: boolean,
+  skipCopying?: boolean,
+): DeferredObj<unknown> | undefined {
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let keyValue: unknown;
   const keyExpr = keyInfo.key();
 
-  const obj = isPlainObject(data) && !skipCopying ? extend({}, data) : data;
+  const obj: unknown = isPlainObject(data) && !skipCopying ? extend({}, data) : data;
 
   if (keyExpr) {
     keyValue = keyInfo.keyOf(obj);
-    if (keyValue === undefined || typeof keyValue === 'object' && isEmptyObject(keyValue)) {
+    if (keyValue === undefined || (typeof keyValue === 'object' && isEmptyObject(keyValue))) {
       if (Array.isArray(keyExpr)) {
         throw errors.Error('E4007');
       }
-      keyValue = obj[keyExpr] = String(new Guid());
+
+      const generatedKey = String(new Guid());
+
+      if (isString(keyExpr) && isObject(obj)) {
+        obj[keyExpr] = generatedKey;
+      }
+      keyValue = generatedKey;
     } else if (array[indexByKey(keyInfo, array, keyValue)] !== undefined) {
       return getErrorResult(isBatch, logError, 'E4008');
     }
   } else {
     keyValue = obj;
   }
-  if (index >= 0) {
+  if (isDefined(index) && index >= 0) {
     array.splice(index, 0, obj);
   } else {
     array.push(obj);
@@ -239,38 +326,94 @@ function insert(keyInfo, array, data, index, isBatch, logError, skipCopying) {
   setDataByKeyMapValue(array, keyValue, obj);
 
   if (!isBatch) {
-    // @ts-expect-error
     return trivialPromise(config().useLegacyStoreResult ? data : obj, keyValue);
   }
+
+  return undefined;
 }
 
-function remove(keyInfo, array, key, isBatch, logError) {
+function remove(
+  keyInfo: KeyInfo, array: unknown[], key: unknown,
+): DeferredObj<unknown>;
+function remove(
+  keyInfo: KeyInfo, array: unknown[], key: unknown, isBatch: true, logError?: boolean,
+): undefined;
+function remove(
+  keyInfo: KeyInfo,
+  array: unknown[],
+  key: unknown,
+  isBatch?: boolean,
+  logError?: boolean,
+): DeferredObj<unknown> | undefined {
   const index = indexByKey(keyInfo, array, key);
   if (index > -1) {
     array.splice(index, 1);
     setDataByKeyMapValue(array, key, null);
   }
   if (!isBatch) {
-    // @ts-expect-error
     return trivialPromise(key);
-  } if (index < 0) {
+  }
+  if (index < 0) {
     return getErrorResult(isBatch, logError, 'E4009');
   }
+
+  return undefined;
 }
 
-function indexByKey(keyInfo, array, key) {
-  const keyExpr = keyInfo.key();
+function applyBatch({
+  keyInfo, data, changes, groupCount, useInsertIndex, immutable,
+  disableCache, logError, skipCopying,
+}: ApplyBatchOptions): unknown[] {
+  const resultItems = immutable === true ? [...data] : data;
 
-  if (!getHasKeyCacheValue(array, key)) {
-    return -1;
-  }
+  changes.forEach((item) => {
+    const items = item.type === 'insert'
+      ? resultItems
+      : getItems(keyInfo, resultItems, item.key, groupCount);
 
-  for (let i = 0, arrayLength = array.length; i < arrayLength; i++) {
-    if (keysEqual(keyExpr, keyInfo.keyOf(array[i]), key)) {
-      return i;
+    if (!disableCache) {
+      generateDataByKeyMap(keyInfo, items);
     }
-  }
-  return -1;
+
+    const insertIndex = useInsertIndex && isDefined(item.index) ? item.index : -1;
+
+    // eslint-disable-next-line default-case
+    switch (item.type) {
+      case 'update':
+        update(keyInfo, items, item.key, item.data, true, immutable, logError);
+        break;
+      case 'insert':
+        insert(keyInfo, items, item.data, insertIndex, true, logError, skipCopying);
+        break;
+      case 'remove':
+        remove(keyInfo, items, item.key, true, logError);
+        break;
+    }
+  });
+  return resultItems;
+}
+
+function applyChanges(
+  data: unknown[],
+  changes: StoreChange[],
+  options: ApplyChangesOptions = {},
+): unknown[] {
+  const { keyExpr = 'id', immutable = true } = options;
+  // @ts-expect-error compileGetter() is declared as (expr: string) => unknown
+  const keyGetter: Function = compileGetter(keyExpr);
+  const keyInfo: KeyInfo = {
+    key: () => keyExpr,
+    keyOf: (obj: unknown): unknown => keyGetter(obj),
+  };
+
+  return applyBatch({
+    keyInfo,
+    data,
+    changes,
+    immutable,
+    disableCache: true,
+    logError: true,
+  });
 }
 
 export {
diff --git a/packages/devextreme/js/__internal/data/custom_store.ts b/packages/devextreme/js/__internal/data/custom_store.ts
index 90e720d4056c..77d22482a4c7 100644
--- a/packages/devextreme/js/__internal/data/custom_store.ts
+++ b/packages/devextreme/js/__internal/data/custom_store.ts
@@ -209,7 +209,7 @@ function runRawLoadWithQuery(
     const rawDataQuery = arrayQuery(rawData, { errorHandler: store._errorHandler });
     const waitList: DeferredObj<unknown>[] = [];
 
-    const result: { items?: unknown[]; totalCount?: unknown } = {};
+    const result: { items?: unknown; totalCount?: unknown } = {};
 
     if (!countOnly) {
       const itemsQuery = storeHelper.queryByOptions(rawDataQuery, loadOptions, false);
@@ -217,7 +217,7 @@ function runRawLoadWithQuery(
         result.items = rawData.slice(0);
       } else {
         const itemsPromise: DeferredObj<unknown> = itemsQuery.enumerate()
-          .done((asyncResult: unknown[]) => {
+          .done((asyncResult: unknown) => {
             result.items = asyncResult;
           });
         waitList.push(itemsPromise);
@@ -367,7 +367,6 @@ class CustomStore extends Store {
 
   _pushImpl(changes: StoreChange[]): void {
     if (this.__rawData) {
-      // @ts-expect-error array_utils is untyped: `applyBatch` destructures every option as required
       applyBatch({
         keyInfo: this,
         data: this.__rawData,
diff --git a/packages/devextreme/js/__internal/data/data_controller/data_controller.ts b/packages/devextreme/js/__internal/data/data_controller/data_controller.ts
index 840781fd8302..3b4d5b4bf14f 100644
--- a/packages/devextreme/js/__internal/data/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/data/data_controller/data_controller.ts
@@ -65,7 +65,6 @@ class DataController {
       this._isSharedDataSource = true;
       this._dataSource = dataSourceOptions;
     } else {
-      // @ts-expect-error
       const normalizedDataSourceOptions = normalizeDataSourceOptions(dataSourceOptions);
       this._dataSource = new DataSource(
         extend(true, {}, {}, normalizedDataSourceOptions),
diff --git a/packages/devextreme/js/__internal/data/data_source/data_source.ts b/packages/devextreme/js/__internal/data/data_source/data_source.ts
index 72aae3df3fab..1f1cc8ee8fec 100644
--- a/packages/devextreme/js/__internal/data/data_source/data_source.ts
+++ b/packages/devextreme/js/__internal/data/data_source/data_source.ts
@@ -28,6 +28,7 @@ import type {
   ChangedEvent, DataSourceEventName, EventOptionName, LoadOperation,
   LoadResult, NormalizedDataSourceOptions, StoreLoadOptions,
 } from './types';
+import type { Mapper } from './utils';
 
 // Mirrors the coercion the global `isFinite` applies to non-numeric values.
 const isFiniteValue = (value: unknown): value is number => isFinite(Number(value));
@@ -58,11 +59,11 @@ export class DataSource {
 
   _onPushHandler: Function;
 
-  _aggregationTimeoutId?: number;
+  _aggregationTimeoutId?: ReturnType<typeof setTimeout>;
 
   _storeLoadOptions: StoreLoadOptions;
 
-  _mapFunc?: Function;
+  _mapFunc?: Mapper;
 
   _postProcessFunc?: Function;
 
@@ -567,7 +568,6 @@ export class DataSource {
         dataSourceChanges = changingArgs.postProcessChanges(dataSourceChanges);
       }
 
-      // @ts-expect-error array_utils is untyped: `applyBatch` destructures every option as required
       applyBatch({
         keyInfo: this.store(),
         data: items,
diff --git a/packages/devextreme/js/__internal/data/data_source/operation_manager.ts b/packages/devextreme/js/__internal/data/data_source/operation_manager.ts
index cfde35fffb6f..4cb21cb79b92 100644
--- a/packages/devextreme/js/__internal/data/data_source/operation_manager.ts
+++ b/packages/devextreme/js/__internal/data/data_source/operation_manager.ts
@@ -1,32 +1,24 @@
 import { CANCELED_TOKEN } from '@js/common/data/data_source/utils';
+import type { DeferredObj } from '@js/core/utils/deferred';
 
 export default class OperationManager {
-  constructor() {
-    // @ts-expect-error
-    this._counter = -1;
-    // @ts-expect-error
-    this._deferreds = {};
-  }
+  _counter = -1;
+
+  _deferreds: Record<number, DeferredObj<unknown>> = {};
 
-  add(deferred) {
-    // @ts-expect-error
-    this._counter++;
-    // @ts-expect-error
+  add(deferred: DeferredObj<unknown>): number {
+    this._counter += 1;
     this._deferreds[this._counter] = deferred;
-    // @ts-expect-error
     return this._counter;
   }
 
-  remove(operationId) {
-    // @ts-expect-error
+  remove(operationId: number): boolean {
     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     return delete this._deferreds[operationId];
   }
 
-  cancel(operationId) {
-    // @ts-expect-error
+  cancel(operationId: number): boolean {
     if (operationId in this._deferreds) {
-      // @ts-expect-error
       this._deferreds[operationId].reject(CANCELED_TOKEN);
       return true;
     }
@@ -34,13 +26,10 @@ export default class OperationManager {
     return false;
   }
 
-  cancelAll() {
-    // @ts-expect-error
+  cancelAll(): void {
     while (this._counter > -1) {
-      // @ts-expect-error
       this.cancel(this._counter);
-      // @ts-expect-error
-      this._counter--;
+      this._counter -= 1;
     }
   }
 }
diff --git a/packages/devextreme/js/__internal/data/data_source/utils.ts b/packages/devextreme/js/__internal/data/data_source/utils.ts
index 40192c669e20..c6aed87cfcc6 100644
--- a/packages/devextreme/js/__internal/data/data_source/utils.ts
+++ b/packages/devextreme/js/__internal/data/data_source/utils.ts
@@ -2,120 +2,173 @@ import ArrayStore from '@js/common/data/array_store';
 import { CustomStore } from '@js/common/data/custom_store';
 import { normalizeSortingInfo } from '@js/common/data/utils';
 import ajaxUtils from '@js/core/utils/ajax';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
-import { each, map } from '@js/core/utils/iterator';
-import { isPlainObject } from '@js/core/utils/type';
-import Store from '@js/data/abstract_store';
+import { isObject, isPlainObject } from '@js/core/utils/type';
+import Store from '@ts/data/abstract_store';
+
+import type { NormalizedDataSourceOptions } from './types';
 
 export const CANCELED_TOKEN = 'canceled';
 
-export const isPending = (deferred) => deferred.state() === 'pending';
+export type Mapper = (item: unknown) => unknown;
+
+interface GroupItem {
+  items?: unknown[];
+}
+
+export interface NormalizationOptions {
+  fromUrlLoadMode?: string;
+}
+
+interface DataSourceOptionsInput extends Record<string, unknown> {
+  store?: unknown;
+}
+
+export const isPending = (deferred: DeferredObj<unknown>): boolean => deferred.state() === 'pending';
 
-export const normalizeStoreLoadOptionAccessorArguments = (originalArguments) => {
-  // eslint-disable-next-line default-case
+export const normalizeStoreLoadOptionAccessorArguments = (
+  originalArguments: unknown[],
+): unknown => {
   switch (originalArguments.length) {
     case 0:
       return undefined;
     case 1:
       return originalArguments[0];
+    default:
+      return originalArguments.slice();
   }
-  return [].slice.call(originalArguments);
 };
 
-const mapGroup = (group, level, mapper) => map(group, (item) => {
-  const { items, ...restItem } = item;
-  return {
-    ...restItem,
-    items: mapRecursive(item.items, level - 1, mapper),
-  };
-});
-
-const mapRecursive = (items, level, mapper) => {
+const mapRecursive = (items: unknown, level: number, mapper: Mapper): unknown => {
   if (!Array.isArray(items)) return items;
-  return level ? mapGroup(items, level, mapper) : map(items, mapper);
+
+  if (!level) {
+    return items.map(mapper);
+  }
+
+  return items.map((item) => {
+    const groupItem: GroupItem = isObject(item) ? item : {};
+
+    return {
+      ...groupItem,
+      items: mapRecursive(groupItem.items, level - 1, mapper),
+    };
+  });
 };
 
-export const mapDataRespectingGrouping = (items, mapper, groupInfo) => {
+export const mapDataRespectingGrouping = (
+  items: unknown[],
+  mapper: Mapper,
+  groupInfo?: unknown,
+): unknown[] => {
   const level = groupInfo ? normalizeSortingInfo(groupInfo).length : 0;
+  const mapped = mapRecursive(items, level, mapper);
 
-  return mapRecursive(items, level, mapper);
+  return Array.isArray(mapped) ? mapped : [];
 };
 
-export const normalizeLoadResult = (data, extra) => {
-  if (data?.data) {
-    extra = data;
-    data = data.data;
-  }
+export interface NormalizedLoadResult {
+  data: unknown[];
+  extra: unknown;
+}
 
-  if (!Array.isArray(data)) {
-    data = [data];
-  }
+export const normalizeLoadResult = (data: unknown, extra?: unknown): NormalizedLoadResult => {
+  const loadResult: { data?: unknown } = isObject(data) ? data : {};
+
+  const resultData: unknown = loadResult.data ? loadResult.data : data;
+  const resultExtra: unknown = loadResult.data ? data : extra;
 
   return {
-    data,
-    extra,
+    data: Array.isArray(resultData) ? resultData : [resultData],
+    extra: resultExtra,
   };
 };
 
-const createCustomStoreFromLoadFunc = (options) => {
-  const storeConfig = {};
+const CUSTOM_STORE_OPTION_NAMES = [
+  'useDefaultSearch', 'key', 'load', 'loadMode', 'cacheRawData', 'byKey',
+  'lookup', 'totalCount', 'insert', 'update', 'remove',
+];
+
+const createCustomStoreFromLoadFunc = (options: DataSourceOptionsInput): CustomStore => {
+  const storeConfig: Record<string, unknown> = {};
 
-  each(['useDefaultSearch', 'key', 'load', 'loadMode', 'cacheRawData', 'byKey', 'lookup', 'totalCount', 'insert', 'update', 'remove'], function () {
-    storeConfig[this] = options[this];
+  CUSTOM_STORE_OPTION_NAMES.forEach((optionName) => {
+    storeConfig[optionName] = options[optionName];
     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-    delete options[this];
+    delete options[optionName];
   });
+
   return new CustomStore(storeConfig);
 };
 
-const createStoreFromConfig = (storeConfig) => {
-  const alias = storeConfig.type;
+const createStoreFromConfig = (storeConfig: Record<string, unknown>): Store => {
+  const alias = String(storeConfig.type);
 
   delete storeConfig.type;
-  // @ts-expect-error
-  return Store.create(alias, storeConfig);
+
+  const store: Store = Store.create(alias, storeConfig);
+
+  return store;
 };
 
-const createCustomStoreFromUrl = (url, normalizationOptions) => new CustomStore({
-  load: () => ajaxUtils.sendRequest({ url, dataType: 'json' }),
+const createCustomStoreFromUrl = (
+  url: string,
+  normalizationOptions?: NormalizationOptions,
+): CustomStore => new CustomStore({
+  load: (): unknown => ajaxUtils.sendRequest({ url, dataType: 'json' }),
   loadMode: normalizationOptions?.fromUrlLoadMode,
 });
 
-export const normalizeDataSourceOptions = (options, normalizationOptions) => {
-  let store;
-
-  if (typeof options === 'string') {
-    options = {
-      paginate: false,
-      store: createCustomStoreFromUrl(options, normalizationOptions),
-    };
+const resolveStore = (options: DataSourceOptionsInput): Store => {
+  if ('load' in options) {
+    return createCustomStoreFromLoadFunc(options);
   }
 
-  if (options === undefined) {
-    options = [];
+  const { store } = options;
+
+  if (Array.isArray(store)) {
+    return new ArrayStore(store);
+  }
+  if (isPlainObject(store)) {
+    return createStoreFromConfig(extend({}, store));
   }
 
-  if (Array.isArray(options) || options instanceof Store) {
-    options = { store: options };
-  } else {
-    options = extend({}, options);
+  // @ts-expect-error the `store` option is user-provided and is not necessarily a Store
+  const passedThrough: Store = store;
+
+  return passedThrough;
+};
+
+export const normalizeDataSourceOptions = (
+  options: unknown,
+  normalizationOptions?: NormalizationOptions,
+): NormalizedDataSourceOptions => {
+  let source: unknown = options;
+
+  if (typeof source === 'string') {
+    source = {
+      paginate: false,
+      store: createCustomStoreFromUrl(source, normalizationOptions),
+    };
   }
 
-  if (options.store === undefined) {
-    options.store = [];
+  if (source === undefined) {
+    source = [];
   }
 
-  store = options.store;
+  const normalized: DataSourceOptionsInput = Array.isArray(source) || source instanceof Store
+    ? { store: source }
+    : extend({}, source);
 
-  if ('load' in options) {
-    store = createCustomStoreFromLoadFunc(options);
-  } else if (Array.isArray(store)) {
-    store = new ArrayStore(store);
-  } else if (isPlainObject(store)) {
-    store = createStoreFromConfig(extend({}, store));
+  if (normalized.store === undefined) {
+    normalized.store = [];
   }
 
-  options.store = store;
+  const store = resolveStore(normalized);
 
-  return options;
+  return {
+    ...normalized,
+    store,
+  };
 };
diff --git a/packages/devextreme/js/__internal/data/endpoint_selector.ts b/packages/devextreme/js/__internal/data/endpoint_selector.ts
index 22f200d13ddd..7726e93a3db4 100644
--- a/packages/devextreme/js/__internal/data/endpoint_selector.ts
+++ b/packages/devextreme/js/__internal/data/endpoint_selector.ts
@@ -4,36 +4,44 @@ import { getWindow } from '@js/core/utils/window';
 
 const window = getWindow();
 
-let IS_WINJS_ORIGIN;
-let IS_LOCAL_ORIGIN;
+interface Endpoint {
+  local: string;
+  production?: string;
+}
+
+type EndpointConfig = Record<string, Endpoint | undefined>;
+
+let isWinJsOrigin = false;
+let isLocalOrigin = false;
 
-function isLocalHostName(url) {
+function isLocalHostName(url: string): boolean {
   return /^(localhost$|127\.)/i.test(url); // TODO more precise check for 127.x.x.x IP
 }
 
-const EndpointSelector = function (config) {
-  this.config = config;
-  IS_WINJS_ORIGIN = window.location.protocol === 'ms-appx:';
-  IS_LOCAL_ORIGIN = isLocalHostName(window.location.hostname);
-};
+class EndpointSelector {
+  config: EndpointConfig;
 
-EndpointSelector.prototype = {
-  urlFor(key) {
+  constructor(config: EndpointConfig) {
+    this.config = config;
+    isWinJsOrigin = window.location.protocol === 'ms-appx:';
+    isLocalOrigin = isLocalHostName(window.location.hostname);
+  }
+
+  urlFor(key: string): string {
     const bag = this.config[key];
     if (!bag) {
       throw errors.Error('E0006');
     }
 
     if (bag.production) {
-      // @ts-expect-error
-      if (IS_WINJS_ORIGIN && !Debug.debuggerEnabled || !IS_WINJS_ORIGIN && !IS_LOCAL_ORIGIN) {
+      // @ts-expect-error `Debug` is a WinJS global that has no ambient declaration here
+      if ((isWinJsOrigin && !Debug.debuggerEnabled) || (!isWinJsOrigin && !isLocalOrigin)) {
         return bag.production;
       }
     }
 
     return bag.local;
-  },
-
-};
+  }
+}
 
 export default EndpointSelector;
diff --git a/packages/devextreme/js/__internal/data/errors.ts b/packages/devextreme/js/__internal/data/errors.ts
index 0268bd78af3d..076821979898 100644
--- a/packages/devextreme/js/__internal/data/errors.ts
+++ b/packages/devextreme/js/__internal/data/errors.ts
@@ -1,5 +1,6 @@
 import coreErrors from '@js/core/errors';
 import errorUtils from '@js/core/utils/error';
+import { isObject } from '@js/core/utils/type';
 
 export const errors = errorUtils(coreErrors.ERROR_MESSAGES, {
 
@@ -59,15 +60,20 @@ export const errors = errorUtils(coreErrors.ERROR_MESSAGES, {
 
   W4002: 'Data loading has failed for some cells due to the following error: {0}',
 });
+
+export type DataErrorHandler = (error: unknown) => void;
+
 // eslint-disable-next-line import/no-mutable-exports
-export let errorHandler = null;
-export const handleError = function (error) {
+export let errorHandler: DataErrorHandler | null = null;
+
+export const handleError = function (error: unknown): void {
   /// #DEBUG
-  const id = error && '__id' in error ? error.__id : 'E4000';
+  const id = isObject(error) && '__id' in error ? error.__id : 'E4000';
   errors.log(id, error);
   /// #ENDDEBUG
-  // @ts-expect-error
   errorHandler?.(error);
 };
-// eslint-disable-next-line no-return-assign
-export const setErrorHandler = (handler) => errorHandler = handler;
+
+export const setErrorHandler = (handler: DataErrorHandler | null): void => {
+  errorHandler = handler;
+};
diff --git a/packages/devextreme/js/__internal/data/local_store.ts b/packages/devextreme/js/__internal/data/local_store.ts
index 14c956b01cd9..7bb8e4121ab8 100644
--- a/packages/devextreme/js/__internal/data/local_store.ts
+++ b/packages/devextreme/js/__internal/data/local_store.ts
@@ -3,14 +3,26 @@ import eventsEngine from '@js/common/core/events/core/events_engine';
 import ArrayStore from '@js/common/data/array_store';
 import { errors } from '@js/common/data/errors';
 import domAdapter from '@js/core/dom_adapter';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { getWindow } from '@js/core/utils/window';
+import type { ArrayStoreOptions } from '@ts/data/array_store';
 
 import Store from './abstract_store';
 
 const window = getWindow();
 
+export interface LocalStoreOptions extends ArrayStoreOptions {
+  name?: string;
+  immediate?: boolean;
+  flushInterval?: number;
+}
+
+interface LocalStoreData {
+  _array: unknown[];
+}
+
 class LocalStoreBackend {
-  _store: any;
+  _store: LocalStoreData;
 
   _dirty: boolean;
 
@@ -18,7 +30,7 @@ class LocalStoreBackend {
 
   _key: string;
 
-  constructor(store, storeOptions) {
+  constructor(store: LocalStoreData, storeOptions: LocalStoreOptions) {
     this._store = store;
     this._dirty = !!storeOptions.data;
 
@@ -31,14 +43,16 @@ class LocalStoreBackend {
 
     this.save();
 
-    const immediate = this._immediate = storeOptions.immediate;
+    const immediate = storeOptions.immediate ?? false;
+    this._immediate = immediate;
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const flushInterval = Math.max(100, storeOptions.flushInterval || 10 * 1000);
 
     if (!immediate) {
       const saveProxy = this.save.bind(this);
       setInterval(saveProxy, flushInterval);
       eventsEngine.on(window, 'beforeunload', saveProxy);
-      // @ts-expect-error
+      // @ts-expect-error `cordova` is injected by the Cordova container, `Window` has no such field
       if (window.cordova) {
         domAdapter.listen(domAdapter.getDocument(), 'pause', saveProxy, false);
       }
@@ -66,16 +80,17 @@ class LocalStoreBackend {
     this._dirty = false;
   }
 
-  _loadImpl(): any {
+  _loadImpl(): unknown[] {
     const raw = window.localStorage.getItem(this._key);
 
     if (raw) {
-      return JSON.parse(raw);
+      const stored: unknown = JSON.parse(raw);
+      return Array.isArray(stored) ? stored : [];
     }
     return [];
   }
 
-  _saveImpl(array): void {
+  _saveImpl(array: unknown[]): void {
     if (!array.length) {
       window.localStorage.removeItem(this._key);
     } else {
@@ -83,22 +98,21 @@ class LocalStoreBackend {
     }
   }
 }
+
 class LocalStore extends ArrayStore {
   _backend: LocalStoreBackend;
 
-  _array: any;
-
-  constructor(options) {
-    if (typeof options === 'string') {
-      options = { name: options };
-    } else {
-      options = options || {};
-    }
+  constructor(options?: LocalStoreOptions | string) {
+    const storeOptions: LocalStoreOptions = typeof options === 'string'
+      ? { name: options }
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      : options || {};
 
-    super(options);
-    this._array = options.data || [];
+    super(storeOptions);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    this._array = storeOptions.data || [];
 
-    this._backend = new LocalStoreBackend(this, options);
+    this._backend = new LocalStoreBackend(this, storeOptions);
     this._backend.load();
   }
 
@@ -111,17 +125,17 @@ class LocalStore extends ArrayStore {
     this._backend.notifyChanged();
   }
 
-  _insertImpl(values): any {
+  _insertImpl(values: unknown): DeferredObj<unknown> {
     const b = this._backend;
     return super._insertImpl(values).done(b.notifyChanged.bind(b));
   }
 
-  _updateImpl(key, values): any {
+  _updateImpl(key: unknown, values: unknown): DeferredObj<unknown> {
     const b = this._backend;
     return super._updateImpl(key, values).done(b.notifyChanged.bind(b));
   }
 
-  _removeImpl(key): any {
+  _removeImpl(key: unknown): DeferredObj<unknown> {
     const b = this._backend;
     return super._removeImpl(key).done(b.notifyChanged.bind(b));
   }
diff --git a/packages/devextreme/js/__internal/data/odata/query_adapter.ts b/packages/devextreme/js/__internal/data/odata/query_adapter.ts
index 3adfa9edc6f9..932de8a1bef3 100644
--- a/packages/devextreme/js/__internal/data/odata/query_adapter.ts
+++ b/packages/devextreme/js/__internal/data/odata/query_adapter.ts
@@ -1,8 +1,9 @@
 import queryAdapters from '@js/common/data/query_adapters';
 import config from '@js/core/config';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
-import { each } from '@js/core/utils/iterator';
-import { isFunction } from '@js/core/utils/type';
+import { isFunction, isString } from '@js/core/utils/type';
+import type { QueryAdapter, RemoteQueryOptions, RemoteTask } from '@ts/data/remote_query';
 
 import { errors } from '../errors';
 import {
@@ -12,6 +13,7 @@ import {
 } from '../utils';
 import {
   convertPrimitiveValue,
+  EdmLiteral,
   generateExpand,
   generateSelect,
   sendRequest,
@@ -22,96 +24,112 @@ import {
 const DEFAULT_PROTOCOL_VERSION = 4;
 const STRING_FUNCTIONS = ['contains', 'notcontains', 'startswith', 'endswith'];
 
+type Formatter = (prop: string, val: string) => string;
+
+type FieldTypes = Record<string, string>;
+
+interface ODataRequestParams {
+  [param: string]: unknown;
+  $orderby?: string;
+  $skip?: number;
+  $top?: number;
+  $select?: string;
+  $expand?: string;
+  $filter?: string;
+  // eslint-disable-next-line spellcheck/spell-checker
+  $inlinecount?: string;
+  $count?: string;
+}
+
 const compileCriteria = (() => {
-  let protocolVersion;
-  let forceLowerCase;
-  let fieldTypes;
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let protocolVersion: number;
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let forceLowerCase: boolean | undefined;
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let fieldTypes: FieldTypes | undefined;
 
-  const createBinaryOperationFormatter = (op) => (prop, val) => `${prop} ${op} ${val}`;
+  const createBinaryOperationFormatter = (op: string): Formatter => (prop, val) => `${prop} ${op} ${val}`;
 
-  const createStringFuncFormatter = (op, reverse) => (prop, val) => {
+  const createStringFuncFormatter = (op: string, reverse?: boolean): Formatter => (prop, val) => {
     const bag = [op, '('];
-
-    if (forceLowerCase) {
-      prop = prop.indexOf('tolower(') === -1 ? `tolower(${prop})` : prop;
-      val = val.toLowerCase();
-    }
+    const propName = forceLowerCase && !prop.includes('tolower(') ? `tolower(${prop})` : prop;
+    const value = forceLowerCase ? val.toLowerCase() : val;
 
     if (reverse) {
-      bag.push(val, ',', prop);
+      bag.push(value, ',', propName);
     } else {
-      bag.push(prop, ',', val);
+      bag.push(propName, ',', value);
     }
 
     bag.push(')');
     return bag.join('');
   };
 
-  const isStringFunction = function (name) {
+  const isStringFunction = function (name: string): boolean {
     return STRING_FUNCTIONS.some((funcName) => funcName === name);
   };
 
-  const formatters = {
+  const formatters: Record<string, Formatter> = {
     '=': createBinaryOperationFormatter('eq'),
     '<>': createBinaryOperationFormatter('ne'),
     '>': createBinaryOperationFormatter('gt'),
     '>=': createBinaryOperationFormatter('ge'),
     '<': createBinaryOperationFormatter('lt'),
     '<=': createBinaryOperationFormatter('le'),
-    // @ts-expect-error
     startswith: createStringFuncFormatter('startswith'),
-    // @ts-expect-error
     endswith: createStringFuncFormatter('endswith'),
   };
 
-  const formattersV2 = extend({}, formatters, {
-    /* eslint-disable spellcheck/spell-checker */
+  /* eslint-disable spellcheck/spell-checker */
+  const formattersV2: Record<string, Formatter> = {
+    ...formatters,
     contains: createStringFuncFormatter('substringof', true),
     notcontains: createStringFuncFormatter('not substringof', true),
-  });
+  };
+  /* eslint-enable spellcheck/spell-checker */
 
-  const formattersV4 = extend({}, formatters, {
-    // @ts-expect-error
+  /* eslint-disable spellcheck/spell-checker */
+  const formattersV4: Record<string, Formatter> = {
+    ...formatters,
     contains: createStringFuncFormatter('contains'),
-    // @ts-expect-error
     notcontains: createStringFuncFormatter('not contains'),
-  });
+  };
+  /* eslint-enable spellcheck/spell-checker */
 
-  const compileBinary = (criteria) => {
-    criteria = normalizeBinaryCriterion(criteria);
+  const compileBinary = (criteria: unknown[]): string => {
+    const crit = normalizeBinaryCriterion(criteria);
 
-    const op = criteria[1];
-    const fieldName = criteria[0];
-    const fieldType = fieldTypes && fieldTypes[fieldName];
+    const [rawFieldName, op] = crit;
+    const fieldName = isString(rawFieldName) || rawFieldName instanceof EdmLiteral
+      ? rawFieldName
+      : String(rawFieldName);
+    const fieldType = fieldTypes?.[String(fieldName)];
 
     if (fieldType && isStringFunction(op) && fieldType !== 'String') {
-      // @ts-expect-error
-      throw new errors.Error('E4024', op, fieldName, fieldType);
+      throw errors.Error('E4024', op, fieldName, fieldType);
     }
 
-    const formatters = protocolVersion === 4
+    const criterionFormatters = protocolVersion === 4
       ? formattersV4
       : formattersV2;
-    const formatter = formatters[op.toLowerCase()];
+    const formatter = criterionFormatters[op.toLowerCase()];
 
     if (!formatter) {
       throw errors.Error('E4003', op);
     }
 
-    let value = criteria[2];
-
-    if (fieldTypes?.[fieldName]) {
-      value = convertPrimitiveValue(fieldTypes[fieldName], value);
-    }
+    const value = fieldType ? convertPrimitiveValue(fieldType, crit[2]) : crit[2];
 
     return formatter(
       serializePropName(fieldName),
-      serializeValue(value, protocolVersion, fieldTypes?.[fieldName]),
+      serializeValue(value, protocolVersion, fieldType),
     );
   };
 
-  const compileUnary = (criteria) => {
+  const compileUnary = (criteria: unknown[]): string => {
     const op = criteria[0];
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     const crit = compileCore(criteria[1]);
 
     if (op === '!') {
@@ -121,43 +139,51 @@ const compileCriteria = (() => {
     throw errors.Error('E4003', op);
   };
 
-  const compileGroup = (criteria) => {
-    const bag = [];
-    let groupOperator;
-    let nextGroupOperator;
+  const compileGroup = (criteria: unknown[]): string => {
+    const bag: string[] = [];
+    // eslint-disable-next-line @typescript-eslint/init-declarations
+    let groupOperator: string | undefined;
+    // eslint-disable-next-line @typescript-eslint/init-declarations
+    let nextGroupOperator: string | undefined;
 
-    each(criteria, function (index, criterion) {
+    criteria.forEach((criterion) => {
       if (Array.isArray(criterion)) {
         if (bag.length > 1 && groupOperator !== nextGroupOperator) {
-          // @ts-expect-error
-          throw new errors.Error('E4019');
+          throw errors.Error('E4019');
         }
-        // @ts-expect-error
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
         bag.push(`(${compileCore(criterion)})`);
 
         groupOperator = nextGroupOperator;
         nextGroupOperator = 'and';
       } else {
-        nextGroupOperator = isConjunctiveOperator(this) ? 'and' : 'or';
+        nextGroupOperator = isConjunctiveOperator(criterion) ? 'and' : 'or';
       }
     });
 
     return bag.join(` ${groupOperator} `);
   };
 
-  const compileCore = (criteria) => {
-    if (Array.isArray(criteria[0])) {
-      return compileGroup(criteria);
+  const compileCore = (criteria: unknown): string => {
+    const criterion: unknown[] = Array.isArray(criteria) ? criteria : [criteria];
+
+    if (Array.isArray(criterion[0])) {
+      return compileGroup(criterion);
     }
 
-    if (isUnaryOperation(criteria)) {
-      return compileUnary(criteria);
+    if (isUnaryOperation(criterion)) {
+      return compileUnary(criterion);
     }
 
-    return compileBinary(criteria);
+    return compileBinary(criterion);
   };
 
-  return (criteria, version, types, filterToLower) => {
+  return (
+    criteria: unknown,
+    version: number,
+    types: FieldTypes | undefined,
+    filterToLower: boolean | undefined,
+  ): string => {
     fieldTypes = types;
     forceLowerCase = filterToLower ?? config().oDataFilterToLower;
     protocolVersion = version;
@@ -166,76 +192,62 @@ const compileCriteria = (() => {
   };
 })();
 
-const createODataQueryAdapter = (queryOptions) => {
-  /* eslint-disable  @typescript-eslint/naming-convention */
-  let _sorting = [];
-  const _criteria = [];
-  const _expand = queryOptions.expand;
-  let _select;
-  let _skip;
-  let _take;
-  let _countQuery;
-
-  const _oDataVersion = queryOptions.version || DEFAULT_PROTOCOL_VERSION;
-
-  const hasSlice = () => _skip || _take !== undefined;
-
-  const hasFunction = (criterion) => {
-    for (let i = 0; i < criterion.length; i++) {
-      if (isFunction(criterion[i])) {
-        return true;
-      }
-
-      if (Array.isArray(criterion[i]) && hasFunction(criterion[i])) {
-        return true;
-      }
-    }
-    return false;
-  };
-
-  const requestData = () => {
-    const result = {};
-
-    if (!_countQuery) {
-      if (_sorting.length) {
-        // @ts-expect-error
-        result.$orderby = _sorting.join(',');
+const createODataQueryAdapter = (queryOptions: RemoteQueryOptions): QueryAdapter => {
+  let sorting: string[] = [];
+  const criteria: unknown[] = [];
+  const { expand } = queryOptions;
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let select: string[] | undefined;
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let skip: number | undefined;
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let take: number | undefined;
+  let countQuery = false;
+
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  const oDataVersion = queryOptions.version || DEFAULT_PROTOCOL_VERSION;
+
+  const hasSlice = (): boolean => !!skip || take !== undefined;
+
+  const hasFunction = (criterion: unknown[]): boolean => criterion.some(
+    (item) => isFunction(item) || (Array.isArray(item) && hasFunction(item)),
+  );
+
+  const requestData = (): ODataRequestParams => {
+    const result: ODataRequestParams = {};
+
+    if (!countQuery) {
+      if (sorting.length) {
+        result.$orderby = sorting.join(',');
       }
-      if (_skip) {
-        // @ts-expect-error
-        result.$skip = _skip;
+      if (skip) {
+        result.$skip = skip;
       }
-      if (_take !== undefined) {
-        // @ts-expect-error
-        result.$top = _take;
+      if (take !== undefined) {
+        result.$top = take;
       }
-      // @ts-expect-error
-      result.$select = generateSelect(_oDataVersion, _select) || undefined;
-      // @ts-expect-error
       // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      result.$expand = generateExpand(_oDataVersion, _expand, _select) || undefined;
+      result.$select = generateSelect(oDataVersion, select) || undefined;
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      result.$expand = generateExpand(oDataVersion, expand, select) || undefined;
     }
 
-    if (_criteria.length) {
-      const criteria = _criteria.length < 2 ? _criteria[0] : _criteria;
-      const fieldTypes = queryOptions?.fieldTypes;
-      const filterToLower = queryOptions?.filterToLower;
-      // @ts-expect-error
-      result.$filter = compileCriteria(criteria, _oDataVersion, fieldTypes, filterToLower);
+    if (criteria.length) {
+      const filterCriteria: unknown = criteria.length < 2 ? criteria[0] : criteria;
+      const { fieldTypes, filterToLower } = queryOptions;
+      result.$filter = compileCriteria(filterCriteria, oDataVersion, fieldTypes, filterToLower);
     }
 
-    if (_countQuery) {
-      // @ts-expect-error
+    if (countQuery) {
       result.$top = 0;
     }
 
-    if (queryOptions.requireTotalCount || _countQuery) {
+    if (queryOptions.requireTotalCount || countQuery) {
       // todo: tests!!!
-      if (_oDataVersion !== 4) {
-        // @ts-expect-error
+      if (oDataVersion !== 4) {
+        // eslint-disable-next-line spellcheck/spell-checker
         result.$inlinecount = 'allpages';
       } else {
-        // @ts-expect-error
         result.$count = 'true';
       }
     }
@@ -243,19 +255,13 @@ const createODataQueryAdapter = (queryOptions) => {
     return result;
   };
 
-  const tryLiftSelect = (tasks) => {
-    let selectIndex = -1;
-    for (let i = 0; i < tasks.length; i++) {
-      if (tasks[i].name === 'select') {
-        selectIndex = i;
-        break;
-      }
-    }
+  const tryLiftSelect = (tasks: RemoteTask[]): void => {
+    const selectIndex = tasks.findIndex((task) => task.name === 'select');
 
     if (selectIndex < 0 || !isFunction(tasks[selectIndex].args[0])) return;
 
     const nextTask = tasks[1 + selectIndex];
-    if (!nextTask || nextTask.name !== 'slice') return;
+    if (nextTask?.name !== 'slice') return;
 
     tasks[1 + selectIndex] = tasks[selectIndex];
     tasks[selectIndex] = nextTask;
@@ -265,96 +271,94 @@ const createODataQueryAdapter = (queryOptions) => {
 
     optimize: tryLiftSelect,
 
-    exec(url) {
+    exec(url: string): DeferredObj<unknown> {
       return sendRequest(
-        _oDataVersion,
+        oDataVersion,
         {
           url,
-          params: extend(requestData(), queryOptions?.params),
+          params: extend(requestData(), queryOptions.params),
         },
         {
           beforeSend: queryOptions.beforeSend,
           jsonp: queryOptions.jsonp,
           withCredentials: queryOptions.withCredentials,
-          countOnly: _countQuery,
+          countOnly: countQuery,
           processDatesAsUtc: queryOptions.processDatesAsUtc,
           fieldTypes: queryOptions.fieldTypes,
-          isPaged: isFinite(_take),
+          isPaged: isFinite(Number(take)),
         },
       );
     },
-    /* eslint-disable @typescript-eslint/no-invalid-void-type */
-    multiSort(args): boolean | void {
-      let rules;
+
+    multiSort(args: unknown[]): boolean | undefined {
+      const rules: string[] = [];
 
       if (hasSlice()) {
         return false;
       }
 
-      for (let i = 0; i < args.length; i++) {
-        const getter = args[i][0];
-        const desc = !!args[i][1];
-        let rule;
+      for (const arg of args) {
+        const [getter, desc] = Array.isArray(arg) ? arg : [];
 
         if (typeof getter !== 'string') {
           return false;
         }
 
-        rule = serializePropName(getter);
-        if (desc) {
-          rule += ' desc';
-        }
-
-        rules = rules || [];
-        rules.push(rule);
+        rules.push(desc ? `${serializePropName(getter)} desc` : serializePropName(getter));
       }
 
-      _sorting = rules;
+      sorting = rules;
+
+      return undefined;
     },
 
-    slice(skipCount, takeCount): boolean | void {
+    slice(skipCount: number, takeCount: number): boolean | undefined {
       if (hasSlice()) {
         return false;
       }
 
-      _skip = skipCount;
-      _take = takeCount;
+      skip = skipCount;
+      take = takeCount;
+
+      return undefined;
     },
 
-    filter(criterion): boolean | void {
+    filter(...args: unknown[]): boolean | undefined {
       if (hasSlice()) {
         return false;
       }
 
-      if (!Array.isArray(criterion)) {
-        criterion = [].slice.call(arguments);
-      }
+      const [first] = args;
+      const criterion: unknown[] = Array.isArray(first) ? first : args.slice();
 
       if (hasFunction(criterion)) {
         return false;
       }
 
-      if (_criteria.length) {
-        // @ts-expect-error
-        _criteria.push('and');
+      if (criteria.length) {
+        criteria.push('and');
       }
-      // @ts-expect-error
-      _criteria.push(criterion);
+      criteria.push(criterion);
+
+      return undefined;
     },
 
-    select(expr): boolean | void {
-      if (_select || isFunction(expr)) {
+    select(...args: unknown[]): boolean | undefined {
+      const [expr] = args;
+
+      if (select || isFunction(expr)) {
         return false;
       }
 
-      if (!Array.isArray(expr)) {
-        expr = [].slice.call(arguments);
-      }
+      select = (Array.isArray(expr) ? expr : args.slice()).map(String);
+
+      return undefined;
+    },
 
-      _select = expr;
+    count(): boolean {
+      countQuery = true;
+      return countQuery;
     },
-    // eslint-disable-next-line no-return-assign
-    count: () => _countQuery = true,
   };
 };
 
diff --git a/packages/devextreme/js/__internal/data/odata/request_dispatcher.ts b/packages/devextreme/js/__internal/data/odata/request_dispatcher.ts
index e37f10217123..36acb68ebdde 100644
--- a/packages/devextreme/js/__internal/data/odata/request_dispatcher.ts
+++ b/packages/devextreme/js/__internal/data/odata/request_dispatcher.ts
@@ -1,72 +1,91 @@
 import '@js/common/data/odata/query_adapter';
 
 import { sendRequest } from '@js/common/data/odata/utils';
+import type { DeferredObj } from '@js/core/utils/deferred';
 
 const DEFAULT_PROTOCOL_VERSION = 4;
 
+export interface RequestDispatcherOptions {
+  url?: string;
+  beforeSend?: Function;
+  jsonp?: boolean;
+  version?: number;
+  withCredentials?: boolean;
+  processDatesAsUtc?: boolean;
+  deserializeDates?: boolean;
+  filterToLower?: boolean;
+}
+
 export default class RequestDispatcher {
-  constructor(options) {
-    options = options || {};
-    // @ts-expect-error
-    this._url = String(options.url).replace(/\/+$/, '');
-    // @ts-expect-error
-    this._beforeSend = options.beforeSend;
-    // @ts-expect-error
-    this._jsonp = options.jsonp;
-    // @ts-expect-error
-    this._version = options.version || DEFAULT_PROTOCOL_VERSION;
-    // @ts-expect-error
-    this._withCredentials = options.withCredentials;
-    // @ts-expect-error
-    this._processDatesAsUtc = options.processDatesAsUtc ?? options.deserializeDates ?? false;
-    // @ts-expect-error
-    this._filterToLower = options.filterToLower;
+  _url: string;
+
+  _beforeSend?: Function;
+
+  _jsonp?: boolean;
+
+  _version: number;
+
+  _withCredentials?: boolean;
+
+  _processDatesAsUtc: boolean;
+
+  _filterToLower?: boolean;
+
+  constructor(options?: RequestDispatcherOptions) {
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const dispatcherOptions: RequestDispatcherOptions = options || {};
+
+    this._url = String(dispatcherOptions.url).replace(/\/+$/, '');
+    this._beforeSend = dispatcherOptions.beforeSend;
+    this._jsonp = dispatcherOptions.jsonp;
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    this._version = dispatcherOptions.version || DEFAULT_PROTOCOL_VERSION;
+    this._withCredentials = dispatcherOptions.withCredentials;
+    this._processDatesAsUtc = dispatcherOptions.processDatesAsUtc
+      ?? dispatcherOptions.deserializeDates ?? false;
+    this._filterToLower = dispatcherOptions.filterToLower;
   }
 
-  sendRequest(url, method, params, payload) {
+  sendRequest(
+    url: string,
+    method?: string,
+    params?: Record<string, unknown> | null,
+    payload?: unknown,
+  ): DeferredObj<unknown> {
     return sendRequest(
       this.version,
       {
         url,
         method,
-        params: params || {},
+        params: params ?? {},
         payload,
       },
       {
-        // @ts-expect-error
         beforeSend: this._beforeSend,
-        // @ts-expect-error
         jsonp: this._jsonp,
-        // @ts-expect-error
         withCredentials: this._withCredentials,
-        // @ts-expect-error
         processDatesAsUtc: this._processDatesAsUtc,
       },
     );
   }
 
-  get version() {
-    // @ts-expect-error
+  get version(): number {
     return this._version;
   }
 
-  get beforeSend() {
-    // @ts-expect-error
+  get beforeSend(): Function | undefined {
     return this._beforeSend;
   }
 
-  get url() {
-    // @ts-expect-error
+  get url(): string {
     return this._url;
   }
 
-  get jsonp() {
-    // @ts-expect-error
+  get jsonp(): boolean | undefined {
     return this._jsonp;
   }
 
-  get filterToLower() {
-    // @ts-expect-error
+  get filterToLower(): boolean | undefined {
     return this._filterToLower;
   }
 }
diff --git a/packages/devextreme/js/__internal/data/odata/store.ts b/packages/devextreme/js/__internal/data/odata/store.ts
index 4464dc43d888..d02f3cf322fe 100644
--- a/packages/devextreme/js/__internal/data/odata/store.ts
+++ b/packages/devextreme/js/__internal/data/odata/store.ts
@@ -35,13 +35,6 @@ export interface ODataLoadOptions extends StoreLoadOptions {
   customQueryParams?: Record<string, unknown>;
 }
 
-// `RequestDispatcher` does not declare its own fields yet, so the members the store reads
-// directly are described here until that class is typed.
-type StoreRequestDispatcher = RequestDispatcher & {
-  _withCredentials?: unknown;
-  _processDatesAsUtc?: unknown;
-};
-
 const expandKeyType = (key: StoreKey, keyType: string): FieldTypes => ({ [String(key)]: keyType });
 
 const getProperty = (source: unknown, name: string): unknown => (
@@ -72,7 +65,7 @@ const mergeFieldTypesWithKeyType = (
 };
 
 class ODataStore extends Store {
-  _requestDispatcher: StoreRequestDispatcher;
+  _requestDispatcher: RequestDispatcher;
 
   _fieldTypes: FieldTypes;
 
diff --git a/packages/devextreme/js/__internal/data/query.ts b/packages/devextreme/js/__internal/data/query.ts
index c35f346ae08c..f25f87f4734f 100644
--- a/packages/devextreme/js/__internal/data/query.ts
+++ b/packages/devextreme/js/__internal/data/query.ts
@@ -1,9 +1,16 @@
 import { queryImpl } from '@js/common/data/query_implementation';
+import type { ArrayQuery, QueryOptions } from '@ts/data/array_query';
+import type { RemoteQuery, RemoteQueryOptions } from '@ts/data/remote_query';
 
-const query = function () {
-  const impl = Array.isArray(arguments[0]) ? 'array' : 'remote';
-  // @ts-expect-error
-  return queryImpl[impl].apply(this, arguments);
-};
+function query(array: unknown[], queryOptions?: QueryOptions): ArrayQuery;
+function query(url: string, queryOptions?: RemoteQueryOptions): RemoteQuery;
+function query(
+  source: unknown[] | string,
+  queryOptions?: QueryOptions & RemoteQueryOptions,
+): ArrayQuery | RemoteQuery {
+  return Array.isArray(source)
+    ? queryImpl.array(source, queryOptions)
+    : queryImpl.remote(source, queryOptions);
+}
 
 export default query;
diff --git a/packages/devextreme/js/__internal/data/remote_query.ts b/packages/devextreme/js/__internal/data/remote_query.ts
index 53fb79c54c50..d7ed4b829649 100644
--- a/packages/devextreme/js/__internal/data/remote_query.ts
+++ b/packages/devextreme/js/__internal/data/remote_query.ts
@@ -1,29 +1,73 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import arrayQueryImpl from '@js/common/data/array_query';
 import { errors, handleError } from '@js/common/data/errors';
 import queryAdapters from '@js/common/data/query_adapters';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred } from '@js/core/utils/deferred';
-import { each } from '@js/core/utils/iterator';
 import { isFunction } from '@js/core/utils/type';
+import type { ArrayQuery, LangParams } from '@ts/data/array_query';
+
+export interface RemoteTask {
+  name: string;
+  args: unknown[];
+}
+
+export interface QueryAdapter {
+  [taskName: string]: unknown;
+  optimize?: (tasks: RemoteTask[]) => void;
+  exec: (url: string) => DeferredObj<unknown>;
+}
+
+export interface RemoteQueryOptions {
+  adapter?: string | ((options: RemoteQueryOptions) => QueryAdapter);
+  errorHandler?: (error: unknown) => void;
+  langParams?: LangParams;
+  version?: number;
+  expand?: string | string[] | Function;
+  fieldTypes?: Record<string, string>;
+  filterToLower?: boolean;
+  requireTotalCount?: boolean;
+  params?: Record<string, unknown>;
+  beforeSend?: Function;
+  jsonp?: boolean;
+  withCredentials?: boolean;
+  processDatesAsUtc?: boolean;
+  deserializeDates?: boolean;
+}
+
+export interface RemoteQuery {
+  sortBy: (...args: unknown[]) => RemoteQuery;
+  thenBy: (...args: unknown[]) => RemoteQuery;
+  filter: (...args: unknown[]) => RemoteQuery;
+  slice: (...args: unknown[]) => RemoteQuery;
+  select: (...args: unknown[]) => RemoteQuery;
+  groupBy: (...args: unknown[]) => RemoteQuery;
+  count: (...args: unknown[]) => DeferredObj<unknown>;
+  min: (...args: unknown[]) => DeferredObj<unknown>;
+  max: (...args: unknown[]) => DeferredObj<unknown>;
+  sum: (...args: unknown[]) => DeferredObj<unknown>;
+  avg: (...args: unknown[]) => DeferredObj<unknown>;
+  aggregate: (...args: unknown[]) => DeferredObj<unknown>;
+  enumerate: (...args: unknown[]) => DeferredObj<unknown>;
+}
+
+const createTask = function (name: string, args: unknown[]): RemoteTask {
+  return { name, args };
+};
 
-const remoteQueryImpl = function (url, queryOptions, tasks) {
-  tasks = tasks || [];
-  queryOptions = queryOptions || {};
-
-  const createTask = function (name, args) {
-    return { name, args };
-  };
+const remoteQueryImpl = function (
+  url: string,
+  options?: RemoteQueryOptions,
+  previousTasks?: RemoteTask[],
+): RemoteQuery {
+  const tasks: RemoteTask[] = previousTasks ?? [];
+  const queryOptions: RemoteQueryOptions = options ?? {};
 
-  const exec = function (executorTask) {
-    // @ts-expect-error
-    const d = new Deferred();
-    let _adapterFactory;
-    let _adapter;
-    let _taskQueue;
-    let _currentTask;
-    let _mergedSortArgs;
+  const exec = function (executorTask: RemoteTask): DeferredObj<unknown> {
+    const d = Deferred<unknown>();
+    // eslint-disable-next-line @typescript-eslint/init-declarations
+    let mergedSortArgs: unknown[][] | undefined;
 
-    const rejectWithNotify = function (error) {
+    const rejectWithNotify = function (error: unknown): void {
       const handler = queryOptions.errorHandler;
       if (handler) {
         handler(error);
@@ -33,90 +77,108 @@ const remoteQueryImpl = function (url, queryOptions, tasks) {
       d.reject(error);
     };
 
-    function mergeSortTask(task) {
-      // eslint-disable-next-line default-case
+    function mergeSortTask(task: RemoteTask): boolean {
       switch (task.name) {
         case 'sortBy':
-          _mergedSortArgs = [task.args];
+          mergedSortArgs = [task.args];
           return true;
 
         case 'thenBy':
-          if (!_mergedSortArgs) {
+          if (!mergedSortArgs) {
             throw errors.Error('E4004');
           }
 
-          _mergedSortArgs.push(task.args);
+          mergedSortArgs.push(task.args);
           return true;
-      }
 
-      return false;
+        default:
+          return false;
+      }
     }
 
-    function unmergeSortTasks() {
-      const head = _taskQueue[0];
-      const unmergedTasks = [];
-
-      if (head && head.name === 'multiSort') {
-        _taskQueue.shift();
-        each(head.args[0], function () {
-          // @ts-expect-error
-          unmergedTasks.push(createTask(unmergedTasks.length ? 'thenBy' : 'sortBy', this));
-        });
+    function unmergeSortTasks(queue: RemoteTask[]): RemoteTask[] {
+      const head = queue[0];
+      const unmergedTasks: RemoteTask[] = [];
+
+      if (head?.name === 'multiSort') {
+        queue.shift();
+        const [sortArgsList] = head.args;
+        if (Array.isArray(sortArgsList)) {
+          sortArgsList.forEach((sortArgs: unknown) => {
+            unmergedTasks.push(createTask(
+              unmergedTasks.length ? 'thenBy' : 'sortBy',
+              Array.isArray(sortArgs) ? sortArgs : [sortArgs],
+            ));
+          });
+        }
       }
 
-      _taskQueue = unmergedTasks.concat(_taskQueue);
+      return unmergedTasks.concat(queue);
     }
 
-    try {
-      _adapterFactory = queryOptions.adapter;
-      if (!isFunction(_adapterFactory)) {
-        _adapterFactory = queryAdapters[_adapterFactory];
+    function passTaskToAdapter(adapter: QueryAdapter, task: RemoteTask): boolean {
+      if (String(task.name) === 'enumerate') {
+        return true;
       }
 
-      _adapter = _adapterFactory(queryOptions);
-
-      _taskQueue = [].concat(tasks).concat(executorTask);
+      const taskHandler = adapter[task.name];
 
-      const { optimize } = _adapter;
-      if (optimize) optimize(_taskQueue);
+      return isFunction(taskHandler) && taskHandler.apply(adapter, task.args) !== false;
+    }
 
-      while (_taskQueue.length) {
-        /* eslint-disable-next-line prefer-destructuring */
-        _currentTask = _taskQueue[0];
+    function collectAdapterTasks(adapter: QueryAdapter, queue: RemoteTask[]): void {
+      while (queue.length) {
+        const currentTask = queue[0];
 
-        if (!mergeSortTask(_currentTask)) {
-          if (_mergedSortArgs) {
-            _taskQueue.unshift(createTask('multiSort', [_mergedSortArgs]));
-            _mergedSortArgs = null;
+        if (!mergeSortTask(currentTask)) {
+          if (mergedSortArgs) {
+            queue.unshift(createTask('multiSort', [mergedSortArgs]));
+            mergedSortArgs = undefined;
+            // eslint-disable-next-line no-continue
             continue;
           }
 
-          if (String(_currentTask.name) !== 'enumerate') {
-            if (!_adapter[_currentTask.name] || _adapter[_currentTask.name].apply(_adapter, _currentTask.args) === false) {
-              break;
-            }
+          if (!passTaskToAdapter(adapter, currentTask)) {
+            break;
           }
         }
-        _taskQueue.shift();
+        queue.shift();
       }
+    }
 
-      unmergeSortTasks();
+    try {
+      const adapterFactory = isFunction(queryOptions.adapter)
+        ? queryOptions.adapter
+        : queryAdapters[String(queryOptions.adapter)];
+
+      const adapter: QueryAdapter = adapterFactory(queryOptions);
+
+      let taskQueue: RemoteTask[] = [...tasks, executorTask];
+
+      const { optimize } = adapter;
+      if (optimize) optimize(taskQueue);
+
+      collectAdapterTasks(adapter, taskQueue);
 
-      _adapter.exec(url)
-        .done((result, extra) => {
-          if (!_taskQueue.length) {
+      taskQueue = unmergeSortTasks(taskQueue);
+
+      adapter.exec(url)
+        .done((result: unknown, extra: unknown) => {
+          if (!taskQueue.length) {
             d.resolve(result, extra);
           } else {
-            let clientChain = arrayQueryImpl(result, {
+            // @ts-expect-error the adapter resolves with whatever the service returned
+            let clientChain: ArrayQuery = arrayQueryImpl(result, {
               errorHandler: queryOptions.errorHandler,
             });
-            each(_taskQueue, function () {
-              clientChain = clientChain[this.name].apply(clientChain, this.args);
+            taskQueue.forEach((task) => {
+              const method = clientChain[task.name];
+              if (isFunction(method)) {
+                clientChain = method.apply(clientChain, task.args);
+              }
             });
-            clientChain
-              // @ts-expect-error
-              .done(d.resolve)
-              .fail(d.reject);
+            // @ts-expect-error the queue ends with enumerate, so the chain ends with a Deferred
+            clientChain.done(d.resolve).fail(d.reject);
           }
         })
         .fail(rejectWithNotify);
@@ -124,32 +186,32 @@ const remoteQueryImpl = function (url, queryOptions, tasks) {
       rejectWithNotify(x);
     }
 
+    // @ts-expect-error DeferredObj typings: promise() is declared as a plain Promise
     return d.promise();
   };
 
-  const query = {};
-
-  each(
-    ['sortBy', 'thenBy', 'filter', 'slice', 'select', 'groupBy'],
-    function () {
-      const name = String(this);
-      query[name] = function () {
-        return remoteQueryImpl(url, queryOptions, tasks.concat(createTask(name, arguments)));
-      };
-    },
+  const chain = (name: string, args: unknown[]): RemoteQuery => remoteQueryImpl(
+    url,
+    queryOptions,
+    tasks.concat(createTask(name, args)),
   );
 
-  each(
-    ['count', 'min', 'max', 'sum', 'avg', 'aggregate', 'enumerate'],
-    function () {
-      const name = String(this);
-      query[name] = function () {
-        return exec.call(this, createTask(name, arguments));
-      };
-    },
-  );
-
-  return query;
+  return {
+    sortBy: (...args: unknown[]): RemoteQuery => chain('sortBy', args),
+    thenBy: (...args: unknown[]): RemoteQuery => chain('thenBy', args),
+    filter: (...args: unknown[]): RemoteQuery => chain('filter', args),
+    slice: (...args: unknown[]): RemoteQuery => chain('slice', args),
+    select: (...args: unknown[]): RemoteQuery => chain('select', args),
+    groupBy: (...args: unknown[]): RemoteQuery => chain('groupBy', args),
+
+    count: (...args: unknown[]): DeferredObj<unknown> => exec(createTask('count', args)),
+    min: (...args: unknown[]): DeferredObj<unknown> => exec(createTask('min', args)),
+    max: (...args: unknown[]): DeferredObj<unknown> => exec(createTask('max', args)),
+    sum: (...args: unknown[]): DeferredObj<unknown> => exec(createTask('sum', args)),
+    avg: (...args: unknown[]): DeferredObj<unknown> => exec(createTask('avg', args)),
+    aggregate: (...args: unknown[]): DeferredObj<unknown> => exec(createTask('aggregate', args)),
+    enumerate: (...args: unknown[]): DeferredObj<unknown> => exec(createTask('enumerate', args)),
+  };
 };
 
 export default remoteQueryImpl;
diff --git a/packages/devextreme/js/__internal/data/store_helper.ts b/packages/devextreme/js/__internal/data/store_helper.ts
index 9c30c9243f73..798d00fd5bee 100644
--- a/packages/devextreme/js/__internal/data/store_helper.ts
+++ b/packages/devextreme/js/__internal/data/store_helper.ts
@@ -1,85 +1,134 @@
 import arrayQuery from '@js/common/data/array_query';
+import type { SortingInfo } from '@js/common/data/utils';
 import { normalizeSortingInfo } from '@js/common/data/utils';
-// @ts-expect-error
-import { grep } from '@js/core/utils/common';
 import { extend } from '@js/core/utils/extend';
-import { each } from '@js/core/utils/iterator';
+import { isObject } from '@js/core/utils/type';
+import type { LangParams } from '@ts/data/array_query';
+
+export interface DataQuery {
+  /* eslint-disable @typescript-eslint/method-signature-style */
+  setLangParams?(langParams: LangParams): void;
+  filter(criteria: unknown): this;
+  sortBy(getter: unknown, desc?: unknown, compare?: unknown): this;
+  thenBy(getter: unknown, desc?: unknown, compare?: unknown): this;
+  select(getter: unknown): this;
+  slice(skip: number, take?: number): this;
+  groupBy(getter: unknown): this;
+  toArray(): unknown[];
+  /* eslint-enable @typescript-eslint/method-signature-style */
+}
+
+interface GroupingInfo extends Array<SortingInfo> {
+  keepInitialKeyOrder?: boolean;
+}
+
+export interface QueryByOptions {
+  filter?: unknown;
+  sort?: unknown;
+  select?: unknown;
+  group?: unknown;
+  skip?: number;
+  take?: number;
+  langParams?: LangParams;
+}
+
+interface GroupResult {
+  items?: unknown[];
+}
 
-function multiLevelGroup(query, groupInfo) {
-  query = query.groupBy(groupInfo[0].selector);
+function multiLevelGroup<TQuery extends DataQuery>(
+  query: TQuery,
+  groupInfo: SortingInfo[],
+): TQuery {
+  let result = query.groupBy(groupInfo[0].selector);
 
   if (groupInfo.length > 1) {
-    query = query.select((g) => extend({}, g, {
-      items: multiLevelGroup(arrayQuery(g.items), groupInfo.slice(1)).toArray(),
-    }));
+    result = result.select((group: unknown) => {
+      const { items }: GroupResult = isObject(group) ? group : {};
+
+      const merged: unknown = extend({}, group, {
+        items: multiLevelGroup(arrayQuery(items ?? []), groupInfo.slice(1)).toArray(),
+      });
+
+      return merged;
+    });
   }
 
-  return query;
+  return result;
 }
 
-function arrangeSortingInfo(groupInfo, sortInfo) {
-  const filteredGroup = [];
-  each(groupInfo, (_, group) => {
-    const collision = grep(sortInfo, (sort) => group.selector === sort.selector);
+function arrangeSortingInfo(groupInfo: SortingInfo[], sortInfo: SortingInfo[]): SortingInfo[] {
+  const filteredGroup = groupInfo.filter(
+    (group) => !sortInfo.some((sort) => group.selector === sort.selector),
+  );
 
-    if (collision.length < 1) {
-      // @ts-expect-error
-      filteredGroup.push(group);
-    }
-  });
   return filteredGroup.concat(sortInfo);
 }
 
-function queryByOptions(query, options, isCountQuery) {
-  options = options || {};
+function queryByOptions<TQuery extends DataQuery>(
+  query: TQuery,
+  options?: QueryByOptions,
+  isCountQuery?: boolean,
+): TQuery {
+  const queryOptions: QueryByOptions = options ?? {};
+  let result = query;
 
-  const { filter } = options;
+  const { filter } = queryOptions;
 
-  if (options?.langParams) {
-    query.setLangParams?.(options.langParams);
+  if (queryOptions.langParams) {
+    result.setLangParams?.(queryOptions.langParams);
   }
 
   if (filter) {
-    query = query.filter(filter);
+    result = result.filter(filter);
   }
 
   if (isCountQuery) {
-    return query;
+    return result;
   }
 
-  let { sort } = options;
-  const { select } = options;
-  let { group } = options;
-  const { skip } = options;
-  const { take } = options;
+  const {
+    sort, select, skip, take,
+  } = queryOptions;
 
-  if (group) {
-    group = normalizeSortingInfo(group);
-    group.keepInitialKeyOrder = !!options.group.keepInitialKeyOrder;
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let group: GroupingInfo | undefined;
+  if (queryOptions.group) {
+    const groupOption: { keepInitialKeyOrder?: unknown } = isObject(queryOptions.group)
+      ? queryOptions.group
+      : {};
+
+    group = normalizeSortingInfo(queryOptions.group);
+    group.keepInitialKeyOrder = !!groupOption.keepInitialKeyOrder;
   }
+
   if (sort || group) {
-    sort = normalizeSortingInfo(sort || []);
-    if (group && !group.keepInitialKeyOrder) {
-      sort = arrangeSortingInfo(group, sort);
-    }
-    each(sort, function (index) {
-      query = query[index ? 'thenBy' : 'sortBy'](this.selector, this.desc, this.compare);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const sortInfo = normalizeSortingInfo(sort || []);
+    const sortRules = group && !group.keepInitialKeyOrder
+      ? arrangeSortingInfo(group, sortInfo)
+      : sortInfo;
+
+    sortRules.forEach((rule, index) => {
+      result = index
+        ? result.thenBy(rule.selector, rule.desc, rule.compare)
+        : result.sortBy(rule.selector, rule.desc, rule.compare);
     });
   }
 
   if (select) {
-    query = query.select(select);
+    result = result.select(select);
   }
 
   if (group) {
-    query = multiLevelGroup(query, group);
+    result = multiLevelGroup(result, group);
   }
 
   if (take || skip) {
-    query = query.slice(skip || 0, take);
+    result = result.slice(skip ?? 0, take);
   }
 
-  return query;
+  return result;
 }
 
 export default {
diff --git a/packages/devextreme/js/__internal/data/utils.ts b/packages/devextreme/js/__internal/data/utils.ts
index ea0a65a494d8..373235940504 100644
--- a/packages/devextreme/js/__internal/data/utils.ts
+++ b/packages/devextreme/js/__internal/data/utils.ts
@@ -1,17 +1,20 @@
 /* eslint-disable spellcheck/spell-checker */
 import domAdapter from '@js/core/dom_adapter';
 import { equalByValue } from '@js/core/utils/common';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred } from '@js/core/utils/deferred';
 import { map } from '@js/core/utils/iterator';
 import readyCallbacks from '@js/core/utils/ready_callbacks';
-import { isFunction } from '@js/core/utils/type';
+import { isFunction, isObject, isString } from '@js/core/utils/type';
 import { getWindow } from '@js/core/utils/window';
 
 const ready = readyCallbacks.add;
 
 export const XHR_ERROR_UNLOAD = 'DEVEXTREME_XHR_ERROR_UNLOAD';
 
-export const normalizeBinaryCriterion = function (crit) {
+export type BinaryCriterion = [unknown, string, unknown];
+
+export const normalizeBinaryCriterion = function (crit: unknown[]): BinaryCriterion {
   return [
     crit[0],
     crit.length < 3 ? '=' : String(crit[1]).toLowerCase(),
@@ -19,40 +22,60 @@ export const normalizeBinaryCriterion = function (crit) {
   ];
 };
 
-export const normalizeSortingInfo = function (info) {
-  if (!Array.isArray(info)) {
-    info = [info];
-  }
+export type SortingSelector = string | Function;
+
+export interface SortingInfo {
+  selector: SortingSelector | undefined;
+  desc: boolean;
+  compare?: unknown;
+  isExpanded?: boolean;
+  groupInterval?: unknown;
+}
+
+interface SortingDescriptor {
+  getter?: SortingSelector;
+  field?: SortingSelector;
+  selector?: SortingSelector;
+  desc?: unknown;
+  dir?: unknown;
+  compare?: unknown;
+}
 
-  return map(info, (i) => {
-    const result = {
-      selector: isFunction(i) || typeof i === 'string' ? i : i.getter || i.field || i.selector,
-      desc: !!(i.desc || String(i.dir).charAt(0).toLowerCase() === 'd'),
+export const normalizeSortingInfo = function (info: unknown): SortingInfo[] {
+  const infoArray: unknown[] = Array.isArray(info) ? info : [info];
+
+  return infoArray.map((item: unknown): SortingInfo => {
+    const descriptor: SortingDescriptor = isObject(item) ? item : {};
+    const result: SortingInfo = {
+      selector: isFunction(item) || isString(item)
+        ? item
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        : descriptor.getter || descriptor.field || descriptor.selector,
+      desc: !!(descriptor.desc || String(descriptor.dir).charAt(0).toLowerCase() === 'd'),
     };
-    if (i.compare) {
-      // @ts-expect-error
-      result.compare = i.compare;
+    if (descriptor.compare) {
+      result.compare = descriptor.compare;
     }
     return result;
   });
 };
 
 export const errorMessageFromXhr = (function () {
-  const textStatusMessages = {
+  const textStatusMessages: Record<string, string> = {
     timeout: 'Network connection timeout',
     error: 'Unspecified network error',
     parsererror: 'Unexpected server response',
   };
 
   /// #DEBUG
-  const textStatusDetails = {
+  const textStatusDetails: Record<string, string> = {
     timeout: 'possible causes: the remote host is not accessible, overloaded or is not included into the domain white-list when being run in the native container',
     error: 'if the remote host is located on another domain, make sure it properly supports cross-origin resource sharing (CORS), or use the JSONP approach instead',
     parsererror: 'the remote host did not respond with valid JSON data',
   };
   /// #ENDDEBUG
 
-  const explainTextStatus = function (textStatus) {
+  const explainTextStatus = function (textStatus: string): string {
     let result = textStatusMessages[textStatus];
 
     if (!result) {
@@ -67,79 +90,99 @@ export const errorMessageFromXhr = (function () {
   };
 
   // T542570, https://stackoverflow.com/a/18170879
-  let unloading;
+  let unloading = false;
   ready(() => {
     const window = getWindow();
     domAdapter.listen(window, 'beforeunload', () => { unloading = true; });
   });
 
-  return function (xhr, textStatus) {
+  return function (xhr: unknown, textStatus: unknown): string {
     if (unloading) {
       return XHR_ERROR_UNLOAD;
     }
-    if (xhr.status < 400) {
-      return explainTextStatus(textStatus);
+
+    const status = isObject(xhr) && 'status' in xhr ? Number(xhr.status) : NaN;
+
+    if (status < 400) {
+      return explainTextStatus(String(textStatus));
     }
-    return xhr.statusText;
+
+    const statusText = isObject(xhr) && 'statusText' in xhr ? xhr.statusText : undefined;
+
+    return isString(statusText) ? statusText : '';
   };
 }());
 
+type AggregatableValue = number | string | Date;
+
 export const aggregators = {
   count: {
     seed: 0,
-    step(count) { return 1 + count; },
+    step(count: number): number { return 1 + count; },
   },
   sum: {
     seed: 0,
-    step(sum, item) { return sum + item; },
+    step(sum: number, item: number): number { return sum + item; },
   },
   min: {
-    step(min, item) { return item < min ? item : min; },
+    step(min: AggregatableValue, item: AggregatableValue): AggregatableValue {
+      return item < min ? item : min;
+    },
   },
   max: {
-    step(max, item) { return item > max ? item : max; },
+    step(max: AggregatableValue, item: AggregatableValue): AggregatableValue {
+      return item > max ? item : max;
+    },
   },
   avg: {
     seed: [0, 0],
-    step(pair, value) {
+    step(pair: [number, number], value: number): [number, number] {
       return [pair[0] + value, pair[1] + 1];
     },
-    finalize(pair) {
+    finalize(pair: [number, number]): number {
       return pair[1] ? pair[0] / pair[1] : NaN;
     },
   },
 };
 
-export const processRequestResultLock = (function () {
+interface RequestResultLock {
+  obtain: () => void;
+  release: () => void;
+  promise: () => DeferredObj<unknown>;
+  reset: () => void;
+}
+
+export const processRequestResultLock: RequestResultLock = (function (): RequestResultLock {
   let lockCount = 0;
-  let lockDeferred;
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let lockDeferred: DeferredObj<unknown> | undefined;
 
-  const obtain = function () {
+  const obtain = function (): void {
     if (lockCount === 0) {
-      // @ts-expect-error
-      lockDeferred = new Deferred();
+      lockDeferred = Deferred<unknown>();
     }
-    lockCount++;
+    lockCount += 1;
   };
 
-  const release = function () {
-    lockCount--;
+  const release = function (): void {
+    lockCount -= 1;
     if (lockCount < 1) {
-      lockDeferred.resolve();
+      lockDeferred?.resolve();
     }
   };
 
-  const promise = function () {
-    // @ts-expect-error
-    const deferred = lockCount === 0 ? new Deferred().resolve() : lockDeferred;
+  const promise = function (): DeferredObj<unknown> {
+    const deferred = lockCount === 0 || !lockDeferred
+      ? Deferred<unknown>().resolve()
+      : lockDeferred;
+
+    // @ts-expect-error DeferredObj typings: promise() is declared as a plain Promise
     return deferred.promise();
   };
 
-  const reset = function () {
+  const reset = function (): void {
     lockCount = 0;
-    if (lockDeferred) {
-      lockDeferred.resolve();
-    }
+    lockDeferred?.resolve();
   };
 
   return {
@@ -150,21 +193,25 @@ export const processRequestResultLock = (function () {
   };
 }());
 
-export function isDisjunctiveOperator(condition) {
-  return /^(or|\|\||\|)$/i.test(condition);
+export function isDisjunctiveOperator(condition: unknown): boolean {
+  return /^(or|\|\||\|)$/i.test(String(condition));
 }
 
-export function isConjunctiveOperator(condition) {
-  return /^(and|&&|&)$/i.test(condition);
+export function isConjunctiveOperator(condition: unknown): boolean {
+  return /^(and|&&|&)$/i.test(String(condition));
 }
 
-export const keysEqual = function (keyExpr, key1, key2) {
+const isRecord = (value: unknown): value is Record<string, unknown> => isObject(value)
+  || Array.isArray(value);
+
+export const keysEqual = function (keyExpr: unknown, key1: unknown, key2: unknown): boolean {
   if (Array.isArray(keyExpr)) {
-    const names = map(key1, (v, k) => k);
-    let name;
-    for (let i = 0; i < names.length; i++) {
-      name = names[i];
-      if (!equalByValue(key1[name], key2[name], { strict: false })) {
+    const names: string[] = map(key1, (value: unknown, name: string): string => name);
+    const values1: Record<string, unknown> = isRecord(key1) ? key1 : {};
+    const values2: Record<string, unknown> = isRecord(key2) ? key2 : {};
+
+    for (const name of names) {
+      if (!equalByValue(values1[name], values2[name], { strict: false })) {
         return false;
       }
     }
@@ -176,44 +223,13 @@ export const keysEqual = function (keyExpr, key1, key2) {
 
 const BASE64_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const base64_encode = function (input) {
-  if (!Array.isArray(input)) {
-    input = stringToByteArray(String(input));
-  }
-
-  let result = '';
-
-  function getBase64Char(index) {
-    return BASE64_CHARS.charAt(index);
-  }
-
-  for (let i = 0; i < input.length; i += 3) {
-    const octet1 = input[i];
-    const octet2 = input[i + 1];
-    const octet3 = input[i + 2];
-
-    result += map(
-      [
-        octet1 >> 2,
-        ((octet1 & 3) << 4) | octet2 >> 4,
-        isNaN(octet2) ? 64 : ((octet2 & 15) << 2) | octet3 >> 6,
-        isNaN(octet3) ? 64 : octet3 & 63,
-      ],
-      getBase64Char,
-    ).join('');
-  }
-
-  return result;
-};
+/* eslint-disable no-bitwise */
 
-function stringToByteArray(str) {
+function stringToByteArray(str: string): number[] {
   const bytes: number[] = [];
-  let code: number;
-  let i;
 
-  for (i = 0; i < str.length; i++) {
-    code = str.charCodeAt(i);
+  for (let i = 0; i < str.length; i += 1) {
+    const code = str.charCodeAt(i);
 
     if (code < 128) {
       bytes.push(code);
@@ -222,21 +238,54 @@ function stringToByteArray(str) {
     } else if (code < 65536) {
       bytes.push(224 + (code >> 12), 128 + ((code >> 6) & 63), 128 + (code & 63));
     } else if (code < 2097152) {
-      bytes.push(240 + (code >> 18), 128 + ((code >> 12) & 63), 128 + ((code >> 6) & 63), 128 + (code & 63));
+      bytes.push(
+        240 + (code >> 18),
+        128 + ((code >> 12) & 63),
+        128 + ((code >> 6) & 63),
+        128 + (code & 63),
+      );
     }
   }
   return bytes;
 }
 
-export const isUnaryOperation = function (crit) {
-  return crit[0] === '!' && Array.isArray(crit[1]);
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const base64_encode = function (input: string | number[]): string {
+  const bytes: number[] = Array.isArray(input) ? input : stringToByteArray(String(input));
+
+  let result = '';
+
+  function getBase64Char(index: number): string {
+    return BASE64_CHARS.charAt(index);
+  }
+
+  for (let i = 0; i < bytes.length; i += 3) {
+    const octet1 = bytes[i];
+    const octet2 = bytes[i + 1];
+    const octet3 = bytes[i + 2];
+
+    result += [
+      octet1 >> 2,
+      ((octet1 & 3) << 4) | (octet2 >> 4),
+      isNaN(octet2) ? 64 : ((octet2 & 15) << 2) | (octet3 >> 6),
+      isNaN(octet3) ? 64 : octet3 & 63,
+    ].map(getBase64Char).join('');
+  }
+
+  return result;
+};
+
+/* eslint-enable no-bitwise */
+
+export const isUnaryOperation = function (crit: unknown): boolean {
+  return Array.isArray(crit) && crit[0] === '!' && Array.isArray(crit[1]);
 };
 
-const isGroupOperator = function (value) {
+const isGroupOperator = function (value: unknown): boolean {
   return value === 'and' || value === 'or';
 };
 
-export const isUniformEqualsByOr = function (crit) {
+export const isUniformEqualsByOr = function (crit: unknown[]): boolean {
   if (crit.length > 2 && Array.isArray(crit[0]) && crit[1] === 'or' && typeof crit[0][0] === 'string' && crit[0][1] === '=') {
     const [prop] = crit[0];
     return !crit.find((el, i) => (i % 2 !== 0 ? el !== 'or'
@@ -245,7 +294,11 @@ export const isUniformEqualsByOr = function (crit) {
   return false;
 };
 
-export const isGroupCriterion = function (crit) {
+export const isGroupCriterion = function (crit: unknown): boolean {
+  if (!Array.isArray(crit)) {
+    return false;
+  }
+
   const first = crit[0];
   const second = crit[1];
 
@@ -261,21 +314,29 @@ export const isGroupCriterion = function (crit) {
   return false;
 };
 
-export const trivialPromise = function () {
-  // @ts-expect-error
-  const d = new Deferred();
-  return d.resolve.apply(d, arguments).promise();
+export const trivialPromise = function <T>(...args: T[]): DeferredObj<T> {
+  const d = Deferred<T>();
+  // @ts-expect-error DeferredObj typings: promise() is declared as a plain Promise
+  return d.resolve(...args).promise();
 };
 
-export const rejectedPromise = function () {
-  // @ts-expect-error
-  const d = new Deferred();
-  return d.reject.apply(d, arguments).promise();
+export const rejectedPromise = function <T>(...args: T[]): DeferredObj<T> {
+  const d = Deferred<T>();
+  // @ts-expect-error DeferredObj typings: promise() is declared as a plain Promise
+  return d.reject(...args).promise();
 };
 
-function throttle(func, timeout) {
-  let timeoutId;
-  return function () {
+type ThrottleTimeout = number | (() => number);
+
+type TimeoutId = ReturnType<typeof setTimeout>;
+
+function throttle(
+  func: (this: unknown) => void,
+  timeout: ThrottleTimeout,
+): (this: unknown) => TimeoutId | undefined {
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let timeoutId: TimeoutId | undefined;
+  return function (this: unknown): TimeoutId | undefined {
     if (!timeoutId) {
       timeoutId = setTimeout(() => {
         timeoutId = undefined;
@@ -286,19 +347,20 @@ function throttle(func, timeout) {
   };
 }
 
-export function throttleChanges(func, timeout) {
-  let cache = [];
-  const throttled = throttle(function () {
+export function throttleChanges<T>(
+  func: (this: unknown, changes: T[]) => void,
+  timeout: ThrottleTimeout,
+): (this: unknown, changes: T[]) => TimeoutId | undefined {
+  let cache: T[] = [];
+  const throttled = throttle(function (this: unknown): void {
     func.call(this, cache);
     cache = [];
   }, timeout);
 
-  return function (changes) {
+  return function (this: unknown, changes: T[]): TimeoutId | undefined {
     if (Array.isArray(changes)) {
-      // @ts-expect-error
       cache.push(...changes);
     }
-    // @ts-expect-error
-    return throttled.call(this, cache);
+    return throttled.call(this);
   };
 }
diff --git a/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping.ts b/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping.ts
index 608c733636ba..e8886c114650 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping.ts
@@ -105,6 +105,7 @@ const dataSourceAdapterExtender = (Base: ModuleType<DataSourceAdapter>) => class
           groups[i].isExpanded = group[i].isExpanded;
         }
       }
+      // @ts-expect-error normalizeSortingInfo() types selector wider than public KeySelector
       dataSource.group(groups);
       that._grouping.foreachGroups((groupInfo, parents) => {
         if (groupIndex === undefined || groupIndex === parents.length - 1) {
diff --git a/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping_expanded.ts b/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping_expanded.ts
index 023624dca8b4..f153e81939df 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping_expanded.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping_expanded.ts
@@ -343,7 +343,6 @@ export class GroupingHelper extends GroupingHelperCore {
 
     if (groupCount) {
       let { data } = options;
-      // @ts-expect-error
       const query = dataQuery(data);
       storeHelper.multiLevelGroup(query, groups).enumerate().done((groupedData) => {
         data = groupedData;
diff --git a/packages/devextreme/js/__internal/grids/data_grid/summary/m_summary.ts b/packages/devextreme/js/__internal/grids/data_grid/summary/m_summary.ts
index baeb374a1b7b..b6d8e21f13df 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/summary/m_summary.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/summary/m_summary.ts
@@ -117,7 +117,6 @@ const sortGroupsBySummaryCore = function (items, groups, sortByGroups) {
   let query;
 
   if (group && sorts && sorts.length) {
-    // @ts-expect-error
     query = dataQuery(items);
     each(sorts, function (index) {
       if (index === 0) {
@@ -307,7 +306,6 @@ export const summaryDataSourceAdapterExtender = (
   }
 
   private sortLastLevelGroupItems(items, groups, paths) {
-    // @ts-expect-error
     const groupedItems = storeHelper.multiLevelGroup(dataQuery(items), groups).toArray();
     let result = [];
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts
index aeab55d20f08..859b58d185bc 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts
@@ -1823,7 +1823,6 @@ export class ColumnsController extends modules.Controller {
             }
             if (isPlainObject(dataSource) || (dataSource instanceof Store) || Array.isArray(dataSource)) {
               if (that.valueExpr) {
-                // @ts-expect-error
                 const dataSourceOptions = normalizeDataSourceOptions(dataSource);
                 dataSourceOptions.paginate = false;
                 dataSource = new DataSource(dataSourceOptions);
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/m_data_source_adapter.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/m_data_source_adapter.ts
index 2a4db0edfc7c..10c8b496f377 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/m_data_source_adapter.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/m_data_source_adapter.ts
@@ -297,7 +297,6 @@ export default class DataSourceAdapter extends modules.Controller {
     this.resetPagesCache(true);
 
     if (this._cachedStoreData) {
-      // @ts-expect-error
       applyBatch({
         keyInfo: store,
         data: this._cachedStoreData,
@@ -365,7 +364,6 @@ export default class DataSourceAdapter extends modules.Controller {
     const getItemCount = () => (groupCount ? this.itemsCount() : this.items().length);
     const oldItemCount = getItemCount();
 
-    // @ts-expect-error
     applyBatch({
       keyInfo,
       data: this._items,
@@ -374,7 +372,6 @@ export default class DataSourceAdapter extends modules.Controller {
       useInsertIndex: true,
       skipCopying: !this._needToCopyDataObject(),
     });
-    // @ts-expect-error
     applyBatch({
       keyInfo,
       data: dataSource.items(),
diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
index 10d151fa7380..5a11f96b354a 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
@@ -79,13 +79,11 @@ function ungroupUTCDates(items, dateParts?, dates?) {
 
 export function convertDataFromUTCToLocal(data, column) {
   const dates = ungroupUTCDates(data);
-  // @ts-expect-error
   const query = dataQuery(dates);
   const group = gridCoreUtils.getHeaderFilterGroupParameters({
     ...column,
     calculateCellValue: (date) => date,
   });
-  // @ts-expect-error
   return storeHelper.queryByOptions(query, { group }).toArray();
 }
 
@@ -245,7 +243,6 @@ export class HeaderFilterController extends Modules.ViewController {
     if (!dataSource) return;
 
     if (isDefined(headerFilterDataSource) && !isFunction(headerFilterDataSource)) {
-      // @ts-expect-error
       options.dataSource = normalizeDataSourceOptions(headerFilterDataSource);
     } else if (column.lookup) {
       isLookup = true;
@@ -275,6 +272,7 @@ export class HeaderFilterController extends Modules.ViewController {
           dataSource.customLoader.load(options).done(({ data }) => {
             const convertUTCDates = remoteGrouping && isUTCFormat(column.serializationFormat) && cutoffLevel > 3;
             if (convertUTCDates) {
+              // @ts-expect-error queryByOptions().toArray() is typed as unknown[]
               data = convertDataFromUTCToLocal(data, column);
             }
             that._processGroupItems(data, null, null, {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts b/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts
index ae057d8d7009..abdc6d0299b8 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts
@@ -674,7 +674,6 @@ export default {
         lookupDataSourceOptions = lookupDataSourceOptions({});
       }
     }
-    // @ts-expect-error
     return normalizeDataSourceOptions(lookupDataSourceOptions);
   },
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts b/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
index f35045af3838..71faffb9cc83 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
@@ -106,9 +106,7 @@ const dataController = (
         const filterValue = parseValue(column, text);
 
         if (lookup?.items) {
-          // @ts-expect-error
           dataQuery(lookup.items, { langParams })
-            // @ts-expect-error
             .filter(
               column.createFilterExpression.call(
                 {
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts
index b03222a5303b..24c6f5c90bb8 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts
@@ -35,7 +35,7 @@ export function normalizeDataSource(
     };
   }
 
-  // TODO: research making second param not required
+  // @ts-expect-error the public DataSource constructor takes the public option types
   return new DataSource(normalizeDataSourceOptions(dataSourceLike, undefined));
 }
 
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/legacy_header_filter.ts b/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/legacy_header_filter.ts
index 761f198bce92..1072316e25ba 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/legacy_header_filter.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/legacy_header_filter.ts
@@ -158,7 +158,6 @@ export const getDataSourceOptions = (
   const options: any = {};
 
   if (isDefined(headerFilterDataSource) && !isFunction(headerFilterDataSource)) {
-    // @ts-expect-error
     options.dataSource = oldNormalizeDataSourceOptions(headerFilterDataSource);
   } else {
     const cutoffLevel = Array.isArray(group) ? group.length - 1 : 0;
diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/data_source/m_data_source.ts b/packages/devextreme/js/__internal/grids/pivot_grid/data_source/m_data_source.ts
index b5b1683bc03f..ef1a61eaa54e 100644
--- a/packages/devextreme/js/__internal/grids/pivot_grid/data_source/m_data_source.ts
+++ b/packages/devextreme/js/__internal/grids/pivot_grid/data_source/m_data_source.ts
@@ -341,7 +341,6 @@ class PivotGridDataSource {
   createLocalOrRemoteStore(dataSourceOptions, notifyProgress) {
     const StoreConstructor = dataSourceOptions.remoteOperations
       || dataSourceOptions.paginate ? RemoteStore : LocalStore;
-    // @ts-expect-error
     return new StoreConstructor(extend(normalizeDataSourceOptions(dataSourceOptions), {
       onChanged: null,
       onLoadingChanged: null,
diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/local_store/m_local_store.ts b/packages/devextreme/js/__internal/grids/pivot_grid/local_store/m_local_store.ts
index 174166bf6091..4ee6f3179b67 100644
--- a/packages/devextreme/js/__internal/grids/pivot_grid/local_store/m_local_store.ts
+++ b/packages/devextreme/js/__internal/grids/pivot_grid/local_store/m_local_store.ts
@@ -424,7 +424,6 @@ const LocalStore = Class.inherit((function () {
 
     if (dataSource.store() instanceof CustomStore && filter) {
       filter = processFilter(filter, fieldSelectors);
-      // @ts-expect-error
       return dataQuery(dataSource.items()).filter(filter).toArray();
     }
 
diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/remote_store/m_remote_store.ts b/packages/devextreme/js/__internal/grids/pivot_grid/remote_store/m_remote_store.ts
index 3412120c14f2..b514df7df779 100644
--- a/packages/devextreme/js/__internal/grids/pivot_grid/remote_store/m_remote_store.ts
+++ b/packages/devextreme/js/__internal/grids/pivot_grid/remote_store/m_remote_store.ts
@@ -561,7 +561,6 @@ class RemoteStore {
       skip: 0,
       take: 20,
     }).done((data) => {
-      // @ts-expect-error
       const normalizedArguments = normalizeLoadResult(data);
       d.resolve(pivotGridUtils.discoverObjectFields(normalizedArguments.data, fields));
     }).fail(d.reject);
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/m_data_source_adapter.ts b/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/m_data_source_adapter.ts
index ae7cc27ff427..35ad2a94f1b2 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/m_data_source_adapter.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_source_adapter/m_data_source_adapter.ts
@@ -45,9 +45,7 @@ const getChildKeys = function (that, keys) {
   return childKeys;
 };
 
-// @ts-expect-error
 const applySorting = (data: any[], sort: any): any => queryByOptions(
-  // @ts-expect-error
   query(data),
   {
     sort,
@@ -163,7 +161,6 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
       result = result || [];
 
       for (let i = 0; i < data.length; i++) {
-        // @ts-expect-error
         const item = createObjectWithChanges(data[i]);
 
         key = this._keyGetter(item);
@@ -417,7 +414,6 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
 
         if (loadedData.length) {
           if (needLocalFiltering) {
-            // @ts-expect-error
             loadedData = query(loadedData).filter(filter).toArray();
           }
 
@@ -563,7 +559,6 @@ export class DataSourceAdapterTreeList extends DataSourceAdapter {
   public customizeLoadResultHandler(options) {
     const data = options.data = this._convertDataToPlainStructure(options.data);
     if (!options.remoteOperations.filtering && options.loadOptions.filter) {
-      // @ts-expect-error
       options.fullData = queryByOptions(query(options.data), { sort: options.loadOptions && options.loadOptions.sort }).toArray();
     }
     this._updateHasItemsMap(options);
diff --git a/packages/devextreme/js/__internal/scheduler/utils/loader/utils.ts b/packages/devextreme/js/__internal/scheduler/utils/loader/utils.ts
index 8a2f31585a13..982fd38239af 100644
--- a/packages/devextreme/js/__internal/scheduler/utils/loader/utils.ts
+++ b/packages/devextreme/js/__internal/scheduler/utils/loader/utils.ts
@@ -19,6 +19,7 @@ export const normalizeDataSource = <T>(
     ...options,
   };
 
+  // @ts-expect-error the public DataSource constructor takes the public option types
   return new DataSource(result);
 };
 
diff --git a/packages/devextreme/js/__internal/ui/collection/collection_widget.edit.ts b/packages/devextreme/js/__internal/ui/collection/collection_widget.edit.ts
index 06d89a472973..85bcffe6447f 100644
--- a/packages/devextreme/js/__internal/ui/collection/collection_widget.edit.ts
+++ b/packages/devextreme/js/__internal/ui/collection/collection_widget.edit.ts
@@ -277,7 +277,6 @@ class CollectionWidget<
             if (that._disposed) {
               return;
             }
-            // @ts-expect-error arguments
             const items = normalizeLoadResult(loadResult).data;
 
             dataController.applyMapFunction(items);
diff --git a/packages/devextreme/js/__internal/ui/collection/collection_widget.live_update.ts b/packages/devextreme/js/__internal/ui/collection/collection_widget.live_update.ts
index d1d0c0fdfd0b..a73e374f5136 100644
--- a/packages/devextreme/js/__internal/ui/collection/collection_widget.live_update.ts
+++ b/packages/devextreme/js/__internal/ui/collection/collection_widget.live_update.ts
@@ -204,7 +204,6 @@ class CollectionWidgetLiveUpdate<
     } else {
       const changedItem = items[indexByKey(keyInfo, items, change.key)];
       if (changedItem) {
-        // @ts-expect-error ts-error
         update(keyInfo, items, change.key, change.data).done(() => {
           this._renderItem(
             items.indexOf(changedItem),
@@ -224,7 +223,6 @@ class CollectionWidgetLiveUpdate<
     isPartialRefresh?: boolean,
   ): void {
     when(
-      // @ts-expect-error ts-error
       isPartialRefresh ?? insert(keyInfo, items, change.data, change.index),
     ).done(() => {
       this._beforeItemElementInserted(change);
diff --git a/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts b/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts
index 4e5370ec834f..c5048c5be6d0 100644
--- a/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts
+++ b/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts
@@ -691,8 +691,8 @@ class DataAdapter {
     lookForParents(matches, 0);
 
     if (this.options.sort) {
+      // @ts-expect-error queryByOptions().toArray() is typed as unknown[]
       matches = storeHelper
-        // @ts-expect-error ts-error
         .queryByOptions(query(matches), {
           sort: this.options.sort,
           langParams: this.options.langParams,
diff --git a/packages/devextreme/js/__internal/ui/selection/selection.strategy.deferred.ts b/packages/devextreme/js/__internal/ui/selection/selection.strategy.deferred.ts
index d6e370a5d233..a261105c07d6 100644
--- a/packages/devextreme/js/__internal/ui/selection/selection.strategy.deferred.ts
+++ b/packages/devextreme/js/__internal/ui/selection/selection.strategy.deferred.ts
@@ -89,7 +89,6 @@ export default class DeferredStrategy<
 
     const queryParams = this._getQueryParams();
 
-    // @ts-expect-error dataQuery
     return !!dataQuery([itemData], queryParams).filter(selectionFilter).toArray().length;
   }
 
diff --git a/packages/devextreme/js/__internal/ui/selection/selection.strategy.standard.ts b/packages/devextreme/js/__internal/ui/selection/selection.strategy.standard.ts
index 4e1ae4bd8b5d..8e711f66e938 100644
--- a/packages/devextreme/js/__internal/ui/selection/selection.strategy.standard.ts
+++ b/packages/devextreme/js/__internal/ui/selection/selection.strategy.standard.ts
@@ -139,11 +139,11 @@ export default class StandardStrategy<
       forceCombinedFilter,
     );
 
-    let deselectedItems = [];
+    let deselectedItems: TItem[] = [];
     if (isDeselect) {
       const { selectedItems } = this.options;
+      // @ts-expect-error dataQuery().toArray() is typed as unknown[]
       deselectedItems = combinedFilter && keys.length !== selectedItems.length
-        // @ts-expect-error dataQuery
         ? dataQuery(selectedItems).filter(combinedFilter).toArray()
         : selectedItems.slice(0);
     }
diff --git a/packages/devextreme/js/__internal/ui/selection/selection.strategy.ts b/packages/devextreme/js/__internal/ui/selection/selection.strategy.ts
index 932eb2111af9..1a7b9056d022 100644
--- a/packages/devextreme/js/__internal/ui/selection/selection.strategy.ts
+++ b/packages/devextreme/js/__internal/ui/selection/selection.strategy.ts
@@ -199,7 +199,6 @@ export default class SelectionStrategy<
           if (localFilter && !isSelectAll) {
             filteredItems = filteredItems.filter(localFilter);
           } else if (needLoadAllData) {
-            // @ts-expect-error dataQuary
             filteredItems = dataQuery(filteredItems).filter(remoteFilter).toArray();
           }
 
diff --git a/packages/devextreme/js/__internal/ui/shared/ui.editor_factory_mixin.ts b/packages/devextreme/js/__internal/ui/shared/ui.editor_factory_mixin.ts
index 0458f8f1c274..501d8e2b300b 100644
--- a/packages/devextreme/js/__internal/ui/shared/ui.editor_factory_mixin.ts
+++ b/packages/devextreme/js/__internal/ui/shared/ui.editor_factory_mixin.ts
@@ -180,7 +180,6 @@ function prepareLookupEditor(options): void {
     }
 
     if (isObject(dataSource) || Array.isArray(dataSource)) {
-      // @ts-expect-error ts-
       dataSource = normalizeDataSourceOptions(dataSource);
       if (isFilterRow) {
         postProcess = dataSource.postProcess;

From 8c9dd6efa47240a5441c865e4366aa8c160ecf25 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Mon, 7 Sep 2026 15:50:12 +0000
Subject: [PATCH 17/45] chore(deps): bump axe to v4.13.0 (#34935)

---
 .../Angular/app/app.component.html            |  7 +++-
 .../Stepper/StepTemplate/React/IconOnly.tsx   |  5 +--
 .../Stepper/StepTemplate/ReactJs/IconOnly.js  | 10 ++++--
 .../Demos/Stepper/StepTemplate/Vue/App.vue    |  6 +++-
 .../Stepper/StepTemplate/jQuery/index.js      |  4 ++-
 .../Overview/Angular/app/app.component.css    |  2 +-
 .../Demos/TabPanel/Overview/React/styles.css  |  2 +-
 .../TabPanel/Overview/ReactJs/styles.css      |  2 +-
 .../Demos/TabPanel/Overview/Vue/TaskItem.vue  |  2 +-
 .../Demos/TabPanel/Overview/jQuery/styles.css |  2 +-
 apps/demos/testing/common.test.ts             | 15 ++++++++-
 .../accessibility/scheduler/appointment.ts    | 28 ++++++++--------
 .../accessibility/scheduler/axe_options.ts    | 10 ++++++
 .../accessibility/scheduler/scheduler.ts      | 10 +++---
 .../widgets/fluent/tabs/layout/tab/_base.scss | 26 ++++-----------
 pnpm-lock.yaml                                | 32 +++++++++----------
 pnpm-workspace.yaml                           |  2 +-
 17 files changed, 96 insertions(+), 69 deletions(-)

diff --git a/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.html b/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.html
index 0128c7d521dd..e1c08fa86bc7 100644
--- a/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.html
+++ b/apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.html
@@ -41,6 +41,11 @@
   [elementAttr]="{ 'aria-labelledby': 'label-iconOnly' }"
 >
   <div *dxTemplate="let data of 'item'">
-    <i class="dx-icon" [class]="'dx-icon-' + data.icon"></i>
+    <i
+      class="dx-icon"
+      [class]="'dx-icon-' + data.icon"
+      role="img"
+      [attr.aria-label]="data.label"
+    ></i>
   </div>
 </dx-stepper>
diff --git a/apps/demos/Demos/Stepper/StepTemplate/React/IconOnly.tsx b/apps/demos/Demos/Stepper/StepTemplate/React/IconOnly.tsx
index d84e95907c85..bb0e60634491 100644
--- a/apps/demos/Demos/Stepper/StepTemplate/React/IconOnly.tsx
+++ b/apps/demos/Demos/Stepper/StepTemplate/React/IconOnly.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 
 interface IconOnlyProps {
   icon: string;
+  label: string;
 }
 
-export default function IconOnly({ icon }: IconOnlyProps) {
+export default function IconOnly({ icon, label }: IconOnlyProps) {
   return (
-    <i className={`dx-icon dx-icon-${icon}`}></i>
+    <i className={`dx-icon dx-icon-${icon}`} role="img" aria-label={label}></i>
   );
 }
diff --git a/apps/demos/Demos/Stepper/StepTemplate/ReactJs/IconOnly.js b/apps/demos/Demos/Stepper/StepTemplate/ReactJs/IconOnly.js
index 1344ad909c1d..466eafa507af 100644
--- a/apps/demos/Demos/Stepper/StepTemplate/ReactJs/IconOnly.js
+++ b/apps/demos/Demos/Stepper/StepTemplate/ReactJs/IconOnly.js
@@ -1,5 +1,11 @@
 import React from 'react';
 
-export default function IconOnly({ icon }) {
-  return <i className={`dx-icon dx-icon-${icon}`}></i>;
+export default function IconOnly({ icon, label }) {
+  return (
+    <i
+      className={`dx-icon dx-icon-${icon}`}
+      role="img"
+      aria-label={label}
+    ></i>
+  );
 }
diff --git a/apps/demos/Demos/Stepper/StepTemplate/Vue/App.vue b/apps/demos/Demos/Stepper/StepTemplate/Vue/App.vue
index a0a8ea0375a2..2fd89b68b2c9 100644
--- a/apps/demos/Demos/Stepper/StepTemplate/Vue/App.vue
+++ b/apps/demos/Demos/Stepper/StepTemplate/Vue/App.vue
@@ -57,7 +57,11 @@
   >
     <template #item="{ data }">
       <div>
-        <i :class="'dx-icon dx-icon-' + data.icon"/>
+        <i
+          :class="'dx-icon dx-icon-' + data.icon"
+          role="img"
+          :aria-label="data.label"
+        />
       </div>
     </template>
   </DxStepper>
diff --git a/apps/demos/Demos/Stepper/StepTemplate/jQuery/index.js b/apps/demos/Demos/Stepper/StepTemplate/jQuery/index.js
index fd5945874d17..a80ea8666056 100644
--- a/apps/demos/Demos/Stepper/StepTemplate/jQuery/index.js
+++ b/apps/demos/Demos/Stepper/StepTemplate/jQuery/index.js
@@ -33,7 +33,9 @@ $(() => {
     linear: false,
     elementAttr: { 'aria-labelledby': 'label-iconOnly' },
     itemTemplate(data) {
-      return `<i class="dx-icon dx-icon-${data.icon}"></i>`;
+      return $('<i>')
+        .addClass(`dx-icon dx-icon-${data.icon}`)
+        .attr({ role: 'img', 'aria-label': data.label });
     },
   });
 });
diff --git a/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css
index 046af40d3171..320a5f6dc23e 100644
--- a/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css
@@ -104,7 +104,7 @@
 
 ::ng-deep .task-item-info {
   font-size: 12px;
-  opacity: 0.6;
+  opacity: 0.65;
 }
 
 ::ng-deep .task-item-pseudo-button {
diff --git a/apps/demos/Demos/TabPanel/Overview/React/styles.css b/apps/demos/Demos/TabPanel/Overview/React/styles.css
index 7d2c7f569c05..71ad3ea17b02 100644
--- a/apps/demos/Demos/TabPanel/Overview/React/styles.css
+++ b/apps/demos/Demos/TabPanel/Overview/React/styles.css
@@ -104,7 +104,7 @@
 
 .task-item-info {
   font-size: 12px;
-  opacity: 0.6;
+  opacity: 0.65;
 }
 
 .task-item-pseudo-button {
diff --git a/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css b/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css
index 7d2c7f569c05..71ad3ea17b02 100644
--- a/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css
@@ -104,7 +104,7 @@
 
 .task-item-info {
   font-size: 12px;
-  opacity: 0.6;
+  opacity: 0.65;
 }
 
 .task-item-pseudo-button {
diff --git a/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue b/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue
index bfe6973f9762..76699ee28f0d 100644
--- a/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue
+++ b/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue
@@ -66,7 +66,7 @@ withDefaults(defineProps<{
 
 .task-item-info {
   font-size: 12px;
-  opacity: 0.6;
+  opacity: 0.65;
 }
 
 .task-item-pseudo-button {
diff --git a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css
index 7d2c7f569c05..71ad3ea17b02 100644
--- a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css
@@ -104,7 +104,7 @@
 
 .task-item-info {
   font-size: 12px;
-  opacity: 0.6;
+  opacity: 0.65;
 }
 
 .task-item-pseudo-button {
diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts
index d318a8b6cde1..40c4cd51fe31 100644
--- a/apps/demos/testing/common.test.ts
+++ b/apps/demos/testing/common.test.ts
@@ -111,6 +111,10 @@ const getIgnoredRules = (testName) => {
     'Gantt-Validation': ['aria-required-parent', 'aria-valid-attr-value'],
 
     'Localization-UsingGlobalize': ['label'],
+
+    // Icon-only tabs render no text, so they have no accessible name.
+    // Naming them needs Tabs widget support (like Button labels icon-only buttons).
+    'Tabs-Overview': ['aria-tab-name'],
   };
 
   return [
@@ -119,6 +123,15 @@ const getIgnoredRules = (testName) => {
   ];
 };
 
+// The appointment title and date do not reach the AA contrast ratio: the date line is dimmed
+// to 70% opacity and the appointments are painted with the resource colors.
+const getAxeContext = (testName) => (testName.startsWith('Scheduler-')
+  ? {
+    include: ['.demo-container'],
+    exclude: ['.dx-scheduler-appointment-title', '.dx-scheduler-appointment-content-date'],
+  }
+  : '.demo-container');
+
 const getClientScripts = (approach: string) => {
   const scripts = [
     { module: 'mockdate' },
@@ -250,7 +263,7 @@ Object.values(FRAMEWORKS).forEach((approach) => {
             options.rules[ruleName] = { enabled: false };
           });
 
-          const axeResult = await axeCheck(t, '.demo-container', options);
+          const axeResult = await axeCheck(t, getAxeContext(testName), options);
           const { error, results } = axeResult;
 
           if (results.violations.length > 0) {
diff --git a/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointment.ts b/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointment.ts
index 6a7727e2871a..f9251fd8e70b 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointment.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointment.ts
@@ -2,7 +2,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
-import { a11yCheckConfig } from './axe_options';
+import { a11yCheckConfig, a11yContext } from './axe_options';
 
 fixture.disablePageReloads`Scheduler - Appointment`
   .page(url(__dirname, '../../container.html'));
@@ -26,7 +26,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(await appointment.hasAriaDescription())
       .ok();
 
-    await a11yCheck(t, a11yCheckConfig, '#container');
+    await a11yCheck(t, a11yCheckConfig, a11yContext);
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -46,7 +46,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(await appointment.hasAriaDescription())
       .ok();
 
-    await a11yCheck(t, a11yCheckConfig, '#container');
+    await a11yCheck(t, a11yCheckConfig, a11yContext);
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -67,7 +67,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(await appointment.getAriaDescription())
       .contains('Group: resource1; Group 1: resource1');
 
-    await a11yCheck(t, a11yCheckConfig, '#container');
+    await a11yCheck(t, a11yCheckConfig, a11yContext);
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -101,7 +101,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(await appointment.getAriaDescription())
       .contains('Group: resource1; Group 1: resource1');
 
-    await a11yCheck(t, a11yCheckConfig, '#container');
+    await a11yCheck(t, a11yCheckConfig, a11yContext);
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -136,7 +136,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(await appointment.getAriaDescription())
       .contains('Group: resource11, resource21; Group 1: resource11; Group 2: resource21, resource22');
 
-    await a11yCheck(t, a11yCheckConfig, '#container');
+    await a11yCheck(t, a11yCheckConfig, a11yContext);
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -180,7 +180,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(recurrenceIcon.getAttribute('aria-label'))
       .eql('Recurring appointment');
 
-    await a11yCheck(t, a11yCheckConfig, '#container');
+    await a11yCheck(t, a11yCheckConfig, a11yContext);
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'America/Los_Angeles',
@@ -210,7 +210,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(appt.element.getAttribute('aria-activedescendant'))
       .eql(null);
 
-    await a11yCheck(t, a11yCheckConfig, '#container');
+    await a11yCheck(t, a11yCheckConfig, a11yContext);
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'America/Los_Angeles',
@@ -266,7 +266,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
     await t.expect(apptLabels[1]).eql(labels[1]);
     await t.expect(apptLabels[2]).eql(labels[2]);
 
-    await a11yCheck(t, a11yCheckConfig, '#container');
+    await a11yCheck(t, a11yCheckConfig, a11yContext);
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -336,7 +336,7 @@ test('appointments & collector buttons can be navigated', async (t) => {
     scheduler.appointmentTooltip.element.count,
   ).eql(1);
 
-  await a11yCheck(t, a11yCheckConfig, '#container');
+  await a11yCheck(t, a11yCheckConfig, a11yContext);
 }).before(async () => {
   await createWidget('dxScheduler', {
     dataSource: [
@@ -387,7 +387,7 @@ test('Scheduler a11y: Disabled time ranges are not supported', async (t) => {
     .expect(actualNextAriaLabel)
     .eql(expectedAriaLabels.next);
 
-  await a11yCheck(t, a11yCheckConfig, '#container');
+  await a11yCheck(t, a11yCheckConfig, a11yContext);
 }).before(async () => {
   await createWidget('dxScheduler', {
     dataSource: [
@@ -410,7 +410,7 @@ test('Scheduler a11y: appointments does not have info about reccurence', async (
     .expect(recurrenceIcon.getAttribute('aria-label'))
     .eql('Recurring appointment');
 
-  await a11yCheck(t, a11yCheckConfig, '#container');
+  await a11yCheck(t, a11yCheckConfig, a11yContext);
 }).before(async () => {
   await createWidget('dxScheduler', {
     timeZone: 'America/Los_Angeles',
@@ -440,7 +440,7 @@ test('Scheduler a11y: Appointment collector button doesn\'t have info about date
     .expect(schedulerCollector.element().getAttribute('aria-roledescription'))
     .contains(dateText);
 
-  await a11yCheck(t, a11yCheckConfig, '#container');
+  await a11yCheck(t, a11yCheckConfig, a11yContext);
 }).before(async () => {
   await createWidget('dxScheduler', {
     timeZone: 'America/Los_Angeles',
@@ -479,7 +479,7 @@ test('appointment aria label should contain date with right timezone', async (t)
     .expect(appointment.getAriaLabel())
     .eql('Install New Router in Dev Room: March 29, 2021, 2:30 PM - 3:30 PM');
 
-  await a11yCheck(t, a11yCheckConfig, '#container');
+  await a11yCheck(t, a11yCheckConfig, a11yContext);
 }).before(async () => {
   await createWidget('dxScheduler', {
     timeZone: 'America/Los_Angeles',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts b/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts
index f0717745a987..c07b0adad4bb 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts
@@ -1 +1,11 @@
 export const a11yCheckConfig = {};
+
+// The appointment title and date do not reach the AA contrast ratio:
+// the date line is dimmed to 70% opacity over the accent-colored appointment.
+export const a11yContext = {
+  include: ['#container'],
+  exclude: [
+    '.dx-scheduler-appointment-title',
+    '.dx-scheduler-appointment-content-date',
+  ],
+};
diff --git a/e2e/testcafe-devextreme/tests/accessibility/scheduler/scheduler.ts b/e2e/testcafe-devextreme/tests/accessibility/scheduler/scheduler.ts
index 7ba23fe3582b..88297d703858 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/scheduler/scheduler.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/scheduler/scheduler.ts
@@ -2,7 +2,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
-import { a11yCheckConfig } from './axe_options';
+import { a11yCheckConfig, a11yContext } from './axe_options';
 
 fixture.disablePageReloads`Scheduler - a11y`
   .page(url(__dirname, '../../container.html'));
@@ -20,7 +20,7 @@ test('Scheduler should have right aria attributes after view changed', async (t)
   await t.expect(scheduler.element.getAttribute('aria-label')).contains('Scheduler. Week view');
   await t.expect(scheduler.getGeneralStatusContainer().textContent).contains('Scheduler. Week view');
 
-  await a11yCheck(t, a11yCheckConfig, '#container');
+  await a11yCheck(t, a11yCheckConfig, a11yContext);
 }).before(async () => {
   await createWidget('dxScheduler', {
     dataSource: [],
@@ -40,7 +40,7 @@ test('Scheduler table elements have right aria attributes', async (t) => {
     ).eql('true');
   }
 
-  await a11yCheck(t, a11yCheckConfig, '#container');
+  await a11yCheck(t, a11yCheckConfig, a11yContext);
 }).before(async () => {
   await createWidget('dxScheduler', {
     dataSource: [],
@@ -52,7 +52,7 @@ test('Scheduler table elements have right aria attributes', async (t) => {
   'agenda', 'day', 'month', 'timelineDay', 'timelineMonth', 'timelineWeek', 'timelineWorkWeek', 'week', 'workWeek',
 ].forEach((currentView) => {
   test(`Scheduler has no axe errors on view ${currentView}`, async (t) => {
-    await a11yCheck(t, a11yCheckConfig, '#container');
+    await a11yCheck(t, a11yCheckConfig, a11yContext);
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'America/Los_Angeles',
@@ -108,7 +108,7 @@ const groupingCases = [
 ] as const).forEach(({ name, dataSource, parentIdExpr }) => {
   groupingCases.forEach(({ view, orientation }) => {
     test(`Scheduler should pass accessibility checks with ${name} grouping on view ${view} (${orientation})`, async (t) => {
-      await a11yCheck(t, a11yCheckConfig, '#container');
+      await a11yCheck(t, a11yCheckConfig, a11yContext);
     }).before(async () => {
       await createWidget('dxScheduler', {
         dataSource: groupedAppointments,
diff --git a/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/_base.scss
index 43392b992139..a55f2877d88d 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/_base.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/_base.scss
@@ -31,21 +31,13 @@
     }
 
     .dx-tab-text .dx-tab-text-span {
-      visibility: visible;
-
-      .dx-tab-text-span-pseudo {
-        visibility: hidden;
-      }
+      font-weight: $fluent-tab-font-weight-accent;
     }
   }
 
   &.dx-state-disabled {
     color: $tabs-tab-disabled-color;
 
-    .dx-tab-text .dx-tab-text-span-pseudo {
-      color: $tabs-tab-disabled-color;
-    }
-
     .dx-icon {
       color: $tabs-tab-icon-disabled-color;
     }
@@ -61,22 +53,16 @@
     line-height: $fluent-line-height;
 
     .dx-tab-text-span {
-      position: relative;
       display: block;
-      font-weight: $fluent-tab-font-weight-accent;
-      visibility: hidden;
+      font-weight: $fluent-tab-font-weight-basic;
     }
 
     .dx-tab-text-span-pseudo {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      display: block;
+      height: 0;
       pointer-events: none;
-      color: $tabs-tab-color;
-      font-weight: $fluent-tab-font-weight-basic;
-      visibility: visible;
+      font-weight: $fluent-tab-font-weight-accent;
+      visibility: hidden;
     }
   }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7afce36ee551..38ad9bbed3fe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,8 +83,8 @@ catalogs:
       specifier: 8.52.0
       version: 8.52.0
     axe-core:
-      specifier: 4.11.3
-      version: 4.11.3
+      specifier: 4.13.0
+      version: 4.13.0
     devexpress-diagram:
       specifier: 2.2.31
       version: 2.2.31
@@ -262,7 +262,7 @@ importers:
         version: 17.0.35
       axe-core:
         specifier: 'catalog:'
-        version: 4.11.3
+        version: 4.13.0
       chokidar:
         specifier: 5.0.0
         version: 5.0.0
@@ -624,7 +624,7 @@ importers:
         version: 5.10.0(eslint@9.39.4(jiti@2.6.1)(supports-color@7.2.0))
       '@testcafe-community/axe':
         specifier: 3.5.0
-        version: 3.5.0(axe-core@4.11.3)(testcafe@3.7.5)
+        version: 3.5.0(axe-core@4.13.0)(testcafe@3.7.5)
       '@types/eslint':
         specifier: 8.56.12
         version: 8.56.12
@@ -657,7 +657,7 @@ importers:
         version: 0.9.1(typescript@6.0.3)(vue@3.5.32(typescript@6.0.3))
       axe-core:
         specifier: 'catalog:'
-        version: 4.11.3
+        version: 4.13.0
       babel-jest:
         specifier: 30.4.1
         version: 30.4.1(@babel/core@7.29.7)
@@ -1101,7 +1101,7 @@ importers:
         version: 5.10.0(eslint@9.39.4(jiti@2.6.1))
       '@testcafe-community/axe':
         specifier: 3.5.0
-        version: 3.5.0(axe-core@4.11.3)(testcafe@3.7.5)
+        version: 3.5.0(axe-core@4.13.0)(testcafe@3.7.5)
       '@types/jquery':
         specifier: 'catalog:'
         version: 4.0.1
@@ -1113,7 +1113,7 @@ importers:
         version: 8.52.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       axe-core:
         specifier: 'catalog:'
-        version: 4.11.3
+        version: 4.13.0
       devextreme:
         specifier: workspace:*
         version: link:../../packages/devextreme/artifacts/npm/devextreme
@@ -1436,7 +1436,7 @@ importers:
         version: 8.52.0(eslint@9.39.4(jiti@2.6.1))(typescript@4.9.5)
       axe-core:
         specifier: 'catalog:'
-        version: 4.11.3
+        version: 4.13.0
       babel-plugin-inferno:
         specifier: 6.8.5
         version: 6.8.5(@babel/core@7.29.7)
@@ -8751,14 +8751,14 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  axe-core@4.11.3:
-    resolution: {integrity: sha512-zBQouZixDTbo3jMGqHKyePxYxr1e5W8UdTmBQ7sNtaA9M2bE32daxxPLS/jojhKOHxQ7LWwPjfiwf/fhaJWzlg==}
-    engines: {node: '>=4'}
-
   axe-core@4.12.1:
     resolution: {integrity: sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==}
     engines: {node: '>=4'}
 
+  axe-core@4.13.0:
+    resolution: {integrity: sha512-UzGt8zg7Ny8djbYMhxl2zuEevVa7r2gJjYY5Lwr1xM7+XU2nd6CkIWFTVcCIbAP63vSz71NaVyyuSk9lHKcy0A==}
+    engines: {node: '>=4'}
+
   axios@1.18.1:
     resolution: {integrity: sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==}
 
@@ -24009,9 +24009,9 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
-  '@testcafe-community/axe@3.5.0(axe-core@4.11.3)(testcafe@3.7.5)':
+  '@testcafe-community/axe@3.5.0(axe-core@4.13.0)(testcafe@3.7.5)':
     dependencies:
-      axe-core: 4.11.3
+      axe-core: 4.13.0
       chalk: 2.4.2
       testcafe: 3.7.5(supports-color@7.2.0)
 
@@ -26073,10 +26073,10 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
-  axe-core@4.11.3: {}
-
   axe-core@4.12.1: {}
 
+  axe-core@4.13.0: {}
+
   axios@1.18.1:
     dependencies:
       follow-redirects: 1.16.0(debug@4.4.3)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index cc6a4529add4..005b76c8b0a8 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -66,7 +66,7 @@ overrides:
   "postcss-selector-parser@>=7.1.0 <7.1.3": "^7.1.3"
   "fflate@>=0.8.0 <0.8.3": "^0.8.3"
 catalog:
-  axe-core: 4.11.3
+  axe-core: 4.13.0
   inferno: ^8.2.3
   inferno-hydrate: ^8.2.3
   inferno-create-element: ^8.2.3

From 2035e3cc292f82c45dc608e0aa2384442b935834 Mon Sep 17 00:00:00 2001
From: Anna Shakhova <68295572+anna-shakhova@users.noreply.github.com>
Date: Tue, 8 Sep 2026 05:33:06 +0000
Subject: [PATCH 18/45] Grids: retarget `dataController._dataSource` readers
 (#35076)

---
 .../__tests__/export.integration.test.ts      | 119 ++++++++++++++++++
 .../grids/data_grid/export/m_export.ts        |   6 +-
 .../data_controller/data_controller.ts        |   2 +-
 ...data_source_controller.integration.test.ts |  14 +--
 .../focus/__tests__/focus.integration.test.ts |  70 +++++++++++
 .../grids/grid_core/focus/m_focus.ts          |  11 +-
 .../virtual_scrolling/m_virtual_scrolling.ts  |  20 ++-
 .../utils/__tests__/items.test.ts             |   8 ++
 .../virtual_scrolling/utils/items.ts          |   4 +-
 .../dataController.tests.js                   |  41 +++---
 .../selection.tests.js                        |   2 +-
 11 files changed, 254 insertions(+), 43 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/data_grid/export/__tests__/export.integration.test.ts
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/focus/__tests__/focus.integration.test.ts

diff --git a/packages/devextreme/js/__internal/grids/data_grid/export/__tests__/export.integration.test.ts b/packages/devextreme/js/__internal/grids/data_grid/export/__tests__/export.integration.test.ts
new file mode 100644
index 000000000000..95e088cca601
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/data_grid/export/__tests__/export.integration.test.ts
@@ -0,0 +1,119 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import { Deferred } from '@js/core/utils/deferred';
+import type { Properties as DataGridProperties } from '@js/ui/data_grid';
+
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+  flushAsync,
+} from '../../../grid_core/__tests__/__mock__/helpers/utils';
+
+const DATA = [
+  { id: 1, value: 'a' },
+  { id: 2, value: 'b' },
+];
+
+const SELECTED_ROWS_DATA = [DATA[0]];
+
+const setup = async (options: DataGridProperties) => {
+  const { instance } = await createDataGrid({
+    dataSource: DATA,
+    keyExpr: 'id',
+    selectedRowKeys: [1],
+    ...options,
+  });
+
+  await flushAsync();
+
+  const exportController = instance.getController('export');
+  const selectionController = instance.getController('selection');
+
+  const filteredItems = Deferred().resolve(SELECTED_ROWS_DATA);
+
+  return {
+    exportController,
+    filteredItems,
+    loadSelectedItemsWithFilter: jest
+      .spyOn(selectionController, 'loadSelectedItemsWithFilter')
+      .mockReturnValue(filteredItems),
+    getSelectedRowsData: jest
+      .spyOn(selectionController, 'getSelectedRowsData')
+      .mockReturnValue(SELECTED_ROWS_DATA),
+    getAllItems: jest.spyOn(exportController, '_getAllItems'),
+  };
+};
+
+describe('ExportController', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  describe('_getSelectedItems', () => {
+    it('loads the selected items with a filter when loadItemsOnExportingSelectedItems is enabled', async () => {
+      const {
+        exportController,
+        loadSelectedItemsWithFilter,
+        getSelectedRowsData,
+        getAllItems,
+        filteredItems,
+      } = await setup({ loadItemsOnExportingSelectedItems: true } as DataGridProperties);
+
+      exportController._getSelectedItems();
+
+      expect(loadSelectedItemsWithFilter).toHaveBeenCalledTimes(1);
+      expect(getSelectedRowsData).not.toHaveBeenCalled();
+      expect(getAllItems).toHaveBeenCalledWith(filteredItems, true);
+    });
+
+    it('loads the selected items with a filter when filtering is a remote operation', async () => {
+      const {
+        exportController,
+        loadSelectedItemsWithFilter,
+        getSelectedRowsData,
+        getAllItems,
+        filteredItems,
+      } = await setup({ remoteOperations: { filtering: true } });
+
+      exportController._getSelectedItems();
+
+      expect(loadSelectedItemsWithFilter).toHaveBeenCalledTimes(1);
+      expect(getSelectedRowsData).not.toHaveBeenCalled();
+      expect(getAllItems).toHaveBeenCalledWith(filteredItems, true);
+    });
+
+    it('uses the already selected rows when every operation is local', async () => {
+      const {
+        exportController,
+        loadSelectedItemsWithFilter,
+        getSelectedRowsData,
+        getAllItems,
+      } = await setup({});
+
+      exportController._getSelectedItems();
+
+      expect(getSelectedRowsData).toHaveBeenCalledTimes(1);
+      expect(loadSelectedItemsWithFilter).not.toHaveBeenCalled();
+      expect(getAllItems).toHaveBeenCalledWith(SELECTED_ROWS_DATA);
+    });
+
+    it('uses the already selected rows when loadItemsOnExportingSelectedItems is disabled explicitly, even with remote filtering', async () => {
+      const {
+        exportController,
+        loadSelectedItemsWithFilter,
+        getSelectedRowsData,
+        getAllItems,
+      } = await setup({
+        loadItemsOnExportingSelectedItems: false,
+        remoteOperations: { filtering: true },
+      } as DataGridProperties);
+
+      exportController._getSelectedItems();
+
+      expect(getSelectedRowsData).toHaveBeenCalledTimes(1);
+      expect(loadSelectedItemsWithFilter).not.toHaveBeenCalled();
+      expect(getAllItems).toHaveBeenCalledWith(SELECTED_ROWS_DATA);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts b/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts
index e94c768bf7e8..624c83309f76 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts
@@ -16,6 +16,7 @@ import List from '@ts/ui/list/list.edit.search';
 import type { ColumnHeadersView } from '../../grid_core/column_headers/m_column_headers';
 import type { ColumnsController } from '../../grid_core/columns_controller/m_columns_controller';
 import type { DataController } from '../../grid_core/data_controller/data_controller';
+import type { DataSourceController } from '../../grid_core/data_source/data_source_controller';
 import type { EditingController } from '../../grid_core/editing/m_editing';
 import type { HeaderPanel } from '../../grid_core/header_panel/m_header_panel';
 import type { ModuleType } from '../../grid_core/m_types';
@@ -337,6 +338,8 @@ export class ExportController extends dataGridCore.ViewController {
 
   private _dataController!: DataController;
 
+  private dataSourceController!: DataSourceController;
+
   private _selectionController!: SelectionController;
 
   private _headersView!: ColumnHeadersView;
@@ -353,6 +356,7 @@ export class ExportController extends dataGridCore.ViewController {
     this.throwWarningIfNoOnExportingEvent();
     this._columnsController = this.getController('columns');
     this._dataController = this.getController('data');
+    this.dataSourceController = this.getController('dataSource');
     this._selectionController = this.getController('selection');
     this._rowsView = this.getView('rowsView');
     this._headersView = this.getView('columnHeadersView');
@@ -701,7 +705,7 @@ export class ExportController extends dataGridCore.ViewController {
 
   private needLoadItemsOnExportingSelectedItems(): boolean {
     return this.option('loadItemsOnExportingSelectedItems')
-      ?? (this._dataController._dataSource?.remoteOperations().filtering ?? false);
+      ?? (this.dataSourceController.remoteOperations().filtering ?? false);
   }
 }
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index ec04bb2b8892..242093e9c26a 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -66,7 +66,7 @@ import {
 import { generateRowValues } from './utils/row_values';
 
 export class DataController extends modules.Controller {
-  public _dataSource?: DataSourceAdapter | null;
+  protected _dataSource?: DataSourceAdapter | null;
 
   protected _items!: ProcessedItem[];
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
index cfae192b7095..96eefe8ae70f 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
@@ -103,7 +103,7 @@ describe('dataSource controller holds the adapter', () => {
   it('holds the same adapter object as DataController', async () => {
     const { instance } = await createDataGrid({ dataSource: DATA });
     const dataSourceController = instance.getController('dataSource');
-    const adapter = instance.getController('data')._dataSource;
+    const adapter = instance.getController('data').dataSource();
 
     expect(adapter).toBeTruthy();
     expect(dataSourceController.hasAdapter()).toBe(true);
@@ -120,7 +120,7 @@ describe('dataSource controller holds the adapter', () => {
     await flushAsync();
 
     expect(dataSourceController.getAdapter()).not.toBe(firstAdapter);
-    expect(dataSourceController.getAdapter()).toBe(dataController._dataSource);
+    expect(dataSourceController.getAdapter()).toBe(dataController.dataSource());
   });
 
   it('releases the adapter when the dataSource option is cleared', async () => {
@@ -130,9 +130,9 @@ describe('dataSource controller holds the adapter', () => {
     instance.option('dataSource', undefined);
     await flushAsync();
 
-    expect(instance.getController('data')._dataSource).toBeNull();
     expect(dataSourceController.hasAdapter()).toBe(false);
     expect(dataSourceController.getAdapter()).toBeNull();
+    expect(instance.getController('data').dataSource()).toBeUndefined();
     expect(dataSourceController.getDataSource()).toBeNull();
     expect(dataSourceController.store()).toBeUndefined();
   });
@@ -147,7 +147,7 @@ describe('dataSource controller holds the adapter', () => {
     await flushAsync();
 
     expect(dataSourceController.hasAdapter()).toBe(true);
-    expect(dataSourceController.getAdapter()).toBe(instance.getController('data')._dataSource);
+    expect(dataSourceController.getAdapter()).toBe(instance.getController('data').dataSource());
   });
 
   it('still holds the same adapter after a refresh', async () => {
@@ -159,7 +159,7 @@ describe('dataSource controller holds the adapter', () => {
     await refreshed;
 
     expect(dataSourceController.hasAdapter()).toBe(true);
-    expect(dataSourceController.getAdapter()).toBe(instance.getController('data')._dataSource);
+    expect(dataSourceController.getAdapter()).toBe(instance.getController('data').dataSource());
   });
 
   it('releases the adapter on dispose', async () => {
@@ -170,7 +170,7 @@ describe('dataSource controller holds the adapter', () => {
     instance.dispose();
     $container.remove();
 
-    expect(dataController._dataSource).toBeNull();
+    expect(dataController.dataSource()).toBeUndefined();
     expect(dataSourceController.hasAdapter()).toBe(false);
   });
 
@@ -181,7 +181,7 @@ describe('dataSource controller holds the adapter', () => {
       const dataSourceController = instance.getController('dataSource');
 
       expect(dataSourceController.hasAdapter()).toBe(true);
-      expect(dataSourceController.getAdapter()).toBe(instance.getController('data')._dataSource);
+      expect(dataSourceController.getAdapter()).toBe(instance.getController('data').dataSource());
     } finally {
       disposeTreeList($container);
     }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/focus/__tests__/focus.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/focus/__tests__/focus.integration.test.ts
new file mode 100644
index 000000000000..0fa8c9bfa5d8
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/focus/__tests__/focus.integration.test.ts
@@ -0,0 +1,70 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+import type { Properties as DataGridProperties } from '@js/ui/data_grid';
+
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+  flushAsync,
+} from '../../__tests__/__mock__/helpers/utils';
+
+const DATA = [
+  { id: 1, name: 'Alex' },
+  { id: 2, name: 'Dan' },
+];
+
+const setup = async (options: DataGridProperties) => {
+  const { instance } = await createDataGrid({
+    keyExpr: 'id',
+    focusedRowEnabled: true,
+    ...options,
+  });
+
+  await flushAsync();
+
+  return {
+    columnsController: instance.getController('columns'),
+    dataSourceController: instance.getController('dataSource'),
+  };
+};
+
+describe('Focus columns extender', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  describe('getSortDataSourceParameters', () => {
+    it('sorts by the data index when every operation is local', async () => {
+      const { columnsController, dataSourceController } = await setup({ dataSource: DATA });
+
+      const result = columnsController.getSortDataSourceParameters();
+
+      expect(result).toHaveLength(1);
+      expect(result[0].selector).toBe(dataSourceController.getDataIndexGetter());
+      expect(result[0].desc).toBe(false);
+    });
+
+    it('sorts by the key columns when operations are remote', async () => {
+      const { columnsController } = await setup({
+        dataSource: DATA,
+        remoteOperations: true,
+      });
+
+      const result = columnsController.getSortDataSourceParameters();
+
+      expect(result).toEqual([{ selector: 'id', desc: false }]);
+    });
+
+    it('leaves the base sort parameters alone when there is no data source', async () => {
+      const { columnsController, dataSourceController } = await setup({
+        columns: [{ dataField: 'name', sortOrder: 'asc' }],
+      });
+
+      expect(dataSourceController.getAdapter()).toBeNull();
+      expect(columnsController.getSortDataSourceParameters()).toEqual([
+        { selector: 'name', desc: false },
+      ]);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts b/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
index fb91bbd9d68d..ae40935ea655 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
@@ -9,6 +9,7 @@ import type { Key } from '@ts/grids/new/grid_core/data_controller/types';
 
 import type { ColumnsController } from '../columns_controller/m_columns_controller';
 import type { DataController } from '../data_controller/data_controller';
+import type { DataSourceController } from '../data_source/data_source_controller';
 import type { EditingController } from '../editing/m_editing';
 import { isNewRowTempKey } from '../editing/m_editing_utils';
 import type { EditorFactory } from '../editor_factory/m_editor_factory';
@@ -534,8 +535,11 @@ const focusEditorFactoryViewControllerExtender = (
 const columns = (Base: ModuleType<ColumnsController>) => class FocusColumnsExtender extends Base {
   protected focusController!: FocusController;
 
+  protected dataSourceController!: DataSourceController;
+
   public init(isApplyingUserState?: boolean): void {
     this.focusController = this.getController('focus');
+    this.dataSourceController = this.getController('dataSource');
 
     super.init(isApplyingUserState);
   }
@@ -543,9 +547,8 @@ const columns = (Base: ModuleType<ColumnsController>) => class FocusColumnsExten
   public getSortDataSourceParameters(_, sortByKey?) {
     // @ts-expect-error
     let result = super.getSortDataSourceParameters.apply(this, arguments);
-    const dataSource = this._dataController._dataSource;
-    let key = dataSource?.store()?.key();
-    const remoteOperations = dataSource && dataSource.remoteOperations() || {};
+    let key = this.dataSourceController.key();
+    const remoteOperations = this.dataSourceController.remoteOperations();
     const isLocalOperations = Object.keys(remoteOperations).every((operationName) => !remoteOperations[operationName]);
 
     if (key && (this.option('focusedRowEnabled') && this.focusController.isAutoNavigateToFocusedRow() !== false || sortByKey)) {
@@ -555,7 +558,7 @@ const columns = (Base: ModuleType<ColumnsController>) => class FocusColumnsExten
       if (notSortedKeys.length) {
         result = result || [];
         if (isLocalOperations) {
-          result.push({ selector: dataSource?.getDataIndexGetter(), desc: false });
+          result.push({ selector: this.dataSourceController.getDataIndexGetter(), desc: false });
         } else {
           notSortedKeys.forEach((notSortedKey) => result.push({ selector: notSortedKey, desc: false }));
         }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts
index 8a8071655a3b..ca5ae364efd4 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts
@@ -11,6 +11,7 @@ import { getWindow } from '@js/core/utils/window';
 import LoadIndicator from '@js/ui/load_indicator';
 import errors from '@js/ui/widget/ui.errors';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type DataSourceAdapter from '@ts/grids/grid_core/data_source_adapter/m_data_source_adapter';
 import type { ErrorHandlingViewController } from '@ts/grids/grid_core/error_handling/error_handling_view_controller';
 import type { ModuleType } from '@ts/grids/grid_core/m_types';
@@ -39,6 +40,10 @@ import { isInfiniteMode, isVirtualMode, isVirtualPaging } from './utils/scrollin
 
 export type VirtualScrollingDataSourceAdapter = InstanceType<ReturnType<typeof dataSourceAdapterExtender>>;
 
+interface VirtualScrollingDataSourceController extends DataSourceController {
+  getAdapter: () => VirtualScrollingDataSourceAdapter | null;
+}
+
 export const updateLoading = function (that) {
   const beginPageIndex = that._virtualScrollController.beginPageIndex(-1);
 
@@ -488,6 +493,8 @@ export const resizing = (Base: ModuleType<ResizingController>) => class VirtualS
 export const rowsView = (Base: ModuleType<RowsView>) => class VirtualScrollingRowsViewExtender extends Base {
   protected _dataController!: DataController & Partial<StateStoringDataControllerExtension>;
 
+  protected dataSourceController!: VirtualScrollingDataSourceController;
+
   protected _errorHandlingController!: ErrorHandlingViewController;
 
   private _isFixedTableRendering: any;
@@ -502,6 +509,7 @@ export const rowsView = (Base: ModuleType<RowsView>) => class VirtualScrollingRo
     super.init();
 
     this._errorHandlingController = this.getController('errorHandling');
+    this.dataSourceController = this.getController('dataSource') as VirtualScrollingDataSourceController;
 
     this._dataController.pageChanged.add((pageIndex) => {
       const scrollTop = this._scrollTop;
@@ -581,18 +589,18 @@ export const rowsView = (Base: ModuleType<RowsView>) => class VirtualScrollingRo
 
     const deferred = super._renderCore.apply(this, arguments as any);
 
-    const dataSource = this._dataController._dataSource as VirtualScrollingDataSourceAdapter | null | undefined;
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
 
-    if (dataSource && e) {
+    if (dataSourceAdapter && e) {
       const itemCount = e.items ? e.items.length : 20;
       const viewportSize = this._dataController
         // @ts-expect-error
         .viewportSize() || 20;
 
       if (gridCoreUtils.isVirtualRowRendering(this) && itemCount > 0 && this.option(LEGACY_SCROLLING_MODE) !== false) {
-        dataSource._renderTime = (Date.now() - startRenderTime) * viewportSize / itemCount;
+        dataSourceAdapter._renderTime = (Date.now() - startRenderTime) * viewportSize / itemCount;
       } else {
-        dataSource._renderTime = Date.now() - startRenderTime;
+        dataSourceAdapter._renderTime = Date.now() - startRenderTime;
       }
     }
     return deferred;
@@ -707,7 +715,7 @@ export const rowsView = (Base: ModuleType<RowsView>) => class VirtualScrollingRo
 
   private _correctRowHeights(rowHeights) {
     const dataController = this._dataController;
-    const dataSource = dataController._dataSource;
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
     const correctedRowHeights: any = [];
     const visibleRows = dataController.getVisibleRows();
     let itemSize = 0;
@@ -726,7 +734,7 @@ export const rowsView = (Base: ModuleType<RowsView>) => class VirtualScrollingRo
           itemSize = 0;
         }
         lastLoadIndex = currentItem.loadIndex;
-      } else if (isItemCountableByDataSource(currentItem, dataSource as unknown as GroupCountableDataSource)) {
+      } else if (isItemCountableByDataSource(currentItem, dataSourceAdapter as unknown as GroupCountableDataSource)) {
         if (firstCountableItem) {
           firstCountableItem = false;
         } else {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/utils/__tests__/items.test.ts b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/utils/__tests__/items.test.ts
index e1c1680aad3b..ac6f3d39f1a3 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/utils/__tests__/items.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/utils/__tests__/items.test.ts
@@ -96,6 +96,14 @@ describe('isItemCountableByDataSource', () => {
   it('should not count other row types', () => {
     expect(isItemCountableByDataSource(asItem({ rowType: 'groupFooter' }), dataSource)).toBe(false);
   });
+
+  it('should not count a group row when there is no data source', () => {
+    expect(isItemCountableByDataSource(asItem({ rowType: 'group', data: 'countable' }), null)).toBe(false);
+  });
+
+  it('should still count a data row when there is no data source', () => {
+    expect(isItemCountableByDataSource(asItem({ rowType: 'data', isNewRow: false }), null)).toBe(true);
+  });
 });
 
 describe('updateItemIndices', () => {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/utils/items.ts b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/utils/items.ts
index 28412664c581..17612088f962 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/utils/items.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/utils/items.ts
@@ -30,9 +30,9 @@ export const correctCount = (
 
 export const isItemCountableByDataSource = (
   item: ProcessedItem,
-  dataSource: GroupCountableDataSource,
+  dataSourceAdapter: GroupCountableDataSource | null | undefined,
 ): boolean => (item.rowType === 'data' && !item.isNewRow)
-  || (item.rowType === 'group' && dataSource.isGroupItemCountable(item.data));
+  || (item.rowType === 'group' && (dataSourceAdapter?.isGroupItemCountable(item.data) ?? false));
 
 export const updateItemIndices = (items: ProcessedItem[]): ProcessedItem[] => {
   items.forEach((item, index) => {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
index 4b78e7d2de73..ddf33f7e262b 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
@@ -344,7 +344,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
 
         // assert
         assert.ok(dataSource._disposed, 'dataSource is disposed');
-        assert.strictEqual(this.dataController._dataSource, null, 'dataSourceAdapter is removed');
+        assert.strictEqual(this.dataSourceController.getAdapter(), null, 'dataSourceAdapter is removed');
     });
 
     // T697860
@@ -503,7 +503,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
 
 
         // assert
-        assert.deepEqual(this.dataController._dataSource.group(), [{ selector: 'name', isExpanded: true, desc: false }, { selector: 'age', isExpanded: true, desc: false }]);
+        assert.deepEqual(this.dataSourceController.getAdapter().group(), [{ selector: 'name', isExpanded: true, desc: false }, { selector: 'age', isExpanded: true, desc: false }]);
         assert.equal(this.dataController.items()[0].data.key, 'Alex');
         assert.equal(this.dataController.items()[1].data.key, 30);
         assert.equal(changedCallCount, 1, 'changed called one time'); // T122785
@@ -535,7 +535,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         this.dataController.resetDataSource();
 
         // assert
-        assert.deepEqual(this.dataController._dataSource.group(), [{ selector: 'name', isExpanded: false, desc: false }]);
+        assert.deepEqual(this.dataSourceController.getAdapter().group(), [{ selector: 'name', isExpanded: false, desc: false }]);
         assert.equal(this.dataController.items()[0].data.key, 'Alex');
         assert.deepEqual(this.dataController.items()[0].data.collapsedItems, [{ name: 'Alex', age: 30 }]);
         assert.equal(this.dataController.items()[0].data.items, null);
@@ -577,7 +577,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         assert.equal(loadingCount, 1, 'loading called one time');
 
         // assert
-        assert.deepEqual(this.dataController._dataSource.group(), [{ selector: 'name', isExpanded: true, desc: false }]);
+        assert.deepEqual(this.dataSourceController.getAdapter().group(), [{ selector: 'name', isExpanded: true, desc: false }]);
         assert.equal(this.dataController.items()[0].data.key, 'Alex');
         assert.equal(this.dataController.items()[0].data.items.length, 1);
 
@@ -590,7 +590,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         assert.equal(changedCallCount, 1, 'changed called one time');
         // T372049
         assert.equal(loadingCount, 1, 'loading is not called on collapseAll');
-        assert.deepEqual(this.dataController._dataSource.group(), [{ selector: 'name', isExpanded: false, desc: false }]);
+        assert.deepEqual(this.dataSourceController.getAdapter().group(), [{ selector: 'name', isExpanded: false, desc: false }]);
         assert.equal(this.dataController.items()[0].data.key, 'Alex');
         assert.strictEqual(this.dataController.items()[0].data.items, null);
     });
@@ -632,7 +632,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         assert.deepEqual(loadingArgs[0].group, [{ selector: 'name', isExpanded: true, desc: false }], 'loading group arg');
 
         // assert
-        assert.deepEqual(this.dataController._dataSource.group(), [{ selector: 'name', isExpanded: true, desc: false }]);
+        assert.deepEqual(this.dataSourceController.getAdapter().group(), [{ selector: 'name', isExpanded: true, desc: false }]);
         assert.equal(this.dataController.items()[0].data.key, 'Alex');
         assert.equal(this.dataController.items()[0].data.items.length, 1);
 
@@ -645,7 +645,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         assert.equal(changedCallCount, 1, 'changed called one time after collapseAll');
         // T372049
         assert.equal(loadingArgs.length, 1, 'loading is not called after collapseAll');
-        assert.deepEqual(this.dataController._dataSource.group(), [{ selector: 'name', isExpanded: false, desc: false }]);
+        assert.deepEqual(this.dataSourceController.getAdapter().group(), [{ selector: 'name', isExpanded: false, desc: false }]);
         assert.equal(this.dataController.items()[0].data.key, 'Alex');
         assert.strictEqual(this.dataController.items()[0].data.items, null);
     });
@@ -873,8 +873,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
 
         // act
         this.dataController.resetDataSource();
-        const dataIndexGetter = this.dataController._dataSource.getDataIndexGetter();
-        this.dataController._dataSource.getDataIndexGetter();
+        const dataIndexGetter = this.dataSourceController.getAdapter().getDataIndexGetter();
         assert.deepEqual(this.dataController._columnsController.getSortDataSourceParameters(), [{ desc: false, selector: dataIndexGetter }], 'Sort parameters');
         // assert
         assert.equal(dataSource.items()[0].name, 'Alex', 'Item0');
@@ -1955,7 +1954,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         this.dataController.resetDataSource();
 
         // assert
-        assert.deepEqual(this.dataController._dataSource.group(), [{ selector: 'team', isExpanded: true, desc: false }]);
+        assert.deepEqual(this.dataSourceController.getAdapter().group(), [{ selector: 'team', isExpanded: true, desc: false }]);
         assert.equal(this.dataController.items()[0].data.key, 'internal');
         assert.equal(this.dataController.items()[1].data.name, 'Bob');
     });
@@ -2028,7 +2027,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         this.dataController.setDataSource(dataSource);
         dataSource.load();
 
-        assert.ok(this.dataController._dataSource.group());
+        assert.ok(this.dataSourceController.getAdapter().group());
         assert.equal(this.dataController.items()[0].rowType, 'group');
     });
 
@@ -2080,8 +2079,8 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         });
 
         // assert
-        assert.deepEqual(this.dataController._dataSource.sort(), [{ selector: 'age', desc: false }], 'sort from user state is applied by dataField');
-        assert.deepEqual(this.dataController._dataSource.group(), null, 'group from user state not applied because dataSource not has name column');
+        assert.deepEqual(this.dataSourceController.getAdapter().sort(), [{ selector: 'age', desc: false }], 'sort from user state is applied by dataField');
+        assert.deepEqual(this.dataSourceController.getAdapter().group(), null, 'group from user state not applied because dataSource not has name column');
         assert.deepEqual(this.dataController.items().length, 3);
         assert.deepEqual(this.dataController.items()[0].values, [20]);
         assert.deepEqual(this.dataController.items()[1].values, [25]);
@@ -3579,7 +3578,7 @@ QUnit.module('Virtual scrolling', { beforeEach: setupVirtualScrollingModule, aft
     // B233350
     QUnit.test('virtual items on end when visibleRowsCount < pageSize and last page size greater than half page size', function(assert) {
         const dataController = this.dataController;
-        dataController._dataSource.store().remove(999);
+        this.dataSourceController.getAdapter().store().remove(999);
         dataController.refresh();
         dataController.setViewportItemIndex(998);
         assert.strictEqual(this.dataController.pageIndex(), 49);
@@ -3683,7 +3682,7 @@ const setupVirtualRenderingModule = function() {
 
     this.dataController.viewportItemSize(10);
     this.dataController.viewportSize(10);
-    this.dataController._dataSource._renderTime = 50;
+    this.dataSourceController.getAdapter()._renderTime = 50;
 
     this.clock.tick(10);
 
@@ -5700,7 +5699,7 @@ QUnit.module('Infinite scrolling', {
     // T193217
     QUnit.test('setViewportItemIndex to end current page several times load next page one time', function(assert) {
         let loadingCount = 0;
-        this.dataController._dataSource.customizeStoreLoadOptions.add(function() {
+        this.dataSourceController.getAdapter().customizeStoreLoadOptions.add(function() {
             loadingCount++;
         });
         // act
@@ -7845,7 +7844,7 @@ QUnit.module('Filtering', {
             columns: [{ dataField: 'name', selectedFilterOperation: 'contains', filterValue: 'Al' }, 'age']
         });
 
-        this.dataController._dataSource.changed.add(function() {
+        this.dataSourceController.getAdapter().changed.add(function() {
             dataSourceChanged = true;
         });
 
@@ -7867,7 +7866,7 @@ QUnit.module('Filtering', {
             columns: [{ dataField: 'name', selectedFilterOperation: 'contains', filterValue: 'Al' }, 'age']
         });
 
-        this.dataController._dataSource.changed.add(function() {
+        this.dataSourceController.getAdapter().changed.add(function() {
             dataSourceChanged = true;
         });
 
@@ -7889,7 +7888,7 @@ QUnit.module('Filtering', {
             columns: [{ dataField: 'name', selectedFilterOperation: 'contains' }, 'age']
         });
 
-        this.dataController._dataSource.changed.add(function() {
+        this.dataSourceController.getAdapter().changed.add(function() {
             dataSourceChanged = true;
         });
 
@@ -14411,7 +14410,7 @@ QUnit.module('Using DataSource instance', {
         this.clock.tick(10);
 
         assert.equal(this.columnsController.getGroupColumns().length, 1, 'grouped columns count');
-        assert.deepEqual(this.dataController._dataSource.group(), [{ selector: 'field1', desc: false, isExpanded: true }], 'dataSource group when autoExpandAll true');
+        assert.deepEqual(this.dataSourceController.getAdapter().group(), [{ selector: 'field1', desc: false, isExpanded: true }], 'dataSource group when autoExpandAll true');
 
         // act
         this.option('grouping.autoExpandAll', false);
@@ -14420,7 +14419,7 @@ QUnit.module('Using DataSource instance', {
 
         // assert
         assert.equal(this.columnsController.getGroupColumns().length, 1, 'grouped columns count');
-        assert.deepEqual(this.dataController._dataSource.group(), [{ selector: 'field1', desc: false, isExpanded: false }], 'dataSource group when autoExpandAll false');
+        assert.deepEqual(this.dataSourceController.getAdapter().group(), [{ selector: 'field1', desc: false, isExpanded: false }], 'dataSource group when autoExpandAll false');
         assert.equal(this.dataController.totalItemsCount(), 2);
         assert.equal(this.dataController.items().length, 2);
     });
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js
index ad017bce1050..115ab7f16195 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js
@@ -3192,7 +3192,7 @@ QUnit.module('Selection when grouping', {
         this.dataController.pageIndex(1);
         this.selectionController.changeItemSelection(1);
 
-        assert.ok(this.dataController._dataSource.items()[0].isContinuation);
+        assert.ok(this.dataSourceController.getAdapter().items()[0].isContinuation);
         assert.ok(!this.dataController.items()[0].isSelected);
         assert.ok(this.dataController.items()[1].isSelected);
         assert.ok(!this.dataController.items()[2].isSelected);

From 4083ca6ec20d8459b537fb13d4d4816e69be263f Mon Sep 17 00:00:00 2001
From: Dmitry Lavrinovich <52966626+dmlvr@users.noreply.github.com>
Date: Tue, 8 Sep 2026 06:16:55 +0000
Subject: [PATCH 19/45] Lookup - Screen readers do not pick up NoDataText when
 Lookup is empty (#35026)

---
 .../scss/widgets/base/gridBase/_index.scss    |   9 --
 .../js/__internal/core/widget/widget.ts       |   1 +
 .../views/a11y_status_container_component.ts  |   3 +-
 .../__snapshots__/widget.test.ts.snap         |   2 +-
 .../new/grid_core/accessibility/status.tsx    |   3 +-
 .../options.integration.test.ts.snap          |  54 ++++++++
 .../view.integration.test.tsx.snap            |  12 ++
 .../__tests__/__mock__/model/scheduler.ts     |   3 +-
 .../a11y_status/a11y_status_render.ts         |   3 +-
 .../__internal/ui/calendar/calendar.views.ts  |   3 +-
 .../js/__internal/ui/list/list.base.ts        |  31 +++++
 .../js/__internal/ui/validation_summary.ts    |   2 +-
 .../lookup.tests.js                           |  56 ++++++++
 .../listParts/commonTests.js                  | 126 ++++++++++++++++--
 14 files changed, 281 insertions(+), 27 deletions(-)

diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss
index 8a59bf54afba..2c56c22f1444 100644
--- a/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss
@@ -17,15 +17,6 @@
   flex: 0 0 auto;
 }
 
-// NOTE: a11y aria-live container must be visible to allow screen readers read it
-.dx-gridbase-a11y-status-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: polygon(0 0);
-}
-
 @mixin grid-base($widget-name) {
   @include grid-base-cell($widget-name);
 
diff --git a/packages/devextreme/js/__internal/core/widget/widget.ts b/packages/devextreme/js/__internal/core/widget/widget.ts
index 7a9b950fecbd..479d82c583cb 100644
--- a/packages/devextreme/js/__internal/core/widget/widget.ts
+++ b/packages/devextreme/js/__internal/core/widget/widget.ts
@@ -33,6 +33,7 @@ export const DISABLED_STATE_CLASS = 'dx-state-disabled';
 export const ACTIVE_STATE_CLASS = 'dx-state-active';
 export const FOCUSED_STATE_CLASS = 'dx-state-focused';
 export const HOVER_STATE_CLASS = 'dx-state-hover';
+export const SCREEN_READER_ONLY_CLASS = 'dx-screen-reader-only';
 const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
 
 export const EMPTY_ACTIVE_STATE_UNIT = '';
diff --git a/packages/devextreme/js/__internal/grids/grid_core/views/a11y_status_container_component.ts b/packages/devextreme/js/__internal/grids/grid_core/views/a11y_status_container_component.ts
index 875af6837f7d..824b1e86c46c 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/views/a11y_status_container_component.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/views/a11y_status_container_component.ts
@@ -1,8 +1,9 @@
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import { SCREEN_READER_ONLY_CLASS } from '@ts/core/widget/widget';
 
 const CLASSES = {
-  container: 'dx-gridbase-a11y-status-container',
+  container: SCREEN_READER_ONLY_CLASS,
 };
 
 export interface A11yStatusContainerComponentProps {
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap b/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap
index d3a512588033..b10cd6f13ea4 100644
--- a/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap
+++ b/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap
@@ -10,7 +10,7 @@ exports[`common initial render should be successfull 1`] = `
     role="group"
   >
     <div
-      class="dx-gridbase-a11y-status-container dx-cardview-exclude-flexbox"
+      class="dx-screen-reader-only dx-cardview-exclude-flexbox"
       role="status"
     />
     <div
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/accessibility/status.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/accessibility/status.tsx
index 819e89cdf83a..cb40c03dc84d 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/accessibility/status.tsx
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/accessibility/status.tsx
@@ -1,10 +1,11 @@
+import { SCREEN_READER_ONLY_CLASS } from '@ts/core/widget/widget';
 import { Component } from 'inferno';
 
 import { CLASSES as BASE_CLASSES } from '../const';
 
 const CLASSES = {
   ...BASE_CLASSES,
-  container: 'dx-gridbase-a11y-status-container',
+  container: SCREEN_READER_ONLY_CLASS,
 };
 
 export interface A11yStatusContainerComponentProps {
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/options.integration.test.ts.snap b/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/options.integration.test.ts.snap
index 6b48d20c0743..4ed2f2e07526 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/options.integration.test.ts.snap
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/options.integration.test.ts.snap
@@ -267,6 +267,12 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource 1`] = `
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 2
+        </div>
       </div>
     </div>
     <div
@@ -635,6 +641,12 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with exclude
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 2
+        </div>
       </div>
     </div>
     <div
@@ -1003,6 +1015,12 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with exclude
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 2
+        </div>
       </div>
     </div>
     <div
@@ -1371,6 +1389,12 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with filter v
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 2
+        </div>
       </div>
     </div>
     <div
@@ -1850,6 +1874,12 @@ exports[`Options Column.HeaderFilter filterType + values: exclude filter 1`] = `
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 5
+        </div>
       </div>
     </div>
     <div
@@ -2329,6 +2359,12 @@ exports[`Options Column.HeaderFilter filterType + values: exclude filter with va
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 5
+        </div>
       </div>
     </div>
     <div
@@ -2808,6 +2844,12 @@ exports[`Options Column.HeaderFilter filterType + values: filter values 1`] = `
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 5
+        </div>
       </div>
     </div>
     <div
@@ -3139,6 +3181,12 @@ exports[`Options HeaderFilter texts: custom translations 1`] = `
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 1
+        </div>
       </div>
     </div>
     <div
@@ -3470,6 +3518,12 @@ exports[`Options HeaderFilter texts: default translation 1`] = `
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 1
+        </div>
       </div>
     </div>
     <div
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/view.integration.test.tsx.snap b/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/view.integration.test.tsx.snap
index 4d9df25d8c25..08a9545773b2 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/view.integration.test.tsx.snap
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/view.integration.test.tsx.snap
@@ -378,6 +378,12 @@ exports[`HeaderFilter View integration should render popup with list by default
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 5
+        </div>
       </div>
     </div>
     <div
@@ -857,6 +863,12 @@ exports[`HeaderFilter View integration should render popup with tree list if dat
             style="width: 222px; height: 90px;"
           />
         </div>
+        <div
+          class="dx-screen-reader-only"
+          role="status"
+        >
+          Items: 5
+        </div>
       </div>
     </div>
     <div
diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/scheduler.ts b/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/scheduler.ts
index ebc5ff07fa50..80418b75a673 100644
--- a/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/scheduler.ts
+++ b/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/scheduler.ts
@@ -1,4 +1,5 @@
 import { within } from '@testing-library/dom';
+import { SCREEN_READER_ONLY_CLASS } from '@ts/core/widget/widget';
 import { ToolbarModel } from '@ts/scheduler/__tests__/__mock__/model/toolbar';
 
 import { APPOINTMENT_POPUP_CLASS } from '../../../appointment_popup/popup';
@@ -55,7 +56,7 @@ export class SchedulerModel {
   }
 
   getStatusContent(): string {
-    const statusElement = this.container.querySelector('.dx-screen-reader-only');
+    const statusElement = this.container.querySelector(`.${SCREEN_READER_ONLY_CLASS}`);
     return statusElement?.textContent ?? '';
   }
 
diff --git a/packages/devextreme/js/__internal/scheduler/a11y_status/a11y_status_render.ts b/packages/devextreme/js/__internal/scheduler/a11y_status/a11y_status_render.ts
index 558f93c69c36..788d4d742fd2 100644
--- a/packages/devextreme/js/__internal/scheduler/a11y_status/a11y_status_render.ts
+++ b/packages/devextreme/js/__internal/scheduler/a11y_status/a11y_status_render.ts
@@ -1,8 +1,9 @@
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import { SCREEN_READER_ONLY_CLASS } from '@ts/core/widget/widget';
 
 const CLASSES = {
-  container: 'dx-screen-reader-only',
+  container: SCREEN_READER_ONLY_CLASS,
 };
 
 export const createA11yStatusContainer = (statusText = ''): dxElementWrapper => $('<div>')
diff --git a/packages/devextreme/js/__internal/ui/calendar/calendar.views.ts b/packages/devextreme/js/__internal/ui/calendar/calendar.views.ts
index ee55cec31e05..6383dbca9d1c 100644
--- a/packages/devextreme/js/__internal/ui/calendar/calendar.views.ts
+++ b/packages/devextreme/js/__internal/ui/calendar/calendar.views.ts
@@ -8,6 +8,7 @@ import dateSerialization from '@js/core/utils/date_serialization';
 import type {
   CalendarSelectionMode, DayOfWeek, WeekNumberRule,
 } from '@js/ui/calendar';
+import { SCREEN_READER_ONLY_CLASS } from '@ts/core/widget/widget';
 
 import type { BaseViewProperties } from './calendar.base_view';
 import BaseView from './calendar.base_view';
@@ -18,8 +19,6 @@ const CALENDAR_WEEK_NUMBER_CELL_CLASS = 'dx-calendar-week-number-cell';
 const CALENDAR_WEEK_NUMBER_HEADER_CELL_CLASS = 'dx-week-number-header';
 const CALENDAR_WEEK_SELECTION_CLASS = 'dx-calendar-week-selection';
 
-const SCREEN_READER_ONLY_CLASS = 'dx-screen-reader-only';
-
 const WEEK_NUMBER_TEXT = 'WeekNumber';
 
 export interface MonthViewProperties extends BaseViewProperties {
diff --git a/packages/devextreme/js/__internal/ui/list/list.base.ts b/packages/devextreme/js/__internal/ui/list/list.base.ts
index d3411be672fd..3cb11fe713f5 100644
--- a/packages/devextreme/js/__internal/ui/list/list.base.ts
+++ b/packages/devextreme/js/__internal/ui/list/list.base.ts
@@ -45,6 +45,7 @@ import { render } from '@ts/core/utils/ink_ripple';
 import supportUtils from '@ts/core/utils/m_support';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { SupportedKeys } from '@ts/core/widget/widget';
+import { SCREEN_READER_ONLY_CLASS } from '@ts/core/widget/widget';
 import { getDataSourceOptions } from '@ts/data/data_converter/grouped';
 import type {
   CollectionItemInfo,
@@ -132,6 +133,8 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
 
   _$nextButton!: dxElementWrapper | null;
 
+  _$a11yStatusContainer?: dxElementWrapper;
+
   _holdTimer?: ReturnType<typeof setTimeout>;
 
   _loadNextPageTimer?: ReturnType<typeof setTimeout>;
@@ -975,6 +978,7 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
     this._itemElementsCache = $();
 
     this.$element().addClass(LIST_CLASS);
+    this._renderA11yStatusContainer();
     super._initMarkup();
 
     const { useInkRipple } = this.option();
@@ -997,10 +1001,37 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
     const isEmpty = super._renderEmptyMessage(rootNodes);
 
     this.setAria({ role: isEmpty ? undefined : 'application' }, this._focusTarget());
+    this._updateA11yStatusText();
 
     return isEmpty;
   }
 
+  _renderA11yStatusContainer(): void {
+    const isContainerRendered = this._$a11yStatusContainer?.parent().is(this.$element());
+
+    if (isContainerRendered) {
+      return;
+    }
+
+    this._$a11yStatusContainer = $('<div>')
+      .addClass(SCREEN_READER_ONLY_CLASS)
+      .attr('role', 'status')
+      .appendTo(this.$element());
+  }
+
+  _updateA11yStatusText(): void {
+    if (this._dataController.isLoading()) {
+      this._$a11yStatusContainer?.text('');
+      return;
+    }
+
+    const { noDataText } = this.option();
+    const itemsCount = this._editStrategy.itemsGetter().length;
+    const itemsLabel = messageLocalization.format('dxList-listAriaLabel');
+
+    this._$a11yStatusContainer?.text(itemsCount ? `${itemsLabel}: ${itemsCount}` : noDataText ?? '');
+  }
+
   _isMultiSelectMode(): boolean {
     const { selectionMode } = this.option();
     return selectionMode === 'multiple' || selectionMode === 'all';
diff --git a/packages/devextreme/js/__internal/ui/validation_summary.ts b/packages/devextreme/js/__internal/ui/validation_summary.ts
index 13538c1d59f7..8bbdf63d43b6 100644
--- a/packages/devextreme/js/__internal/ui/validation_summary.ts
+++ b/packages/devextreme/js/__internal/ui/validation_summary.ts
@@ -3,6 +3,7 @@ import registerComponent from '@js/core/component_registrator';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import type { OptionChanged } from '@ts/core/widget/types';
+import { SCREEN_READER_ONLY_CLASS } from '@ts/core/widget/widget';
 import type { PostprocessRenderItemInfo } from '@ts/ui/collection/collection_widget.base';
 import type { CollectionWidgetEditProperties } from '@ts/ui/collection/collection_widget.edit';
 import CollectionWidget from '@ts/ui/collection/collection_widget.edit';
@@ -17,7 +18,6 @@ import ValidationEngine from '@ts/ui/validation_engine';
 import type Validator from '@ts/ui/validator';
 
 const VALIDATION_SUMMARY_CLASS = 'dx-validationsummary';
-const SCREEN_READER_ONLY_CLASS = 'dx-screen-reader-only';
 const ITEM_CLASS = `${VALIDATION_SUMMARY_CLASS}-item`;
 const ITEM_DATA_KEY = `${VALIDATION_SUMMARY_CLASS}-item-data`;
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
index 1176c8994059..472cd7a1c70d 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
@@ -3969,6 +3969,62 @@ if(devices.real().deviceType === 'desktop') {
     });
 }
 
+QUnit.module('screen reader announcements (T1334729)', {
+    beforeEach: function() {
+        fx.off = true;
+        this.clock = sinon.useFakeTimers();
+
+        this.instance = $('#lookup').dxLookup({
+            dataSource: [1, 2, 3],
+            searchTimeout: 0,
+            'dropDownOptions.animation': null,
+            opened: true
+        }).dxLookup('instance');
+
+        this.search = (value) => {
+            this.instance._searchBox.option('value', value);
+            this.clock.tick(0);
+        };
+
+        this.getA11yStatus = () => $(`.${LIST_CLASS}`).children('[role="status"]');
+        this.getItemsAnnouncement = (itemsCount) => `${messageLocalization.format('dxList-listAriaLabel')}: ${itemsCount}`;
+    },
+    afterEach: function() {
+        this.clock.restore();
+        fx.off = false;
+    }
+}, () => {
+    QUnit.test('list should have a single live region', function(assert) {
+        assert.strictEqual(this.getA11yStatus().length, 1);
+    });
+
+    QUnit.test('item count should be announced when the drop-down is opened', function(assert) {
+        assert.strictEqual(this.getA11yStatus().text(), this.getItemsAnnouncement(3));
+    });
+
+    QUnit.test('noDataText should be announced if search returns no items', function(assert) {
+        this.search('4');
+
+        assert.strictEqual(this.getA11yStatus().text(), messageLocalization.format('dxCollectionWidget-noDataText'));
+    });
+
+    QUnit.test('item count should be announced if search returns items', function(assert) {
+        this.search('1');
+
+        assert.strictEqual(this.getA11yStatus().text(), this.getItemsAnnouncement(1));
+    });
+
+    QUnit.test('live region should not be re-created on search', function(assert) {
+        const a11yStatusElement = this.getA11yStatus().get(0);
+
+        this.search('4');
+
+        assert.strictEqual(this.getA11yStatus().get(0), a11yStatusElement, 'the live region is the same element');
+        assert.strictEqual(a11yStatusElement.textContent, messageLocalization.format('dxCollectionWidget-noDataText'),
+            'the announcement is written into that element, otherwise screen readers do not announce it');
+    });
+});
+
 QUnit.module('default options', {
     beforeEach: function() {
         fx.off = true;
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js
index 806250bc64e4..bf34a80301c4 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js
@@ -19,9 +19,12 @@ import { CustomStore } from 'common/data/custom_store';
 import DOMComponent from 'core/dom_component';
 import List from 'ui/list';
 import { setScrollView } from '__internal/ui/list/list.base';
+import { SCREEN_READER_ONLY_CLASS } from '__internal/core/widget/widget';
+
 import ScrollView from 'ui/scroll_view';
 import eventsEngine from 'common/core/events/core/events_engine';
 import ariaAccessibilityTestHelper from '../../../helpers/ariaAccessibilityTestHelper.js';
+import messageLocalization from 'common/core/localization/message';
 
 const LIST_ITEM_CLASS = 'dx-list-item';
 const LIST_ITEM_CONTENT_CLASS = 'dx-list-item-content';
@@ -1004,7 +1007,7 @@ QUnit.module('options', moduleSetup, () => {
             pageLoadMode: 'scrollBottom'
         });
 
-        assert.equal(element.text(), '12345');
+        assert.equal(element.find(`.${LIST_ITEMS_CLASS}`).text(), '12345');
         assert.deepEqual(element.dxList('instance').option('items'), [1, 2, 3, 4, 5]);
     });
 
@@ -1014,7 +1017,7 @@ QUnit.module('options', moduleSetup, () => {
             pageLoadMode: 'scrollBottom'
         });
 
-        assert.equal(element.text(), '12345');
+        assert.equal(element.find(`.${LIST_ITEMS_CLASS}`).text(), '12345');
         assert.deepEqual(element.dxList('instance').option('items'), [1, 2, 3, 4, 5]);
     });
 
@@ -1024,7 +1027,7 @@ QUnit.module('options', moduleSetup, () => {
             pageLoadMode: 'scrollBottom'
         });
 
-        assert.equal(element.text(), '12345');
+        assert.equal(element.find(`.${LIST_ITEMS_CLASS}`).text(), '12345');
         assert.deepEqual(element.dxList('instance').option('items'), [1, 2, 3, 4, 5]);
     });
 
@@ -1068,7 +1071,7 @@ QUnit.module('options changed', moduleSetup, () => {
             pageLoadMode: 'scrollBottom'
         });
 
-        assert.equal(element.text(), '01354');
+        assert.equal(element.find(`.${LIST_ITEMS_CLASS}`).text(), '01354');
         assert.deepEqual(element.dxList('instance').option('items'), [0, 1, 3, 5, 4]);
 
         element.dxList({
@@ -1077,7 +1080,7 @@ QUnit.module('options changed', moduleSetup, () => {
             }
         });
 
-        assert.equal(element.text(), '26897');
+        assert.equal(element.find(`.${LIST_ITEMS_CLASS}`).text(), '26897');
         assert.deepEqual(element.dxList('instance').option('items'), [2, 6, 8, 9, 7]);
     });
 
@@ -1086,13 +1089,13 @@ QUnit.module('options changed', moduleSetup, () => {
             items: [0, 1, 3, 5, 4]
         });
 
-        assert.equal(element.text(), '01354');
+        assert.equal(element.find(`.${LIST_ITEMS_CLASS}`).text(), '01354');
 
         element.dxList({
             items: [2, 6, 8, 9, 7]
         });
 
-        assert.equal(element.text(), '26897');
+        assert.equal(element.find(`.${LIST_ITEMS_CLASS}`).text(), '26897');
     });
 
     QUnit.test('scrollingEnabled', function(assert) {
@@ -2759,14 +2762,14 @@ QUnit.module('infinite list scenario', moduleSetup, () => {
             }
         });
 
-        assert.equal(element.text(), '12', 'correct items generated');
+        assert.equal(element.find(`.${LIST_ITEMS_CLASS}`).text(), '12', 'correct items generated');
         assert.deepEqual(element.dxList('instance').option('items'), [1, 2], 'correct items presented in options');
 
         element.find(`.${LIST_ITEM_CLASS}`).data('rendered', true);
 
         element.dxScrollView('instance').scrollBottom();
 
-        assert.equal(element.text(), '1234', 'correct items generated');
+        assert.equal(element.find(`.${LIST_ITEMS_CLASS}`).text(), '1234', 'correct items generated');
         assert.deepEqual(element.dxList('instance').option('items'), [1, 2, 3, 4], 'correct items presented in options');
 
         assert.strictEqual(element.find(`.${LIST_ITEM_CLASS}`).eq(0).data('rendered'), true, 'first item is not rerendered');
@@ -2875,7 +2878,7 @@ QUnit.module('infinite list scenario', moduleSetup, () => {
 
         element.dxScrollView('instance').scrollBottom();
 
-        assert.equal(element.text(), '12', 'error occurred');
+        assert.equal(element.find(`.${LIST_ITEMS_CLASS}`).text(), '12', 'error occurred');
 
         assert.equal(element.dxList('instance')._startIndexForAppendedItems, null, 'flag set correctly');
     });
@@ -4952,6 +4955,9 @@ if(devices.real().deviceType === 'desktop') {
 }
 
 QUnit.module('Accessibility', () => {
+    const getA11yStatus = (instance) => instance.$element().children('[role="status"]');
+    const getItemsAnnouncement = (itemsCount) => `${messageLocalization.format('dxList-listAriaLabel')}: ${itemsCount}`;
+
     QUnit.test('SelectAll checkbox should have aria-label="Select All" attribute', function(assert) {
         $('#list').dxList({
             selectionMode: 'all',
@@ -5378,4 +5384,104 @@ QUnit.module('Accessibility', () => {
             assert.strictEqual(instance.$element().find(`.${SCROLLVIEW_CONTENT_CLASS}`).eq(0).attr('role'), 'application');
         });
     });
+
+    QUnit.test('list should render a single visually hidden live region (T1334729)', function(assert) {
+        const instance = $('#list').dxList({ items: ['Item 1'] }).dxList('instance');
+
+        const $a11yStatus = getA11yStatus(instance);
+
+        assert.strictEqual($a11yStatus.length, 1, 'the list has a single live region');
+        assert.ok($a11yStatus.hasClass(SCREEN_READER_ONLY_CLASS), 'the live region is visually hidden');
+    });
+
+    QUnit.test('item count should be announced (T1334729)', function(assert) {
+        const instance = $('#list').dxList({ items: ['Item 1', 'Item 2'] }).dxList('instance');
+
+        assert.strictEqual(getA11yStatus(instance).text(), getItemsAnnouncement(2));
+    });
+
+    QUnit.test('item count of a grouped list should not count groups (T1334729)', function(assert) {
+        const instance = $('#list').dxList({
+            grouped: true,
+            items: [
+                { key: 'group 1', items: ['Item 1', 'Item 2'] },
+                { key: 'group 2', items: ['Item 3'] },
+            ],
+        }).dxList('instance');
+
+        assert.strictEqual(getA11yStatus(instance).text(), getItemsAnnouncement(3));
+    });
+
+    QUnit.test('noDataText should be announced when the list is empty (T1334729)', function(assert) {
+        const instance = $('#list').dxList({ items: [] }).dxList('instance');
+
+        assert.strictEqual(getA11yStatus(instance).text(), messageLocalization.format('dxCollectionWidget-noDataText'));
+    });
+
+    QUnit.test('custom noDataText should be announced and follow its runtime change (T1334729)', function(assert) {
+        const instance = $('#list').dxList({ items: [], noDataText: 'custom-no-data' }).dxList('instance');
+
+        assert.strictEqual(getA11yStatus(instance).text(), 'custom-no-data', 'custom noDataText is announced');
+
+        instance.option('noDataText', 'another-no-data');
+
+        assert.strictEqual(getA11yStatus(instance).text(), 'another-no-data', 'announcement is updated after runtime change');
+    });
+
+    QUnit.test('nothing should be announced when the list is empty and noDataText is empty (T1334729)', function(assert) {
+        const instance = $('#list').dxList({ items: [], noDataText: '' }).dxList('instance');
+
+        assert.strictEqual(getA11yStatus(instance).text(), '');
+    });
+
+    QUnit.test('nothing should be announced while the initial data is loading (T1334729)', function(assert) {
+        const loadResult = $.Deferred();
+        const instance = $('#list').dxList({
+            dataSource: new CustomStore({ load: () => loadResult.promise(), loadMode: 'processed' })
+        }).dxList('instance');
+
+        assert.strictEqual(getA11yStatus(instance).text(), '', 'nothing is announced while data is loading');
+
+        loadResult.resolve(['Item 1', 'Item 2']);
+
+        assert.strictEqual(getA11yStatus(instance).text(), getItemsAnnouncement(2), 'item count is announced once data is loaded');
+    });
+
+    QUnit.test('announcement should be cleared while new data is loading (T1334729)', function(assert) {
+        const instance = $('#list').dxList({ items: ['Item 1', 'Item 2', 'Item 3'] }).dxList('instance');
+        const loadResult = $.Deferred();
+
+        instance.option('dataSource', new CustomStore({ load: () => loadResult.promise(), loadMode: 'processed' }));
+
+        assert.strictEqual(getA11yStatus(instance).text(), '',
+            'neither the outdated item count nor noDataText is announced while data is loading');
+
+        loadResult.resolve(['Item 1']);
+
+        assert.strictEqual(getA11yStatus(instance).text(), getItemsAnnouncement(1), 'item count is announced once data is loaded');
+    });
+
+    [true, false].forEach(repaintChangesOnly => {
+        QUnit.test(`noDataText should be announced when dataSource is cleared at runtime and repaintChangesOnly=${repaintChangesOnly} (T1334729)`, function(assert) {
+            const instance = $('#list').dxList({ dataSource: ['Item 1'], repaintChangesOnly }).dxList('instance');
+            const a11yStatusElement = getA11yStatus(instance).get(0);
+
+            instance.option('dataSource', []);
+
+            assert.strictEqual(getA11yStatus(instance).get(0), a11yStatusElement,
+                'the live region is not re-created, otherwise screen readers do not announce its text');
+            assert.strictEqual(getA11yStatus(instance).text(), messageLocalization.format('dxCollectionWidget-noDataText'));
+        });
+
+        QUnit.test(`item count should be announced when dataSource is set at runtime and repaintChangesOnly=${repaintChangesOnly} (T1334729)`, function(assert) {
+            const instance = $('#list').dxList({ dataSource: [], repaintChangesOnly }).dxList('instance');
+            const a11yStatusElement = getA11yStatus(instance).get(0);
+
+            instance.option('dataSource', ['Item 1', 'Item 2']);
+
+            assert.strictEqual(getA11yStatus(instance).get(0), a11yStatusElement,
+                'the live region is not re-created, otherwise screen readers do not announce its text');
+            assert.strictEqual(getA11yStatus(instance).text(), getItemsAnnouncement(2));
+        });
+    });
 });

From d89ef0a96800176a23b8216f52bf9b93ff805b27 Mon Sep 17 00:00:00 2001
From: Aleksei Semikozov <2846685+aleksei-semikozov@users.noreply.github.com>
Date: Tue, 8 Sep 2026 08:24:49 +0000
Subject: [PATCH 20/45] fix (demos): Revert the ResolveTimeConflicts date
 hardcode and mask the fluent etalon instead (#35079)

Co-authored-by: Aleksey Semikozov <aleksei.semikozov@devexpress.com>
---
 .../Angular/app/app.component.ts                 |   9 ---------
 .../Scheduler/ResolveTimeConflicts/React/App.tsx |   9 ---------
 .../ResolveTimeConflicts/ReactJs/App.js          |   8 --------
 .../Scheduler/ResolveTimeConflicts/Vue/App.vue   |   9 ---------
 .../ResolveTimeConflicts/jQuery/index.js         |   9 ---------
 ...onflict-informer (fluent.blue.light)_mask.png | Bin 0 -> 3170 bytes
 6 files changed, 44 deletions(-)
 create mode 100644 apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (fluent.blue.light)_mask.png

diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.ts b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.ts
index 8b275fbc3e96..96bd4aa81eac 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.ts
@@ -86,15 +86,6 @@ export class AppComponent {
         this.form?.validate();
       }
     });
-
-    this.form?.on('contentReady', (contentReadyEvent: DxFormTypes.ContentReadyEvent) => {
-      const untilEditor = contentReadyEvent.component.getEditor('recurrenceEndUntilEditor');
-      untilEditor?.on('valueChanged', () => {
-        contentReadyEvent.component.getEditor('recurrenceRepeatEndEditor')?.option('value') !== 'until'
-        && untilEditor?.option('value', new Date(2026, 8, 3));
-      });
-      untilEditor?.option('value', new Date(2026, 8, 3));
-    });
   };
 
   customizeItem = (item: DxFormTypes.SimpleItem): void => {
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx
index 11ccad20985b..42a44a6958aa 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx
@@ -173,15 +173,6 @@ const App = () => {
         formRef.current?.validate();
       }
     });
-
-    e.component.on('contentReady', (contentReadyEvent: FormTypes.ContentReadyEvent) => {
-      const untilEditor = contentReadyEvent.component.getEditor('recurrenceEndUntilEditor');
-      untilEditor?.on('valueChanged', () => {
-        contentReadyEvent.component.getEditor('recurrenceRepeatEndEditor')?.option('value') !== 'until'
-        && untilEditor?.option('value', new Date(2026, 8, 3));
-      });
-      untilEditor?.option('value', new Date(2026, 8, 3));
-    });
   }, [setConflictError]);
 
   const customizeItem = useCallback((item: FormTypes.SimpleItem) => {
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js
index 9cbd4f8a600f..e13487f0fae2 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js
@@ -149,14 +149,6 @@ const App = () => {
           formRef.current?.validate();
         }
       });
-      e.component.on('contentReady', (contentReadyEvent) => {
-        const untilEditor = contentReadyEvent.component.getEditor('recurrenceEndUntilEditor');
-        untilEditor?.on('valueChanged', () => {
-          contentReadyEvent.component.getEditor('recurrenceRepeatEndEditor')?.option('value') !==
-            'until' && untilEditor?.option('value', new Date(2026, 8, 3));
-        });
-        untilEditor?.option('value', new Date(2026, 8, 3));
-      });
     },
     [setConflictError],
   );
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
index 38507b99935d..260dc02e5e76 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
@@ -240,15 +240,6 @@ const onFormInitialized = (e: DxFormTypes.InitializedEvent) => {
       form?.validate();
     }
   });
-
-  e.component!.on('contentReady', (contentReadyEvent: DxFormTypes.ContentReadyEvent) => {
-    const untilEditor = contentReadyEvent.component.getEditor('recurrenceEndUntilEditor');
-    untilEditor?.on('valueChanged', () => {
-      contentReadyEvent.component.getEditor('recurrenceRepeatEndEditor')?.option('value') !== 'until'
-      && untilEditor?.option('value', new Date(2026, 8, 3));
-    });
-    untilEditor?.option('value', new Date(2026, 8, 3));
-  });
 };
 
 const customizeItem = (item: DxFormTypes.SimpleItem) => {
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js
index 9358db8a1b7a..b6a6887daf51 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js
@@ -43,15 +43,6 @@ $(() => {
               form.validate();
             }
           });
-
-          form.on('contentReady', (e) => {
-            const untilEditor = e.component.getEditor('recurrenceEndUntilEditor');
-            untilEditor.on('valueChanged', () => {
-              e.component.getEditor('recurrenceRepeatEndEditor').option('value') !== 'until'
-              && untilEditor.option('value', new Date(2026, 8, 3));
-            });
-            untilEditor.option('value', new Date(2026, 8, 3));
-          });
         },
         items: [
           {
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (fluent.blue.light)_mask.png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (fluent.blue.light)_mask.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4f261f4139ef4e6d7735e406e1a7e047c9ff1f4
GIT binary patch
literal 3170
zcmeAS@N?(olHy`uVBq!ia0y~yU~XYxV2a>i1BzH3)ws>Tz@zEu;uuoF`1T;9;2{P9
z<_+u2|4)-=S<s+X`A!?C>P#k(m~jP27_4MuU`PmJW?(q51gO8klNTsBSqey~nF0x)
zEFdwea5Q*E6UAs&7%eGA%g51L0azi9R+?05D!k-n=&7Ek{%8GeZifAXti5qbnn9wx
moUy@mv_&-94ji^Qo}ck1-`Xu1pTvR18iS{+pUXO@geCylgehtO

literal 0
HcmV?d00001


From d96abb4dd33b642bb971644ed4c0b19adff2d651 Mon Sep 17 00:00:00 2001
From: Alyar <Alyar666@users.noreply.github.com>
Date: Tue, 8 Sep 2026 08:29:01 +0000
Subject: [PATCH 21/45] Grids - DataController: Extract user state knowledge to
 extenders (#35064)

Co-authored-by: Alyar <>
---
 .../data_controller/data_controller.ts        |  3 +-
 .../grids/grid_core/data_controller/types.ts  |  2 +-
 .../search_data_controller.user_state.test.ts | 27 ++++++++
 .../grids/grid_core/search/m_search.ts        |  9 ++-
 .../__tests__/__mock__/helpers/utils.ts       | 66 +++++++++++++++++++
 .../state_storing.user_state.test.ts          | 28 ++++++++
 6 files changed, 131 insertions(+), 4 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/search/__tests__/search_data_controller.user_state.test.ts
 create mode 100644 packages/devextreme/js/__internal/grids/tree_list/__tests__/__mock__/helpers/utils.ts
 create mode 100644 packages/devextreme/js/__internal/grids/tree_list/__tests__/state_storing.user_state.test.ts

diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index 242093e9c26a..989298f6f505 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -1629,11 +1629,10 @@ export class DataController extends modules.Controller {
   }
 
   /**
-   * @extended: TreeList's state_storing
+   * @extended: search, TreeList's state_storing
    */
   public getUserState(): UserState {
     return {
-      searchText: this.option('searchPanel.text'),
       pageIndex: this.pageIndex(),
       pageSize: this.pageSize(),
     };
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/types.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/types.ts
index 4e2aeb8eba80..b67a9d13623a 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/types.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/types.ts
@@ -18,9 +18,9 @@ export interface RefreshOptions {
 }
 
 export interface UserState {
-  searchText: string | undefined;
   pageIndex: number;
   pageSize: number;
+  searchText?: string;
   expandedRowKeys?: unknown[];
 }
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/search/__tests__/search_data_controller.user_state.test.ts b/packages/devextreme/js/__internal/grids/grid_core/search/__tests__/search_data_controller.user_state.test.ts
new file mode 100644
index 000000000000..30c939574e2a
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/search/__tests__/search_data_controller.user_state.test.ts
@@ -0,0 +1,27 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+} from '../../__tests__/__mock__/helpers/utils';
+
+describe('Search data controller user state', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('should include the search panel text', async () => {
+    const { instance } = await createDataGrid({
+      dataSource: [],
+      searchPanel: { text: 'Alex' },
+    });
+
+    expect(instance.getController('data').getUserState()).toEqual({
+      searchText: 'Alex',
+      pageIndex: 0,
+      pageSize: 20,
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts b/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
index 71faffb9cc83..30ae6e25a9b7 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
@@ -12,7 +12,7 @@ import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { ToolbarItem } from '@ts/grids/new/grid_core/toolbar/types';
 
 import type { DataController } from '../data_controller/data_controller';
-import type { DataFilter } from '../data_controller/types';
+import type { DataFilter, UserState } from '../data_controller/types';
 import type { HeaderPanel } from '../header_panel/m_header_panel';
 import modules from '../m_modules';
 import type { ModuleType, OptionChanged } from '../m_types';
@@ -62,6 +62,13 @@ const dataController = (
     return super.publicMethods().concat(['searchByText']);
   }
 
+  public getUserState(): UserState {
+    return {
+      ...super.getUserState(),
+      searchText: this.option('searchPanel.text'),
+    };
+  }
+
   protected calculateAdditionalFilter(): DataFilter {
     const dataSource = this.getDataSource();
     const langParams = dataSource?.loadOptions?.()?.langParams;
diff --git a/packages/devextreme/js/__internal/grids/tree_list/__tests__/__mock__/helpers/utils.ts b/packages/devextreme/js/__internal/grids/tree_list/__tests__/__mock__/helpers/utils.ts
new file mode 100644
index 000000000000..ffd6ce2fb2dd
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/tree_list/__tests__/__mock__/helpers/utils.ts
@@ -0,0 +1,66 @@
+import { jest } from '@jest/globals';
+import fx from '@js/common/core/animation/fx';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import type { Properties as TreeListProperties } from '@js/ui/tree_list';
+import TreeList from '@js/ui/tree_list';
+import type { Controllers, Views } from '@ts/grids/grid_core/m_types';
+import { TreeListModel } from '@ts/grids/tree_list/__tests__/__mock__/model/tree_list';
+
+export interface TreeListInstance extends TreeList {
+  getController: <T extends keyof Controllers>(name: T) => Controllers[T];
+  getView: <T extends keyof Views>(name: T) => Views[T];
+}
+
+export const SELECTORS = {
+  treeListContainer: '#treeListContainer',
+};
+
+export const TREELIST_CONTAINER_ID = 'treeListContainer';
+
+export const createTreeList = (
+  options: TreeListProperties = {},
+): Promise<{
+  $container: dxElementWrapper;
+  component: TreeListModel;
+  instance: TreeListInstance;
+}> => new Promise((resolve) => {
+  const $container = $('<div>')
+    .attr('id', TREELIST_CONTAINER_ID)
+    .appendTo(document.body);
+
+  const treeListOptions: TreeListProperties = {
+    keyExpr: 'id',
+    ...options,
+  };
+
+  const instance = new TreeList(
+    $container.get(0) as HTMLDivElement,
+    treeListOptions,
+  ) as TreeListInstance;
+  const component = new TreeListModel($container.get(0) as HTMLElement);
+
+  jest.runAllTimers();
+
+  resolve({
+    $container,
+    component,
+    instance,
+  });
+});
+
+export const beforeTest = (): void => {
+  fx.off = true;
+  jest.useFakeTimers();
+};
+
+export const afterTest = (): void => {
+  const $container = $(SELECTORS.treeListContainer);
+  const treeList = TreeList.getInstance($container.get(0));
+
+  treeList?.dispose();
+  $container.remove();
+  jest.clearAllMocks();
+  jest.useRealTimers();
+  fx.off = false;
+};
diff --git a/packages/devextreme/js/__internal/grids/tree_list/__tests__/state_storing.user_state.test.ts b/packages/devextreme/js/__internal/grids/tree_list/__tests__/state_storing.user_state.test.ts
new file mode 100644
index 000000000000..5158ac72be87
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/tree_list/__tests__/state_storing.user_state.test.ts
@@ -0,0 +1,28 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+
+import {
+  afterTest,
+  beforeTest,
+  createTreeList,
+} from './__mock__/helpers/utils';
+
+describe('TreeList user state', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('should include the expandedRowKeys', async () => {
+    const { instance } = await createTreeList({
+      dataSource: [{ id: 1, parentId: 0, name: 'Alex' }],
+      expandedRowKeys: [1],
+    });
+
+    expect(instance.getController('data').getUserState()).toEqual({
+      searchText: '',
+      expandedRowKeys: [1],
+      pageIndex: 0,
+      pageSize: 20,
+    });
+  });
+});

From a65d008cefc1539932e62780a8a069816d7d12d0 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Tue, 8 Sep 2026 08:34:06 +0000
Subject: [PATCH 22/45] Legacy themes: remove the dead pull-down raster and the
 duplicated colour-scheme copies (#35088)

---
 .../fluent/color-schemes/dark/pulldown.png    | Bin 328 -> 0 bytes
 .../fluent/color-schemes/light/pulldown.png   | Bin 328 -> 0 bytes
 .../dark => }/grid/text-stub.png              | Bin
 .../color-schemes/carmine/pulldown.png        | Bin 328 -> 0 bytes
 .../color-schemes/contrast/pulldown.png       | Bin 214 -> 0 bytes
 .../color-schemes/darkmoon/pulldown.png       | Bin 221 -> 0 bytes
 .../color-schemes/darkviolet/pulldown.png     | Bin 221 -> 0 bytes
 .../color-schemes/greenmist/pulldown.png      | Bin 328 -> 0 bytes
 .../color-schemes/light/toast/error.png       | Bin 435 -> 0 bytes
 .../color-schemes/light/toast/info.png        | Bin 475 -> 0 bytes
 .../color-schemes/light/toast/success.png     | Bin 463 -> 0 bytes
 .../color-schemes/light/toast/warning.png     | Bin 351 -> 0 bytes
 .../color-schemes/softblue/pulldown.png       | Bin 328 -> 0 bytes
 .../{color-schemes/dark => }/toast/error.png  | Bin
 .../{color-schemes/dark => }/toast/info.png   | Bin
 .../dark => }/toast/success.png               | Bin
 .../dark => }/toast/warning.png               | Bin
 .../color-schemes/dark/grid/text-stub.png     | Bin 1230 -> 0 bytes
 .../material/color-schemes/dark/pulldown.png  | Bin 328 -> 0 bytes
 .../color-schemes/light/grid/text-stub.png    | Bin 1230 -> 0 bytes
 .../material/color-schemes/light/pulldown.png | Bin 328 -> 0 bytes
 .../light => material}/grid/text-stub.png     | Bin
 .../scss/widgets/fluent/_colors.scss          |   5 ---
 .../scss/widgets/fluent/gridBase/_colors.scss |   5 +--
 .../scss/widgets/fluent/icons/_index.scss     |   6 ---
 .../scss/widgets/generic/_colors.scss         |  18 --------
 .../scss/widgets/generic/icons/_index.scss    |   6 ---
 .../scss/widgets/generic/toast/_colors.scss   |  41 +++---------------
 .../scss/widgets/material/_colors.scss        |   5 ---
 .../widgets/material/gridBase/_colors.scss    |   5 +--
 .../scss/widgets/material/icons/_index.scss   |   6 ---
 31 files changed, 9 insertions(+), 88 deletions(-)
 delete mode 100644 packages/devextreme-scss/images/widgets/fluent/color-schemes/dark/pulldown.png
 delete mode 100644 packages/devextreme-scss/images/widgets/fluent/color-schemes/light/pulldown.png
 rename packages/devextreme-scss/images/widgets/fluent/{color-schemes/dark => }/grid/text-stub.png (100%)
 delete mode 100644 packages/devextreme-scss/images/widgets/generic/color-schemes/carmine/pulldown.png
 delete mode 100644 packages/devextreme-scss/images/widgets/generic/color-schemes/contrast/pulldown.png
 delete mode 100644 packages/devextreme-scss/images/widgets/generic/color-schemes/darkmoon/pulldown.png
 delete mode 100644 packages/devextreme-scss/images/widgets/generic/color-schemes/darkviolet/pulldown.png
 delete mode 100644 packages/devextreme-scss/images/widgets/generic/color-schemes/greenmist/pulldown.png
 delete mode 100644 packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/error.png
 delete mode 100644 packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/info.png
 delete mode 100644 packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/success.png
 delete mode 100644 packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/warning.png
 delete mode 100644 packages/devextreme-scss/images/widgets/generic/color-schemes/softblue/pulldown.png
 rename packages/devextreme-scss/images/widgets/generic/{color-schemes/dark => }/toast/error.png (100%)
 rename packages/devextreme-scss/images/widgets/generic/{color-schemes/dark => }/toast/info.png (100%)
 rename packages/devextreme-scss/images/widgets/generic/{color-schemes/dark => }/toast/success.png (100%)
 rename packages/devextreme-scss/images/widgets/generic/{color-schemes/dark => }/toast/warning.png (100%)
 delete mode 100644 packages/devextreme-scss/images/widgets/material/color-schemes/dark/grid/text-stub.png
 delete mode 100644 packages/devextreme-scss/images/widgets/material/color-schemes/dark/pulldown.png
 delete mode 100644 packages/devextreme-scss/images/widgets/material/color-schemes/light/grid/text-stub.png
 delete mode 100644 packages/devextreme-scss/images/widgets/material/color-schemes/light/pulldown.png
 rename packages/devextreme-scss/images/widgets/{fluent/color-schemes/light => material}/grid/text-stub.png (100%)

diff --git a/packages/devextreme-scss/images/widgets/fluent/color-schemes/dark/pulldown.png b/packages/devextreme-scss/images/widgets/fluent/color-schemes/dark/pulldown.png
deleted file mode 100644
index 436cc90d966632a84d6e0640dc624b2536fb8e4d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 328
zcmV-O0k{5%P)<h;3K|Lk000e1NJLTq001Ze003kN1ONa4UTwPZ0003GNkl<ZXx{CY
zy$!-J5QQzdqhW!p01dDMRrY`e!~jeI+2RU*R-lKhzzC2oQYb)4NSyf2Ml^nUbw0`Q
z=hHn!%8)rTtuG6u00b}`pmP8$vt<TA0K*1i+V}%6%m4^r*g#Ahe_+83fB=RK#I(V*
z0T4g{0R#}hKLQgrqA$A&sOjj9JCLp)c}S@j?n;B^KaA+^jJs20x|9iJPPhk+x^6k9
zT#U;p?$c%^1}<zK$`sn$#nyC^sbYUAT!n6LRX9(Nqfn^|ZzY~u6na*waChuJg}zkb
zFYRldDv}mpRw!|=6`Ia=Rb)M-sZiQhMOu973K><AH>uf2p^V1As%A0e-Kw~Cy$vmS
aUGD{By6(+O*Zar-0000<MNUMnLSTa9Q-yE<

diff --git a/packages/devextreme-scss/images/widgets/fluent/color-schemes/light/pulldown.png b/packages/devextreme-scss/images/widgets/fluent/color-schemes/light/pulldown.png
deleted file mode 100644
index 436cc90d966632a84d6e0640dc624b2536fb8e4d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 328
zcmV-O0k{5%P)<h;3K|Lk000e1NJLTq001Ze003kN1ONa4UTwPZ0003GNkl<ZXx{CY
zy$!-J5QQzdqhW!p01dDMRrY`e!~jeI+2RU*R-lKhzzC2oQYb)4NSyf2Ml^nUbw0`Q
z=hHn!%8)rTtuG6u00b}`pmP8$vt<TA0K*1i+V}%6%m4^r*g#Ahe_+83fB=RK#I(V*
z0T4g{0R#}hKLQgrqA$A&sOjj9JCLp)c}S@j?n;B^KaA+^jJs20x|9iJPPhk+x^6k9
zT#U;p?$c%^1}<zK$`sn$#nyC^sbYUAT!n6LRX9(Nqfn^|ZzY~u6na*waChuJg}zkb
zFYRldDv}mpRw!|=6`Ia=Rb)M-sZiQhMOu973K><AH>uf2p^V1As%A0e-Kw~Cy$vmS
aUGD{By6(+O*Zar-0000<MNUMnLSTa9Q-yE<

diff --git a/packages/devextreme-scss/images/widgets/fluent/color-schemes/dark/grid/text-stub.png b/packages/devextreme-scss/images/widgets/fluent/grid/text-stub.png
similarity index 100%
rename from packages/devextreme-scss/images/widgets/fluent/color-schemes/dark/grid/text-stub.png
rename to packages/devextreme-scss/images/widgets/fluent/grid/text-stub.png
diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/carmine/pulldown.png b/packages/devextreme-scss/images/widgets/generic/color-schemes/carmine/pulldown.png
deleted file mode 100644
index 436cc90d966632a84d6e0640dc624b2536fb8e4d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 328
zcmV-O0k{5%P)<h;3K|Lk000e1NJLTq001Ze003kN1ONa4UTwPZ0003GNkl<ZXx{CY
zy$!-J5QQzdqhW!p01dDMRrY`e!~jeI+2RU*R-lKhzzC2oQYb)4NSyf2Ml^nUbw0`Q
z=hHn!%8)rTtuG6u00b}`pmP8$vt<TA0K*1i+V}%6%m4^r*g#Ahe_+83fB=RK#I(V*
z0T4g{0R#}hKLQgrqA$A&sOjj9JCLp)c}S@j?n;B^KaA+^jJs20x|9iJPPhk+x^6k9
zT#U;p?$c%^1}<zK$`sn$#nyC^sbYUAT!n6LRX9(Nqfn^|ZzY~u6na*waChuJg}zkb
zFYRldDv}mpRw!|=6`Ia=Rb)M-sZiQhMOu973K><AH>uf2p^V1As%A0e-Kw~Cy$vmS
aUGD{By6(+O*Zar-0000<MNUMnLSTa9Q-yE<

diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/contrast/pulldown.png b/packages/devextreme-scss/images/widgets/generic/color-schemes/contrast/pulldown.png
deleted file mode 100644
index 20367a0056d891d8ec93ee90746a46407a2d1bf9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 214
zcmV;{04e{8P)<h;3K|Lk000e1NJLTq000yK001%w1ONa4_H{F@0001;Nkl<ZNXKLN
z&j5$MSRh=MVQ?tK3&~R0fCUa&h13t8Gg#n|RY?8d!3Kt`Lh1(((F*JSU&4S`70x8q
zGouRWqEPGqf&YiW@HrNRhoP_(q&n*Vpa1y5mj7%JgJbb3-Tt2q;l>1<%J%-}MD<J>
zK4qxB&cxysPV6Z>2Td6d?yOJ>S9T0p8MZuA4OVvYKR@BjRShie_{q+N04`xIwx_su
QyZ`_I07*qoM6N<$f?<$cBme*a

diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/darkmoon/pulldown.png b/packages/devextreme-scss/images/widgets/generic/color-schemes/darkmoon/pulldown.png
deleted file mode 100644
index 5d3b6b3f0b8857dcbc8565ca8a79e301143f81a0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 221
zcmeAS@N?(olHy`uVBq!ia0vp^B0y}!!2%?|l^U-FQcFBt978;gC(k&_(7rE1;c&f1
zii8Z;MyD<jvxG+HFvYLU&w0cwQbdF7EB+-z1lluNOE>E!I;`PJ7kWK2u(c#`h3V@9
zYYr#;km){jI3R+{NHgo2{F+Qb#_ea4nj@sT!(V=j%;7Lsdl0g%Tugmc`lSz=&R<K_
z#MT!i`9HMGI8{-Q-Ws%HQ?f$pk54|P5jRgp{%J7|H{Gz~@$nNe|2tb4T8@1>q@F2U
Q26Qijr>mdKI;Vst0Aep!bpQYW

diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/darkviolet/pulldown.png b/packages/devextreme-scss/images/widgets/generic/color-schemes/darkviolet/pulldown.png
deleted file mode 100644
index 5d3b6b3f0b8857dcbc8565ca8a79e301143f81a0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 221
zcmeAS@N?(olHy`uVBq!ia0vp^B0y}!!2%?|l^U-FQcFBt978;gC(k&_(7rE1;c&f1
zii8Z;MyD<jvxG+HFvYLU&w0cwQbdF7EB+-z1lluNOE>E!I;`PJ7kWK2u(c#`h3V@9
zYYr#;km){jI3R+{NHgo2{F+Qb#_ea4nj@sT!(V=j%;7Lsdl0g%Tugmc`lSz=&R<K_
z#MT!i`9HMGI8{-Q-Ws%HQ?f$pk54|P5jRgp{%J7|H{Gz~@$nNe|2tb4T8@1>q@F2U
Q26Qijr>mdKI;Vst0Aep!bpQYW

diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/greenmist/pulldown.png b/packages/devextreme-scss/images/widgets/generic/color-schemes/greenmist/pulldown.png
deleted file mode 100644
index 436cc90d966632a84d6e0640dc624b2536fb8e4d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 328
zcmV-O0k{5%P)<h;3K|Lk000e1NJLTq001Ze003kN1ONa4UTwPZ0003GNkl<ZXx{CY
zy$!-J5QQzdqhW!p01dDMRrY`e!~jeI+2RU*R-lKhzzC2oQYb)4NSyf2Ml^nUbw0`Q
z=hHn!%8)rTtuG6u00b}`pmP8$vt<TA0K*1i+V}%6%m4^r*g#Ahe_+83fB=RK#I(V*
z0T4g{0R#}hKLQgrqA$A&sOjj9JCLp)c}S@j?n;B^KaA+^jJs20x|9iJPPhk+x^6k9
zT#U;p?$c%^1}<zK$`sn$#nyC^sbYUAT!n6LRX9(Nqfn^|ZzY~u6na*waChuJg}zkb
zFYRldDv}mpRw!|=6`Ia=Rb)M-sZiQhMOu973K><AH>uf2p^V1As%A0e-Kw~Cy$vmS
aUGD{By6(+O*Zar-0000<MNUMnLSTa9Q-yE<

diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/error.png b/packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/error.png
deleted file mode 100644
index 0babe32c2b649fbad4e335fa1ebf2788f98f3ae8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 435
zcmV;k0ZjghP)<h;3K|Lk000e1NJLTq001KZ001Kh1ONa4w9tFf0004cNkl<ZNXM;~
zF>1p=5JksLNar*noep7igFxJ>cbP*(oghee2n2EmfeT+CRT?9VI{OAmRKx){Z&O%`
z6>D~7n`OFX^jOXRGqZxI5fGD8P*DRl6$Lplfu64&Mr158YAnf!hA|;2YYU={H7TJB
zGi5%2Xk*UQhMBQC5n?c`m}!_9n=>E=!{z`w{Lbo3$o@vtE+#y=CjA<P2TXb)#9&BU
zOr%Quqki<Q$RF)7nUcQXmiOLi!i3M>X@&@a;@Ab(2;(DAf*?%z>Nz_QV&yJn(>q;I
z(r6m9>*dEnuGZif<boJ-p|B{>1-T)HLa3}#wxFv4h@lc{hbPL;e6d3ewSd!H4-I6*
zn<ESNZIVv^j};$vZey>_V*|KX<nPs{7=Xm=R39BFl@CH}hWzIn&BZT@IxXmi56#6|
zPi?tVBrXXU@vLl%z}Dego)n*yyehewYu=n1fAhxE^z$~0J#7YWd&=9^^tQvjy(qlB
dZ!Uao{Q`UM8R_OS?mz$l002ovPDHLkV1l)Ly`lgB

diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/info.png b/packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/info.png
deleted file mode 100644
index eda61e4358f37b780506db3136c28b71fc416d0c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 475
zcmV<10VMv3P)<h;3K|Lk000e1NJLTq001KZ001Kh1ONa4w9tFf0004^Nkl<ZNXM<#
zJxjwt7{KuZ1+kM$mI`sSgJTB4Rj7kthHf212fs#_X6Z)|97J$Yhd?L6?~tLyLE6s{
z6cnxg&!ML6z2uTgxUJmt<9heJL?EooBP1dwB?B^2Vj@C3`+nPx0euprbtUu(${C*?
z;{qaIV|w^5rp>T~$k&i|5z}Q<5s^qnbZtzR$qI->GFd>2zcX49nVqP;%=pebdFR7%
zNB)B8SvGuf&pCT+A`moaamE8*#=c(81jZBpa7ELaXiY9bd;Va?^fly_qk`O?tz+Jl
z{e6VM(=zs(Lnk5-oG2$s@C2cDmg`bPAh=OtLP4Z4`<0jjB_<NY8nac2*-~O+L8>u3
zm6&ZMCKY5Fb6SbHP+~HnWr5_GjZ&n+ixPu*8p$o|PGpTcEh01TMk0CA+me#UkH-Gg
ze5t$~2eb@gmw}eS^OuSowVf(R$5NQ{ya}Bhr3xYm&6=_^E+oOTRk+ExkiQDI^&6Gx
zFm;Zbz}5Y7#*Hj>KUXg<LzG@zJQ=2|OorO#RBcnUwi#aA7e#H~H~;+F`UUX(k^L??
Rr~&{0002ovPDHLkV1j}b)u#Xe

diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/success.png b/packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/success.png
deleted file mode 100644
index 200ca204c58a568cd898ab8250514a6ad310679d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 463
zcmV;=0WkiFP)<h;3K|Lk000e1NJLTq001KZ001Kh1ONa4w9tFf0004&Nkl<ZNXM;~
zze>YU6o*d{I=FPo8W6<IEu({r)G^>@U%*lD0b(TqAHm5ta0qsD5L{eKsoh!!7j-d9
zQ9-`z(1iTCH%U{%nR1eR_uO-S_na$;(JWj7LS{rj#Eg&t7t8#;$?4!TMj364k5iAa
z@tBt&5}V^;S7G{$Y7mKy=$ByzOxJ`c6jKH!%z#A$h(fVQLFsm;4I!(D`dN&<c24vh
z*(t``5Ta0c3C5`{an|1XDU{z?Vf+S=B@PFC<a|CNSfz^94Neh+J$`e_wgk69EZ1>e
zZwh`_2-b$&vxOj>X>S4{H2g5(Tl2lpLl6#g8(LW?%rxgSJ&p^YFLn`x9X<`q&V;Do
zdW%=hg8n!{5Vn~Zw;Ks)&Z{_)Dd-$Q=x|q7K|LCUVweNn#!r`}$&XCA$%7v0A_ymj
zxHGv4OI{_Q4uY`HvO)@Bm2QTa2LD>AsGwTK7YIU^hZ<qJb!W;mNMD~8R{aTosy!tB
zCjCYqH%_bFueDy>(qw3DPPH~QTbtpn-6&eS-)wl>`Uhv!GsGVMN0|Ts002ovPDHLk
FV1kNN$L0V4

diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/warning.png b/packages/devextreme-scss/images/widgets/generic/color-schemes/light/toast/warning.png
deleted file mode 100644
index 7324d22ea49ba714538dcfb9c7db1893558b58d2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 351
zcmV-l0igbgP)<h;3K|Lk000e1NJLTq001KZ001Kh1ONa4w9tFf0003dNkl<ZNXM;~
zy={a*5Jsm7QUbSNO0Yyq;)p^Vk}Q&2a0{2MblJ7wfB<dAm0(f9TL%Z`B*V<!Y4v4j
z^qBuyL3UNp(Blcrz)Zl?(@^Z&?|rOr48&axI4T=c(lH$%R!wx28m8uKAXc5Jk1#D`
zA|w(SY4<QK*9Rbx$aMp4;fxPLZXVV5m@+vh|8rDsnC?kPB+{*zN-6Q@67)$ae|5t+
z<zFl2qS!b@C=NR|6*Eu>jT-sag85dh8lg|Z=mXLVJ_E)JK{dE6m><<D2y+rf@10p7
z0|v{RDb<^hfO#=6!Kzf6ywx{p>a8xGctv<K3f@>V^}eL|!<s35!c#EL-ZyqofBPoW
x_RF@5GhK#kcPiV}%yz@Gy(qH1Z=QT@{Q_gxNwL;uI12y(002ovPDHLkV1kk9mZksz

diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/softblue/pulldown.png b/packages/devextreme-scss/images/widgets/generic/color-schemes/softblue/pulldown.png
deleted file mode 100644
index 436cc90d966632a84d6e0640dc624b2536fb8e4d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 328
zcmV-O0k{5%P)<h;3K|Lk000e1NJLTq001Ze003kN1ONa4UTwPZ0003GNkl<ZXx{CY
zy$!-J5QQzdqhW!p01dDMRrY`e!~jeI+2RU*R-lKhzzC2oQYb)4NSyf2Ml^nUbw0`Q
z=hHn!%8)rTtuG6u00b}`pmP8$vt<TA0K*1i+V}%6%m4^r*g#Ahe_+83fB=RK#I(V*
z0T4g{0R#}hKLQgrqA$A&sOjj9JCLp)c}S@j?n;B^KaA+^jJs20x|9iJPPhk+x^6k9
zT#U;p?$c%^1}<zK$`sn$#nyC^sbYUAT!n6LRX9(Nqfn^|ZzY~u6na*waChuJg}zkb
zFYRldDv}mpRw!|=6`Ia=Rb)M-sZiQhMOu973K><AH>uf2p^V1As%A0e-Kw~Cy$vmS
aUGD{By6(+O*Zar-0000<MNUMnLSTa9Q-yE<

diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/dark/toast/error.png b/packages/devextreme-scss/images/widgets/generic/toast/error.png
similarity index 100%
rename from packages/devextreme-scss/images/widgets/generic/color-schemes/dark/toast/error.png
rename to packages/devextreme-scss/images/widgets/generic/toast/error.png
diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/dark/toast/info.png b/packages/devextreme-scss/images/widgets/generic/toast/info.png
similarity index 100%
rename from packages/devextreme-scss/images/widgets/generic/color-schemes/dark/toast/info.png
rename to packages/devextreme-scss/images/widgets/generic/toast/info.png
diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/dark/toast/success.png b/packages/devextreme-scss/images/widgets/generic/toast/success.png
similarity index 100%
rename from packages/devextreme-scss/images/widgets/generic/color-schemes/dark/toast/success.png
rename to packages/devextreme-scss/images/widgets/generic/toast/success.png
diff --git a/packages/devextreme-scss/images/widgets/generic/color-schemes/dark/toast/warning.png b/packages/devextreme-scss/images/widgets/generic/toast/warning.png
similarity index 100%
rename from packages/devextreme-scss/images/widgets/generic/color-schemes/dark/toast/warning.png
rename to packages/devextreme-scss/images/widgets/generic/toast/warning.png
diff --git a/packages/devextreme-scss/images/widgets/material/color-schemes/dark/grid/text-stub.png b/packages/devextreme-scss/images/widgets/material/color-schemes/dark/grid/text-stub.png
deleted file mode 100644
index 77bf05a6864773b085005a5376d4d4f73ed5887a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1230
zcmaJ=O>7fK6dp<lRum)m!cU9nbVD1E@c!A3<0S@dc4M%Lqu`iggoN1aj^kCbJIn64
zb}W$!O9&7@2M%!Mf>c#4O+ez30}+TrRfISo4k+pgwQ51CR8CRV!mRCeqN?snyYpuB
zec$`uytkJo#t()2KI#JigtLd$JY5a?z76%#uXFC+4|Lf<#)@PTmq=A}5s(c$g<#gw
zrcoYg#@v}7(Fgz=KQ#+QQp_EZbZoJjk6~+;L)id~9IQE-K7$CHLer+5X8u@uz(CVT
zGshD-KIbT?Y#y$=XtF+D(CagL%3uy2fFm`D3Rs9}ux8ELo>WUSO<jq`{xQeECWOqS
znU<+yZUQRUMKHk*MRg%A!eojShWL~i-v>orNOF9V6Jk+bkoX}fmV)hvq1jxcB<0mi
zI~U!hnKB`c#BtSXm955D>`rq+DwX1RkrTxzMMS+hn`pJD?F|G9D)MyKbcl&<=qqYd
zxI)qlb=oSyayqiM*S;otVO&jfIDzH;k^*2Z_y17K>YzQ6M{9onQ`jraIf%<64_92B
zHm)?_r*b64MH<0w0pr==7AMM>V6TiFs3>sHanm+%)!W;I=W<fk_K0TdD66I!D!`hi
zA;}p*P~#anrVhmgVQg5=sJxs=DhWjt<MOZ)a8;~VEM${_YpiicyK?<WupF9MMXvc3
zGBPf<V6$S$?Cxc_t6rOHboY|#%H^mT&hP8GJ_kp1c>J(4wRF>&dt}pLcj;9By0G^f
z05&LDRW8(CzFAoeKjQnx<k)57-D3Pw<4Q#R;K1#rpU?l@xApU)_jK^+v2^nn0-(D3
z&*0g=`oFmP^{)BV`4c@K_Q*YQM2@HtKWu}*e8FZ*ixno+2sK~>UW6eU!VviBvrqVs
zlfA<8O=}!V@A>WF-9(%FZ1m0bM=x$}IdyBHclW>ePUF?a(*DQ04#kvpNqvD0ZFYU>
z&r@HDCkKO^&GexLSXlXf^OOEc$8O7YVE2A`Zuz@!uZ5>xx5@~_<p{X(y1qQS{r9H-
hRvErzi@5Wbfn{)^ZyN}2x$xFM%8rezcScV)-UG0*Y&rk{

diff --git a/packages/devextreme-scss/images/widgets/material/color-schemes/dark/pulldown.png b/packages/devextreme-scss/images/widgets/material/color-schemes/dark/pulldown.png
deleted file mode 100644
index 436cc90d966632a84d6e0640dc624b2536fb8e4d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 328
zcmV-O0k{5%P)<h;3K|Lk000e1NJLTq001Ze003kN1ONa4UTwPZ0003GNkl<ZXx{CY
zy$!-J5QQzdqhW!p01dDMRrY`e!~jeI+2RU*R-lKhzzC2oQYb)4NSyf2Ml^nUbw0`Q
z=hHn!%8)rTtuG6u00b}`pmP8$vt<TA0K*1i+V}%6%m4^r*g#Ahe_+83fB=RK#I(V*
z0T4g{0R#}hKLQgrqA$A&sOjj9JCLp)c}S@j?n;B^KaA+^jJs20x|9iJPPhk+x^6k9
zT#U;p?$c%^1}<zK$`sn$#nyC^sbYUAT!n6LRX9(Nqfn^|ZzY~u6na*waChuJg}zkb
zFYRldDv}mpRw!|=6`Ia=Rb)M-sZiQhMOu973K><AH>uf2p^V1As%A0e-Kw~Cy$vmS
aUGD{By6(+O*Zar-0000<MNUMnLSTa9Q-yE<

diff --git a/packages/devextreme-scss/images/widgets/material/color-schemes/light/grid/text-stub.png b/packages/devextreme-scss/images/widgets/material/color-schemes/light/grid/text-stub.png
deleted file mode 100644
index 77bf05a6864773b085005a5376d4d4f73ed5887a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1230
zcmaJ=O>7fK6dp<lRum)m!cU9nbVD1E@c!A3<0S@dc4M%Lqu`iggoN1aj^kCbJIn64
zb}W$!O9&7@2M%!Mf>c#4O+ez30}+TrRfISo4k+pgwQ51CR8CRV!mRCeqN?snyYpuB
zec$`uytkJo#t()2KI#JigtLd$JY5a?z76%#uXFC+4|Lf<#)@PTmq=A}5s(c$g<#gw
zrcoYg#@v}7(Fgz=KQ#+QQp_EZbZoJjk6~+;L)id~9IQE-K7$CHLer+5X8u@uz(CVT
zGshD-KIbT?Y#y$=XtF+D(CagL%3uy2fFm`D3Rs9}ux8ELo>WUSO<jq`{xQeECWOqS
znU<+yZUQRUMKHk*MRg%A!eojShWL~i-v>orNOF9V6Jk+bkoX}fmV)hvq1jxcB<0mi
zI~U!hnKB`c#BtSXm955D>`rq+DwX1RkrTxzMMS+hn`pJD?F|G9D)MyKbcl&<=qqYd
zxI)qlb=oSyayqiM*S;otVO&jfIDzH;k^*2Z_y17K>YzQ6M{9onQ`jraIf%<64_92B
zHm)?_r*b64MH<0w0pr==7AMM>V6TiFs3>sHanm+%)!W;I=W<fk_K0TdD66I!D!`hi
zA;}p*P~#anrVhmgVQg5=sJxs=DhWjt<MOZ)a8;~VEM${_YpiicyK?<WupF9MMXvc3
zGBPf<V6$S$?Cxc_t6rOHboY|#%H^mT&hP8GJ_kp1c>J(4wRF>&dt}pLcj;9By0G^f
z05&LDRW8(CzFAoeKjQnx<k)57-D3Pw<4Q#R;K1#rpU?l@xApU)_jK^+v2^nn0-(D3
z&*0g=`oFmP^{)BV`4c@K_Q*YQM2@HtKWu}*e8FZ*ixno+2sK~>UW6eU!VviBvrqVs
zlfA<8O=}!V@A>WF-9(%FZ1m0bM=x$}IdyBHclW>ePUF?a(*DQ04#kvpNqvD0ZFYU>
z&r@HDCkKO^&GexLSXlXf^OOEc$8O7YVE2A`Zuz@!uZ5>xx5@~_<p{X(y1qQS{r9H-
hRvErzi@5Wbfn{)^ZyN}2x$xFM%8rezcScV)-UG0*Y&rk{

diff --git a/packages/devextreme-scss/images/widgets/material/color-schemes/light/pulldown.png b/packages/devextreme-scss/images/widgets/material/color-schemes/light/pulldown.png
deleted file mode 100644
index 436cc90d966632a84d6e0640dc624b2536fb8e4d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 328
zcmV-O0k{5%P)<h;3K|Lk000e1NJLTq001Ze003kN1ONa4UTwPZ0003GNkl<ZXx{CY
zy$!-J5QQzdqhW!p01dDMRrY`e!~jeI+2RU*R-lKhzzC2oQYb)4NSyf2Ml^nUbw0`Q
z=hHn!%8)rTtuG6u00b}`pmP8$vt<TA0K*1i+V}%6%m4^r*g#Ahe_+83fB=RK#I(V*
z0T4g{0R#}hKLQgrqA$A&sOjj9JCLp)c}S@j?n;B^KaA+^jJs20x|9iJPPhk+x^6k9
zT#U;p?$c%^1}<zK$`sn$#nyC^sbYUAT!n6LRX9(Nqfn^|ZzY~u6na*waChuJg}zkb
zFYRldDv}mpRw!|=6`Ia=Rb)M-sZiQhMOu973K><AH>uf2p^V1As%A0e-Kw~Cy$vmS
aUGD{By6(+O*Zar-0000<MNUMnLSTa9Q-yE<

diff --git a/packages/devextreme-scss/images/widgets/fluent/color-schemes/light/grid/text-stub.png b/packages/devextreme-scss/images/widgets/material/grid/text-stub.png
similarity index 100%
rename from packages/devextreme-scss/images/widgets/fluent/color-schemes/light/grid/text-stub.png
rename to packages/devextreme-scss/images/widgets/material/grid/text-stub.png
diff --git a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss
index f0b0ffd43d08..6729d30b88e8 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss
@@ -122,8 +122,6 @@ $base-icon-color: null !default;
 $base-disabled-opacity: 0.38 !default;
 $base-border-color-disabled: null !default;
 
-$scrollview-pulldown-path: null !default;
-
 @if $color == "blue" {
   $fluent-color-accent-modificator: "blue" !default;
 }
@@ -194,8 +192,6 @@ $scrollview-pulldown-path: null !default;
   $base-danger-hover: color.adjust($base-danger, $saturation: -3.05%, $space: hsl, $lightness: -5.10%) !default;
   $base-danger-active: color.adjust($base-danger, $saturation: -3.56%, $space: hsl, $lightness: -35.69%) !default;
   $base-danger-selected: color.adjust($base-danger, $saturation: -2.78%, $space: hsl, $lightness: -22.55%) !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/fluent/color-schemes/light/pulldown.png") !default;
 }
 
 @if $mode == "dark" {
@@ -252,7 +248,6 @@ $scrollview-pulldown-path: null !default;
   $base-danger-active: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.8deg, $saturation: -0.9%, $lightness: 28.8%) !default;
   $base-danger-selected: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 0.7deg, $saturation: 1.3%, $lightness: 14.9%) !default;
 
-  $scrollview-pulldown-path: data-uri("images/widgets/fluent/color-schemes/dark/pulldown.png") !default;
 }
 
 /**
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss
index 7ee20bfdcd22..1ece29b5e750 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss
@@ -155,7 +155,8 @@ $datagrid-summary-bg: $datagrid-base-background-color !default;
 $datagrid-column-separator-bg: $base-accent !default;
 $datagrid-filter-row-background-color: null !default;
 $datagrid-active-header-filter-icon-color: $base-accent !default;
-$datagrid-text-stub-background-image-path: null !default;
+
+$datagrid-text-stub-background-image-path: data-uri("images/widgets/fluent/grid/text-stub.png") !default;
 $datagrid-filter-panel-color: $base-accent !default;
 $datagrid-draggable-column-text-color: null !default;
 
@@ -177,7 +178,6 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
-  $datagrid-text-stub-background-image-path: data-uri("images/widgets/fluent/color-schemes/light/grid/text-stub.png") !default;
   $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default;
 }
 
@@ -189,7 +189,6 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
   $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
-  $datagrid-text-stub-background-image-path: data-uri("images/widgets/fluent/color-schemes/dark/grid/text-stub.png") !default;
   $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default;
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/fluent/icons/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/icons/_index.scss
index 4bc6a54ebb1b..c3f928382586 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/icons/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/icons/_index.scss
@@ -20,12 +20,6 @@
   }
 }
 
-.dx-scrollview-pulldown {
-  background-image: $scrollview-pulldown-path;
-  background-position: 0 0;
-  background-repeat: no-repeat;
-}
-
 .dx-loadindicator-image {
   background-position: center center;
   background-repeat: no-repeat;
diff --git a/packages/devextreme-scss/scss/widgets/generic/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/_colors.scss
index c0a20d72d71e..85a4533e8ef8 100644
--- a/packages/devextreme-scss/scss/widgets/generic/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/_colors.scss
@@ -124,8 +124,6 @@ $base-invalid-color: null !default;
 */
 $base-invalid-faded-border-color: null !default;
 $base-header-color: null !default;
-
-$scrollview-pulldown-path: null !default;
 $base-default: null !default;
 $base-info: null !default;
 $screen-text-color: null !default;
@@ -166,8 +164,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-invalid-color: $base-danger !default;
   $base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
   $base-header-color: #627789 !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/generic/color-schemes/carmine/pulldown.png") !default;
 }
 
 @if $color == "contrast" {
@@ -194,8 +190,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-invalid-faded-border-color: $base-invalid-color !default;
   $base-label-color: $base-text-color !default;
   $base-dropdown-shadow-color: $base-shadow-color !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/generic/color-schemes/contrast/pulldown.png") !default;
 }
 
 @if $color == "dark" {
@@ -226,8 +220,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
   $base-invalid-color: $base-danger !default;
   $base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/generic/color-schemes/dark/pulldown.png") !default;
 }
 
 @if $color == "darkmoon" {
@@ -262,8 +254,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
   $screen-text-color: extcolor.screen($base-bg, #686868) !default;
   $base-grid-selected-border-color: #45c7de !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/generic/color-schemes/darkmoon/pulldown.png") !default;
 }
 
 @if $color == "darkviolet" {
@@ -298,8 +288,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
   $base-invalid-color: $base-danger !default;
   $base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/generic/color-schemes/darkviolet/pulldown.png") !default;
 }
 
 @if $color == "greenmist" {
@@ -330,8 +318,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
   $base-invalid-color: $base-danger !default;
   $base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/generic/color-schemes/greenmist/pulldown.png") !default;
 }
 
 @if $color == "light" {
@@ -362,8 +348,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
   $base-invalid-color: $base-danger !default;
   $base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/generic/color-schemes/light/pulldown.png") !default;
 }
 
 @if $color == "softblue" {
@@ -399,8 +383,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
   $base-invalid-color: $base-danger !default;
   $base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/generic/color-schemes/softblue/pulldown.png") !default;
 }
 
 $typography-bg: $base-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/icons/_index.scss b/packages/devextreme-scss/scss/widgets/generic/icons/_index.scss
index cce54f733c88..5d955957b919 100644
--- a/packages/devextreme-scss/scss/widgets/generic/icons/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/icons/_index.scss
@@ -12,12 +12,6 @@
   }
 }
 
-.dx-scrollview-pulldown {
-  background-image: $scrollview-pulldown-path;
-  background-position: 0 0;
-  background-repeat: no-repeat;
-}
-
 .dx-loadindicator-image {
   background-position: center center;
   background-repeat: no-repeat;
diff --git a/packages/devextreme-scss/scss/widgets/generic/toast/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/toast/_colors.scss
index 4c1601dec53a..9ffbc3ea7ffa 100644
--- a/packages/devextreme-scss/scss/widgets/generic/toast/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/toast/_colors.scss
@@ -32,79 +32,48 @@ $toast-error-bg: $base-danger !default;
 * $type color
 */
 $toast-success-bg: $base-success !default;
-$toast-info-icon-image-bg: null !default;
-$toast-warning-icon-image-bg: null !default;
-$toast-error-icon-image-bg: null !default;
-$toast-success-icon-image-bg: null !default;
+
+$toast-info-icon-image-bg: data-uri("images/widgets/generic/toast/info.png") !default;
+$toast-warning-icon-image-bg: data-uri("images/widgets/generic/toast/warning.png") !default;
+$toast-error-icon-image-bg: data-uri("images/widgets/generic/toast/error.png") !default;
+$toast-success-icon-image-bg: data-uri("images/widgets/generic/toast/success.png") !default;
 
 @if $color == "carmine" {
   $toast-shadow-color: transparent !default;
   $toast-info-bg: $base-accent !default;
-  $toast-info-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/info.png") !default;
-  $toast-warning-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/warning.png") !default;
-  $toast-error-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/error.png") !default;
-  $toast-success-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/success.png") !default;
 }
 
 @if $color == "contrast" {
   $toast-shadow-color: $base-shadow-color !default;
   $toast-info-bg: $base-info !default;
-  $toast-info-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/info.png") !default;
-  $toast-warning-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/warning.png") !default;
-  $toast-error-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/error.png") !default;
-  $toast-success-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/success.png") !default;
 }
 
 @if $color == "dark" {
   $toast-shadow-color: transparent !default;
   $toast-info-bg: $base-accent !default;
-  $toast-info-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/info.png") !default;
-  $toast-warning-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/warning.png") !default;
-  $toast-error-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/error.png") !default;
-  $toast-success-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/success.png") !default;
 }
 
 @if $color == "darkmoon" {
   $toast-shadow-color: transparent !default;
   $toast-info-bg: $base-accent !default;
-  $toast-info-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/info.png") !default;
-  $toast-warning-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/warning.png") !default;
-  $toast-error-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/error.png") !default;
-  $toast-success-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/success.png") !default;
 }
 
 @if $color == "darkviolet" {
   $toast-shadow-color: transparent !default;
   $toast-info-bg: $base-accent !default;
-  $toast-info-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/info.png") !default;
-  $toast-warning-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/warning.png") !default;
-  $toast-error-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/error.png") !default;
-  $toast-success-icon-image-bg: data-uri("images/widgets/generic/color-schemes/dark/toast/success.png") !default;
 }
 
 @if $color == "greenmist" {
   $toast-shadow-color: transparent !default;
   $toast-info-bg: $base-accent !default;
-  $toast-info-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/info.png") !default;
-  $toast-warning-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/warning.png") !default;
-  $toast-error-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/error.png") !default;
-  $toast-success-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/success.png") !default;
 }
 
 @if $color == "light" {
   $toast-shadow-color: transparent !default;
   $toast-info-bg: $base-accent !default;
-  $toast-info-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/info.png") !default;
-  $toast-warning-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/warning.png") !default;
-  $toast-error-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/error.png") !default;
-  $toast-success-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/success.png") !default;
 }
 
 @if $color == "softblue" {
   $toast-shadow-color: transparent !default;
   $toast-info-bg: $base-accent !default;
-  $toast-info-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/info.png") !default;
-  $toast-warning-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/warning.png") !default;
-  $toast-error-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/error.png") !default;
-  $toast-success-icon-image-bg: data-uri("images/widgets/generic/color-schemes/light/toast/success.png") !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss
index cdf27f7e9c34..1a27a389588a 100644
--- a/packages/devextreme-scss/scss/widgets/material/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss
@@ -78,7 +78,6 @@ $base-focus-bg: null !default;
 $base-disabled-opacity: 0.38 !default;
 $base-disabled-color: null !default;
 $base-dropdown-shadow-color: null !default;
-$scrollview-pulldown-path: null !default;
 
 @if $color == "blue" {
   $material-color-accent-modificator: "blue" !default;
@@ -137,8 +136,6 @@ $scrollview-pulldown-path: null !default;
   $base-inverted-text-color: #fff !default;
   $base-focus-bg: color.change(#000, $alpha: 0.04) !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/material/color-schemes/light/pulldown.png") !default;
 }
 
 @if $mode == "dark" {
@@ -161,8 +158,6 @@ $scrollview-pulldown-path: null !default;
   $base-inverted-text-color: rgba(0, 0, 0, 0.87) !default;
   $base-focus-bg: color.change(#fff, $alpha: 0.04) !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
-
-  $scrollview-pulldown-path: data-uri("images/widgets/material/color-schemes/dark/pulldown.png") !default;
 }
 
 /**
diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss
index ce10df69f8c6..31b9b07734c4 100644
--- a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss
@@ -160,7 +160,8 @@ $datagrid-summary-bg: $datagrid-base-background-color !default;
 $datagrid-column-separator-bg: $base-accent !default;
 $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default;
 $datagrid-active-header-filter-icon-color: $base-accent !default;
-$datagrid-text-stub-background-image-path: null !default;
+
+$datagrid-text-stub-background-image-path: data-uri("images/widgets/material/grid/text-stub.png") !default;
 $datagrid-filter-panel-color: $base-accent !default;
 $datagrid-draggable-column-text-color: color.change($base-text-color, $alpha: 0.38) !default;
 
@@ -176,7 +177,6 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
   $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
-  $datagrid-text-stub-background-image-path: data-uri("images/widgets/material/color-schemes/light/grid/text-stub.png") !default;
   $datagrid-row-invalid-faded-border-color: color.adjust($base-danger, $lightness: 44%, $space: hsl) !default;
 }
 
@@ -189,7 +189,6 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity !default;
   $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
   $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
-  $datagrid-text-stub-background-image-path: data-uri("images/widgets/material/color-schemes/dark/grid/text-stub.png") !default;
   $datagrid-row-invalid-faded-border-color: color.adjust($base-danger, $lightness: -31%, $space: hsl) !default;
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/material/icons/_index.scss b/packages/devextreme-scss/scss/widgets/material/icons/_index.scss
index 4e194c685efb..1c9b359a0ede 100644
--- a/packages/devextreme-scss/scss/widgets/material/icons/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/icons/_index.scss
@@ -19,12 +19,6 @@
   }
 }
 
-.dx-scrollview-pulldown {
-  background-image: $scrollview-pulldown-path;
-  background-position: 0 0;
-  background-repeat: no-repeat;
-}
-
 .dx-loadindicator-image {
   background-position: center center;
   background-repeat: no-repeat;

From 9e6dd03191d29f8f08cd5f5a0f251b646ce493c4 Mon Sep 17 00:00:00 2001
From: "ilya.kharchenko" <14272298+IlyaKhD@users.noreply.github.com>
Date: Tue, 8 Sep 2026 08:51:42 +0000
Subject: [PATCH 23/45] refactor(ci): store flaky candidates in an artifact
 (#35083)

---
 .github/workflows/testcafe_tests.yml | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml
index 1c7167fab625..45f067d17332 100644
--- a/.github/workflows/testcafe_tests.yml
+++ b/.github/workflows/testcafe_tests.yml
@@ -470,8 +470,12 @@ jobs:
         quarantined_failed=0
         result=./artifacts/quarantine-run-result.json
         new_flakes_summary=./artifacts/new-flakes-summary.txt
+        new_flakes=./artifacts/flaky-candidates.jsonl
+        report_json=./artifacts/flaky-candidates.json
         mkdir -p ./artifacts
         : > "$new_flakes_summary"
+        : > "$new_flakes"
+        rm -f "$report_json"
 
         # Every test gets up to 3 attempts (initial run + 2 retries) and passes
         # if at least one attempt succeeds. A reported failure means all attempts failed.
@@ -549,12 +553,23 @@ jobs:
           while IFS= read -r name; do
             if jq -e --arg n "$name" '.tests | index($n)' "$result" > /dev/null; then
               echo "FAILED | $name | $job_name" >> "$new_flakes_summary"
+              verdict=failed
             else
               echo "passed | $name | $job_name" >> "$new_flakes_summary"
+              verdict=passed
             fi
+            jq -cn --arg test "$name" --arg sourceJob "$job_name" --arg theme "$theme" \
+              --arg componentFolder "$componentFolder" --arg timezone "$timezone" \
+              --arg platform "$platform" --arg verdict "$verdict" \
+              '{ test: $test, sourceJob: $sourceJob, theme: $theme, componentFolder: $componentFolder, timezone: $timezone, platform: $platform, verdict: $verdict }' \
+              >> "$new_flakes"
           done < <(jq -r '.tests[]' "$report")
         done
 
+        if [ -s "$new_flakes" ]; then
+          jq -s '{ schemaVersion: 1, candidates: . }' "$new_flakes" > "$report_json"
+        fi
+
         sudo ln -sf /usr/share/zoneinfo/GMT /etc/localtime
 
         echo ""
@@ -631,6 +646,15 @@ jobs:
         path: ${{ github.workspace }}/e2e/testcafe-devextreme/artifacts/failedtests/**/*
         if-no-files-found: ignore
 
+    - name: Upload flaky candidates report
+      if: ${{ !cancelled() }}
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+      with:
+        name: flaky-candidates
+        path: ${{ github.workspace }}/e2e/testcafe-devextreme/artifacts/flaky-candidates.json
+        retention-days: 7
+        if-no-files-found: ignore
+
   merge-artifacts:
     runs-on: ubuntu-latest
     needs: [testcafe, testcafe-quarantine]

From b37a4757dd564562a6e10214e5a7fdd9fae19765 Mon Sep 17 00:00:00 2001
From: Andrey Vorobev <738482+vorobey@users.noreply.github.com>
Date: Tue, 8 Sep 2026 09:40:45 +0000
Subject: [PATCH 24/45] chore: fix demos render signal origin (#35078)

---
 apps/demos/README.md                          |  33 +++-
 apps/demos/utils/server/demo-render-signal.js |  16 +-
 .../server/demo-render-signal.runtime.js      |  75 ++++++-
 .../server/demo-render-signal.runtime.test.js | 187 +++++++++++++++++-
 4 files changed, 304 insertions(+), 7 deletions(-)

diff --git a/apps/demos/README.md b/apps/demos/README.md
index 0fb102135541..c307e742ac9f 100644
--- a/apps/demos/README.md
+++ b/apps/demos/README.md
@@ -35,9 +35,40 @@ Angular, React, and Vue demos are not bundled from their own entry point directl
 Once the demo has rendered, the shim posts one message to the embedding page:
 
 ```js
-window.parent.postMessage({ type: 'demo-rendered' }, '*');
+window.parent.postMessage({ type: 'demo-rendered' }, targetOrigin);
 ```
 
+#### Allowed embedding origins
+
+`targetOrigin` is never `'*'` — the runtime resolves the embedder's origin and posts only when it is trusted:
+
+1. Not framed, or framed by a page on the demo's own origin — posts to the own origin. This covers local development and the visual tests, so `localhost` needs no configuration.
+2. Framed cross-origin — the origin comes from `location.ancestorOrigins[0]`, falling back to the origin of `document.referrer` (Firefox has no `ancestorOrigins`), and must match the allowlist.
+3. Origin not derivable (for example, an embedder sending `Referrer-Policy: no-referrer` on Firefox) or not on the allowlist — nothing is posted, and the demo logs a warning to the console.
+
+The allowlist defaults to the sandboxes that embed the demos:
+
+| Entry | Covers |
+| --- | --- |
+| `*.devexpress.com` | `js.devexpress.com`, `js-stage.devexpress.com`, `az-jsserver.corp.devexpress.com` |
+| `js.devexpress.devx` | the internal dev host |
+| `localhost` | the local site on any port, when it frames demos served from another port |
+
+An entry is `[<scheme>://]<host>[:<port>]`, and an omitted part matches anything:
+
+- **Host** — either an exact hostname or a `*.<suffix>` subdomain wildcard. The wildcard requires a dot before the suffix, so `*.devexpress.com` accepts `js.devexpress.com` and `az-jsserver.corp.devexpress.com` but rejects the `devexpress.com` apex and `evil-devexpress.com`.
+- **Scheme** — omit it to accept both HTTP and HTTPS; write `https://js.devexpress.com` to accept only HTTPS.
+- **Port** — omit it to accept any port; write `localhost:44332` to accept only that one. A pinned port must match the origin's explicit port, so `:443` will not match `https://host`.
+
+Anything that is not a bare origin — a trailing slash or a path, for example — never matches and is silently ignored.
+
+Override the list at build time with a comma-separated `DEMO_PARENT_ORIGINS`:
+
+```
+DEMO_PARENT_ORIGINS='https://js.devexpress.com,https://staging.example:8443' node utils/server/csp-bundle.js --framework=React
+```
+
+The list is baked into every demo bundle, so adding a sandbox origin means rebuilding the demos.
 
 ### Before Commiting Changes
 
diff --git a/apps/demos/utils/server/demo-render-signal.js b/apps/demos/utils/server/demo-render-signal.js
index 0e2f05cbc79d..8466c9631057 100644
--- a/apps/demos/utils/server/demo-render-signal.js
+++ b/apps/demos/utils/server/demo-render-signal.js
@@ -6,17 +6,29 @@ const RUNTIME_PATH = path.join(__dirname, 'demo-render-signal.runtime.js');
 const VIRTUAL_ENTRY_PREFIX = 'demo-render-signal:';
 const VIRTUAL_ENTRY_NAMESPACE = 'demo-render-signal';
 
+function allowedParentOrigins() {
+  const fromEnv = String(process.env.DEMO_PARENT_ORIGINS || '')
+    .split(',')
+    .map((origin) => origin.trim())
+    .filter(Boolean);
+  return fromEnv.length > 0 ? fromEnv : null;
+}
+
 function toImportPath(filePath) {
   return JSON.stringify(filePath.split(path.sep).join('/'));
 }
 
 function createEntryShimSource(entryPath, { tsNoCheck = false } = {}) {
+  const origins = allowedParentOrigins();
+  const imported = ['signal', 'signalWhenRendered'];
+  if (origins) imported.unshift('setAllowedOrigins');
+
   return `
     ${tsNoCheck ? '// @ts-nocheck\n' : ''}
     // Generated by utils/server/demo-render-signal.js.
     import themes from ${JSON.stringify(THEMES_SPECIFIER)};
-    import { signal, signalWhenRendered } from ${toImportPath(RUNTIME_PATH)};
-
+    import { ${imported.join(', ')} } from ${toImportPath(RUNTIME_PATH)};
+${origins ? `\n    setAllowedOrigins(${JSON.stringify(origins)});\n` : ''}
     themes.initialized(function () {
       import(${toImportPath(entryPath)}).then(signalWhenRendered, function (error) {
         console.error('demo failed to load', error);
diff --git a/apps/demos/utils/server/demo-render-signal.runtime.js b/apps/demos/utils/server/demo-render-signal.runtime.js
index a82fb1f54b68..cb843746e4e7 100644
--- a/apps/demos/utils/server/demo-render-signal.runtime.js
+++ b/apps/demos/utils/server/demo-render-signal.runtime.js
@@ -5,13 +5,86 @@ export const ROOT_SELECTOR = '#app, demo-app';
 
 export const RENDER_TIMEOUT_MS = 10000;
 
+export const DEFAULT_ALLOWED_ORIGINS = [
+  '*.devexpress.com',
+  'js.devexpress.devx',
+  'localhost',
+];
+
+const PATTERN = /^(?:([a-z][a-z0-9+.-]*):\/\/)?([^/:]+)(?::(\d+))?$/i;
+
+let allowedOrigins = DEFAULT_ALLOWED_ORIGINS;
 let posted = false;
 
+export function setAllowedOrigins(origins) {
+  if (Array.isArray(origins) && origins.length > 0) {
+    allowedOrigins = origins;
+  }
+}
+
+function hostMatches(hostname, patternHost) {
+  if (!patternHost.startsWith('*.')) return hostname === patternHost;
+
+  const suffix = patternHost.slice(1);
+  return hostname.length > suffix.length && hostname.endsWith(suffix);
+}
+
+function matchesPattern(url, pattern) {
+  const parts = PATTERN.exec(pattern);
+  if (!parts) return false;
+
+  const [, scheme, host, port] = parts;
+  if (scheme && `${scheme.toLowerCase()}:` !== url.protocol) return false;
+  if (port && port !== url.port) return false;
+
+  return hostMatches(url.hostname, host.toLowerCase());
+}
+
+function isAllowed(origin) {
+  let url;
+  try {
+    url = new URL(origin);
+  } catch {
+    return false;
+  }
+  return allowedOrigins.some((pattern) => matchesPattern(url, pattern));
+}
+
+function parentOrigin() {
+  const { ancestorOrigins } = window.location;
+  if (ancestorOrigins && ancestorOrigins.length > 0) return ancestorOrigins[0];
+
+  if (!document.referrer) return null;
+  try {
+    return new URL(document.referrer).origin;
+  } catch {
+    return null;
+  }
+}
+
+export function resolveTargetOrigin() {
+  const ownOrigin = window.location.origin;
+  if (window.parent === window) return ownOrigin;
+
+  const origin = parentOrigin();
+  if (!origin) return null;
+  if (origin === ownOrigin) return origin;
+
+  return isAllowed(origin) ? origin : null;
+}
+
 export function signal() {
   if (posted) return;
   posted = true;
+
+  const targetOrigin = resolveTargetOrigin();
+  if (!targetOrigin) {
+    console.warn(`Demo render signal was not sent: the embedding origin is unknown or not in [${allowedOrigins.join(', ')}].`);
+    return;
+  }
+
   try {
-    window.parent.postMessage({ type: MESSAGE_TYPE }, '*');
+    window.parent.postMessage({ type: MESSAGE_TYPE }, targetOrigin);
   } catch {
     // A parent that rejects the message is the parent's problem.
   }
diff --git a/apps/demos/utils/tests/server/demo-render-signal.runtime.test.js b/apps/demos/utils/tests/server/demo-render-signal.runtime.test.js
index 27af89bbffbd..1ee30a1a1e42 100644
--- a/apps/demos/utils/tests/server/demo-render-signal.runtime.test.js
+++ b/apps/demos/utils/tests/server/demo-render-signal.runtime.test.js
@@ -1,7 +1,11 @@
+const OWN_ORIGIN = 'http://localhost:8080';
+const ALLOWED_PARENT = 'https://js.devexpress.com';
+
 let messages;
 let root;
 let rafCallbacks;
 let observers;
+let warnings;
 
 function loadRuntime() {
   let runtime;
@@ -22,6 +26,10 @@ function flushFrames() {
   }
 }
 
+function embedIn(origin) {
+  global.window.location.ancestorOrigins = origin === null ? [] : [origin];
+}
+
 beforeEach(() => {
   jest.useFakeTimers();
 
@@ -29,13 +37,15 @@ beforeEach(() => {
   root = null;
   rafCallbacks = [];
   observers = [];
+  warnings = [];
 
   global.window = {
     parent: {
       postMessage: (data, targetOrigin) => messages.push({ data, targetOrigin }),
     },
+    location: { origin: OWN_ORIGIN, ancestorOrigins: [ALLOWED_PARENT] },
   };
-  global.document = { querySelector: () => root };
+  global.document = { querySelector: () => root, referrer: '' };
   global.requestAnimationFrame = (callback) => rafCallbacks.push(callback);
   global.MutationObserver = class {
     constructor(callback) {
@@ -50,10 +60,13 @@ beforeEach(() => {
       this.disconnected = true;
     }
   };
+
+  jest.spyOn(console, 'warn').mockImplementation((message) => warnings.push(message));
 });
 
 afterEach(() => {
   jest.useRealTimers();
+  jest.restoreAllMocks();
   delete global.window;
   delete global.document;
   delete global.requestAnimationFrame;
@@ -61,12 +74,12 @@ afterEach(() => {
 });
 
 describe('signal', () => {
-  test('posts the contract message to the parent', () => {
+  test('posts the contract message to the embedding origin', () => {
     const { signal, MESSAGE_TYPE } = loadRuntime();
 
     signal();
 
-    expect(messages).toEqual([{ data: { type: MESSAGE_TYPE }, targetOrigin: '*' }]);
+    expect(messages).toEqual([{ data: { type: MESSAGE_TYPE }, targetOrigin: ALLOWED_PARENT }]);
     expect(MESSAGE_TYPE).toBe('demo-rendered');
   });
 
@@ -85,6 +98,174 @@ describe('signal', () => {
 
     expect(() => signal()).not.toThrow();
   });
+
+  test('warns instead of posting to an origin that is not allowed', () => {
+    embedIn('https://evil.example');
+    const { signal } = loadRuntime();
+
+    signal();
+
+    expect(messages).toHaveLength(0);
+    expect(warnings).toHaveLength(1);
+    expect(warnings[0]).toContain('*.devexpress.com');
+  });
+
+  test('gives up for good after a dropped message', () => {
+    embedIn('https://evil.example');
+    const { signal } = loadRuntime();
+
+    signal();
+    embedIn(ALLOWED_PARENT);
+    signal();
+
+    expect(messages).toHaveLength(0);
+  });
+});
+
+describe('resolveTargetOrigin', () => {
+  test('takes the embedding origin from ancestorOrigins', () => {
+    const { resolveTargetOrigin } = loadRuntime();
+
+    expect(resolveTargetOrigin()).toBe(ALLOWED_PARENT);
+  });
+
+  test.each([
+    'https://az-jsserver.corp.devexpress.com',
+    'https://js-stage.devexpress.com',
+    'https://js.devexpress.com',
+    'https://js.devexpress.devx',
+    'http://localhost:44332',
+    'http://localhost:8080',
+  ])('allows the %s sandbox', (origin) => {
+    embedIn(origin);
+    const { resolveTargetOrigin } = loadRuntime();
+
+    expect(resolveTargetOrigin()).toBe(origin);
+  });
+
+  test('allows any scheme for an entry that omits one', () => {
+    embedIn('http://js.devexpress.com');
+    const { resolveTargetOrigin } = loadRuntime();
+
+    expect(resolveTargetOrigin()).toBe('http://js.devexpress.com');
+  });
+
+  test.each([
+    ['the apex domain, which no sandbox uses', 'https://devexpress.com'],
+    ['a host that only ends with the wildcard suffix', 'https://evil-devexpress.com'],
+    ['a host shorter than the wildcard suffix', 'https://dx.com'],
+    ['a host that merely starts with an allowed one', 'https://localhost.evil.example'],
+    ['an opaque origin', 'null'],
+  ])('rejects %s', (_, origin) => {
+    embedIn(origin);
+    const { resolveTargetOrigin } = loadRuntime();
+
+    expect(resolveTargetOrigin()).toBeNull();
+  });
+
+  test('pins the scheme for an entry that specifies one', () => {
+    embedIn('http://js.devexpress.com');
+    const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
+
+    setAllowedOrigins(['https://js.devexpress.com']);
+
+    expect(resolveTargetOrigin()).toBeNull();
+  });
+
+  test('pins the port for an entry that specifies one', () => {
+    embedIn('http://localhost:9999');
+    const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
+
+    setAllowedOrigins(['localhost:44332']);
+
+    expect(resolveTargetOrigin()).toBeNull();
+  });
+
+  test('matches a pinned port', () => {
+    embedIn('http://localhost:44332');
+    const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
+
+    setAllowedOrigins(['http://localhost:44332']);
+
+    expect(resolveTargetOrigin()).toBe('http://localhost:44332');
+  });
+
+  test('ignores an entry that is not a bare origin', () => {
+    embedIn('https://js.devexpress.com');
+    const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
+
+    setAllowedOrigins(['https://js.devexpress.com/Demos/']);
+
+    expect(resolveTargetOrigin()).toBeNull();
+  });
+
+  test('allows an embedder on the demo own origin, allowlisted or not', () => {
+    global.window.location.origin = 'https://unlisted.example';
+    embedIn('https://unlisted.example');
+    const { resolveTargetOrigin } = loadRuntime();
+
+    expect(resolveTargetOrigin()).toBe('https://unlisted.example');
+  });
+
+  test('targets the own origin when the demo is not framed', () => {
+    global.window.parent = global.window;
+    embedIn(null);
+    const { resolveTargetOrigin } = loadRuntime();
+
+    expect(resolveTargetOrigin()).toBe(OWN_ORIGIN);
+  });
+
+  test('falls back to the referrer origin without ancestorOrigins', () => {
+    delete global.window.location.ancestorOrigins;
+    global.document.referrer = `${ALLOWED_PARENT}/Demos/DataGrid/Overview/React/Light/`;
+    const { resolveTargetOrigin } = loadRuntime();
+
+    expect(resolveTargetOrigin()).toBe(ALLOWED_PARENT);
+  });
+
+  test('falls back to the referrer origin with empty ancestorOrigins', () => {
+    embedIn(null);
+    global.document.referrer = `${ALLOWED_PARENT}/`;
+    const { resolveTargetOrigin } = loadRuntime();
+
+    expect(resolveTargetOrigin()).toBe(ALLOWED_PARENT);
+  });
+
+  test('resolves nothing without ancestorOrigins or a referrer', () => {
+    embedIn(null);
+    const { resolveTargetOrigin } = loadRuntime();
+
+    expect(resolveTargetOrigin()).toBeNull();
+  });
+
+  test('resolves nothing from an unparsable referrer', () => {
+    embedIn(null);
+    global.document.referrer = 'not-a-url';
+    const { resolveTargetOrigin } = loadRuntime();
+
+    expect(resolveTargetOrigin()).toBeNull();
+  });
+});
+
+describe('setAllowedOrigins', () => {
+  test('replaces the default allowlist', () => {
+    embedIn('https://sandbox.example');
+    const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
+
+    setAllowedOrigins(['https://sandbox.example']);
+
+    expect(resolveTargetOrigin()).toBe('https://sandbox.example');
+  });
+
+  test('keeps the default allowlist when the build injects nothing', () => {
+    const { setAllowedOrigins, resolveTargetOrigin, DEFAULT_ALLOWED_ORIGINS } = loadRuntime();
+
+    setAllowedOrigins(null);
+    setAllowedOrigins([]);
+
+    expect(resolveTargetOrigin()).toBe(ALLOWED_PARENT);
+    expect(DEFAULT_ALLOWED_ORIGINS).toContain('*.devexpress.com');
+  });
 });
 
 describe('signalWhenRendered', () => {

From 2dc7b76502562b685f78f4a7ae0560e76d74d8a5 Mon Sep 17 00:00:00 2001
From: Anna Shakhova <68295572+anna-shakhova@users.noreply.github.com>
Date: Tue, 8 Sep 2026 10:53:51 +0000
Subject: [PATCH 25/45] Grids: retarget `dataController.dataSource()` method
 (#35093)

---
 .../ai_assistant/commands/selection.ts        |   3 +-
 .../controllers/m_ai_column_controller.ts     |   8 +-
 .../__tests__/data_controller.paging.test.ts  |  10 +-
 .../data_controller/data_controller.ts        |  30 ++---
 ...data_source_controller.integration.test.ts |  22 ++--
 .../data_source/data_source_controller.ts     |  19 ++-
 .../grids/grid_core/editing/m_editing.ts      |  15 ++-
 .../grid_core/filter_panel/m_filter_panel.ts  |   6 +-
 .../grid_core/filter_row/m_filter_row.ts      |  16 ++-
 .../grids/grid_core/focus/m_focus.ts          |  19 ++-
 .../header_filter/m_header_filter.ts          |  17 +--
 .../m_keyboard_navigation.ts                  |   9 +-
 .../js/__internal/grids/grid_core/m_utils.ts  |   2 +-
 .../grids/grid_core/selection/m_selection.ts  |  11 +-
 .../virtual_scrolling_data_controller.ts      |   2 +-
 .../grid_core/data_source/compatibility.ts    |  15 +++
 .../js/__internal/grids/new/grid_core/di.ts   |   2 +
 .../__internal/grids/new/grid_core/widget.ts  |   2 +
 .../grids/new/grid_core/widget_mock.ts        |   3 +
 .../data_controller/m_data_controller.ts      |   4 -
 .../data_source/data_source_controller.ts     |   5 +
 .../grids/tree_list/editing/m_editing.ts      |  11 +-
 .../testing/helpers/gridBaseMocks.js          | 117 +++++++++++-------
 .../dataController.tests.js                   |  88 ++++++-------
 .../dataGrid.tests.js                         |   4 +-
 .../focus.integration.tests.js                |   2 +-
 .../headerFilter.tests.js                     |   5 +-
 .../selection.tests.js                        |  10 +-
 .../virtualScrolling.integration.tests.js     |   2 +-
 .../dataController.tests.js                   |   4 +-
 30 files changed, 282 insertions(+), 181 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/new/grid_core/data_source/compatibility.ts

diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/commands/selection.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/commands/selection.ts
index 76105e91357c..2cd56c186cb9 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/commands/selection.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/commands/selection.ts
@@ -187,8 +187,7 @@ const resolveKeysFromAllPages = (
   component: InternalGrid,
   indexes: number[],
 ): Promise<RowKey[] | null> => {
-  const dataController = component.getController('data');
-  const isRemotePaging = !!dataController.dataSource()?.remoteOperations()?.paging;
+  const isRemotePaging = !!component.getController('dataSource').remoteOperations().paging;
 
   return isRemotePaging
     ? resolveKeysFromAllPagesRemote(component, indexes)
diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts
index 94ac23fecd5f..75a7bdf788c8 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts
@@ -5,6 +5,7 @@ import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 
 import type { ColumnsController } from '../../columns_controller/m_columns_controller';
 import type { DataController } from '../../data_controller/data_controller';
+import type { DataSourceController } from '../../data_source/data_source_controller';
 import type { ChangedEvent, RawItemData } from '../../data_source_adapter/types';
 import { Controller } from '../../m_modules';
 import type { RowKey } from '../../m_types';
@@ -16,6 +17,8 @@ import { AIColumnIntegrationController } from './m_ai_column_integration_control
 export class AIColumnController extends Controller {
   private dataController!: DataController;
 
+  private dataSourceController!: DataSourceController;
+
   private columnsController!: ColumnsController;
 
   private aiColumnIntegrationController!: AIColumnIntegrationController;
@@ -73,7 +76,7 @@ export class AIColumnController extends Controller {
 
   private subscribeToDataSourceChanged(): void {
     this.dataSourceChangedHandler = this.handleDataSourceChanged.bind(this);
-    this.dataController.dataSource()?.changed.add(this.dataSourceChangedHandler);
+    this.dataSourceController.getAdapter()?.changed.add(this.dataSourceChangedHandler);
   }
 
   private unsubscribeFromDataControllerChanged(): void {
@@ -204,6 +207,7 @@ export class AIColumnController extends Controller {
   public init(): void {
     this.columnsController = this.getController('columns');
     this.dataController = this.getController('data');
+    this.dataSourceController = this.getController('dataSource');
 
     this.aiColumnIntegrationController = new AIColumnIntegrationController(this.component);
     this.aiColumnIntegrationController.init();
@@ -326,7 +330,7 @@ export class AIColumnController extends Controller {
 
   public dispose(): void {
     super.dispose();
-    this.dataController.dataSource()?.changed.remove(this.dataSourceChangedHandler);
+    this.dataSourceController.getAdapter()?.changed.remove(this.dataSourceChangedHandler);
     this.unsubscribeFromStoreEvents();
     this.unsubscribeFromDataControllerChanged();
   }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.paging.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.paging.test.ts
index 1294df3428d5..d2550e54c791 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.paging.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.paging.test.ts
@@ -38,13 +38,9 @@ const getIsPaging = (instance: DataGridInstance): unknown => {
   return dataController._isPaging as unknown;
 };
 
-// The controller's `dataSource()` is the DataSourceAdapter, not the raw DataSource.
-const getAdapter = (instance: DataGridInstance): PagingAdapter => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const dataController = instance.getController('data') as any;
-
-  return dataController.dataSource() as PagingAdapter;
-};
+const getAdapter = (instance: DataGridInstance): PagingAdapter => instance
+  .getController('dataSource')
+  .getAdapter() as unknown as PagingAdapter;
 
 describe('DataController paging', () => {
   beforeEach(beforeTest);
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index 989298f6f505..9683aeda22f6 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -281,16 +281,16 @@ export class DataController extends modules.Controller {
         this.reset();
         break;
       case 'paging': {
-        const dataSource = this.dataSource();
+        const dataSourceAdapter = this.dataSourceController.getAdapter();
 
-        if (dataSource) {
-          const changedPagingOptions = this.applyPagingOptions(dataSource);
+        if (dataSourceAdapter) {
+          const changedPagingOptions = this.applyPagingOptions(dataSourceAdapter);
           if (changedPagingOptions.hasChanges) {
-            const pageIndex = dataSource.pageIndex();
+            const pageIndex = dataSourceAdapter.pageIndex();
 
             this._isPaging = changedPagingOptions.isPageIndexChanged;
 
-            dataSource.load().done(() => {
+            dataSourceAdapter.load().done(() => {
               this._isPaging = false;
               this.pageChanged.fire(pageIndex);
             });
@@ -303,11 +303,11 @@ export class DataController extends modules.Controller {
         this.reset();
         break;
       case 'columns': {
-        const dataSource = this.dataSource();
+        const dataSourceAdapter = this.dataSourceController.getAdapter();
 
-        if (dataSource?.isLoading() && args.name === args.fullName) {
+        if (dataSourceAdapter?.isLoading() && args.name === args.fullName) {
           this._useSortingGroupingFromColumns = true;
-          dataSource.load();
+          dataSourceAdapter.load();
         }
         break;
       }
@@ -1114,9 +1114,7 @@ export class DataController extends modules.Controller {
   }
 
   private readonly changingHandler = (e: ChangingEvent): void => {
-    const dataSource = this.dataSource();
-
-    if (!dataSource) {
+    if (!this.dataSourceController.hasAdapter()) {
       return;
     }
 
@@ -1165,7 +1163,7 @@ export class DataController extends modules.Controller {
       return;
     }
 
-    const operationTypes = this.dataSource()?.operationTypes() ?? undefined;
+    const operationTypes = this.dataSourceController.operationTypes() ?? undefined;
 
     change.isDataChanged = true;
     change.repaintChangesOnly = resolveRepaintChangesOnly(
@@ -1188,8 +1186,8 @@ export class DataController extends modules.Controller {
   }
 
   public loadingOperationTypes(): OperationTypes {
-    const dataSource = this.dataSource();
-    const operationTypes: OperationTypes | undefined = dataSource?.loadingOperationTypes();
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
+    const operationTypes: OperationTypes | undefined = dataSourceAdapter?.loadingOperationTypes();
 
     return operationTypes ?? {};
   }
@@ -1372,10 +1370,6 @@ export class DataController extends modules.Controller {
     return this._dataSource ? this._dataSource.pageCount() : 1;
   }
 
-  public dataSource(): DataSourceAdapter | undefined {
-    return this._dataSource ?? undefined;
-  }
-
   public store(): Store | undefined {
     return this._dataSource?.store();
   }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
index 96eefe8ae70f..1ce4adbd61d0 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
@@ -33,6 +33,12 @@ const OTHER_DATA = [
   { id: 3, parentId: 0, value: 'c' },
 ];
 
+// These assertions pin the _dataSource mirror, so they have to read the protected field rather
+// than a delegating method.
+const getMirroredAdapter = (
+  instance: { getController: (name: 'data') => unknown },
+): unknown => (instance.getController('data') as { _dataSource?: unknown })._dataSource;
+
 interface TreeListInstance extends TreeList {
   getController: <T extends keyof Controllers>(name: T) => Controllers[T];
 }
@@ -103,7 +109,7 @@ describe('dataSource controller holds the adapter', () => {
   it('holds the same adapter object as DataController', async () => {
     const { instance } = await createDataGrid({ dataSource: DATA });
     const dataSourceController = instance.getController('dataSource');
-    const adapter = instance.getController('data').dataSource();
+    const adapter = getMirroredAdapter(instance);
 
     expect(adapter).toBeTruthy();
     expect(dataSourceController.hasAdapter()).toBe(true);
@@ -113,14 +119,13 @@ describe('dataSource controller holds the adapter', () => {
   it('follows the rebuilt adapter when the dataSource option changes', async () => {
     const { instance } = await createDataGrid({ dataSource: DATA });
     const dataSourceController = instance.getController('dataSource');
-    const dataController = instance.getController('data');
     const firstAdapter = dataSourceController.getAdapter();
 
     instance.option('dataSource', OTHER_DATA);
     await flushAsync();
 
     expect(dataSourceController.getAdapter()).not.toBe(firstAdapter);
-    expect(dataSourceController.getAdapter()).toBe(dataController.dataSource());
+    expect(dataSourceController.getAdapter()).toBe(getMirroredAdapter(instance));
   });
 
   it('releases the adapter when the dataSource option is cleared', async () => {
@@ -132,7 +137,7 @@ describe('dataSource controller holds the adapter', () => {
 
     expect(dataSourceController.hasAdapter()).toBe(false);
     expect(dataSourceController.getAdapter()).toBeNull();
-    expect(instance.getController('data').dataSource()).toBeUndefined();
+    expect(getMirroredAdapter(instance)).toBeNull();
     expect(dataSourceController.getDataSource()).toBeNull();
     expect(dataSourceController.store()).toBeUndefined();
   });
@@ -147,7 +152,7 @@ describe('dataSource controller holds the adapter', () => {
     await flushAsync();
 
     expect(dataSourceController.hasAdapter()).toBe(true);
-    expect(dataSourceController.getAdapter()).toBe(instance.getController('data').dataSource());
+    expect(dataSourceController.getAdapter()).toBe(getMirroredAdapter(instance));
   });
 
   it('still holds the same adapter after a refresh', async () => {
@@ -159,18 +164,17 @@ describe('dataSource controller holds the adapter', () => {
     await refreshed;
 
     expect(dataSourceController.hasAdapter()).toBe(true);
-    expect(dataSourceController.getAdapter()).toBe(instance.getController('data').dataSource());
+    expect(dataSourceController.getAdapter()).toBe(getMirroredAdapter(instance));
   });
 
   it('releases the adapter on dispose', async () => {
     const { $container, instance } = await createDataGrid({ dataSource: DATA });
     const dataSourceController = instance.getController('dataSource');
-    const dataController = instance.getController('data');
 
     instance.dispose();
     $container.remove();
 
-    expect(dataController.dataSource()).toBeUndefined();
+    expect(getMirroredAdapter(instance)).toBeNull();
     expect(dataSourceController.hasAdapter()).toBe(false);
   });
 
@@ -181,7 +185,7 @@ describe('dataSource controller holds the adapter', () => {
       const dataSourceController = instance.getController('dataSource');
 
       expect(dataSourceController.hasAdapter()).toBe(true);
-      expect(dataSourceController.getAdapter()).toBe(instance.getController('data').dataSource());
+      expect(dataSourceController.getAdapter()).toBe(getMirroredAdapter(instance));
     } finally {
       disposeTreeList($container);
     }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
index 7a70ce031ba9..e371afe6f7ee 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
@@ -4,9 +4,10 @@ import { extend } from '@js/core/utils/extend';
 import type Store from '@ts/data/abstract_store';
 import type { StoreKey } from '@ts/data/abstract_store';
 import type { DataSource } from '@ts/data/data_source/data_source';
+import type { StoreLoadOptions } from '@ts/data/data_source/types';
 import type DataSourceAdapter from '@ts/grids/grid_core/data_source_adapter/m_data_source_adapter';
 import type {
-  DataSourceAdapterProvider, RawItemData, RemoteOperationsOptions,
+  DataSourceAdapterProvider, LoadOperation, OperationTypes, RawItemData, RemoteOperationsOptions,
 } from '@ts/grids/grid_core/data_source_adapter/types';
 import modules from '@ts/grids/grid_core/m_modules';
 
@@ -102,4 +103,20 @@ export class DataSourceController extends modules.Controller {
   public getDataIndexGetter(): ((data: RawItemData) => number) | undefined {
     return this.adapter?.getDataIndexGetter();
   }
+
+  public operationTypes(): OperationTypes | null | undefined {
+    return this.adapter?.operationTypes();
+  }
+
+  public isLoading(): boolean {
+    return this.adapter?.isLoading() ?? false;
+  }
+
+  public select(): StoreLoadOptions['select'] {
+    return this.adapter?.select();
+  }
+
+  public lastLoadOptions(): Partial<NonNullable<LoadOperation['lastLoadOptions']>> {
+    return this.adapter?.lastLoadOptions() ?? {};
+  }
 }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts
index 92dcc54ab619..7717bc4aabad 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts
@@ -117,6 +117,8 @@ class EditingControllerImpl extends modules.ViewController {
 
   protected _dataController!: Controllers['data'];
 
+  protected dataSourceController!: Controllers['dataSource'];
+
   protected adaptiveColumnsController!: Controllers['adaptiveColumns'];
 
   protected _validatingController!: Controllers['validating'];
@@ -170,6 +172,7 @@ class EditingControllerImpl extends modules.ViewController {
   public init() {
     this._columnsController = this.getController('columns');
     this._dataController = this.getController('data');
+    this.dataSourceController = this.getController('dataSource');
     this.adaptiveColumnsController = this.getController('adaptiveColumns');
     this._validatingController = this.getController('validating');
     this._editorFactoryController = this.getController('editorFactory');
@@ -1812,7 +1815,7 @@ class EditingControllerImpl extends modules.ViewController {
     const results = [];
     const deferreds = [];
     const dataChanges = [];
-    const dataSource = this._dataController.dataSource();
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
 
     when(this._fireOnSaving())
       .done(({ cancel, changes }) => {
@@ -1824,17 +1827,17 @@ class EditingControllerImpl extends modules.ViewController {
 
         if (deferreds.length) {
           this._refocusEditCell = true;
-          dataSource?.beginLoading();
+          dataSourceAdapter?.beginLoading();
 
           when(...deferreds).done(() => {
             if (this._processSaveEditDataResult(results)) {
               this._endSaving(dataChanges, changes, result);
             } else {
-              dataSource?.endLoading();
+              dataSourceAdapter?.endLoading();
               result.resolve();
             }
           }).fail((error) => {
-            dataSource?.endLoading();
+            dataSourceAdapter?.endLoading();
             result.resolve(error);
           });
 
@@ -1855,11 +1858,11 @@ class EditingControllerImpl extends modules.ViewController {
   }
 
   private _endSaving(dataChanges, changes, deferred) {
-    const dataSource = this._dataController.dataSource();
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
 
     this._beforeEndSaving(changes);
 
-    dataSource?.endLoading();
+    dataSourceAdapter?.endLoading();
 
     this._refreshDataAfterSave(dataChanges, changes, deferred);
   }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_panel/m_filter_panel.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_panel/m_filter_panel.ts
index c25f156bd2df..7b472e65d6c6 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_panel/m_filter_panel.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_panel/m_filter_panel.ts
@@ -14,6 +14,7 @@ import {
 } from '@ts/filter_builder/m_utils';
 import type { ColumnsController } from '@ts/grids/grid_core/columns_controller/m_columns_controller';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type { FilterSyncController } from '@ts/grids/grid_core/filter_sync/m_filter_sync';
 import { registerKeyboardAction } from '@ts/grids/grid_core/m_accessibility';
 import modules from '@ts/grids/grid_core/m_modules';
@@ -33,12 +34,15 @@ export class FilterPanelView extends modules.View {
 
   private _dataController!: DataController;
 
+  private dataSourceController!: DataSourceController;
+
   private _filterSyncController!: FilterSyncController;
 
   private readonly _filterValueBuffer: any;
 
   public init() {
     this._dataController = this.getController('data');
+    this.dataSourceController = this.getController('dataSource');
     this._columnsController = this.getController('columns');
     this._filterSyncController = this.getController('filterSync');
 
@@ -46,7 +50,7 @@ export class FilterPanelView extends modules.View {
   }
 
   public isVisible() {
-    return !!(this.option('filterPanel.visible') && this._dataController.dataSource());
+    return !!this.option('filterPanel.visible') && this.dataSourceController.hasAdapter();
   }
 
   protected _renderCore() {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_row/m_filter_row.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_row/m_filter_row.ts
index b4a100906344..0c977a8c22ff 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_row/m_filter_row.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_row/m_filter_row.ts
@@ -17,6 +17,7 @@ import type { ColumnsController } from '@ts/grids/grid_core/columns_controller/m
 import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { ColumnsResizerViewController } from '@ts/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type { EditingController } from '@ts/grids/grid_core/editing/m_editing';
 import type { HeaderPanel } from '@ts/grids/grid_core/header_panel/m_header_panel';
 import modules from '@ts/grids/grid_core/m_modules';
@@ -204,7 +205,11 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
 
   private _applyFilterViewController!: ApplyFilterViewController;
 
+  private dataSourceController!: DataSourceController;
+
   public init() {
+    this.dataSourceController = this.getController('dataSource');
+
     super.init();
     this._applyFilterViewController = this.getController('applyFilter');
   }
@@ -545,12 +550,12 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
   private _renderEditor($editorContainer, options) {
     $editorContainer.empty();
     const $element = $('<div>').appendTo($editorContainer);
-    const dataSource = this._dataController.dataSource();
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
 
     if (options.lookup && this.option('syncLookupFilterValues')) {
       const filter = this._dataController.getCombinedFilterWithExcludedColumn(options);
 
-      const lookupDataSource = gridCoreUtils.getWrappedLookupDataSource(options, dataSource, filter);
+      const lookupDataSource = gridCoreUtils.getWrappedLookupDataSource(options, dataSourceAdapter, filter);
       const lookupOptions = {
         ...options,
         lookup: {
@@ -739,8 +744,7 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
   }
 
   protected _handleDataChanged(e) {
-    const dataSource = this._dataController?.dataSource?.();
-    const lastLoadOptions = dataSource?.lastLoadOptions?.();
+    const lastLoadOptions = this.dataSourceController.lastLoadOptions();
 
     // @ts-expect-error
     super._handleDataChanged.apply(this, arguments);
@@ -760,7 +764,7 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
     }
 
     const columns = this._columnsController.getVisibleColumns();
-    const dataSource = this._dataController.dataSource();
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
     const rowIndex = this.element().find(`.${this.addWidgetPrefix(FILTER_ROW_CLASS)}`).index();
 
     if (rowIndex === -1) {
@@ -789,7 +793,7 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
             editor.option('items', [...items, selectedItem]);
           }
 
-          const lookupDataSource = gridCoreUtils.getWrappedLookupDataSource(column, dataSource, filter);
+          const lookupDataSource = gridCoreUtils.getWrappedLookupDataSource(column, dataSourceAdapter, filter);
           editor.option('dataSource', lookupDataSource);
         }
       }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts b/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
index ae40935ea655..fee97a227e9e 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
@@ -5,11 +5,11 @@ import { Deferred, type DeferredObj, when } from '@js/core/utils/deferred';
 import { each } from '@js/core/utils/iterator';
 import { isBoolean, isDefined } from '@js/core/utils/type';
 import type { StoreChange } from '@js/data/store';
+import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type { Key } from '@ts/grids/new/grid_core/data_controller/types';
 
 import type { ColumnsController } from '../columns_controller/m_columns_controller';
 import type { DataController } from '../data_controller/data_controller';
-import type { DataSourceController } from '../data_source/data_source_controller';
 import type { EditingController } from '../editing/m_editing';
 import { isNewRowTempKey } from '../editing/m_editing_utils';
 import type { EditorFactory } from '../editor_factory/m_editor_factory';
@@ -40,6 +40,10 @@ export class FocusController extends core.ViewController {
     return this.getController('data');
   }
 
+  private getDataSourceController(): DataSourceController {
+    return this.getController('dataSource');
+  }
+
   public init() {
     this.component._optionsByReference.focusedRowKey = true;
   }
@@ -214,7 +218,7 @@ export class FocusController extends core.ViewController {
     const d = new Deferred();
     const rowsView = this.getView('rowsView');
 
-    if (key === undefined || !this.getDataController().dataSource()) {
+    if (key === undefined || !this.getDataSourceController().hasAdapter()) {
       return d.reject().promise();
     }
 
@@ -915,6 +919,14 @@ const editing = (Base: ModuleType<EditingController>) => class FocusEditingContr
 const rowsView = (Base: ModuleType<RowsView>) => class RowsViewFocusController extends Base {
   private _scrollToFocusOnResize: any;
 
+  private dataSourceController!: DataSourceController;
+
+  public init(): void {
+    this.dataSourceController = this.getController('dataSource');
+
+    super.init();
+  }
+
   protected _createRow(row) {
     // @ts-expect-error
     const $row = super._createRow.apply(this, arguments);
@@ -968,8 +980,7 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewFocusController e
     let columnIndex = this.option('focusedColumnIndex')!;
     const $row = this._findRowElementForTabIndex();
 
-    const dataSource = this._dataController.dataSource();
-    const operationTypes = dataSource?.operationTypes();
+    const operationTypes = this.dataSourceController.operationTypes();
     const isPaging = !operationTypes || operationTypes.paging;
 
     if (!isDefined(this._scrollToFocusOnResize)) {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
index 5a11f96b354a..5ef75a4f093f 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
@@ -16,6 +16,7 @@ import { restoreFocus, saveFocusedElementInfo } from '@js/ui/shared/accessibilit
 import filterUtils from '@js/ui/shared/filtering';
 import type { ColumnHeadersView } from '@ts/grids/grid_core/column_headers/m_column_headers';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type { HeaderPanel } from '@ts/grids/grid_core/header_panel/m_header_panel';
 import Modules from '@ts/grids/grid_core/m_modules';
 import type { ModuleType } from '@ts/grids/grid_core/m_types';
@@ -120,11 +121,14 @@ export class HeaderFilterController extends Modules.ViewController {
 
   private _dataController!: DataController;
 
+  private dataSourceController!: DataSourceController;
+
   private _headerFilterView!: HeaderFilterView;
 
   public init() {
     this._columnsController = this.getController('columns');
     this._dataController = this.getController('data');
+    this.dataSourceController = this.getController('dataSource');
     this._headerFilterView = this.getView('headerFilterView');
   }
 
@@ -230,8 +234,8 @@ export class HeaderFilterController extends Modules.ViewController {
   }
 
   private getDataSource(column) {
-    const dataSource = this._dataController.dataSource();
-    const remoteGrouping = dataSource?.remoteOperations().grouping;
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
+    const remoteGrouping = this.dataSourceController.remoteOperations().grouping;
     const group = gridCoreUtils.getHeaderFilterGroupParameters(column, remoteGrouping);
     const headerFilterDataSource = column.headerFilter?.dataSource;
     const headerFilterOptions = this.option('headerFilter');
@@ -240,7 +244,7 @@ export class HeaderFilterController extends Modules.ViewController {
       component: this.component,
     };
 
-    if (!dataSource) return;
+    if (!dataSourceAdapter) return;
 
     if (isDefined(headerFilterDataSource) && !isFunction(headerFilterDataSource)) {
       options.dataSource = normalizeDataSourceOptions(headerFilterDataSource);
@@ -250,7 +254,7 @@ export class HeaderFilterController extends Modules.ViewController {
       if (this.option('syncLookupFilterValues')) {
         const filter = this._dataController.getCombinedFilterWithExcludedColumn(column);
 
-        options.dataSource = gridCoreUtils.getWrappedLookupDataSource(column, dataSource, filter);
+        options.dataSource = gridCoreUtils.getWrappedLookupDataSource(column, dataSourceAdapter, filter);
       } else {
         options.dataSource = gridCoreUtils.normalizeLookupDataSource(column.lookup);
       }
@@ -269,7 +273,7 @@ export class HeaderFilterController extends Modules.ViewController {
           // TODO remove in 16.1
           options.dataField = column.dataField || column.name;
 
-          dataSource.customLoader.load(options).done(({ data }) => {
+          dataSourceAdapter.customLoader.load(options).done(({ data }) => {
             const convertUTCDates = remoteGrouping && isUTCFormat(column.serializationFormat) && cutoffLevel > 3;
             if (convertUTCDates) {
               // @ts-expect-error queryByOptions().toArray() is typed as unknown[]
@@ -349,8 +353,7 @@ export class HeaderFilterController extends Modules.ViewController {
 
     if (column) {
       const groupInterval = filterUtils.getGroupInterval(column);
-      const dataSource = that._dataController.dataSource();
-      const remoteFiltering = dataSource && dataSource.remoteOperations().filtering;
+      const remoteFiltering = that.dataSourceController.remoteOperations().filtering;
       const previousOnHidden = options.onHidden;
 
       extend(options, column, {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
index cb1e1d542bdb..37d84665cbb4 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
@@ -28,6 +28,7 @@ import type { AdaptiveColumnsController } from '@ts/grids/grid_core/adaptivity/m
 import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
 import type { RowIndexCorrection } from '@ts/grids/grid_core/data_controller/types';
+import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type { EditingController } from '@ts/grids/grid_core/editing/m_editing';
 import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
 import type { RowsViewScrollEvent } from '@ts/grids/grid_core/views/types';
@@ -131,6 +132,8 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
 
   protected _dataController!: DataController & Partial<VirtualScrollingDataControllerExtension>;
 
+  protected dataSourceController!: DataSourceController;
+
   private _selectionController!: Controllers['selection'];
 
   protected _editingController!: Controllers['editing'];
@@ -152,6 +155,7 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
   // #region Initialization
   public init() {
     this._dataController = this.getController('data');
+    this.dataSourceController = this.getController('dataSource');
     this._selectionController = this.getController('selection');
     this._editingController = this.getController('editing');
     this._editorFactory = this.getController('editorFactory');
@@ -704,7 +708,6 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
     const $row = this._focusedView && this._focusedView.getRow(visibleRowIndex);
     const $event = eventArgs.originalEvent;
     const isUpArrow = eventArgs.keyName === 'upArrow';
-    const dataSource = this._dataController.dataSource();
     const isRowEditingInCurrentRow = this._editingController?.isEditRowByIndex?.(visibleRowIndex);
     const isEditingNavigationMode = this._isFastEditingStarted();
     const isInsideMasterDetail = this.isInsideMasterDetail($($event?.target));
@@ -719,8 +722,8 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
         if (
           this._isVirtualRowRender()
           && isUpArrow
-          && dataSource
-          && !dataSource.isLoading()
+          && this.dataSourceController.hasAdapter()
+          && !this.dataSourceController.isLoading()
         ) {
           const rowHeight = getOuterHeight($row);
           const rowIndex = this._focusedCellPosition.rowIndex - 1;
diff --git a/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts b/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts
index abdc6d0299b8..971de5eadb7f 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts
@@ -677,7 +677,7 @@ export default {
     return normalizeDataSourceOptions(lookupDataSourceOptions);
   },
 
-  getWrappedLookupDataSource(column, dataSource: DataSourceAdapter | undefined, filter) {
+  getWrappedLookupDataSource(column, dataSource: DataSourceAdapter | null | undefined, filter) {
     if (!dataSource) {
       return [];
     }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts b/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
index 3af9873058e0..3a5167dc6066 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
@@ -27,6 +27,7 @@ import type { SelectionChangeEvent, SelectionFilter, SelectionOptions } from '@t
 
 import type { DataController } from '../data_controller/data_controller';
 import type { DataChange } from '../data_controller/types';
+import type { DataSourceController } from '../data_source/data_source_controller';
 import { isEditRow } from '../keyboard_navigation/utils';
 import modules from '../m_modules';
 import gridCoreUtils from '../m_utils';
@@ -120,6 +121,8 @@ const selectionHeaderTemplate = (container, options) => {
 export class SelectionController extends modules.Controller {
   protected _dataController!: DataController;
 
+  protected dataSourceController!: DataSourceController;
+
   private _columnsController!: ColumnsController;
 
   protected _stateStoringController!: StateStoringController;
@@ -144,6 +147,7 @@ export class SelectionController extends modules.Controller {
     }
 
     this._dataController = this.getController('data');
+    this.dataSourceController = this.getController('dataSource');
     this._columnsController = this.getController('columns');
     this._stateStoringController = this.getController('stateStoring');
     // mode has a default value
@@ -206,6 +210,7 @@ export class SelectionController extends modules.Controller {
    */
   protected _getSelectionConfig(): SelectionOptions {
     const dataController = this._dataController;
+    const { dataSourceController } = this;
     const columnsController = this._columnsController;
     const selectionOptions: any = this.option('selection') ?? {};
     const { deferred } = selectionOptions;
@@ -236,11 +241,11 @@ export class SelectionController extends modules.Controller {
         return dataController?.keyOf(item);
       },
       dataFields() {
-        return dataController.dataSource()?.select();
+        return dataSourceController.select();
       },
       load(options) {
         // @ts-expect-error
-        return dataController.dataSource()?.customLoader.load(options) || new Deferred().resolve([]);
+        return dataSourceController.getAdapter()?.customLoader.load(options) || new Deferred().resolve([]);
       },
       // eslint-disable-next-line
       plainItems(cached?) {
@@ -261,7 +266,7 @@ export class SelectionController extends modules.Controller {
       },
       totalCount: () => dataController.totalCount(),
       getLoadOptions(loadItemIndex, focusedItemIndex, shiftItemIndex) {
-        const { sort, filter } = dataController.dataSource()?.lastLoadOptions() ?? {};
+        const { sort, filter } = dataSourceController.lastLoadOptions();
         let minIndex = Math.min(loadItemIndex, focusedItemIndex);
         let maxIndex = Math.max(loadItemIndex, focusedItemIndex);
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/virtual_scrolling_data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/virtual_scrolling_data_controller.ts
index ccef9dd99ab3..d85f9fa8473a 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/virtual_scrolling_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/virtual_scrolling_data_controller.ts
@@ -123,7 +123,7 @@ export const virtualScrollingDataControllerExtender = (
         const rowIndex = Math.floor(itemIndex) - rowIndexOffset;
         const { component } = this;
         const scrollable = component.getScrollable && component.getScrollable();
-        const isSortingOperation = this.dataSource()?.operationTypes()?.sorting;
+        const isSortingOperation = this.dataSourceController.operationTypes()?.sorting;
 
         if (scrollable && !isSortingOperation && rowIndex >= 0) {
           const rowElement = component.getRowElement(rowIndex);
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_source/compatibility.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_source/compatibility.ts
new file mode 100644
index 000000000000..f618d194e289
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_source/compatibility.ts
@@ -0,0 +1,15 @@
+import { DataController } from '../data_controller/data_controller';
+
+// Reused grid_core views reach the adapter through the dataSource controller. The new
+// architecture has no adapter, so the mock answers from the DataSource itself.
+export class CompatibilityDataSourceController {
+  public static dependencies = [DataController] as const;
+
+  constructor(
+    private readonly realDataController: DataController,
+  ) {}
+
+  public hasAdapter(): boolean {
+    return !!this.realDataController.dataSource.peek();
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/di.ts b/packages/devextreme/js/__internal/grids/new/grid_core/di.ts
index 56871436920a..4755ccb7a770 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/di.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/di.ts
@@ -6,6 +6,7 @@ import { AccessibilityController } from './accessibility/controller';
 import * as ColumnChooserModule from './column_chooser/index';
 import * as ColumnsControllerModule from './columns_controller/index';
 import * as DataControllerModule from './data_controller/index';
+import { CompatibilityDataSourceController } from './data_source/compatibility';
 import { ConfirmController } from './editing/confirm_controller';
 import { EditingController } from './editing/controller';
 import { EditPopupView } from './editing/popup/view';
@@ -33,6 +34,7 @@ import { ToolbarView } from './toolbar/view';
 export function register(diContext: DIContext): void {
   diContext.register(DataControllerModule.DataController);
   diContext.register(DataControllerModule.CompatibilityDataController);
+  diContext.register(CompatibilityDataSourceController);
   diContext.register(ItemsController);
   diContext.register(ColumnsControllerModule.ColumnsController);
   diContext.register(SelectionControllerModule.Controller);
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/widget.ts b/packages/devextreme/js/__internal/grids/new/grid_core/widget.ts
index 76725b7d6086..cb045d2e63b8 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/widget.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/widget.ts
@@ -16,6 +16,7 @@ import * as ColumnChooserModule from './column_chooser/index';
 import { CompatibilityColumnsController } from './columns_controller/compatibility';
 import * as ColumnsControllerModule from './columns_controller/index';
 import * as DataControllerModule from './data_controller/index';
+import { CompatibilityDataSourceController } from './data_source/compatibility';
 import * as di from './di';
 import * as EditingModule from './editing/index';
 import { EditPopupView } from './editing/popup/view';
@@ -100,6 +101,7 @@ export class GridCoreNewBase<
     this.diContext.registerInstance(WidgetMock, new WidgetMock(
       this,
       this.diContext.get(DataControllerModule.CompatibilityDataController),
+      this.diContext.get(CompatibilityDataSourceController),
       this.diContext.get(CompatibilityColumnsController),
       this.diContext.get(CompatibilityHeaderFilterController),
       this.diContext.get(CompatibilityFilterSyncController),
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/widget_mock.ts b/packages/devextreme/js/__internal/grids/new/grid_core/widget_mock.ts
index 5c99d89670cd..6eeca8104fd3 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/widget_mock.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/widget_mock.ts
@@ -1,5 +1,6 @@
 import type { CompatibilityColumnsController } from './columns_controller/compatibility';
 import type { CompatibilityDataController } from './data_controller';
+import type { CompatibilityDataSourceController } from './data_source/compatibility';
 import type { CompatibilityFilterSyncController } from './filtering/filter_sync/compatibility';
 import type { CompatibilityHeaderFilterController } from './filtering/header_filter/compatibility';
 import type { GridCoreNewBase } from './widget';
@@ -9,6 +10,7 @@ export class WidgetMock {
 
   private readonly _controllers = {
     data: this.data,
+    dataSource: this.dataSource,
     columns: this.columns,
     headerFilter: this.headerFilter,
     filterSync: this.filterSync,
@@ -18,6 +20,7 @@ export class WidgetMock {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     private readonly widget: GridCoreNewBase<any>,
     private readonly data: CompatibilityDataController,
+    private readonly dataSource: CompatibilityDataSourceController,
     private readonly columns: CompatibilityColumnsController,
     private readonly headerFilter: CompatibilityHeaderFilterController,
     private readonly filterSync: CompatibilityFilterSyncController,
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts b/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts
index 309f50bd4481..ff079c7767d0 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts
@@ -10,10 +10,6 @@ import treeListCore from '../m_core';
 export class TreeListDataController extends DataController {
   public declare _dataSource?: DataSourceAdapterTreeList | null;
 
-  public dataSource(): DataSourceAdapterTreeList | undefined {
-    return this._dataSource ?? undefined;
-  }
-
   private _getNodeLevel(node) {
     let level = -1;
     while (node.parent) {
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts b/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts
index 70f64d785c20..31877b804a4f 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts
@@ -1,9 +1,14 @@
 import { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type { DataSourceAdapterProvider } from '@ts/grids/grid_core/data_source_adapter/types';
+import type { DataSourceAdapterTreeList } from '@ts/grids/tree_list/data_source_adapter/m_data_source_adapter';
 import dataSourceAdapterProvider from '@ts/grids/tree_list/data_source_adapter/m_data_source_adapter';
 
 export class TreeListDataSourceController extends DataSourceController {
   protected getAdapterProvider(): DataSourceAdapterProvider {
     return dataSourceAdapterProvider;
   }
+
+  public getAdapter(): DataSourceAdapterTreeList | null {
+    return super.getAdapter() as DataSourceAdapterTreeList | null;
+  }
 }
diff --git a/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts b/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts
index 7c23b3a932b7..7f4f4bc1c79c 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts
@@ -15,6 +15,7 @@ import gridCoreUtils from '@ts/grids/grid_core/m_utils';
 
 import type { RowsView } from '../../grid_core/views/m_rows_view';
 import type { TreeListDataController } from '../data_controller/m_data_controller';
+import type { TreeListDataSourceController } from '../data_source/data_source_controller';
 import treeListCore from '../m_core';
 
 const TREELIST_EXPAND_ICON_CONTAINER_CLASS = 'dx-treelist-icon-container';
@@ -25,6 +26,8 @@ const DATA_EDIT_DATA_INSERT_TYPE = 'insert';
 class EditingController extends editingModule.controllers.editing {
   protected declare _dataController: TreeListDataController;
 
+  protected declare dataSourceController: TreeListDataSourceController;
+
   protected _generateNewItem(key) {
     const item: any = super._generateNewItem(key);
 
@@ -43,7 +46,7 @@ class EditingController extends editingModule.controllers.editing {
   }
 
   protected _setInsertAfterOrBeforeKey(change, parentKey) {
-    const dataSourceAdapter = this._dataController.dataSource();
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
     const key = parentKey || dataSourceAdapter?.parentKeyOf(change.data);
 
     if (key !== undefined && key !== this.option('rootValue')) {
@@ -55,7 +58,7 @@ class EditingController extends editingModule.controllers.editing {
   }
 
   protected _getLoadedRowIndex(items, change, isProcessedItems?) {
-    const dataSourceAdapter = this._dataController.dataSource();
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
     const insertParentKey = this._getInternalData(change.key)?.insertInfo?.parentKey;
     const parentKey = insertParentKey !== undefined
       ? insertParentKey
@@ -135,7 +138,7 @@ class EditingController extends editingModule.controllers.editing {
 
   protected _addRowCore(data, parentKey, oldEditRowIndex) {
     const rootValue = this.option('rootValue');
-    const dataSourceAdapter = this._dataController.dataSource();
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
     const parentKeyGetter = dataSourceAdapter?.createParentIdGetter();
 
     parentKey = parentKeyGetter ? parentKeyGetter(data) : parentKey;
@@ -159,7 +162,7 @@ class EditingController extends editingModule.controllers.editing {
   }
 
   protected _initNewRow(options, parentKey?) {
-    const dataSourceAdapter = this._dataController.dataSource();
+    const dataSourceAdapter = this.dataSourceController.getAdapter();
     const parentIdSetter = dataSourceAdapter?.createParentIdSetter();
 
     parentIdSetter?.(options.data, parentKey);
diff --git a/packages/devextreme/testing/helpers/gridBaseMocks.js b/packages/devextreme/testing/helpers/gridBaseMocks.js
index 27c1041868bd..41f2f2da46dc 100644
--- a/packages/devextreme/testing/helpers/gridBaseMocks.js
+++ b/packages/devextreme/testing/helpers/gridBaseMocks.js
@@ -1,6 +1,71 @@
 module.exports = function($, gridCore, columnResizingReordering, domUtils, commonUtils, typeUtils, ArrayStore, nameWidget) {
     const exports = {};
 
+    exports.MockDataSourceAdapter = function(options) {
+        const store = function() {
+            return new ArrayStore(options.items);
+        };
+
+        const loadCustomResult = (loadOptions) => {
+            const d = $.Deferred();
+
+            store().load(loadOptions)
+                .done((data, extra) => {
+                    d.resolve({ data: data, extra: extra });
+                })
+                .fail(d.reject);
+
+            return d;
+        };
+
+        return {
+            beginLoading: function() {
+            },
+            endLoading: function() {
+            },
+            remoteOperations: function() {
+                return {};
+            },
+            loadOptions: function() {
+                return {};
+            },
+            key: function() {
+                return options.key;
+            },
+            isLoading: function() {
+                return false;
+            },
+            lastLoadOptions: function() {
+                return {};
+            },
+            operationTypes: function() {
+                return undefined;
+            },
+            select: function() {
+                return undefined;
+            },
+            getDataIndexGetter: function() {
+                return undefined;
+            },
+            dispose: function() {
+            },
+            store: store,
+            load: function(loadOptions) {
+                return store().load(loadOptions);
+            },
+            customLoader: {
+                load: loadCustomResult,
+                loadFromStore: loadCustomResult,
+                isLoading: function() {
+                    return false;
+                },
+                isLoadingAll: function() {
+                    return false;
+                }
+            }
+        };
+    };
+
     exports.MockDataController = function(options) {
 
         if(!typeUtils.isDefined(options.itemsCount)) {
@@ -37,50 +102,7 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
 
             changedArgs: [],
 
-            dataSource: function() {
-                const store = function() {
-                    return new ArrayStore(options.items);
-                };
-
-                const loadCustomResult = (loadOptions) => {
-                    const d = $.Deferred();
-
-                    store().load(loadOptions)
-                        .done((data, extra) => {
-                            d.resolve({ data: data, extra: extra });
-                        })
-                        .fail(d.reject);
-
-                    return d;
-                };
-
-                return {
-                    beginLoading: function() {
-                    },
-                    endLoading: function() {
-                    },
-                    remoteOperations: function() {
-                        return {};
-                    },
-                    loadOptions: function() {
-                        return {};
-                    },
-                    store: store,
-                    load: function(loadOptions) {
-                        return store().load(loadOptions);
-                    },
-                    customLoader: {
-                        load: loadCustomResult,
-                        loadFromStore: loadCustomResult,
-                        isLoading: function() {
-                            return false;
-                        },
-                        isLoadingAll: function() {
-                            return false;
-                        }
-                    }
-                };
-            },
+            mockOptions: options,
 
             pageSize: function(value) {
                 if(value === undefined) {
@@ -1214,6 +1236,13 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
         options && options.controllers && $.extend(that._controllers, options.controllers);
         options && options.views && $.extend(that._views, options.views);
 
+        const mockedDataController = options && options.controllers && options.controllers.data;
+        if(mockedDataController && mockedDataController.mockOptions && that._controllers.dataSource) {
+            that._controllers.dataSource.adapter = new exports.MockDataSourceAdapter(
+                mockedDataController.mockOptions
+            );
+        }
+
         $.each(that._controllers, function(name) {
             that[name + 'Controller'] = this;
             this.init && this.init();
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
index ddf33f7e262b..f9e784373cba 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
@@ -241,7 +241,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
 
         this.dataController.dataPushedHandlerProxy = dataPushedHandlerSpy;
         this.dataController.setDataSource(dataSource);
-        dataSource = this.dataController.dataSource();
+        dataSource = this.dataSourceController.getAdapter();
         dataSource.load();
 
         // assert
@@ -319,7 +319,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
 
         this.option('dataSource', []);
 
-        const dataSource = this.dataController.dataSource()._dataSource;
+        const dataSource = this.dataSourceController.getDataSource();
 
         this.dataController.changed.add(function(args) {
             changedCount++;
@@ -873,7 +873,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
 
         // act
         this.dataController.resetDataSource();
-        const dataIndexGetter = this.dataSourceController.getAdapter().getDataIndexGetter();
+        const dataIndexGetter = this.dataSourceController.getDataIndexGetter();
         assert.deepEqual(this.dataController._columnsController.getSortDataSourceParameters(), [{ desc: false, selector: dataIndexGetter }], 'Sort parameters');
         // assert
         assert.equal(dataSource.items()[0].name, 'Alex', 'Item0');
@@ -1997,13 +1997,13 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
 
         this.dataController.setDataSource(dataSource);
         dataSource.load();
-        assert.ok(this.dataController.dataSource().sort(), 'sort parameters');
+        assert.ok(this.dataSourceController.getAdapter().sort(), 'sort parameters');
 
         // act
         this.columnsController.changeSortOrder(0, 'none');
 
         // assert
-        assert.ok(!this.dataController.dataSource().sort(), 'no sort parameters');
+        assert.ok(!this.dataSourceController.getAdapter().sort(), 'no sort parameters');
 
         assert.deepEqual(this.dataController.items()[0].values, ['Alex', 30]);
         assert.deepEqual(this.dataController.items()[1].values, ['Dan', 25]);
@@ -2098,12 +2098,12 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
 
         this.dataController.setDataSource(dataSource);
         dataSource.load();
-        assert.ok(this.dataController.dataSource().group());
+        assert.ok(this.dataSourceController.getAdapter().group());
         // act
         this.columnsController.moveColumn(0, 0, 'group', 'header');
 
         // assert
-        assert.ok(!this.dataController.dataSource().group());
+        assert.ok(!this.dataSourceController.getAdapter().group());
         assert.equal(this.dataController.items()[0].rowType, 'data');
     });
 
@@ -2709,7 +2709,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         this.dataController.resetDataSource();
 
         // assert
-        assert.deepEqual(this.dataController.dataSource().remoteOperations(), {}, 'remote operations set correct');
+        assert.deepEqual(this.dataSourceController.getAdapter().remoteOperations(), {}, 'remote operations set correct');
     });
 
     QUnit.test('Enable all remote operations if groupPaging is true', function(assert) {
@@ -2727,7 +2727,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         this.dataController.resetDataSource();
 
         // assert
-        assert.deepEqual(this.dataController.dataSource().remoteOperations(), {
+        assert.deepEqual(this.dataSourceController.getAdapter().remoteOperations(), {
             filtering: true,
             sorting: true,
             paging: true,
@@ -2754,7 +2754,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         this.dataController.resetDataSource();
 
         // assert
-        assert.deepEqual(this.dataController.dataSource().remoteOperations(), {
+        assert.deepEqual(this.dataSourceController.getAdapter().remoteOperations(), {
             filtering: true,
             sorting: false,
             paging: true,
@@ -2777,7 +2777,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         this.dataController.resetDataSource();
 
         // assert
-        assert.deepEqual(this.dataController.dataSource().remoteOperations(), {}, 'remote operations set correct');
+        assert.deepEqual(this.dataSourceController.getAdapter().remoteOperations(), {}, 'remote operations set correct');
     });
 
     QUnit.test('Set remoteOperations option to true', function(assert) {
@@ -2794,7 +2794,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         this.dataController.resetDataSource();
 
         // assert
-        assert.deepEqual(this.dataController.dataSource().remoteOperations(), { filtering: true, sorting: true, paging: true, grouping: true, summary: true }, 'remote operations set correct');
+        assert.deepEqual(this.dataSourceController.getAdapter().remoteOperations(), { filtering: true, sorting: true, paging: true, grouping: true, summary: true }, 'remote operations set correct');
     });
 
     // T541798
@@ -3578,7 +3578,7 @@ QUnit.module('Virtual scrolling', { beforeEach: setupVirtualScrollingModule, aft
     // B233350
     QUnit.test('virtual items on end when visibleRowsCount < pageSize and last page size greater than half page size', function(assert) {
         const dataController = this.dataController;
-        this.dataSourceController.getAdapter().store().remove(999);
+        this.dataSourceController.store().remove(999);
         dataController.refresh();
         dataController.setViewportItemIndex(998);
         assert.strictEqual(this.dataController.pageIndex(), 49);
@@ -3615,7 +3615,7 @@ QUnit.module('Virtual scrolling', { beforeEach: setupVirtualScrollingModule, aft
         const that = this;
         let countCallChanged = 0;
         let countCallDataSourceChanged = 0;
-        const dataSource = that.dataController.dataSource();
+        const dataSource = that.dataSourceController.getAdapter();
 
         that.dataController.changed.add(function() {
             that.columnOption('id', 'sortOrder', 'desc');
@@ -3641,7 +3641,7 @@ QUnit.module('Virtual scrolling', { beforeEach: setupVirtualScrollingModule, aft
         const firstRow = rows[0];
 
         // act
-        this.dataController.dataSource().changed.fire({ changeType: 'pageIndex' });
+        this.dataSourceController.getAdapter().changed.fire({ changeType: 'pageIndex' });
 
         // assert
         assert.strictEqual(this.getVisibleRows(), rows, 'rows are not changed');
@@ -4964,19 +4964,19 @@ QUnit.module('Virtual scrolling (ScrollingDataSource)', {
         this.dataController.viewportSize(15);
 
         // assert
-        assert.strictEqual(this.dataController.dataSource().loadPageCount(), 1, 'initial load page count');
+        assert.strictEqual(this.dataSourceController.getAdapter().loadPageCount(), 1, 'initial load page count');
         assert.strictEqual(this.dataController.items().length, 10, 'initial visible items count');
 
         // act
         this.dataController.setViewportPosition(500);
         this.clock.tick(10);
         const visibleItems = this.dataController.items();
-        const loadedItems = this.dataController.dataSource().items();
+        const loadedItems = this.dataSourceController.getAdapter().items();
 
         // assert
         assert.deepEqual(this.dataController.getLoadPageParams(), { pageIndex: 2, loadPageCount: 4, skipForCurrentPage: 5 }, 'load page params after scrolling');
         assert.deepEqual(this.dataController.pageIndex(), 2, 'page index after scrolling');
-        assert.strictEqual(this.dataController.dataSource().loadPageCount(), 4, 'load page count after scrolling');
+        assert.strictEqual(this.dataSourceController.getAdapter().loadPageCount(), 4, 'load page count after scrolling');
         assert.equal(loadedItems.length, 40, 'loaded items count');
         assert.deepEqual(loadedItems[0], { id: 21, name: 'Name 21' }, 'first loaded item');
         assert.deepEqual(loadedItems[39], { id: 60, name: 'Name 60' }, 'last loaded item');
@@ -5149,7 +5149,7 @@ QUnit.module('Virtual scrolling (ScrollingDataSource)', {
             pageSize: 10
         });
 
-        const viewportSizeSpy = sinon.spy(this.dataController.dataSource(), 'viewportSize');
+        const viewportSizeSpy = sinon.spy(this.dataSourceController.getAdapter(), 'viewportSize');
 
         try {
             this.dataController.viewportSize();
@@ -5176,7 +5176,7 @@ QUnit.module('Virtual scrolling (ScrollingDataSource)', {
             pageSize: 10
         });
 
-        const viewportItemSizeSpy = sinon.spy(this.dataController.dataSource(), 'viewportItemSize');
+        const viewportItemSizeSpy = sinon.spy(this.dataSourceController.getAdapter(), 'viewportItemSize');
 
         try {
             this.dataController.viewportItemSize();
@@ -5203,7 +5203,7 @@ QUnit.module('Virtual scrolling (ScrollingDataSource)', {
             pageSize: 10
         });
 
-        const setContentItemSizesSpy = sinon.spy(this.dataController.dataSource(), 'setContentItemSizes');
+        const setContentItemSizesSpy = sinon.spy(this.dataSourceController.getAdapter(), 'setContentItemSizes');
 
         try {
             this.dataController.setContentItemSizes([30]);
@@ -5451,7 +5451,7 @@ QUnit.module('Virtual scrolling preload', {
 }, () => {
     QUnit.test('New mode. One page should be loaded on start', function(assert) {
         // arrange
-        assert.strictEqual(this.dataController.dataSource().loadPageCount(), 1, 'initial load page count');
+        assert.strictEqual(this.dataSourceController.getAdapter().loadPageCount(), 1, 'initial load page count');
         assert.strictEqual(this.getVisibleRows().length, 20, 'initial visible items count');
     });
 
@@ -5459,7 +5459,7 @@ QUnit.module('Virtual scrolling preload', {
         // act
         this.dataController.setViewportPosition(1);
         const visibleRows = this.getVisibleRows();
-        const dataSourceAdapter = this.dataController.dataSource();
+        const dataSourceAdapter = this.dataSourceController.getAdapter();
         const loadedItems = dataSourceAdapter.items();
 
         // assert
@@ -5476,7 +5476,7 @@ QUnit.module('Virtual scrolling preload', {
         // act
         this.dataController.setViewportPosition(1);
         const visibleRows = this.getVisibleRows();
-        const dataSourceAdapter = this.dataController.dataSource();
+        const dataSourceAdapter = this.dataSourceController.getAdapter();
         const loadedItems = dataSourceAdapter.items();
 
         // assert
@@ -5493,7 +5493,7 @@ QUnit.module('Virtual scrolling preload', {
         // act
         this.dataController.setViewportPosition(1);
         const visibleRows = this.getVisibleRows();
-        const dataSourceAdapter = this.dataController.dataSource();
+        const dataSourceAdapter = this.dataSourceController.getAdapter();
         const loadedItems = dataSourceAdapter.items();
 
         // assert
@@ -5510,7 +5510,7 @@ QUnit.module('Virtual scrolling preload', {
         // act
         this.dataController.setViewportPosition(1);
         const visibleRows = this.getVisibleRows();
-        const dataSourceAdapter = this.dataController.dataSource();
+        const dataSourceAdapter = this.dataSourceController.getAdapter();
         const loadedItems = dataSourceAdapter.items();
 
         // assert
@@ -5526,7 +5526,7 @@ QUnit.module('Virtual scrolling preload', {
         // act
         this.dataController.setViewportPosition(1000);
         const visibleRows = this.getVisibleRows();
-        const dataSourceAdapter = this.dataController.dataSource();
+        const dataSourceAdapter = this.dataSourceController.getAdapter();
         const loadedItems = dataSourceAdapter.items();
 
         // assert
@@ -5543,7 +5543,7 @@ QUnit.module('Virtual scrolling preload', {
         this.dataController.setViewportPosition(1000);
         this.dataController.setViewportPosition(999);
         const visibleRows = this.getVisibleRows();
-        const dataSourceAdapter = this.dataController.dataSource();
+        const dataSourceAdapter = this.dataSourceController.getAdapter();
         const loadedItems = dataSourceAdapter.items();
 
         // assert
@@ -5561,7 +5561,7 @@ QUnit.module('Virtual scrolling preload', {
         this.dataController.setViewportPosition(1000);
         this.dataController.setViewportPosition(999);
         const visibleRows = this.getVisibleRows();
-        const dataSourceAdapter = this.dataController.dataSource();
+        const dataSourceAdapter = this.dataSourceController.getAdapter();
         const loadedItems = dataSourceAdapter.items();
 
         // assert
@@ -6067,19 +6067,19 @@ QUnit.module('Infinite scrolling (ScrollingDataSource)', {
         this.dataController.viewportSize(15);
 
         // assert
-        assert.strictEqual(this.dataController.dataSource().loadPageCount(), 1, 'initial load page count');
+        assert.strictEqual(this.dataSourceController.getAdapter().loadPageCount(), 1, 'initial load page count');
         assert.strictEqual(this.dataController.items().length, 10, 'initial visible items count');
 
         // act
         this.dataController.setViewportPosition(500);
         this.clock.tick(10);
         const visibleItems = this.dataController.items();
-        const loadedItems = this.dataController.dataSource().items();
+        const loadedItems = this.dataSourceController.getAdapter().items();
 
         // assert
         assert.deepEqual(this.dataController.getLoadPageParams(), { pageIndex: 2, loadPageCount: 4, skipForCurrentPage: 5 }, 'load page params after scrolling');
         assert.deepEqual(this.dataController.pageIndex(), 2, 'page index after scrolling');
-        assert.strictEqual(this.dataController.dataSource().loadPageCount(), 4, 'load page count after scrolling');
+        assert.strictEqual(this.dataSourceController.getAdapter().loadPageCount(), 4, 'load page count after scrolling');
         assert.equal(loadedItems.length, 40, 'loaded items count');
         assert.deepEqual(loadedItems[0], { id: 21, name: 'Name 21' }, 'first loaded item');
         assert.deepEqual(loadedItems[39], { id: 60, name: 'Name 60' }, 'last loaded item');
@@ -12979,7 +12979,7 @@ QUnit.module('Partial update', {
 
     QUnit.test('update one row', function(assert) {
         this.setupModules();
-        const dataSourceItems = this.dataController.dataSource().items();
+        const dataSourceItems = this.dataSourceController.getAdapter().items();
 
         const oldItems = this.dataController.items().slice(0);
         let changedArgs;
@@ -13011,7 +13011,7 @@ QUnit.module('Partial update', {
 
     QUnit.test('update several rows', function(assert) {
         this.setupModules();
-        const dataSourceItems = this.dataController.dataSource().items();
+        const dataSourceItems = this.dataSourceController.getAdapter().items();
 
         const oldItems = this.dataController.items().slice(0);
         let changedArgs;
@@ -13048,7 +13048,7 @@ QUnit.module('Partial update', {
 
     QUnit.test('update with incorrect rowIndices', function(assert) {
         this.setupModules();
-        const dataSourceItems = this.dataController.dataSource().items();
+        const dataSourceItems = this.dataSourceController.getAdapter().items();
 
         const oldItems = this.dataController.items().slice(0);
         let changedArgs;
@@ -13083,7 +13083,7 @@ QUnit.module('Partial update', {
     // T266696
     QUnit.test('insert item with editing of the first item', function(assert) {
         this.setupModules();
-        const dataSourceItems = this.dataController.dataSource().items();
+        const dataSourceItems = this.dataSourceController.getAdapter().items();
         let changedArgs;
 
         this.dataController.changed.add(function(args) {
@@ -13111,7 +13111,7 @@ QUnit.module('Partial update', {
 
     QUnit.test('insert one item', function(assert) {
         this.setupModules();
-        const dataSourceItems = this.dataController.dataSource().items();
+        const dataSourceItems = this.dataSourceController.getAdapter().items();
 
         const oldItems = this.dataController.items().slice(0);
         let changedArgs;
@@ -13148,7 +13148,7 @@ QUnit.module('Partial update', {
 
     QUnit.test('update and insert', function(assert) {
         this.setupModules();
-        const dataSourceItems = this.dataController.dataSource().items();
+        const dataSourceItems = this.dataSourceController.getAdapter().items();
 
         const oldItems = this.dataController.items().slice(0);
         let changedArgs;
@@ -13218,7 +13218,7 @@ QUnit.module('Partial update', {
 
     QUnit.test('remove one item', function(assert) {
         this.setupModules();
-        const dataSourceItems = this.dataController.dataSource().items();
+        const dataSourceItems = this.dataSourceController.getAdapter().items();
 
         const oldItems = this.dataController.items().slice(0);
         let changedArgs;
@@ -13254,7 +13254,7 @@ QUnit.module('Partial update', {
 
     QUnit.test('update and remove', function(assert) {
         this.setupModules();
-        const dataSourceItems = this.dataController.dataSource().items();
+        const dataSourceItems = this.dataSourceController.getAdapter().items();
 
         const oldItems = this.dataController.items().slice(0);
         let changedArgs;
@@ -13291,7 +13291,7 @@ QUnit.module('Partial update', {
     // T186415
     QUnit.test('remove and update next row', function(assert) {
         this.setupModules();
-        const dataSourceItems = this.dataController.dataSource().items();
+        const dataSourceItems = this.dataSourceController.getAdapter().items();
 
         const oldItems = this.dataController.items().slice(0);
         let changedArgs;
@@ -13327,7 +13327,7 @@ QUnit.module('Partial update', {
 
     QUnit.test('insert and remove', function(assert) {
         this.setupModules();
-        const dataSourceItems = this.dataController.dataSource().items();
+        const dataSourceItems = this.dataSourceController.getAdapter().items();
 
         const oldItems = this.dataController.items().slice(0);
         let changedArgs;
@@ -14457,7 +14457,7 @@ QUnit.module('Using DataSource instance', {
         try {
         // act
             this.dataSource.dispose();
-            this.dataController.dataSource().dispose(true);
+            this.dataSourceController.getAdapter().dispose(true);
 
             // assert
             assert.ok(true, 'No exception');
@@ -15437,7 +15437,7 @@ QUnit.module('onOptionChanged', {
         that.option.restore();
         sinon.stub(that, 'option').callsFake(function(optionName, value) {
             if(optionName === 'paging.pageSize' && value === 3) {
-                pageSize = that.dataController.dataSource().pageSize();
+                pageSize = that.dataSourceController.getAdapter().pageSize();
             }
             if(optionName === 'editing.changes') {
                 return that.options.editing.changes;
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js
index 49bc940d87f1..074b5e6b1d11 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js
@@ -1577,7 +1577,7 @@ QUnit.module('Assign options', baseModuleConfig, () => {
 
         // assert
         assert.ok(dataGrid.getController('data').isEmpty(), 'no data');
-        assert.ok(!dataGrid.getController('data').dataSource(), 'no dataSource');
+        assert.ok(!dataGrid.getController('dataSource').getAdapter(), 'no dataSource');
         assert.strictEqual(dataGrid.getController('data')._cachedProcessedItems, null, 'cached processed items are cleared'); // T1045202
         assert.strictEqual(dataGrid.getController('columns')._dataSource, null, 'no dataSource inside columnsController'); // T1045202
         assert.equal(dataGrid.getController('data').items().length, 0, 'items count');
@@ -2101,7 +2101,7 @@ QUnit.module('Assign options', baseModuleConfig, () => {
         });
 
         // assert
-        const dataSource = dataGrid.getController('data').dataSource();
+        const dataSource = dataGrid.getController('dataSource').getAdapter();
         assert.ok(!errorMessage, 'No error messages');
         assert.ok(dataSource, 'dataSource assigned');
         assert.ok(dataSource.requireTotalCount(), 'requireTotalCount assigned');
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.integration.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.integration.tests.js
index 1ff1c6b8d421..ac80de2240c1 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.integration.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.integration.tests.js
@@ -1286,7 +1286,7 @@ QUnit.module('Initialization', baseModuleConfig, () => {
         });
         const rowsView = dataGrid.getView('rowsView');
         const $lastRow = rowsView.getRow(2);
-        const dataSource = dataGrid.getController('data').dataSource();
+        const dataSource = dataGrid.getController('dataSource').getAdapter();
 
         sinon.spy(dataSource, 'load');
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerFilter.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerFilter.tests.js
index 9924268baf7d..9a2b1631b03d 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerFilter.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerFilter.tests.js
@@ -5,7 +5,6 @@ import gridCoreUtils from '__internal/grids/grid_core/m_utils';
 
 import $ from 'jquery';
 import ArrayStore from 'common/data/array_store';
-import { noop } from 'core/utils/common';
 import ODataStore from 'common/data/odata/store';
 import devices from '__internal/core/m_devices';
 import { DataSource } from 'common/data/data_source/data_source';
@@ -536,10 +535,10 @@ QUnit.module('Header Filter', {
         const that = this;
         const testElement = $('#container');
 
+        that.generateItems(5);
         that.setupDataGrid();
 
-        that.dataController.dataSource = noop;
-
+        that.dataSourceController.disposeAdapter();
 
         that.columnHeadersView.render(testElement);
         that.headerFilterView.render(testElement);
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js
index 115ab7f16195..dad71f4cf670 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js
@@ -2120,7 +2120,7 @@ QUnit.module('Multiple selection. DataSource with key', { beforeEach: setupSelec
                 allowSelectAll: true
             }
         });
-        const store = this.dataController.dataSource().store();
+        const store = this.dataSourceController.store();
 
         this.selectionController.selectRows([2]);
 
@@ -2146,7 +2146,7 @@ QUnit.module('Multiple selection. DataSource with key', { beforeEach: setupSelec
                 allowSelectAll: true
             },
         });
-        const store = this.dataController.dataSource().store();
+        const store = this.dataSourceController.store();
 
         // act
         this.selectionController.selectRows([1]);
@@ -2177,7 +2177,7 @@ QUnit.module('Multiple selection. DataSource with key', { beforeEach: setupSelec
                 allowSelectAll: true
             }
         });
-        const store = this.dataController.dataSource().store();
+        const store = this.dataSourceController.store();
 
         // act
         this.selectionController.selectAll();
@@ -2206,7 +2206,7 @@ QUnit.module('Multiple selection. DataSource with key', { beforeEach: setupSelec
                 mode: 'multiple',
             }
         });
-        const store = this.dataController.dataSource().store();
+        const store = this.dataSourceController.store();
 
         sinon.spy(this.selectionController, '_updateSelectedOnPush');
         sinon.spy(this.selectionController, 'getSelectedRowsData');
@@ -2227,7 +2227,7 @@ QUnit.module('Multiple selection. DataSource with key', { beforeEach: setupSelec
                 deferred: true
             }
         });
-        const store = this.dataController.dataSource().store();
+        const store = this.dataSourceController.store();
 
         sinon.spy(this.selectionController, '_updateSelectedOnPush');
         sinon.spy(this.selectionController, 'getSelectedRowsData');
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/virtualScrolling.integration.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/virtualScrolling.integration.tests.js
index ff4057a2e1ca..fcf55d210597 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/virtualScrolling.integration.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/virtualScrolling.integration.tests.js
@@ -6916,7 +6916,7 @@ QUnit.module('Infinite Scrolling', baseModuleConfig, () => {
         this.clock.tick(10);
         // assert
         assert.ok(dataGrid.getController('data').viewportSize() > 0);
-        assert.ok(!dataGrid.getController('data').dataSource().requireTotalCount());
+        assert.ok(!dataGrid.getController('dataSource').getAdapter().requireTotalCount());
     });
 
     QUnit.test('New mode. Load panel should not be displayed at the bottom when all items are loaded', function(assert) {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/dataController.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/dataController.tests.js
index 5f2f56fb3699..7084f5faf6d2 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/dataController.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/dataController.tests.js
@@ -72,7 +72,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         });
 
         // assert
-        assert.notOk(this.dataController.dataSource().paginate(), 'paginate is disabled');
+        assert.notOk(this.dataSourceController.getAdapter().paginate(), 'paginate is disabled');
     });
 
     QUnit.test('Paginate should be enabled when virtual scrolling is enabled', function(assert) {
@@ -85,7 +85,7 @@ QUnit.module('Initialization', { beforeEach: setupModule, afterEach: teardownMod
         });
 
         // assert
-        assert.ok(this.dataController.dataSource().paginate(), 'paginate is enabled');
+        assert.ok(this.dataSourceController.getAdapter().paginate(), 'paginate is enabled');
     });
 
     QUnit.test('Initialize from dataSource with plain structure', function(assert) {

From 742b7d42b79352f5314099b408e8488ae629d59f Mon Sep 17 00:00:00 2001
From: Andrey Vorobev <738482+vorobey@users.noreply.github.com>
Date: Tue, 8 Sep 2026 13:46:42 +0000
Subject: [PATCH 26/45] T1334644: Themebuilder swatch fix (#35075)

Signed-off-by: Andrey Vorobev <738482+vorobey@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .../src/metadata/generator.ts                 |  2 +-
 .../src/modules/post-compiler.ts              |  2 +
 .../data/scss/widgets/generic/_colors.scss    |  2 +-
 .../widgets/generic/accordion/_colors.scss    |  4 +-
 .../tests/metadata/generator.test.ts          |  2 +-
 .../tests/modules/builder.test.ts             | 18 ++++
 .../tests/modules/post-compiler.test.ts       | 90 +++++++++++++++++++
 7 files changed, 114 insertions(+), 6 deletions(-)

diff --git a/packages/devextreme-themebuilder/src/metadata/generator.ts b/packages/devextreme-themebuilder/src/metadata/generator.ts
index 2a328f6a1451..446da5b8fb70 100644
--- a/packages/devextreme-themebuilder/src/metadata/generator.ts
+++ b/packages/devextreme-themebuilder/src/metadata/generator.ts
@@ -112,7 +112,7 @@ export default class MetadataGenerator {
     });
 
     const overriddenVariables = MetadataGenerator.getOverriddenVariables(metaItems);
-    const collector = `$never-used: collector(${MetadataGenerator.getMapFromMeta(metaItems)});\n`;
+    const collector = `$_never-used: collector(${MetadataGenerator.getMapFromMeta(metaItems)});\n`;
     modifiedContent = overriddenVariables + '\n\n' + modifiedContent + collector;
 
     return modifiedContent;
diff --git a/packages/devextreme-themebuilder/src/modules/post-compiler.ts b/packages/devextreme-themebuilder/src/modules/post-compiler.ts
index b0357609a572..a88720fdc708 100644
--- a/packages/devextreme-themebuilder/src/modules/post-compiler.ts
+++ b/packages/devextreme-themebuilder/src/modules/post-compiler.ts
@@ -68,8 +68,10 @@ export function fixSwatchCss(css: string | Buffer, swatchClass: string, colorSch
   const swatchOrderRegex = new RegExp(`([ \\t]*)([\\w\\.#:\\*][\\w\\.#:\\*\\->()\\s]*)(${escapedSelector}\\s)([^,{+~]*)`, 'gm');
   const changeTypographyRulesOrderRegex = /(\.dx-swatch-.*?)\s(\.dx-theme-.*?-typography)(.*?)(\s{|,)/g;
   const themeMarkerRegex = /(\.dx-theme-marker\s*{\s*font-family:\s*['"]dx\..*?\.)(.*)(['"])/g;
+  const rootSelectorRegex = new RegExp(`${escapedSelector}\\s+:root\\b`, 'g');
 
   result = result
+    .replace(rootSelectorRegex, swatchClass)
     .replace(swatchOrderRegex, '$1$3$2$4')
     .replace(changeTypographyRulesOrderRegex, '$2 $1$3,$2$1$3$4')
     .replace(themeMarkerRegex, `$1${colorScheme}$3`);
diff --git a/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss b/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss
index e15f6dbe91cd..7d115ebee381 100644
--- a/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss
+++ b/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss
@@ -18,7 +18,7 @@ $float-channel-color: null !default;
 }
 
 
-$never-used: collector(
+$_never-used: collector(
 (
 "$base-font-family": $base-font-family,
 "$base-accent": $base-accent,
diff --git a/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/accordion/_colors.scss b/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/accordion/_colors.scss
index d671f1015680..e08a47d95169 100644
--- a/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/accordion/_colors.scss
+++ b/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/accordion/_colors.scss
@@ -5,8 +5,6 @@ $accordion-item-title-opened-bg: getCustomVar(("$accordion-item-title-opened-bg"
 @use "../sizes" as *;
 @use "../colors" as *;
 
-// adduse
-
 $accordion-title-color: null !default;
 $accordion-item-title-opened-bg: null !default;
 
@@ -15,7 +13,7 @@ $accordion-item-title-opened-bg: null !default;
   $accordion-item-title-opened-bg: transparent !default;
 }
 
-$never-used: collector(
+$_never-used: collector(
 (
 "$accordion-title-color": $accordion-title-color,
 "$accordion-item-title-opened-bg": $accordion-item-title-opened-bg,
diff --git a/packages/devextreme-themebuilder/tests/metadata/generator.test.ts b/packages/devextreme-themebuilder/tests/metadata/generator.test.ts
index ee6b3aa83eb0..4b0cb63f446f 100644
--- a/packages/devextreme-themebuilder/tests/metadata/generator.test.ts
+++ b/packages/devextreme-themebuilder/tests/metadata/generator.test.ts
@@ -200,7 +200,7 @@ $slideout-background: #000 !default;
 * $type color
 */
 $slideout-background: #000 !default;
-$never-used: collector((
+$_never-used: collector((
 "$slideout-background": $slideout-background,
 ));
 `;
diff --git a/packages/devextreme-themebuilder/tests/modules/builder.test.ts b/packages/devextreme-themebuilder/tests/modules/builder.test.ts
index b4f0f8ac7620..8adeb9deb6d3 100644
--- a/packages/devextreme-themebuilder/tests/modules/builder.test.ts
+++ b/packages/devextreme-themebuilder/tests/modules/builder.test.ts
@@ -38,6 +38,8 @@ describe('Builder integration tests', () => {
     return buildTheme(config).then((result) => {
       expect(result.css).not.toBe('');
       expect(result.swatchSelector).toBe('.dx-swatch-custom-scheme');
+      expect(result.css).not.toMatch(/\.dx-swatch-custom-scheme\s*:root/);
+      expect(result.css).toMatch(/\.dx-swatch-custom-scheme\s*\{[^}]*--dx-color-primary:/);
     });
   }, buildTimeout);
 
@@ -122,6 +124,22 @@ describe('Builder integration tests', () => {
     });
   }, buildTimeout);
 
+  test('Theme built without parameters is the same that in distribution (fluent)', async () => {
+    const config: ConfigSettings = {
+      command: commands.BUILD_THEME,
+      outputColorScheme: 'custom-scheme',
+      baseTheme: 'fluent.blue.light',
+      items: [],
+    };
+
+    return buildTheme(config).then((result) => {
+      const themeBuilderCss = normalizeCss(result.css);
+      const cssPath = path.resolve(__dirname, '../../../devextreme/artifacts/css/dx.fluent.blue.light.css');
+      const distributionCss = normalizeCss(readFileSync(cssPath, 'utf8'));
+      expect(themeBuilderCss).toBe(distributionCss);
+    });
+  }, buildTimeout);
+
   test('Theme built without parameters is the same that in distribution (material)', async () => {
     const config: ConfigSettings = {
       command: commands.BUILD_THEME,
diff --git a/packages/devextreme-themebuilder/tests/modules/post-compiler.test.ts b/packages/devextreme-themebuilder/tests/modules/post-compiler.test.ts
index 41717ff21294..de51a0368c62 100644
--- a/packages/devextreme-themebuilder/tests/modules/post-compiler.test.ts
+++ b/packages/devextreme-themebuilder/tests/modules/post-compiler.test.ts
@@ -163,6 +163,96 @@ describe('PostCompiler - swatch features (fixSwatchCss)', () => {
     expect(result).toBe(expectedCss);
   });
 
+  test('fixSwatchCss - apply custom properties to the swatch class instead of :root (T1334644)', () => {
+    const compilerCss = `
+.dx-swatch-c :root {
+  --dx-color-primary: #fff;
+  --dx-color-text: #000;
+}`;
+
+    const expectedCss = `
+.dx-swatch-c {
+  --dx-color-primary: #fff;
+  --dx-color-text: #000;
+}`;
+
+    const result = fixSwatchCss(compilerCss, '.dx-swatch-c', 'c');
+    expect(result).toBe(expectedCss);
+  });
+
+  test('fixSwatchCss - do not change the order of cascade\'s classes in rules next to :root', () => {
+    const compilerCss = `
+.dx-swatch-c .dx-widget {
+  color: #fff;
+}
+.dx-swatch-c :root {
+  --dx-color-primary: #fff;
+}
+.dx-swatch-c .dx-checkbox-checked.dx-checkbox-icon {
+  background-color: #fff;
+}`;
+
+    const expectedCss = `
+.dx-swatch-c .dx-widget {
+  color: #fff;
+}
+.dx-swatch-c {
+  --dx-color-primary: #fff;
+}
+.dx-swatch-c .dx-checkbox-checked.dx-checkbox-icon {
+  background-color: #fff;
+}`;
+
+    const result = fixSwatchCss(compilerCss, '.dx-swatch-c', 'c');
+    expect(result).toBe(expectedCss);
+  });
+
+  test('fixSwatchCss - apply compound :root selectors to the swatch class itself', () => {
+    const compilerCss = `
+.dx-swatch-c :root.dx-foo {
+  --dx-color-primary: #fff;
+}
+.dx-swatch-c :root:not(.dx-bar) {
+  --dx-color-text: #000;
+}
+.dx-swatch-c :root .dx-widget {
+  color: #fff;
+}`;
+
+    const expectedCss = `
+.dx-swatch-c.dx-foo {
+  --dx-color-primary: #fff;
+}
+.dx-swatch-c:not(.dx-bar) {
+  --dx-color-text: #000;
+}
+.dx-swatch-c .dx-widget {
+  color: #fff;
+}`;
+
+    const result = fixSwatchCss(compilerCss, '.dx-swatch-c', 'c');
+    expect(result).toBe(expectedCss);
+  });
+
+  test('fixSwatchCss - apply custom properties to the swatch class inside media queries', () => {
+    const compilerCss = `
+@media (max-width: 600px) {
+  .dx-swatch-c :root {
+    --dx-color-primary: #fff;
+  }
+}`;
+
+    const expectedCss = `
+@media (max-width: 600px) {
+  .dx-swatch-c {
+    --dx-color-primary: #fff;
+  }
+}`;
+
+    const result = fixSwatchCss(compilerCss, '.dx-swatch-c', 'c');
+    expect(result).toBe(expectedCss);
+  });
+
   test('fixSwatchCss - fix theme marker in swatch css', () => {
     const compilerCss = '.dx-swatch-c .dx-theme-marker { font-family: \'dx.generic.light\'; }';
 

From fde2943cb20dc9d92c3f0892fc3fa677b2cf6462 Mon Sep 17 00:00:00 2001
From: Alyar <Alyar666@users.noreply.github.com>
Date: Wed, 9 Sep 2026 06:48:23 +0000
Subject: [PATCH 27/45] Grids - FilterController: Move the filter build into
 FilterController (#35097)

Co-authored-by: Alyar <>
---
 .../grids/data_grid/m_widget_base.ts          |  2 +
 .../data_grid/module_not_extended/filter.ts   |  5 ++
 .../data_controller/data_controller.ts        | 31 ++++------
 .../grid_core/filter/filter_controller.ts     | 28 +++++++++
 .../grids/grid_core/filter/filter_module.ts   |  9 +++
 .../grid_core/filter_row/m_filter_row.ts      | 19 +++---
 .../extenders/filter_sync_data_controller.ts  | 51 +---------------
 .../filter_sync_filter_controller.ts          | 59 +++++++++++++++++++
 .../filter_sync/filter_sync_module.ts         |  2 +
 .../grids/grid_core/filter_sync/utils.ts      | 11 ++++
 .../header_filter/m_header_filter.ts          | 19 +++---
 .../js/__internal/grids/grid_core/m_types.ts  |  1 +
 .../grids/grid_core/search/m_search.ts        | 26 ++++----
 .../grids/tree_list/m_widget_base.ts          |  2 +
 .../tree_list/module_not_extended/filter.ts   |  5 ++
 .../testing/helpers/gridBaseMocks.js          |  8 +--
 16 files changed, 176 insertions(+), 102 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/data_grid/module_not_extended/filter.ts
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/filter/filter_controller.ts
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/filter/filter_module.ts
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_filter_controller.ts
 create mode 100644 packages/devextreme/js/__internal/grids/tree_list/module_not_extended/filter.ts

diff --git a/packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts b/packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts
index 546d0b54c089..fa9cba25a7fe 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts
@@ -1,6 +1,7 @@
 import './module_not_extended/column_headers';
 import './m_columns_controller';
 import './data_source/data_source_module';
+import './module_not_extended/filter';
 import './module_not_extended/data_controller';
 import './module_not_extended/sorting';
 import './module_not_extended/rows';
@@ -39,6 +40,7 @@ gridCore.registerModulesOrder([
   'masterDetail',
   'validating',
   'adaptivity',
+  'filter',
   'data',
   'virtualScrolling',
   'aiColumn',
diff --git a/packages/devextreme/js/__internal/grids/data_grid/module_not_extended/filter.ts b/packages/devextreme/js/__internal/grids/data_grid/module_not_extended/filter.ts
new file mode 100644
index 000000000000..842edf76f69d
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/data_grid/module_not_extended/filter.ts
@@ -0,0 +1,5 @@
+import { filterModule } from '@ts/grids/grid_core/filter/filter_module';
+
+import gridCore from '../m_core';
+
+gridCore.registerModule('filter', filterModule);
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index 9683aeda22f6..92fe5c4143a4 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -125,7 +125,7 @@ export class DataController extends modules.Controller {
   // TODO public controller
   public _columnsController!: Controllers['columns'];
 
-  private _filterExcludedColumn: Column | null = null;
+  protected filterController!: Controllers['filter'];
 
   private loadErrorHandlerProxy!: (e: Error | string) => void;
 
@@ -138,6 +138,7 @@ export class DataController extends modules.Controller {
     this._cachedProcessedItems = null;
     this.dataSourceController = this.getController('dataSource');
     this._columnsController = this.getController('columns');
+    this.filterController = this.getController('filter');
 
     this._isPaging = false;
     this._currentOperationTypes = null;
@@ -328,23 +329,18 @@ export class DataController extends modules.Controller {
     return this.combinedFilter(undefined, returnDataField);
   }
 
-  public getFilterExcludedColumn(): Column | null {
-    return this._filterExcludedColumn;
-  }
-
   public getCombinedFilterWithExcludedColumn(
     excludedColumn: Column | null,
     returnDataField?: boolean,
   ): DataFilter {
-    this._filterExcludedColumn = excludedColumn;
-    try {
-      return this.getCombinedFilter(returnDataField);
-    } finally {
-      this._filterExcludedColumn = null;
-    }
+    return this.combinedFilter(undefined, returnDataField, excludedColumn);
   }
 
-  private combinedFilter(filter: DataFilter, returnDataField?: boolean): DataFilter {
+  private combinedFilter(
+    filter: DataFilter,
+    returnDataField?: boolean,
+    excludedColumn: Column | null = null,
+  ): DataFilter {
     if (!this._dataSource) {
       return filter;
     }
@@ -355,7 +351,7 @@ export class DataController extends modules.Controller {
       || this._columnsController.isAllDataTypesDefined();
 
     if (isColumnsTypesDefined) {
-      const additionalFilter = this.calculateAdditionalFilter();
+      const additionalFilter = this.filterController.getAdditionalFilter(excludedColumn);
 
       combined = additionalFilter
         ? gridCoreUtils.combineFilters([additionalFilter, combined])
@@ -569,7 +565,7 @@ export class DataController extends modules.Controller {
         this._isDataSourceApplying = false;
 
         const hasAdditionalFilter = (): boolean => {
-          const additionalFilter = this.calculateAdditionalFilter();
+          const additionalFilter = this.filterController.getAdditionalFilter();
           return Boolean(additionalFilter?.length);
         };
 
@@ -1213,13 +1209,6 @@ export class DataController extends modules.Controller {
     this.loadingChanged.fire(this.isLoading(), this._loadingText);
   }
 
-  /**
-   * @extended: filter_row, filter_sync, header_filter, search
-   */
-  protected calculateAdditionalFilter(): DataFilter {
-    return null;
-  }
-
   /**
    * @extended: filter_sync, virtual_scrolling
    */
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter/filter_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/filter/filter_controller.ts
new file mode 100644
index 000000000000..450bdbc8688d
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter/filter_controller.ts
@@ -0,0 +1,28 @@
+import type { LangParams } from '@js/common/data';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
+import type { DataFilter } from '@ts/grids/grid_core/data_controller/types';
+import modules from '@ts/grids/grid_core/m_modules';
+import type { Controllers } from '@ts/grids/grid_core/m_types';
+
+export class FilterController extends modules.Controller {
+  protected columnsController!: Controllers['columns'];
+
+  protected dataSourceController!: Controllers['dataSource'];
+
+  public init(): void {
+    this.columnsController = this.getController('columns');
+    this.dataSourceController = this.getController('dataSource');
+  }
+
+  protected getLangParams(): LangParams | undefined {
+    return this.dataSourceController.getDataSource()?.loadOptions?.()?.langParams;
+  }
+
+  /**
+   * @extended: filter_row, filter_sync, header_filter, search
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public getAdditionalFilter(excludedColumn?: Column | null): DataFilter {
+    return null;
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter/filter_module.ts b/packages/devextreme/js/__internal/grids/grid_core/filter/filter_module.ts
new file mode 100644
index 000000000000..942a85e95802
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter/filter_module.ts
@@ -0,0 +1,9 @@
+import type { Module } from '@ts/grids/grid_core/m_types';
+
+import { FilterController } from './filter_controller';
+
+export const filterModule: Module = {
+  controllers: {
+    filter: FilterController,
+  },
+};
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_row/m_filter_row.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_row/m_filter_row.ts
index 0c977a8c22ff..318f6a928d94 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_row/m_filter_row.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_row/m_filter_row.ts
@@ -16,9 +16,10 @@ import type { ColumnHeadersView } from '@ts/grids/grid_core/column_headers/m_col
 import type { ColumnsController } from '@ts/grids/grid_core/columns_controller/m_columns_controller';
 import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { ColumnsResizerViewController } from '@ts/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering';
-import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { DataFilter } from '@ts/grids/grid_core/data_controller/types';
 import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type { EditingController } from '@ts/grids/grid_core/editing/m_editing';
+import type { FilterController } from '@ts/grids/grid_core/filter/filter_controller';
 import type { HeaderPanel } from '@ts/grids/grid_core/header_panel/m_header_panel';
 import modules from '@ts/grids/grid_core/m_modules';
 import type { ModuleType } from '@ts/grids/grid_core/m_types';
@@ -815,20 +816,20 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
   }
 };
 
-const data = (Base: ModuleType<DataController>) => class DataControllerFilterRowExtender extends Base {
+const filterController = (
+  Base: ModuleType<FilterController>,
+) => class FilterControllerFilterRowExtender extends Base {
   private skipCalculateColumnFilters() {
     return false;
   }
 
-  protected calculateAdditionalFilter() {
+  public getAdditionalFilter(excludedColumn?: Column | null): DataFilter {
     if (this.skipCalculateColumnFilters()) {
-      return super.calculateAdditionalFilter();
+      return super.getAdditionalFilter(excludedColumn);
     }
 
-    const filters = [super.calculateAdditionalFilter()];
-    const columns = this._columnsController.getVisibleColumns(null, true);
-
-    const excludedColumn = this.getFilterExcludedColumn();
+    const filters = [super.getAdditionalFilter(excludedColumn)];
+    const columns = this.columnsController.getVisibleColumns(null, true);
 
     each(columns, function () {
       const shouldSkip = excludedColumn?.index === this.index;
@@ -1050,7 +1051,7 @@ export const filterRowModule = {
   },
   extenders: {
     controllers: {
-      data,
+      filter: filterController,
       columnsResizer,
       editing,
     },
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_data_controller.ts
index f55b1c37f880..6d8bbfdeab4e 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_data_controller.ts
@@ -1,18 +1,11 @@
 import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred } from '@js/core/utils/deferred';
-import { isDefined } from '@js/core/utils/type';
-import {
-  getFilterExpression,
-  removeFieldConditionsFromFilter,
-} from '@ts/filter_builder/m_utils';
 import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
-import type { DataFilter } from '@ts/grids/grid_core/data_controller/types';
 import { FILTER_TYPES_EXCLUDE } from '@ts/grids/grid_core/filter_sync/const';
 import type { FilterSyncController } from '@ts/grids/grid_core/filter_sync/m_filter_sync';
-import { getColumnIdentifier } from '@ts/grids/grid_core/filter_sync/utils';
+import { isFilterSyncActive } from '@ts/grids/grid_core/filter_sync/utils';
 import type { ModuleType, OptionChanged } from '@ts/grids/grid_core/m_types';
-import gridCoreUtils from '@ts/grids/grid_core/m_utils';
 
 export interface FilterSyncDataControllerExtension {
   isFilterSyncActive: () => boolean | undefined;
@@ -67,47 +60,7 @@ export const filterSyncDataControllerExtender = (
   }
 
   public isFilterSyncActive(): boolean | undefined {
-    const filterSyncEnabledValue = this.option('filterSyncEnabled');
-    return filterSyncEnabledValue === 'auto' ? this.option('filterPanel.visible') : filterSyncEnabledValue;
-  }
-
-  private skipCalculateColumnFilters(): boolean | undefined {
-    const hasFilterValueOrSyncing = isDefined(this.option('filterValue'))
-      || this.filterSyncController.isSyncingColumnOptions();
-
-    return hasFilterValueOrSyncing && this.isFilterSyncActive();
-  }
-
-  protected calculateAdditionalFilter(): DataFilter {
-    const columns = this._columnsController.getFilteringColumns();
-    const isFilterValueDisabled = this.option('filterPanel.filterEnabled') === false;
-
-    if (!columns?.length || isFilterValueDisabled) {
-      return super.calculateAdditionalFilter();
-    }
-
-    const filters = [super.calculateAdditionalFilter()];
-    let filterValue = this.option('filterValue');
-
-    if (this.isFilterSyncActive()) {
-      const excludedColumn = this.getFilterExcludedColumn();
-
-      if (isDefined(excludedColumn) && filterValue) {
-        filterValue = removeFieldConditionsFromFilter(
-          filterValue,
-          getColumnIdentifier(excludedColumn),
-        );
-      }
-    }
-
-    const customOperations = this.filterSyncController.getCustomFilterOperations();
-    const calculatedFilterValue: DataFilter = getFilterExpression(filterValue, columns, customOperations, 'filterBuilder');
-
-    if (calculatedFilterValue) {
-      filters.push(calculatedFilterValue);
-    }
-
-    return gridCoreUtils.combineFilters(filters);
+    return isFilterSyncActive(this);
   }
 
   private parseColumnPropertyName(fullName: string): string | null {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_filter_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_filter_controller.ts
new file mode 100644
index 000000000000..e1c7e39c5e56
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_filter_controller.ts
@@ -0,0 +1,59 @@
+import { isDefined } from '@js/core/utils/type';
+import {
+  getFilterExpression,
+  removeFieldConditionsFromFilter,
+} from '@ts/filter_builder/m_utils';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
+import type { DataFilter } from '@ts/grids/grid_core/data_controller/types';
+import type { FilterController } from '@ts/grids/grid_core/filter/filter_controller';
+import type { FilterSyncController } from '@ts/grids/grid_core/filter_sync/m_filter_sync';
+import { getColumnIdentifier, isFilterSyncActive } from '@ts/grids/grid_core/filter_sync/utils';
+import type { ModuleType } from '@ts/grids/grid_core/m_types';
+import gridCoreUtils from '@ts/grids/grid_core/m_utils';
+
+export const filterSyncFilterControllerExtender = (
+  Base: ModuleType<FilterController>,
+): ModuleType<FilterController> => class FilterControllerFilterSyncExtender extends Base {
+  private filterSyncController!: FilterSyncController;
+
+  public init(): void {
+    this.filterSyncController = this.getController('filterSync');
+
+    super.init();
+  }
+
+  private skipCalculateColumnFilters(): boolean | undefined {
+    const hasFilterValueOrSyncing = isDefined(this.option('filterValue'))
+      || this.filterSyncController.isSyncingColumnOptions();
+
+    return hasFilterValueOrSyncing && isFilterSyncActive(this);
+  }
+
+  public getAdditionalFilter(excludedColumn?: Column | null): DataFilter {
+    const columns = this.columnsController.getFilteringColumns();
+    const isFilterValueDisabled = this.option('filterPanel.filterEnabled') === false;
+
+    if (!columns?.length || isFilterValueDisabled) {
+      return super.getAdditionalFilter(excludedColumn);
+    }
+
+    const filters = [super.getAdditionalFilter(excludedColumn)];
+    let filterValue = this.option('filterValue');
+
+    if (isFilterSyncActive(this) && isDefined(excludedColumn) && filterValue) {
+      filterValue = removeFieldConditionsFromFilter(
+        filterValue,
+        getColumnIdentifier(excludedColumn),
+      );
+    }
+
+    const customOperations = this.filterSyncController.getCustomFilterOperations();
+    const calculatedFilterValue: DataFilter = getFilterExpression(filterValue, columns, customOperations, 'filterBuilder');
+
+    if (calculatedFilterValue) {
+      filters.push(calculatedFilterValue);
+    }
+
+    return gridCoreUtils.combineFilters(filters);
+  }
+};
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/filter_sync_module.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/filter_sync_module.ts
index dc3ee7dd096f..64b53f5f3a5d 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/filter_sync_module.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/filter_sync_module.ts
@@ -2,6 +2,7 @@ import type { InternalGridOptions } from '@ts/grids/grid_core/m_types';
 
 import { filterSyncColumnHeadersViewExtender } from './extenders/filter_sync_column_headers_view';
 import { filterSyncDataControllerExtender } from './extenders/filter_sync_data_controller';
+import { filterSyncFilterControllerExtender } from './extenders/filter_sync_filter_controller';
 import { FilterSyncController } from './m_filter_sync';
 
 export const filterSyncModule = {
@@ -17,6 +18,7 @@ export const filterSyncModule = {
   extenders: {
     controllers: {
       data: filterSyncDataControllerExtender,
+      filter: filterSyncFilterControllerExtender,
     },
     views: {
       columnHeadersView: filterSyncColumnHeadersViewExtender,
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/utils.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/utils.ts
index 6a7e68056905..759ae671b25b 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/utils.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/utils.ts
@@ -8,6 +8,7 @@ import {
 } from '@ts/filter_builder/m_utils';
 import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { FilterValue, FilterValueCondition } from '@ts/grids/grid_core/data_controller/types';
+import type { ModuleItem } from '@ts/grids/grid_core/m_modules';
 
 import { FILTER_ROW_OPERATIONS, FILTER_TYPES_EXCLUDE, FILTER_TYPES_INCLUDE } from './const';
 import type {
@@ -29,6 +30,16 @@ const getFilterTypeByOperation = (operation: unknown): Column['filterType'] | un
   }
 };
 
+// A free function so that both the `data` and the `filter` extender can read the flag
+// without one of them reaching for the other controller.
+export const isFilterSyncActive = (
+  moduleItem: Pick<ModuleItem, 'option'>,
+): boolean | undefined => {
+  const filterSyncEnabled = moduleItem.option('filterSyncEnabled');
+
+  return filterSyncEnabled === 'auto' ? moduleItem.option('filterPanel.visible') : filterSyncEnabled;
+};
+
 export const getColumnIdentifier = (
   column: FilterSyncColumn,
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
index 5ef75a4f093f..b0d69199395c 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
@@ -15,8 +15,11 @@ import { isDefined, isFunction, isObject } from '@js/core/utils/type';
 import { restoreFocus, saveFocusedElementInfo } from '@js/ui/shared/accessibility';
 import filterUtils from '@js/ui/shared/filtering';
 import type { ColumnHeadersView } from '@ts/grids/grid_core/column_headers/m_column_headers';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { DataFilter } from '@ts/grids/grid_core/data_controller/types';
 import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
+import type { FilterController } from '@ts/grids/grid_core/filter/filter_controller';
 import type { HeaderPanel } from '@ts/grids/grid_core/header_panel/m_header_panel';
 import Modules from '@ts/grids/grid_core/m_modules';
 import type { ModuleType } from '@ts/grids/grid_core/m_types';
@@ -494,20 +497,20 @@ export function invertFilterExpression(filter) {
   return ['!', filter];
 }
 
-const data = (Base: ModuleType<DataController>) => class DataControllerFilterRowExtender extends Base {
+const filterController = (
+  Base: ModuleType<FilterController>,
+) => class FilterControllerHeaderFilterExtender extends Base {
   private skipCalculateColumnFilters() {
     return false;
   }
 
-  protected calculateAdditionalFilter() {
+  public getAdditionalFilter(excludedColumn?: Column | null): DataFilter {
     if (this.skipCalculateColumnFilters()) {
-      return super.calculateAdditionalFilter();
+      return super.getAdditionalFilter(excludedColumn);
     }
 
-    const that = this;
-    const filters = [super.calculateAdditionalFilter()];
-    const columns = that._columnsController.getVisibleColumns(null, true);
-    const excludedColumn = this.getFilterExcludedColumn();
+    const filters = [super.getAdditionalFilter(excludedColumn)];
+    const columns = this.columnsController.getVisibleColumns(null, true);
 
     each(columns, (_, column) => {
       let filter;
@@ -577,7 +580,7 @@ export const headerFilterModule = {
   },
   extenders: {
     controllers: {
-      data,
+      filter: filterController,
     },
     views: {
       columnHeadersView,
diff --git a/packages/devextreme/js/__internal/grids/grid_core/m_types.ts b/packages/devextreme/js/__internal/grids/grid_core/m_types.ts
index d056690762f3..9204705e55f0 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/m_types.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/m_types.ts
@@ -210,6 +210,7 @@ export interface Controllers {
   editorFactory: import('./editor_factory/m_editor_factory').EditorFactory;
   errorHandling: import('./error_handling/error_handling_view_controller').ErrorHandlingViewController;
   export: import('../data_grid/export/m_export').ExportController;
+  filter: import('./filter/filter_controller').FilterController;
   filterSync: import('./filter_sync/m_filter_sync').FilterSyncController;
   focus: import('./focus/m_focus').FocusController;
   headerFilter: import('./header_filter/m_header_filter').HeaderFilterController;
diff --git a/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts b/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
index 30ae6e25a9b7..08bad15c6edd 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
@@ -13,6 +13,7 @@ import type { ToolbarItem } from '@ts/grids/new/grid_core/toolbar/types';
 
 import type { DataController } from '../data_controller/data_controller';
 import type { DataFilter, UserState } from '../data_controller/types';
+import type { FilterController } from '../filter/filter_controller';
 import type { HeaderPanel } from '../header_panel/m_header_panel';
 import modules from '../m_modules';
 import type { ModuleType, OptionChanged } from '../m_types';
@@ -69,23 +70,27 @@ const dataController = (
     };
   }
 
-  protected calculateAdditionalFilter(): DataFilter {
-    const dataSource = this.getDataSource();
-    const langParams = dataSource?.loadOptions?.()?.langParams;
+  public searchByText(text: string | undefined): void {
+    this.option('searchPanel.text', text);
+  }
+};
 
-    const filter = super.calculateAdditionalFilter();
-    const searchFilter = this.calculateSearchFilter(this.option('searchPanel.text'), langParams);
+const filterController = (
+  base: ModuleType<FilterController>,
+) => class FilterControllerSearchExtender extends base {
+  public getAdditionalFilter(excludedColumn?: Column | null): DataFilter {
+    const filter = super.getAdditionalFilter(excludedColumn);
+    const searchFilter = this.calculateSearchFilter(
+      this.option('searchPanel.text'),
+      this.getLangParams(),
+    );
 
     return gridCoreUtils.combineFilters([filter, searchFilter]);
   }
 
-  public searchByText(text: string | undefined): void {
-    this.option('searchPanel.text', text);
-  }
-
   private calculateSearchFilter(text: string | undefined, langParams?: LangParams): DataFilter {
     let column;
-    const columns = this._columnsController.getColumns();
+    const columns = this.columnsController.getColumns();
     const searchVisibleColumnsOnly = this.option('searchPanel.searchVisibleColumnsOnly');
     let lookup;
     const filters: any[] = [];
@@ -426,6 +431,7 @@ export const searchModule = {
   extenders: {
     controllers: {
       data: dataController,
+      filter: filterController,
     },
     views: {
       rowsView,
diff --git a/packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts b/packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts
index 41ccc3606941..e226743ad372 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts
@@ -1,6 +1,7 @@
 import './module_not_extended/column_headers';
 import './m_columns_controller';
 import './data_source/data_source_module';
+import './module_not_extended/filter';
 import './data_controller/m_data_controller';
 import './module_not_extended/sorting';
 import './rows/m_rows';
@@ -34,6 +35,7 @@ treeListCore.registerModulesOrder([
   'masterDetail',
   'validating',
   'adaptivity',
+  'filter',
   'data',
   'virtualScrolling',
   'aiColumn',
diff --git a/packages/devextreme/js/__internal/grids/tree_list/module_not_extended/filter.ts b/packages/devextreme/js/__internal/grids/tree_list/module_not_extended/filter.ts
new file mode 100644
index 000000000000..dc4b83b8545c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/tree_list/module_not_extended/filter.ts
@@ -0,0 +1,5 @@
+import { filterModule } from '@ts/grids/grid_core/filter/filter_module';
+
+import treeListCore from '../m_core';
+
+treeListCore.registerModule('filter', filterModule);
diff --git a/packages/devextreme/testing/helpers/gridBaseMocks.js b/packages/devextreme/testing/helpers/gridBaseMocks.js
index 41f2f2da46dc..baa77c72496e 100644
--- a/packages/devextreme/testing/helpers/gridBaseMocks.js
+++ b/packages/devextreme/testing/helpers/gridBaseMocks.js
@@ -282,8 +282,6 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
 
             getCombinedFilter: commonUtils.noop,
 
-            getFilterExcludedColumn: commonUtils.noop,
-
             getCombinedFilterWithExcludedColumn: commonUtils.noop,
 
             getRowIndexByKey: function(key) {
@@ -1016,9 +1014,9 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
         _subscribeToEvents(rootElement) { }
     };
 
-    // The dataSource controller is a leaf that the data controller resolves in init(),
-    // so it is always included rather than listed by every caller.
-    const ALWAYS_INCLUDED_MODULES = ['dataSource'];
+    // The dataSource and filter controllers are leaves that the data controller resolves
+    // in init(), so they are always included rather than listed by every caller.
+    const ALWAYS_INCLUDED_MODULES = ['dataSource', 'filter'];
 
     exports['setup' + nameWidget + 'Modules'] = function(that, moduleNames, options) {
         const modules = [];

From 5b08774cf22a4082d5dfd534260d1d1f207ffbc0 Mon Sep 17 00:00:00 2001
From: "ilya.kharchenko" <14272298+IlyaKhD@users.noreply.github.com>
Date: Wed, 9 Sep 2026 06:48:31 +0000
Subject: [PATCH 28/45] feat(ci): build flaky test report for the repository
 monitor (#35100)

---
 .github/workflows/repository-check.yml        |  89 ++++++
 .github/workflows/testcafe_tests.yml          |   7 +-
 pnpm-lock.yaml                                |  28 ++
 pnpm-workspace.yaml                           |   1 +
 tools/.prettierignore                         |   3 +
 tools/.prettierrc.yaml                        |  12 +
 tools/flaky-test-reporter/jest.config.js      |   4 +
 tools/flaky-test-reporter/package.json        |  27 ++
 tools/flaky-test-reporter/src/main.test.ts    |  44 +++
 tools/flaky-test-reporter/src/main.ts         | 102 +++++++
 .../flaky-test-reporter/src/markdown.test.ts  | 237 +++++++++++++++
 tools/flaky-test-reporter/src/markdown.ts     | 114 ++++++++
 .../src/primitives/github.test.ts             | 181 ++++++++++++
 .../src/primitives/github.ts                  | 134 +++++++++
 .../src/primitives/zip.test.ts                |  50 ++++
 .../src/primitives/zip.test.utils.ts          |  52 ++++
 .../flaky-test-reporter/src/primitives/zip.ts |  74 +++++
 tools/flaky-test-reporter/src/report.test.ts  | 275 ++++++++++++++++++
 tools/flaky-test-reporter/src/report.ts       | 274 +++++++++++++++++
 tools/flaky-test-reporter/src/types.ts        |  72 +++++
 tools/flaky-test-reporter/src/utils.test.ts   |  44 +++
 tools/flaky-test-reporter/src/utils.ts        |  30 ++
 tools/flaky-test-reporter/tsconfig.json       |   9 +
 tools/flaky-test-reporter/tsconfig.test.json  |   8 +
 tools/jest.config.base.js                     |  10 +
 tools/scripts/tsconfig.json                   |  18 +-
 tools/tsconfig.base.json                      |  17 ++
 27 files changed, 1898 insertions(+), 18 deletions(-)
 create mode 100644 tools/.prettierignore
 create mode 100644 tools/.prettierrc.yaml
 create mode 100644 tools/flaky-test-reporter/jest.config.js
 create mode 100644 tools/flaky-test-reporter/package.json
 create mode 100644 tools/flaky-test-reporter/src/main.test.ts
 create mode 100644 tools/flaky-test-reporter/src/main.ts
 create mode 100644 tools/flaky-test-reporter/src/markdown.test.ts
 create mode 100644 tools/flaky-test-reporter/src/markdown.ts
 create mode 100644 tools/flaky-test-reporter/src/primitives/github.test.ts
 create mode 100644 tools/flaky-test-reporter/src/primitives/github.ts
 create mode 100644 tools/flaky-test-reporter/src/primitives/zip.test.ts
 create mode 100644 tools/flaky-test-reporter/src/primitives/zip.test.utils.ts
 create mode 100644 tools/flaky-test-reporter/src/primitives/zip.ts
 create mode 100644 tools/flaky-test-reporter/src/report.test.ts
 create mode 100644 tools/flaky-test-reporter/src/report.ts
 create mode 100644 tools/flaky-test-reporter/src/types.ts
 create mode 100644 tools/flaky-test-reporter/src/utils.test.ts
 create mode 100644 tools/flaky-test-reporter/src/utils.ts
 create mode 100644 tools/flaky-test-reporter/tsconfig.json
 create mode 100644 tools/flaky-test-reporter/tsconfig.test.json
 create mode 100644 tools/jest.config.base.js
 create mode 100644 tools/tsconfig.base.json

diff --git a/.github/workflows/repository-check.yml b/.github/workflows/repository-check.yml
index 095674fa2d4e..2eae3e61ae00 100644
--- a/.github/workflows/repository-check.yml
+++ b/.github/workflows/repository-check.yml
@@ -8,9 +8,95 @@ on:
     branches:
       - main
 
+permissions: {}
+
 jobs:
+  collect-flaky-reports:
+    name: Collect flaky reports
+    runs-on: ubuntu-slim
+    permissions:
+      contents: read # checkout
+      actions: read # list workflow runs and download their artifacts
+    # Flaky collection must never break the repository check it feeds.
+    continue-on-error: true
+    outputs:
+      details: ${{ steps.collect.outputs.details }}
+
+    steps:
+    - name: Get sources
+      uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6.1.0
+
+    - name: Use Node.js
+      uses: actions/setup-node@249970729cb0ef3589644e2896645e5dc5ba9c38 # v6.5.0
+      with:
+        node-version-file: '.node-version'
+
+    - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      with:
+        run_install: false
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile --filter flaky-test-reporter...
+
+    - name: Collect flaky test candidates
+      id: collect
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        WINDOW_HOURS: 72
+      run: |
+        # tee opens the log before the tool runs, so the directory must already exist.
+        mkdir -p "$GITHUB_WORKSPACE/artifacts"
+        report="$GITHUB_WORKSPACE/artifacts/flaky-tests-report.json"
+        markdown="$GITHUB_WORKSPACE/artifacts/flaky-tests-report.md"
+        log="$GITHUB_WORKSPACE/artifacts/collect.log"
+
+        # --silent keeps pnpm's own banner out of the summary; 2>&1 keeps the tool's warnings in.
+        # tee stores the plain text for the summary, then sed turns the tool's warnings into
+        # GitHub annotations so they surface on the run page.
+        pnpm --silent --filter flaky-test-reporter run collect -- \
+          --repo "${{ github.repository }}" \
+          --workflow testcafe_tests.yml \
+          --artifact flaky-candidates \
+          --branch "${{ github.ref_name }}" \
+          --window-hours "$WINDOW_HOURS" \
+          --out-json "$report" \
+          --out-markdown "$markdown" 2>&1 \
+          | tee "$log" \
+          | sed -e 's/^warning: /::warning::/' -e 's/^Collection failed: /::error::/'
+
+        {
+          echo "## Flaky test candidates"
+          echo ""
+          echo '```'
+          cat "$log"
+          echo '```'
+        } >> "$GITHUB_STEP_SUMMARY"
+
+        # Multiline output form, so the markdown crosses the job boundary as-is. The delimiter
+        # must not occur in the content, which markdown headings and tables never produce.
+        {
+          echo 'details<<FLAKY_DETAILS_EOF'
+          cat "$markdown"
+          echo 'FLAKY_DETAILS_EOF'
+        } >> "$GITHUB_OUTPUT"
+
+    - name: Upload flaky test report
+      if: ${{ !cancelled() }}
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+      with:
+        name: flaky-tests-report
+        path: |
+          ${{ github.workspace }}/artifacts/flaky-tests-report.json
+          ${{ github.workspace }}/artifacts/collect.log
+        retention-days: 7
+        if-no-files-found: ignore
+
   invoke:
     name: Invoke
+    needs: [collect-flaky-reports]
+    permissions:
+      contents: read # the reusable workflow checks this repository out
+    if: ${{ !cancelled() }}
     uses: DevExpress/github-actions/.github/workflows/repository-check.yml@repository-check
     with:
       config: |
@@ -20,3 +106,6 @@ jobs:
             'GHSA-848j-6mx2-7j84', // elliptic
           ]
         }
+      # Markdown appended to this repo's monitor issue body. Empty when the collect job
+      # produced nothing, which makes the shared workflow skip publishing it.
+      extraDetails: ${{ needs.collect-flaky-reports.outputs.details }}
diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml
index 45f067d17332..432134804233 100644
--- a/.github/workflows/testcafe_tests.yml
+++ b/.github/workflows/testcafe_tests.yml
@@ -472,6 +472,9 @@ jobs:
         new_flakes_summary=./artifacts/new-flakes-summary.txt
         new_flakes=./artifacts/flaky-candidates.jsonl
         report_json=./artifacts/flaky-candidates.json
+        # base_ref is empty for push and merge_group, which carry the target elsewhere.
+        base_branch="${{ github.base_ref || github.event.merge_group.base_ref || github.ref_name }}"
+        base_branch="${base_branch#refs/heads/}"
         mkdir -p ./artifacts
         : > "$new_flakes_summary"
         : > "$new_flakes"
@@ -560,8 +563,8 @@ jobs:
             fi
             jq -cn --arg test "$name" --arg sourceJob "$job_name" --arg theme "$theme" \
               --arg componentFolder "$componentFolder" --arg timezone "$timezone" \
-              --arg platform "$platform" --arg verdict "$verdict" \
-              '{ test: $test, sourceJob: $sourceJob, theme: $theme, componentFolder: $componentFolder, timezone: $timezone, platform: $platform, verdict: $verdict }' \
+              --arg platform "$platform" --arg verdict "$verdict" --arg baseBranch "$base_branch" \
+              '{ test: $test, sourceJob: $sourceJob, theme: $theme, componentFolder: $componentFolder, timezone: $timezone, platform: $platform, verdict: $verdict, baseBranch: $baseBranch }' \
               >> "$new_flakes"
           done < <(jq -r '.tests[]' "$report")
         done
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 38ad9bbed3fe..9853abf7f4fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2192,6 +2192,34 @@ importers:
         specifier: 'catalog:'
         version: 3.7.5(supports-color@7.2.0)
 
+  tools/flaky-test-reporter:
+    dependencies:
+      yargs:
+        specifier: 17.7.2
+        version: 17.7.2
+    devDependencies:
+      '@types/jest':
+        specifier: 30.0.0
+        version: 30.0.0
+      '@types/node':
+        specifier: catalog:tools
+        version: 20.19.37
+      '@types/yargs':
+        specifier: 17.0.35
+        version: 17.0.35
+      prettier:
+        specifier: catalog:tools
+        version: 3.5.3
+      ts-jest:
+        specifier: 29.4.12
+        version: 29.4.12(@babel/core@7.29.7)(@jest/transform@30.4.1)(@jest/types@30.4.1)(babel-jest@30.4.1(@babel/core@7.29.7))(jest-util@30.4.1)(jest@30.4.2(@types/node@20.19.37)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.30(@swc/helpers@0.5.21))(@types/node@20.19.37)(typescript@5.9.3)))(typescript@5.9.3)
+      ts-node:
+        specifier: catalog:tools
+        version: 10.9.2(@swc/core@1.15.30(@swc/helpers@0.5.21))(@types/node@20.19.37)(typescript@5.9.3)
+      typescript:
+        specifier: catalog:tools
+        version: 5.9.3
+
 packages:
 
   '@adobe/css-tools@4.4.4':
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 005b76c8b0a8..32f077326d00 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,6 +3,7 @@ packages:
   - 'e2e/*'
   - 'packages/*'
   - '!packages/sbom'
+  - 'tools/*'
 
 linkWorkspacePackages: true
 preferWorkspacePackages: true
diff --git a/tools/.prettierignore b/tools/.prettierignore
new file mode 100644
index 000000000000..090fc6536af2
--- /dev/null
+++ b/tools/.prettierignore
@@ -0,0 +1,3 @@
+# Shared by every tools/* package. Prettier does not search parent directories for this file,
+# so each package passes it explicitly via --ignore-path.
+*.json
diff --git a/tools/.prettierrc.yaml b/tools/.prettierrc.yaml
new file mode 100644
index 000000000000..08e20ffc0b60
--- /dev/null
+++ b/tools/.prettierrc.yaml
@@ -0,0 +1,12 @@
+arrowParens: always
+bracketSameLine: true
+bracketSpacing: true
+endOfLine: lf
+experimentalOperatorPosition: start
+objectWrap: preserve
+printWidth: 100
+quoteProps: preserve
+semi: true
+singleQuote: true
+tabWidth: 2
+trailingComma: all
diff --git a/tools/flaky-test-reporter/jest.config.js b/tools/flaky-test-reporter/jest.config.js
new file mode 100644
index 000000000000..ae286b8ce8ad
--- /dev/null
+++ b/tools/flaky-test-reporter/jest.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  displayName: 'flaky-test-reporter',
+  preset: '../jest.config.base.js',
+};
diff --git a/tools/flaky-test-reporter/package.json b/tools/flaky-test-reporter/package.json
new file mode 100644
index 000000000000..6a5ef539078c
--- /dev/null
+++ b/tools/flaky-test-reporter/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "flaky-test-reporter",
+  "version": "26.2.0",
+  "type": "commonjs",
+  "private": true,
+  "author": "Developer Express Inc.",
+  "license": "MIT",
+  "scripts": {
+    "collect": "ts-node src/main.ts",
+    "format": "prettier --write . --ignore-path ../.prettierignore",
+    "format:check": "prettier --check . --ignore-path ../.prettierignore",
+    "lint": "pnpm run format:check",
+    "test": "jest"
+  },
+  "dependencies": {
+    "yargs": "17.7.2"
+  },
+  "devDependencies": {
+    "@types/jest": "30.0.0",
+    "@types/node": "catalog:tools",
+    "@types/yargs": "17.0.35",
+    "prettier": "catalog:tools",
+    "ts-jest": "29.4.12",
+    "ts-node": "catalog:tools",
+    "typescript": "catalog:tools"
+  }
+}
diff --git a/tools/flaky-test-reporter/src/main.test.ts b/tools/flaky-test-reporter/src/main.test.ts
new file mode 100644
index 000000000000..7d09cbcaffeb
--- /dev/null
+++ b/tools/flaky-test-reporter/src/main.test.ts
@@ -0,0 +1,44 @@
+import { parseArgs } from './main';
+
+const flags = [
+  '--repo',
+  'o/r',
+  '--workflow',
+  'testcafe_tests.yml',
+  '--artifact',
+  'flaky-candidates',
+  '--branch',
+  'main',
+  '--window-hours',
+  '48',
+  '--out-json',
+  'report.json',
+  '--out-markdown',
+  'report.md',
+];
+
+describe('parseArgs', () => {
+  it('parses the flags', () => {
+    expect(parseArgs(flags)).toMatchObject({
+      repo: 'o/r',
+      workflow: 'testcafe_tests.yml',
+      artifact: 'flaky-candidates',
+      branch: 'main',
+      windowHours: 48,
+      outJson: 'report.json',
+      outMarkdown: 'report.md',
+    });
+  });
+
+  it('parses identically when invoked through `pnpm run <script> --`, which forwards the separator', () => {
+    expect(parseArgs(['--', ...flags])).toMatchObject(parseArgs(flags));
+  });
+
+  it('rejects an unknown flag rather than silently ignoring it', () => {
+    expect(() => parseArgs([...flags, '--bogus', '1'])).toThrow();
+  });
+
+  it('rejects a missing required flag', () => {
+    expect(() => parseArgs(['--repo', 'o/r'])).toThrow(/Missing required argument/i);
+  });
+});
diff --git a/tools/flaky-test-reporter/src/main.ts b/tools/flaky-test-reporter/src/main.ts
new file mode 100644
index 000000000000..309dd96f4983
--- /dev/null
+++ b/tools/flaky-test-reporter/src/main.ts
@@ -0,0 +1,102 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import yargs from 'yargs';
+
+import { renderMarkdown } from './markdown';
+import { CollectOptions, buildFailedReport, collect } from './report';
+import { FlakyTestsReport } from './types';
+
+export interface CliArgs {
+  repo: string;
+  workflow: string;
+  artifact: string;
+  branch: string;
+  windowHours: number;
+  outJson: string;
+  outMarkdown: string;
+}
+
+export function parseArgs(argv: string[]): CliArgs {
+  // `pnpm run <script> -- --flag` forwards the separator itself, and yargs would then read
+  // every option as a positional. Drop it so the tool parses the same however it is invoked.
+  const args = argv[0] === '--' ? argv.slice(1) : argv;
+
+  return (
+    yargs(args)
+      .strict()
+      .version(false)
+      .help(false)
+      // Throw instead of calling process.exit, so a bad invocation is reported through the
+      // single error path at the bottom of this file. The fail handler also stops yargs
+      // dumping its usage to stderr, which that error path would then repeat.
+      .exitProcess(false)
+      .fail((message, error) => {
+        throw error ?? new Error(message);
+      })
+      .option('repo', { type: 'string', demandOption: true, nargs: 1 })
+      .option('workflow', { type: 'string', demandOption: true, nargs: 1 })
+      .option('artifact', { type: 'string', demandOption: true, nargs: 1 })
+      .option('branch', { type: 'string', demandOption: true, nargs: 1 })
+      .option('window-hours', { type: 'number', demandOption: true, nargs: 1 })
+      .option('out-json', { type: 'string', demandOption: true, nargs: 1 })
+      .option('out-markdown', { type: 'string', demandOption: true, nargs: 1 })
+      .parseSync()
+  );
+}
+
+function write(outPath: string, contents: string, label: string): void {
+  const resolved = path.resolve(outPath);
+  fs.mkdirSync(path.dirname(resolved), { recursive: true });
+  fs.writeFileSync(resolved, contents);
+  console.log(`${label} written to: ${resolved}`);
+}
+
+export async function runCli(argv: string[] = process.argv.slice(2)): Promise<FlakyTestsReport> {
+  const args = parseArgs(argv);
+  const token = process.env.GITHUB_TOKEN;
+
+  if (!token) {
+    throw new Error('GITHUB_TOKEN is not set');
+  }
+  if (!Number.isFinite(args.windowHours) || args.windowHours <= 0) {
+    throw new Error(`--window-hours must be a positive number, got: ${args.windowHours}`);
+  }
+
+  const options: CollectOptions = {
+    repo: args.repo,
+    workflow: args.workflow,
+    artifact: args.artifact,
+    branch: args.branch,
+    windowHours: args.windowHours,
+    token,
+  };
+
+  // Never fail for data reasons: a broken sweep still writes a report saying so, so the
+  // repository check it feeds keeps running.
+  let report: FlakyTestsReport;
+  try {
+    report = await collect(options);
+  } catch (error) {
+    console.error(`Collection failed: ${error instanceof Error ? error.message : String(error)}`);
+    report = buildFailedReport(options, error);
+  }
+
+  write(args.outJson, `${JSON.stringify(report, null, 2)}\n`, 'Report');
+  write(args.outMarkdown, `${renderMarkdown(report)}\n`, 'Markdown');
+  console.log(
+    `Found ${report.tests.length} flaky test(s) in ${report.runsWithCandidates} of ${report.runsScanned} scanned run(s)`
+      + ` (${report.totalCandidates} occurrence(s)`
+      + (report.runsUnreadable > 0 ? `, ${report.runsUnreadable} run(s) unreadable` : '')
+      + (report.truncated ? ', list truncated' : '')
+      + ')',
+  );
+
+  return report;
+}
+
+if (require.main === module) {
+  runCli().catch((error: unknown) => {
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+  });
+}
diff --git a/tools/flaky-test-reporter/src/markdown.test.ts b/tools/flaky-test-reporter/src/markdown.test.ts
new file mode 100644
index 000000000000..0ad66e2708bd
--- /dev/null
+++ b/tools/flaky-test-reporter/src/markdown.test.ts
@@ -0,0 +1,237 @@
+import { renderMarkdown } from './markdown';
+import { AggregatedTest, FlakyTestsReport } from './types';
+
+function test_(overrides: Partial<AggregatedTest> = {}): AggregatedTest {
+  return {
+    test: 'DataGrid > sorting works',
+    occurrences: 3,
+    flakyConfirmed: 3,
+    failedAllAttempts: 0,
+    distinctShas: 3,
+    jobs: ['grids / generic.light'],
+    themes: ['generic.light'],
+    platforms: ['desktop'],
+    firstSeen: '2026-09-01T00:00:00Z',
+    lastSeen: '2026-09-03T00:00:00Z',
+    runUrls: ['https://github.com/o/r/actions/runs/1'],
+    ...overrides,
+  };
+}
+
+function makeReport(overrides: Partial<FlakyTestsReport> = {}): FlakyTestsReport {
+  return {
+    succeeded: true,
+    generatedAt: '2026-09-03T00:00:00Z',
+    windowHours: 48,
+    branch: 'main',
+    from: '2026-09-01T00:00:00Z',
+    to: '2026-09-03T00:00:00Z',
+    repo: 'DevExpress/devextreme',
+    workflow: 'testcafe_tests.yml',
+    artifact: 'flaky-candidates',
+    runsScanned: 180,
+    runsWithCandidates: 4,
+    runsUnreadable: 0,
+    totalCandidates: 6,
+    truncated: false,
+    tests: [test_()],
+    ...overrides,
+  };
+}
+
+describe('status line', () => {
+  it('reports a clean window', () => {
+    expect(renderMarkdown(makeReport({ tests: [], totalCandidates: 0 }))).toContain(
+      '✅ no flaky candidates in 48h',
+    );
+  });
+
+  it('surfaces a failed collection rather than reporting it as clean', () => {
+    const description = renderMarkdown(
+      makeReport({ succeeded: false, error: '401 Unauthorized', tests: [], totalCandidates: 0 }),
+    );
+
+    expect(description).toContain('collection failed');
+    expect(description).toContain('401 Unauthorized');
+  });
+
+  it('counts confirmed flakes separately from tests that only ever failed', () => {
+    const description = renderMarkdown(
+      makeReport({
+        tests: [
+          test_({ test: 'a', flakyConfirmed: 2, failedAllAttempts: 0 }),
+          test_({ test: 'b', flakyConfirmed: 0, failedAllAttempts: 1 }),
+        ],
+      }),
+    );
+
+    expect(description).toContain('1 flaky, 1 failed every attempt in 48h');
+  });
+});
+
+describe('renderMarkdown', () => {
+  it('renders the heading, window and run counts', () => {
+    const description = renderMarkdown(makeReport());
+
+    expect(description).toContain('## Flaky Test Candidates');
+    expect(description).toContain('**Window:** 48h');
+    expect(description).toContain('**Runs Scanned:** 180 (4 with candidates)');
+  });
+
+  it('puts each test name in its own heading, so a pipe needs no escaping', () => {
+    const description = renderMarkdown(
+      makeReport({ tests: [test_({ test: 'DataGrid | column fixing' })] }),
+    );
+
+    expect(description).toContain('#### `DataGrid | column fixing`');
+  });
+
+  it('gives every test a numbers-only descriptor table', () => {
+    const description = renderMarkdown(
+      makeReport({
+        tests: [
+          test_({ occurrences: 4, flakyConfirmed: 3, failedAllAttempts: 1, distinctShas: 2 }),
+        ],
+      }),
+    );
+
+    expect(description).toContain(
+      '| Occurrences | Flaky | Failed all attempts | Distinct commits |',
+    );
+    expect(description).toContain('| 4 | 3 | 1 | 2 |');
+  });
+
+  it('lists every candidate, not just the first few', () => {
+    const tests = Array.from({ length: 20 }, (_, i) => test_({ test: `test ${i}` }));
+    const description = renderMarkdown(makeReport({ tests }));
+
+    for (const t of tests) expect(description).toContain(`#### \`${t.test}\``);
+  });
+
+  it('collapses every entry detail behind a details block, leaving only the heading', () => {
+    const description = renderMarkdown(makeReport());
+    const lines = description.split('\n');
+    const heading = lines.findIndex((l) => l.startsWith('#### '));
+    const open = lines.findIndex((l, i) => l === '<details>' && i > heading);
+    const table = lines.findIndex((l) => l.startsWith('| Occurrences'));
+
+    expect(description).toContain('<summary>\u2022\u2022\u2022</summary>');
+    // Only the heading is visible; counts and context are both inside the block.
+    expect(heading).toBeLessThan(open);
+    expect(open).toBeLessThan(table);
+    const block = description.split('<details>').at(-1) ?? '';
+    expect(block).toContain('| Occurrences');
+    expect(block).toContain('**First seen:**');
+  });
+
+  it('includes first and last seen in each entry', () => {
+    const description = renderMarkdown(
+      makeReport({
+        tests: [test_({ firstSeen: '2026-09-01T00:00:00Z', lastSeen: '2026-09-03T00:00:00Z' })],
+      }),
+    );
+
+    expect(description).toContain('**First seen:** 2026-09-01T00:00:00Z');
+    expect(description).toContain('**Last seen:** 2026-09-03T00:00:00Z');
+  });
+
+  it('offers a ready-to-paste quarantine.json for confirmed flakes only', () => {
+    const description = renderMarkdown(
+      makeReport({
+        tests: [
+          test_({ test: 'really flaky', flakyConfirmed: 4 }),
+          test_({ test: 'just broken', flakyConfirmed: 0, failedAllAttempts: 3 }),
+        ],
+      }),
+    );
+
+    expect(description).toContain('Suggested `quarantine.json` (1)');
+    expect(description).toContain('"really flaky"');
+    expect(description).not.toContain('"just broken"');
+  });
+
+  it('emits the quarantine shape runner.ts actually parses', () => {
+    const description = renderMarkdown(
+      makeReport({ tests: [test_({ test: 'a > b' }), test_({ test: 'c > d' })] }),
+    );
+
+    const json = description.split('```json\n')[1].split('\n```')[0];
+
+    // readQuarantinedTests() reads `{ tests: [{ test, file? }] }`; a name->array map is ignored.
+    expect(JSON.parse(json)).toEqual({ tests: [{ test: 'a > b' }, { test: 'c > d' }] });
+  });
+
+  it('omits the quarantine suggestion when nothing was confirmed flaky', () => {
+    const description = renderMarkdown(
+      makeReport({ tests: [test_({ flakyConfirmed: 0, failedAllAttempts: 2 })] }),
+    );
+
+    expect(description).not.toContain('Suggested `quarantine.json`');
+  });
+
+  it('does not read as a clean window when every candidate failed all attempts', () => {
+    const description = renderMarkdown(
+      makeReport({
+        totalCandidates: 2,
+        tests: [test_({ flakyConfirmed: 0, failedAllAttempts: 2, occurrences: 2 })],
+      }),
+    );
+
+    // "0 flaky" alone would look clean; the regression count has to be visible too.
+    expect(description).toContain('0 flaky, 1 failed every attempt in 48h (2 occurrence(s))');
+  });
+
+  it('omits the regression clause when every candidate recovered', () => {
+    expect(renderMarkdown(makeReport())).toContain('1 flaky in 48h');
+  });
+
+  it('says so when the list was capped', () => {
+    expect(renderMarkdown(makeReport({ truncated: true }))).toContain('the test list was capped');
+  });
+
+  it('mentions unreadable runs only when there are some', () => {
+    expect(renderMarkdown(makeReport())).not.toContain('Runs Unreadable');
+    expect(renderMarkdown(makeReport({ runsUnreadable: 3 }))).toContain('**Runs Unreadable:** 3');
+  });
+
+  it('renders a clean window without any entries', () => {
+    const description = renderMarkdown(makeReport({ tests: [], totalCandidates: 0 }));
+
+    expect(description).toContain('✅ no flaky candidates');
+    expect(description).not.toContain('<details>');
+  });
+
+  it('links every run, labelled by run id', () => {
+    const description = renderMarkdown(
+      makeReport({
+        tests: [
+          test_({
+            runUrls: [
+              'https://github.com/o/r/actions/runs/1',
+              'https://github.com/o/r/actions/runs/2',
+            ],
+          }),
+        ],
+      }),
+    );
+
+    expect(description).toContain(
+      [
+        '**Runs:**',
+        '',
+        '- [#1](https://github.com/o/r/actions/runs/1)',
+        '- [#2](https://github.com/o/r/actions/runs/2)',
+      ].join('\n'),
+    );
+  });
+
+  it('lists a single run as a one-item list, not inline', () => {
+    const description = renderMarkdown(
+      makeReport({ tests: [test_({ runUrls: ['https://github.com/o/r/actions/runs/9'] })] }),
+    );
+
+    expect(description).toContain(
+      ['**Runs:**', '', '- [#9](https://github.com/o/r/actions/runs/9)'].join('\n'),
+    );
+  });
+});
diff --git a/tools/flaky-test-reporter/src/markdown.ts b/tools/flaky-test-reporter/src/markdown.ts
new file mode 100644
index 000000000000..1b5be886808d
--- /dev/null
+++ b/tools/flaky-test-reporter/src/markdown.ts
@@ -0,0 +1,114 @@
+import { AggregatedTest, FlakyTestsReport } from './types';
+
+/**
+ * A candidate that passed its quarantine rerun is genuinely flaky. One that failed every
+ * attempt is far more likely a real regression, so the two are never summed into one number.
+ */
+function countConfirmed(report: FlakyTestsReport): number {
+  return report.tests.filter((test) => test.flakyConfirmed > 0).length;
+}
+
+function buildStatus(report: FlakyTestsReport): string {
+  if (!report.succeeded) {
+    return `⚠️ collection failed: ${report.error ?? 'unknown error'}`;
+  }
+  if (report.tests.length === 0) {
+    return `✅ no flaky candidates in ${report.windowHours}h`;
+  }
+  const confirmed = countConfirmed(report);
+  const regressions = report.tests.length - confirmed;
+  // Saying "0 flaky" while candidates failed every attempt reads like a clean window, when
+  // in fact those are the likely regressions.
+  const parts = [`${confirmed} flaky`];
+  if (regressions > 0) {
+    parts.push(`${regressions} failed every attempt`);
+  }
+
+  return `⚠️ ${parts.join(', ')} in ${report.windowHours}h (${report.totalCandidates} occurrence(s))`;
+}
+
+function formatList(values: string[]): string {
+  return values.length > 0 ? values.join(', ') : '—';
+}
+
+const DETAILS_SUMMARY = '\u2022\u2022\u2022';
+
+/** Run pages are addressed by id, which is the last segment of the run URL. */
+function runLink(url: string): string {
+  const id = url.split('/').pop() ?? url;
+  return `[#${id}](${url})`;
+}
+
+function renderTest(test: AggregatedTest): string[] {
+  return [
+    ``,
+    `#### \`${test.test}\``,
+    ``,
+    // Collapsed so a long candidate list stays scannable - the headings alone are the summary.
+    `<details>`,
+    `<summary>${DETAILS_SUMMARY}</summary>`,
+    ``,
+    `| Occurrences | Flaky | Failed all attempts | Distinct commits |`,
+    `|---|---|---|---|`,
+    `| ${test.occurrences} | ${test.flakyConfirmed} | ${test.failedAllAttempts} | ${test.distinctShas} |`,
+    ``,
+    `**First seen:** ${test.firstSeen} · **Last seen:** ${test.lastSeen}`,
+    `**Jobs:** ${formatList(test.jobs)}`,
+    `**Themes:** ${formatList(test.themes)}`,
+    `**Platforms:** ${formatList(test.platforms)}`,
+    // One link per run, not per occurrence: a single run can flag the same test in
+    // several matrix jobs, so occurrences >= runs.
+    `**Runs:**`,
+    ``,
+    ...test.runUrls.map((url) => `- ${runLink(url)}`),
+    ``,
+    `</details>`,
+  ];
+}
+
+export function renderMarkdown(report: FlakyTestsReport): string {
+  const parts = [
+    `## Flaky Test Candidates`,
+    ``,
+    `**Status:** ${buildStatus(report)}`,
+    `**Window:** ${report.windowHours}h (${report.from} → ${report.to})`,
+    `**Runs Scanned:** ${report.runsScanned} (${report.runsWithCandidates} with candidates)`,
+  ];
+
+  if (report.runsUnreadable > 0) {
+    parts.push(`**Runs Unreadable:** ${report.runsUnreadable}`);
+  }
+  if (report.truncated) {
+    parts.push(`**Note:** the test list was capped — more tests flaked than listed.`);
+  }
+
+  if (report.tests.length > 0) {
+    const confirmed = report.tests.filter((test) => test.flakyConfirmed > 0);
+    if (confirmed.length > 0) {
+      // The report exists to feed this file, so hand over something ready to paste. The shape
+      // is the one `readQuarantinedTests` in e2e/testcafe-devextreme/runner.ts parses; `file`
+      // is omitted so the entry matches the test in any fixture.
+      const quarantine = JSON.stringify(
+        { tests: confirmed.map((test) => ({ test: test.test })) },
+        null,
+        2,
+      );
+
+      parts.push(
+        ``,
+        `<details>`,
+        `<summary>Suggested \`quarantine.json\` (${confirmed.length})</summary>`,
+        ``,
+        '```json',
+        quarantine,
+        '```',
+        ``,
+        `</details>`,
+      );
+    }
+
+    parts.push(...report.tests.flatMap(renderTest));
+  }
+
+  return parts.join('\n');
+}
diff --git a/tools/flaky-test-reporter/src/primitives/github.test.ts b/tools/flaky-test-reporter/src/primitives/github.test.ts
new file mode 100644
index 000000000000..55f9d740b540
--- /dev/null
+++ b/tools/flaky-test-reporter/src/primitives/github.test.ts
@@ -0,0 +1,181 @@
+import { downloadArtifactFile, findArtifactId, listRuns } from './github';
+import { makeZip } from './zip.test.utils';
+
+const github = { repo: 'o/r', token: 'secret-token' };
+
+interface Call {
+  url: string;
+  init?: RequestInit;
+}
+
+let calls: Call[];
+
+function mockFetch(handler: (url: string, init?: RequestInit) => Response): void {
+  calls = [];
+  global.fetch = jest.fn(async (input: Parameters<typeof fetch>[0], init?: RequestInit) => {
+    const url = String(input);
+    calls.push({ url, init });
+    return handler(url, init);
+  }) as unknown as typeof fetch;
+}
+
+function json(body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { 'content-type': 'application/json' },
+  });
+}
+
+function rawRun(id: number) {
+  return {
+    id,
+    run_number: id,
+    head_sha: `sha${id}`,
+    event: 'pull_request',
+    created_at: '2026-09-01T00:00:00Z',
+    html_url: `https://github.com/o/r/actions/runs/${id}`,
+  };
+}
+
+const realFetch = global.fetch;
+
+afterEach(() => {
+  jest.restoreAllMocks();
+  // jest.restoreAllMocks() only undoes spies, not the direct assignment in mockFetch().
+  global.fetch = realFetch;
+});
+
+describe('listRuns', () => {
+  it('scopes the query to completed runs created since the window start', async () => {
+    mockFetch(() => json({ workflow_runs: [rawRun(1)] }));
+
+    await listRuns(github, 'testcafe_tests.yml', new Date('2026-09-01T12:00:00Z'));
+
+    const url = new URL(calls[0].url);
+    expect(url.pathname).toBe('/repos/o/r/actions/workflows/testcafe_tests.yml/runs');
+    expect(url.searchParams.get('created')).toBe('>=2026-09-01T12:00:00.000Z');
+    expect(url.searchParams.get('status')).toBe('completed');
+    expect(url.searchParams.get('exclude_pull_requests')).toBe('true');
+  });
+
+  it('follows pagination until a short page ends it', async () => {
+    mockFetch((url) => {
+      const page = Number(new URL(url).searchParams.get('page'));
+      // Two full pages, then a short one.
+      const size = page <= 2 ? 100 : 7;
+      return json({
+        workflow_runs: Array.from({ length: size }, (_, i) => rawRun(page * 1000 + i)),
+      });
+    });
+
+    const runs = await listRuns(github, 'w.yml', new Date());
+
+    expect(runs).toHaveLength(207);
+    expect(calls).toHaveLength(3);
+  });
+
+  it('throws on an API error so the caller can report the sweep as failed', async () => {
+    mockFetch(() => new Response('nope', { status: 403, statusText: 'Forbidden' }));
+
+    await expect(listRuns(github, 'w.yml', new Date())).rejects.toThrow(/403/);
+  });
+});
+
+describe('findArtifactId', () => {
+  it('finds the artifact by name', async () => {
+    mockFetch(() =>
+      json({
+        artifacts: [
+          { id: 1, name: 'other', expired: false },
+          { id: 2, name: 'flaky-candidates', expired: false },
+        ],
+      }),
+    );
+
+    await expect(findArtifactId(github, 99, 'flaky-candidates')).resolves.toBe(2);
+  });
+
+  it('returns null when the run produced no such artifact', async () => {
+    mockFetch(() => json({ artifacts: [{ id: 1, name: 'other', expired: false }] }));
+
+    await expect(findArtifactId(github, 99, 'flaky-candidates')).resolves.toBeNull();
+  });
+
+  it('treats an expired artifact as absent', async () => {
+    mockFetch(() => json({ artifacts: [{ id: 2, name: 'flaky-candidates', expired: true }] }));
+
+    await expect(findArtifactId(github, 99, 'flaky-candidates')).resolves.toBeNull();
+  });
+});
+
+describe('downloadArtifactFile', () => {
+  const zip = makeZip({ 'flaky-candidates.json': '{"schemaVersion":1,"candidates":[]}' });
+
+  it('follows the redirect to blob storage WITHOUT forwarding the credential', async () => {
+    mockFetch((url) => {
+      if (url.startsWith('https://api.github.com')) {
+        return new Response(null, {
+          status: 302,
+          headers: { location: 'https://blob.example/zip' },
+        });
+      }
+      return new Response(new Uint8Array(zip), { status: 200 });
+    });
+
+    const content = await downloadArtifactFile(github, 42, 'flaky-candidates.json');
+
+    expect(content).toBe('{"schemaVersion":1,"candidates":[]}');
+    expect(calls).toHaveLength(2);
+    expect(calls[0].init?.headers).toMatchObject({ authorization: 'Bearer secret-token' });
+    expect(calls[0].init?.redirect).toBe('manual');
+    // The whole point: blob storage rejects a forwarded Authorization header with a 400.
+    expect(calls[1].init?.headers).toBeUndefined();
+  });
+
+  it('reads a direct 200 response without a redirect', async () => {
+    mockFetch(() => new Response(new Uint8Array(zip), { status: 200 }));
+
+    await expect(downloadArtifactFile(github, 42, 'flaky-candidates.json')).resolves.toContain(
+      'schemaVersion',
+    );
+    expect(calls).toHaveLength(1);
+  });
+
+  it('returns null when the archive lacks the file', async () => {
+    mockFetch(() => new Response(new Uint8Array(zip), { status: 200 }));
+
+    await expect(downloadArtifactFile(github, 42, 'absent.json')).resolves.toBeNull();
+  });
+
+  it('throws when a redirect carries no location', async () => {
+    mockFetch(() => new Response(null, { status: 302 }));
+
+    await expect(downloadArtifactFile(github, 42, 'x.json')).rejects.toThrow(/location/);
+  });
+});
+
+describe('listRuns page cap', () => {
+  it('warns rather than silently returning a short sweep', async () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mockFetch((url) => {
+      const page = Number(new URL(url).searchParams.get('page'));
+      return json({
+        workflow_runs: Array.from({ length: 100 }, (_, i) => rawRun(page * 1000 + i)),
+      });
+    });
+
+    const runs = await listRuns(github, 'w.yml', new Date());
+
+    expect(runs).toHaveLength(1000);
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('page cap'));
+  });
+
+  it('does not warn when the window fits', async () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mockFetch(() => json({ workflow_runs: [rawRun(1)] }));
+
+    await listRuns(github, 'w.yml', new Date());
+
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+});
diff --git a/tools/flaky-test-reporter/src/primitives/github.ts b/tools/flaky-test-reporter/src/primitives/github.ts
new file mode 100644
index 000000000000..15285d1777cc
--- /dev/null
+++ b/tools/flaky-test-reporter/src/primitives/github.ts
@@ -0,0 +1,134 @@
+import { RunInfo } from '../types';
+import { warn } from '../utils';
+import { extractFileFromZip } from './zip';
+
+const API_ROOT = 'https://api.github.com';
+const RUNS_PER_PAGE = 100;
+/** Runs are listed newest-first, so this caps the sweep at 1000 runs. */
+const MAX_RUN_PAGES = 10;
+
+export interface GitHubOptions {
+  repo: string;
+  token: string;
+}
+
+function headers(token: string): Record<string, string> {
+  return {
+    accept: 'application/vnd.github+json',
+    authorization: `Bearer ${token}`,
+    'x-github-api-version': '2022-11-28',
+    'user-agent': 'devextreme-flaky-test-reporter',
+  };
+}
+
+async function getJson<T>(url: string, token: string): Promise<T> {
+  const response = await fetch(url, { headers: headers(token) });
+  if (!response.ok) {
+    throw new Error(`GET ${url} -> ${response.status} ${response.statusText}`);
+  }
+  return (await response.json()) as T;
+}
+
+interface RawRun {
+  id: number;
+  run_number: number;
+  head_sha: string;
+  event: string;
+  created_at: string;
+  html_url: string;
+}
+
+function toRunInfo(run: RawRun): RunInfo {
+  return {
+    id: run.id,
+    runNumber: run.run_number,
+    headSha: run.head_sha,
+    event: run.event,
+    createdAt: run.created_at,
+    htmlUrl: run.html_url,
+  };
+}
+
+/** Completed runs of `workflow` created at or after `since`, newest first. */
+export async function listRuns(
+  { repo, token }: GitHubOptions,
+  workflow: string,
+  since: Date,
+): Promise<RunInfo[]> {
+  const runs: RunInfo[] = [];
+
+  for (let page = 1; page <= MAX_RUN_PAGES; page += 1) {
+    const query = new URLSearchParams({
+      created: `>=${since.toISOString()}`,
+      status: 'completed',
+      exclude_pull_requests: 'true',
+      per_page: String(RUNS_PER_PAGE),
+      page: String(page),
+    });
+    const url = `${API_ROOT}/repos/${repo}/actions/workflows/${workflow}/runs?${query}`;
+    const body = await getJson<{ workflow_runs?: RawRun[] }>(url, token);
+    const batch = body.workflow_runs ?? [];
+
+    runs.push(...batch.map(toRunInfo));
+
+    if (batch.length < RUNS_PER_PAGE) return runs;
+  }
+
+  // Falling out of the loop means the window holds more runs than the cap allows. Say so:
+  // a silently short sweep would understate every count in the report.
+  warn(
+    `run listing hit the ${MAX_RUN_PAGES}-page cap (${runs.length} runs); older runs in the window were not scanned`,
+  );
+
+  return runs;
+}
+
+interface RawArtifact {
+  id: number;
+  name: string;
+  expired: boolean;
+}
+
+/** Artifact id, or `null` when the run produced none by that name (or it has expired). */
+export async function findArtifactId(
+  { repo, token }: GitHubOptions,
+  runId: number,
+  artifactName: string,
+): Promise<number | null> {
+  const url = `${API_ROOT}/repos/${repo}/actions/runs/${runId}/artifacts?per_page=100`;
+  const body = await getJson<{ artifacts?: RawArtifact[] }>(url, token);
+  const artifact = body.artifacts?.find((candidate) => candidate.name === artifactName);
+
+  if (!artifact || artifact.expired) return null;
+  return artifact.id;
+}
+
+export async function downloadArtifactFile(
+  { repo, token }: GitHubOptions,
+  artifactId: number,
+  filename: string,
+): Promise<string | null> {
+  const url = `${API_ROOT}/repos/${repo}/actions/artifacts/${artifactId}/zip`;
+
+  // The download 302s to blob storage, which rejects a forwarded Authorization header with
+  // a 400. Follow the redirect by hand so the credential never leaves api.github.com.
+  const redirect = await fetch(url, { headers: headers(token), redirect: 'manual' });
+
+  let response = redirect;
+  if (redirect.status >= 300 && redirect.status < 400) {
+    const location = redirect.headers.get('location');
+    if (!location) {
+      throw new Error(`artifact ${artifactId}: ${redirect.status} without a location header`);
+    }
+    response = await fetch(location);
+  }
+
+  if (!response.ok) {
+    throw new Error(`download artifact ${artifactId} -> ${response.status} ${response.statusText}`);
+  }
+
+  const zip = Buffer.from(await response.arrayBuffer());
+  const file = extractFileFromZip(zip, filename);
+
+  return file ? file.toString('utf-8') : null;
+}
diff --git a/tools/flaky-test-reporter/src/primitives/zip.test.ts b/tools/flaky-test-reporter/src/primitives/zip.test.ts
new file mode 100644
index 000000000000..af9ffe0ee62f
--- /dev/null
+++ b/tools/flaky-test-reporter/src/primitives/zip.test.ts
@@ -0,0 +1,50 @@
+import { extractFileFromZip } from './zip';
+import { makeZip } from './zip.test.utils';
+
+describe('extractFileFromZip', () => {
+  it('reads a deflated entry', () => {
+    // Repetitive content so the compressor actually chooses DEFLATE.
+    const content = JSON.stringify({ candidates: Array(200).fill({ test: 'a' }) });
+    const zip = makeZip({ 'flaky-candidates.json': content });
+
+    expect(extractFileFromZip(zip, 'flaky-candidates.json')?.toString('utf-8')).toBe(content);
+  });
+
+  it('reads a stored (uncompressed) entry', () => {
+    const content = '{"schemaVersion":1,"candidates":[]}';
+    const zip = makeZip({ 'flaky-candidates.json': content }, { deflate: false });
+
+    expect(extractFileFromZip(zip, 'flaky-candidates.json')?.toString('utf-8')).toBe(content);
+  });
+
+  it('picks the requested entry out of several', () => {
+    const zip = makeZip({ 'a.json': '"a"', 'flaky-candidates.json': '"wanted"', 'z.json': '"z"' });
+
+    expect(extractFileFromZip(zip, 'flaky-candidates.json')?.toString('utf-8')).toBe('"wanted"');
+  });
+
+  it('round-trips non-ascii content', () => {
+    const content = JSON.stringify({ test: 'Пример — юникод' });
+    const zip = makeZip({ 'flaky-candidates.json': content });
+
+    expect(extractFileFromZip(zip, 'flaky-candidates.json')?.toString('utf-8')).toBe(content);
+  });
+
+  it('returns null when the archive does not hold the file', () => {
+    const zip = makeZip({ 'other.json': '{}' });
+
+    expect(extractFileFromZip(zip, 'flaky-candidates.json')).toBeNull();
+  });
+
+  it('throws when the central directory runs past the buffer, not "file absent"', () => {
+    const good = makeZip({ 'flaky-candidates.json': '{}' });
+    // Keep the EOCD, drop the middle: the recorded offsets now point outside the buffer.
+    const truncated = Buffer.concat([good.subarray(0, 10), good.subarray(good.length - 22)]);
+
+    expect(() => extractFileFromZip(truncated, 'flaky-candidates.json')).toThrow(/ZIP/);
+  });
+
+  it('throws on a buffer that is not a ZIP, so a bad download is not read as an absent file', () => {
+    expect(() => extractFileFromZip(Buffer.from('not a zip at all'), 'x.json')).toThrow(/ZIP/);
+  });
+});
diff --git a/tools/flaky-test-reporter/src/primitives/zip.test.utils.ts b/tools/flaky-test-reporter/src/primitives/zip.test.utils.ts
new file mode 100644
index 000000000000..ba7ef7fd5198
--- /dev/null
+++ b/tools/flaky-test-reporter/src/primitives/zip.test.utils.ts
@@ -0,0 +1,52 @@
+import zlib from 'node:zlib';
+
+/**
+ * Builds a ZIP in memory for the tests. Hand-rolled rather than shelling out to the `zip`
+ * binary, which is absent from minimal CI images.
+ */
+export function makeZip(
+  files: Record<string, string>,
+  { deflate = true }: { deflate?: boolean } = {},
+): Buffer {
+  const locals: Buffer[] = [];
+  const centrals: Buffer[] = [];
+  let offset = 0;
+
+  for (const [name, content] of Object.entries(files)) {
+    const nameBuf = Buffer.from(name, 'utf-8');
+    const raw = Buffer.from(content, 'utf-8');
+    const data = deflate ? zlib.deflateRawSync(raw) : raw;
+    const method = deflate ? 8 : 0;
+
+    const local = Buffer.alloc(30);
+    local.writeUInt32LE(0x04034b50, 0);
+    local.writeUInt16LE(method, 8);
+    local.writeUInt32LE(data.length, 18);
+    local.writeUInt32LE(raw.length, 22);
+    local.writeUInt16LE(nameBuf.length, 26);
+    locals.push(local, nameBuf, data);
+
+    const central = Buffer.alloc(46);
+    central.writeUInt32LE(0x02014b50, 0);
+    central.writeUInt16LE(method, 10);
+    central.writeUInt32LE(data.length, 20);
+    central.writeUInt32LE(raw.length, 24);
+    central.writeUInt16LE(nameBuf.length, 28);
+    central.writeUInt32LE(offset, 42);
+    centrals.push(central, nameBuf);
+
+    offset += local.length + nameBuf.length + data.length;
+  }
+
+  const centralBuf = Buffer.concat(centrals);
+  const count = Object.keys(files).length;
+
+  const eocd = Buffer.alloc(22);
+  eocd.writeUInt32LE(0x06054b50, 0);
+  eocd.writeUInt16LE(count, 8);
+  eocd.writeUInt16LE(count, 10);
+  eocd.writeUInt32LE(centralBuf.length, 12);
+  eocd.writeUInt32LE(offset, 16);
+
+  return Buffer.concat([...locals, centralBuf, eocd]);
+}
diff --git a/tools/flaky-test-reporter/src/primitives/zip.ts b/tools/flaky-test-reporter/src/primitives/zip.ts
new file mode 100644
index 000000000000..21ffd5adbb0e
--- /dev/null
+++ b/tools/flaky-test-reporter/src/primitives/zip.ts
@@ -0,0 +1,74 @@
+import zlib from 'node:zlib';
+
+const EOCD_SIGNATURE = 0x06054b50;
+const CENTRAL_FILE_HEADER_SIGNATURE = 0x02014b50;
+const EOCD_MIN_SIZE = 22;
+
+const STORED = 0;
+const DEFLATED = 8;
+
+function findEndOfCentralDirectory(zip: Buffer): number {
+  for (let offset = zip.length - EOCD_MIN_SIZE; offset >= 0; offset -= 1) {
+    if (zip.readUInt32LE(offset) === EOCD_SIGNATURE) {
+      return offset;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Reads a single file out of a ZIP held in memory. Artifact ZIPs are a handful of kilobytes,
+ * so a dependency-free central-directory walk beats pulling in an archive library.
+ *
+ * Returns `null` when the archive does not hold the file. Throws when the buffer is not a
+ * usable ZIP at all — a truncated download says nothing about the file's existence and must
+ * be distinguishable by the caller.
+ */
+export function extractFileFromZip(zip: Buffer, filename: string): Buffer | null {
+  const eocdOffset = findEndOfCentralDirectory(zip);
+  if (eocdOffset === -1) {
+    throw new Error('invalid ZIP: end of central directory not found');
+  }
+
+  const centralDirSize = zip.readUInt32LE(eocdOffset + 12);
+  const centralDirOffset = zip.readUInt32LE(eocdOffset + 16);
+  const centralDirEnd = centralDirOffset + centralDirSize;
+
+  // Without this the walk below simply finds nothing and the caller reads a truncated
+  // download as "the archive does not hold the file".
+  if (centralDirEnd > zip.length) {
+    throw new Error('invalid ZIP: central directory runs past the end of the buffer');
+  }
+
+  let offset = centralDirOffset;
+  while (offset < centralDirEnd && offset + 46 <= zip.length) {
+    if (zip.readUInt32LE(offset) !== CENTRAL_FILE_HEADER_SIGNATURE) {
+      break;
+    }
+
+    const compressionMethod = zip.readUInt16LE(offset + 10);
+    const compressedSize = zip.readUInt32LE(offset + 20);
+    const fileNameLength = zip.readUInt16LE(offset + 28);
+    const extraFieldLength = zip.readUInt16LE(offset + 30);
+    const fileCommentLength = zip.readUInt16LE(offset + 32);
+    const localHeaderOffset = zip.readUInt32LE(offset + 42);
+    const entryName = zip.subarray(offset + 46, offset + 46 + fileNameLength).toString('utf-8');
+
+    if (entryName === filename) {
+      // The central directory records the entry's metadata, but the bytes live after the
+      // local header, whose variable-length fields can differ from the central copy.
+      const localFileNameLength = zip.readUInt16LE(localHeaderOffset + 26);
+      const localExtraFieldLength = zip.readUInt16LE(localHeaderOffset + 28);
+      const dataOffset = localHeaderOffset + 30 + localFileNameLength + localExtraFieldLength;
+      const data = zip.subarray(dataOffset, dataOffset + compressedSize);
+
+      if (compressionMethod === STORED) return Buffer.from(data);
+      if (compressionMethod === DEFLATED) return zlib.inflateRawSync(data);
+      throw new Error(`unsupported ZIP compression method: ${compressionMethod}`);
+    }
+
+    offset += 46 + fileNameLength + extraFieldLength + fileCommentLength;
+  }
+
+  return null;
+}
diff --git a/tools/flaky-test-reporter/src/report.test.ts b/tools/flaky-test-reporter/src/report.test.ts
new file mode 100644
index 000000000000..841f8e97ad88
--- /dev/null
+++ b/tools/flaky-test-reporter/src/report.test.ts
@@ -0,0 +1,275 @@
+import { AggregateInput, CollectedRun, MAX_TESTS, aggregate, parseCandidatesFile } from './report';
+import { FlakyCandidate, RunInfo } from './types';
+
+function run(id: number, overrides: Partial<RunInfo> = {}): RunInfo {
+  return {
+    id,
+    runNumber: id,
+    headSha: `sha-${id}`,
+    event: 'pull_request',
+    createdAt: `2026-09-0${id}T00:00:00Z`,
+    htmlUrl: `https://github.com/o/r/actions/runs/${id}`,
+    ...overrides,
+  };
+}
+
+function candidate(test: string, overrides: Partial<FlakyCandidate> = {}): FlakyCandidate {
+  return {
+    test,
+    sourceJob: 'grids / generic.light',
+    theme: 'generic.light',
+    componentFolder: 'grids',
+    timezone: 'GMT',
+    platform: '',
+    verdict: 'passed',
+    ...overrides,
+  };
+}
+
+function input(collected: CollectedRun[], overrides: Partial<AggregateInput> = {}): AggregateInput {
+  return {
+    repo: 'o/r',
+    workflow: 'testcafe_tests.yml',
+    artifact: 'flaky-candidates',
+    windowHours: 48,
+    branch: 'main',
+    from: new Date('2026-09-01T00:00:00Z'),
+    to: new Date('2026-09-03T00:00:00Z'),
+    runsScanned: collected.length,
+    runsUnreadable: 0,
+    collected,
+    ...overrides,
+  };
+}
+
+describe('parseCandidatesFile', () => {
+  it('reads the candidates array', () => {
+    const content = JSON.stringify({ schemaVersion: 1, candidates: [candidate('a')] });
+    expect(parseCandidatesFile(content)).toHaveLength(1);
+  });
+
+  it('drops entries without a test name instead of trusting them', () => {
+    const content = JSON.stringify({
+      schemaVersion: 1,
+      candidates: [candidate('a'), { sourceJob: 'x' }, { test: '' }],
+    });
+    expect(parseCandidatesFile(content).map((c) => c.test)).toEqual(['a']);
+  });
+
+  it('drops an entry whose verdict is missing or unknown, rather than calling it flaky', () => {
+    const content = JSON.stringify({
+      schemaVersion: 1,
+      candidates: [
+        candidate('kept', { verdict: 'passed' }),
+        candidate('kept too', { verdict: 'failed' }),
+        { test: 'no verdict' },
+        { test: 'bad verdict', verdict: 'maybe' },
+      ],
+    });
+
+    expect(parseCandidatesFile(content).map((c) => c.test)).toEqual(['kept', 'kept too']);
+  });
+
+  it('drops an entry that is missing its matrix context, which the type claims is present', () => {
+    const content = JSON.stringify({
+      schemaVersion: 1,
+      candidates: [candidate('kept'), { test: 'no context', verdict: 'passed' }],
+    });
+
+    expect(parseCandidatesFile(content).map((c) => c.test)).toEqual(['kept']);
+  });
+
+  it('throws when the file has no candidates array', () => {
+    expect(() => parseCandidatesFile('{"tests":[]}')).toThrow(/candidates/);
+  });
+
+  it('throws on malformed JSON', () => {
+    expect(() => parseCandidatesFile('not json')).toThrow();
+  });
+});
+
+describe('branch scoping', () => {
+  it('keeps only the candidates whose run targeted the reported branch', () => {
+    const content = JSON.stringify({
+      schemaVersion: 1,
+      candidates: [
+        candidate('on main', { baseBranch: 'main' }),
+        candidate('on 26_1', { baseBranch: '26_1' }),
+      ],
+    });
+
+    // parseCandidatesFile keeps both; scoping happens in collect().
+    expect(parseCandidatesFile(content).map((c) => c.baseBranch)).toEqual(['main', '26_1']);
+  });
+});
+
+describe('aggregate', () => {
+  it('counts a test repeated across distinct commits', () => {
+    const report = aggregate(
+      input([
+        { run: run(1), candidates: [candidate('flaky one')] },
+        { run: run(2), candidates: [candidate('flaky one')] },
+        { run: run(3), candidates: [candidate('flaky one')] },
+      ]),
+    );
+
+    expect(report.tests).toHaveLength(1);
+    expect(report.tests[0]).toMatchObject({
+      test: 'flaky one',
+      occurrences: 3,
+      flakyConfirmed: 3,
+      failedAllAttempts: 0,
+      distinctShas: 3,
+    });
+    expect(report.totalCandidates).toBe(3);
+    expect(report.runsWithCandidates).toBe(3);
+  });
+
+  it('separates rerun verdicts', () => {
+    const report = aggregate(
+      input([
+        { run: run(1), candidates: [candidate('t', { verdict: 'passed' })] },
+        { run: run(2), candidates: [candidate('t', { verdict: 'failed' })] },
+      ]),
+    );
+
+    expect(report.tests[0]).toMatchObject({ flakyConfirmed: 1, failedAllAttempts: 1 });
+  });
+
+  it('does not inflate distinctShas when one commit is retried', () => {
+    const report = aggregate(
+      input([
+        { run: run(1), candidates: [candidate('t')] },
+        { run: run(2, { headSha: 'sha-1' }), candidates: [candidate('t')] },
+      ]),
+    );
+
+    expect(report.tests[0]).toMatchObject({ occurrences: 2, distinctShas: 1 });
+  });
+
+  it('ranks a multi-commit flake above a single-commit blip', () => {
+    const report = aggregate(
+      input([
+        { run: run(1), candidates: [candidate('blip'), candidate('real flake')] },
+        { run: run(2), candidates: [candidate('real flake')] },
+      ]),
+    );
+
+    expect(report.tests.map((t) => t.test)).toEqual(['real flake', 'blip']);
+  });
+
+  it('ranks a confirmed flake above a test that only ever failed all attempts', () => {
+    const report = aggregate(
+      input([
+        {
+          run: run(1),
+          candidates: [
+            candidate('regression', { verdict: 'failed' }),
+            candidate('regression', { verdict: 'failed' }),
+            candidate('flake', { verdict: 'passed' }),
+          ],
+        },
+      ]),
+    );
+
+    expect(report.tests[0].test).toBe('flake');
+  });
+
+  it('collects the distinct context a test flaked in', () => {
+    const report = aggregate(
+      input([
+        {
+          run: run(1),
+          candidates: [candidate('t', { theme: 'generic.light', platform: 'desktop' })],
+        },
+        {
+          run: run(2),
+          candidates: [
+            candidate('t', { theme: 'material.blue.light', platform: '', sourceJob: 'editors' }),
+          ],
+        },
+      ]),
+    );
+
+    expect(report.tests[0]).toMatchObject({
+      themes: ['generic.light', 'material.blue.light'],
+      platforms: ['desktop'],
+      jobs: ['editors', 'grids / generic.light'],
+    });
+  });
+
+  it('tracks the first and last time a test was seen', () => {
+    const report = aggregate(
+      input([
+        { run: run(3), candidates: [candidate('t')] },
+        { run: run(1), candidates: [candidate('t')] },
+        { run: run(2), candidates: [candidate('t')] },
+      ]),
+    );
+
+    expect(report.tests[0].firstSeen).toBe('2026-09-01T00:00:00Z');
+    expect(report.tests[0].lastSeen).toBe('2026-09-03T00:00:00Z');
+  });
+
+  it('keeps every occurrence, so each one can be linked', () => {
+    const collected = Array.from({ length: 7 }, (_, i) => ({
+      run: run(i + 1),
+      candidates: [candidate('t')],
+    }));
+
+    const report = aggregate(input(collected));
+
+    expect(report.tests[0].occurrences).toBe(7);
+    expect(report.tests[0].runUrls).toHaveLength(7);
+  });
+
+  it('does not repeat a run url when one run reports the test twice', () => {
+    const report = aggregate(
+      input([{ run: run(1), candidates: [candidate('t'), candidate('t')] }]),
+    );
+
+    expect(report.tests[0].occurrences).toBe(2);
+    expect(report.tests[0].runUrls).toHaveLength(1);
+  });
+
+  it('truncates the test list and says so', () => {
+    const candidates = Array.from({ length: MAX_TESTS + 5 }, (_, i) => candidate(`test ${i}`));
+    const report = aggregate(input([{ run: run(1), candidates }]));
+
+    expect(report.truncated).toBe(true);
+    expect(report.tests).toHaveLength(MAX_TESTS);
+    expect(report.totalCandidates).toBe(MAX_TESTS + 5);
+  });
+
+  it('is not truncated when everything fits', () => {
+    const report = aggregate(input([{ run: run(1), candidates: [candidate('t')] }]));
+    expect(report.truncated).toBe(false);
+  });
+
+  it('reports an empty window without failing', () => {
+    const report = aggregate(input([], { runsScanned: 12 }));
+
+    expect(report).toMatchObject({
+      succeeded: true,
+      tests: [],
+      totalCandidates: 0,
+      runsScanned: 12,
+      runsWithCandidates: 0,
+      truncated: false,
+    });
+  });
+
+  it('counts runs scanned separately from runs that had candidates', () => {
+    const report = aggregate(
+      input(
+        [
+          { run: run(1), candidates: [] },
+          { run: run(2), candidates: [candidate('t')] },
+        ],
+        { runsScanned: 40, runsUnreadable: 2 },
+      ),
+    );
+
+    expect(report).toMatchObject({ runsScanned: 40, runsWithCandidates: 1, runsUnreadable: 2 });
+  });
+});
diff --git a/tools/flaky-test-reporter/src/report.ts b/tools/flaky-test-reporter/src/report.ts
new file mode 100644
index 000000000000..a80cdb0cd164
--- /dev/null
+++ b/tools/flaky-test-reporter/src/report.ts
@@ -0,0 +1,274 @@
+import { GitHubOptions, downloadArtifactFile, findArtifactId, listRuns } from './primitives/github';
+import {
+  AggregatedTest,
+  FlakyCandidate,
+  FlakyCandidatesFile,
+  FlakyTestsReport,
+  RunInfo,
+} from './types';
+import { mapWithConcurrency, warn } from './utils';
+
+/**
+ * The rendered markdown ends up in a GitHub issue body, which is capped at 65,536 characters
+ * and already carries the monitor's own sections. Twenty entries leave comfortable room.
+ */
+export const MAX_TESTS = 20;
+const DOWNLOAD_CONCURRENCY = 8;
+const CANDIDATES_FILENAME = 'flaky-candidates.json';
+
+export interface CollectedRun {
+  run: RunInfo;
+  candidates: FlakyCandidate[];
+}
+
+export interface AggregateInput {
+  repo: string;
+  workflow: string;
+  artifact: string;
+  windowHours: number;
+  branch: string;
+  from: Date;
+  to: Date;
+  runsScanned: number;
+  runsUnreadable: number;
+  collected: CollectedRun[];
+}
+
+/**
+ * A candidate file written by an older workflow revision must not abort the sweep, so
+ * anything unrecognised is dropped rather than trusted.
+ */
+/** Matrix context every candidate carries; empty strings are normal, missing ones are not. */
+const CONTEXT_FIELDS = ['sourceJob', 'theme', 'componentFolder', 'timezone', 'platform'] as const;
+
+export function parseCandidatesFile(content: string): FlakyCandidate[] {
+  const parsed: unknown = JSON.parse(content);
+  const candidates = (parsed as FlakyCandidatesFile | null)?.candidates;
+
+  if (!Array.isArray(candidates)) {
+    throw new Error('missing "candidates" array');
+  }
+
+  return candidates.filter(
+    (candidate): candidate is FlakyCandidate =>
+      typeof candidate?.test === 'string'
+      && candidate.test.length > 0
+      // aggregate() reads anything that is not 'failed' as a confirmed flake, so an entry
+      // with a missing or unknown verdict would be recommended for quarantine.
+      && (candidate.verdict === 'passed' || candidate.verdict === 'failed')
+      // The predicate claims a whole FlakyCandidate, so every field has to hold.
+      && CONTEXT_FIELDS.every((field) => typeof candidate[field] === 'string'),
+  );
+}
+
+function sortedUnique(values: Iterable<string>): string[] {
+  return [...new Set([...values].filter(Boolean))].sort();
+}
+
+export function aggregate(input: AggregateInput): FlakyTestsReport {
+  interface Accumulator {
+    occurrences: number;
+    flakyConfirmed: number;
+    failedAllAttempts: number;
+    shas: Set<string>;
+    jobs: Set<string>;
+    themes: Set<string>;
+    platforms: Set<string>;
+    firstSeen: string;
+    lastSeen: string;
+    runUrls: string[];
+  }
+
+  const byTest = new Map<string, Accumulator>();
+  let totalCandidates = 0;
+
+  for (const { run, candidates } of input.collected) {
+    for (const candidate of candidates) {
+      totalCandidates += 1;
+
+      let acc = byTest.get(candidate.test);
+      if (!acc) {
+        acc = {
+          occurrences: 0,
+          flakyConfirmed: 0,
+          failedAllAttempts: 0,
+          shas: new Set(),
+          jobs: new Set(),
+          themes: new Set(),
+          platforms: new Set(),
+          firstSeen: run.createdAt,
+          lastSeen: run.createdAt,
+          runUrls: [],
+        };
+        byTest.set(candidate.test, acc);
+      }
+
+      acc.occurrences += 1;
+      if (candidate.verdict === 'failed') {
+        acc.failedAllAttempts += 1;
+      } else {
+        acc.flakyConfirmed += 1;
+      }
+
+      acc.shas.add(run.headSha);
+      acc.jobs.add(candidate.sourceJob);
+      acc.themes.add(candidate.theme);
+      acc.platforms.add(candidate.platform);
+
+      if (run.createdAt < acc.firstSeen) acc.firstSeen = run.createdAt;
+      if (run.createdAt > acc.lastSeen) acc.lastSeen = run.createdAt;
+      if (!acc.runUrls.includes(run.htmlUrl)) acc.runUrls.push(run.htmlUrl);
+    }
+  }
+
+  const tests: AggregatedTest[] = [...byTest.entries()]
+    .map(([test, acc]) => ({
+      test,
+      occurrences: acc.occurrences,
+      flakyConfirmed: acc.flakyConfirmed,
+      failedAllAttempts: acc.failedAllAttempts,
+      distinctShas: acc.shas.size,
+      jobs: sortedUnique(acc.jobs),
+      themes: sortedUnique(acc.themes),
+      platforms: sortedUnique(acc.platforms),
+      firstSeen: acc.firstSeen,
+      lastSeen: acc.lastSeen,
+      runUrls: acc.runUrls,
+    }))
+    // A test that flaked on several distinct commits is a flake; one that failed once on a
+    // single commit is more likely just a broken commit.
+    .sort(
+      (a, b) =>
+        b.flakyConfirmed - a.flakyConfirmed
+        || b.distinctShas - a.distinctShas
+        || b.occurrences - a.occurrences
+        || a.test.localeCompare(b.test),
+    );
+
+  return {
+    succeeded: true,
+    generatedAt: new Date().toISOString(),
+    windowHours: input.windowHours,
+    branch: input.branch,
+    from: input.from.toISOString(),
+    to: input.to.toISOString(),
+    repo: input.repo,
+    workflow: input.workflow,
+    artifact: input.artifact,
+    runsScanned: input.runsScanned,
+    runsWithCandidates: input.collected.filter((entry) => entry.candidates.length > 0).length,
+    runsUnreadable: input.runsUnreadable,
+    totalCandidates,
+    truncated: tests.length > MAX_TESTS,
+    tests: tests.slice(0, MAX_TESTS),
+  };
+}
+
+export interface CollectOptions {
+  repo: string;
+  workflow: string;
+  artifact: string;
+  branch: string;
+  windowHours: number;
+  token: string;
+}
+
+/**
+ * One window holds candidates from every active release line, so they have to be scoped.
+ * Artifacts predating `baseBranch` are kept - dropping them would empty every report until
+ * each in-window run has been re-run.
+ */
+function forBranch(candidates: FlakyCandidate[], branch: string, runId: number): FlakyCandidate[] {
+  const kept = candidates.filter((c) => c.baseBranch === undefined || c.baseBranch === branch);
+
+  if (kept.length < candidates.length) {
+    warn(
+      `run ${runId}: skipped ${candidates.length - kept.length} candidate(s) from another branch`,
+    );
+  }
+
+  return kept;
+}
+
+export async function collect(options: CollectOptions): Promise<FlakyTestsReport> {
+  const to = new Date();
+  const from = new Date(to.getTime() - options.windowHours * 60 * 60 * 1000);
+  const github: GitHubOptions = { repo: options.repo, token: options.token };
+
+  const runs = await listRuns(github, options.workflow, from);
+  console.log(
+    `Scanning ${runs.length} completed "${options.workflow}" run(s) since ${from.toISOString()}`,
+  );
+
+  let runsUnreadable = 0;
+
+  // One bad run must never abort the sweep: a skipped run is counted and reported as data.
+  const collected = await mapWithConcurrency(
+    runs,
+    DOWNLOAD_CONCURRENCY,
+    async (run): Promise<CollectedRun> => {
+      try {
+        const artifactId = await findArtifactId(github, run.id, options.artifact);
+        if (artifactId === null) return { run, candidates: [] };
+
+        const content = await downloadArtifactFile(github, artifactId, CANDIDATES_FILENAME);
+        if (content === null) {
+          runsUnreadable += 1;
+          warn(`run ${run.id}: artifact holds no ${CANDIDATES_FILENAME}`);
+          return { run, candidates: [] };
+        }
+
+        return {
+          run,
+          candidates: forBranch(parseCandidatesFile(content), options.branch, run.id),
+        };
+      } catch (error) {
+        runsUnreadable += 1;
+        warn(`run ${run.id}: ${error instanceof Error ? error.message : String(error)}`);
+        return { run, candidates: [] };
+      }
+    },
+  );
+
+  return aggregate({
+    repo: options.repo,
+    workflow: options.workflow,
+    artifact: options.artifact,
+    windowHours: options.windowHours,
+    branch: options.branch,
+    from,
+    to,
+    runsScanned: runs.length,
+    runsUnreadable,
+    collected,
+  });
+}
+
+/**
+ * A failed sweep still has to produce a report. The consumer treats a missing file as
+ * "the check is broken", which is far less useful than an explicit failure reason — and
+ * flaky collection must never break the surrounding health check.
+ */
+export function buildFailedReport(options: CollectOptions, error: unknown): FlakyTestsReport {
+  const to = new Date();
+  const from = new Date(to.getTime() - options.windowHours * 60 * 60 * 1000);
+
+  return {
+    succeeded: false,
+    error: error instanceof Error ? error.message : String(error),
+    generatedAt: to.toISOString(),
+    windowHours: options.windowHours,
+    branch: options.branch,
+    from: from.toISOString(),
+    to: to.toISOString(),
+    repo: options.repo,
+    workflow: options.workflow,
+    artifact: options.artifact,
+    runsScanned: 0,
+    runsWithCandidates: 0,
+    runsUnreadable: 0,
+    totalCandidates: 0,
+    truncated: false,
+    tests: [],
+  };
+}
diff --git a/tools/flaky-test-reporter/src/types.ts b/tools/flaky-test-reporter/src/types.ts
new file mode 100644
index 000000000000..3006eb9c7667
--- /dev/null
+++ b/tools/flaky-test-reporter/src/types.ts
@@ -0,0 +1,72 @@
+export const FLAKY_TESTS_REPORT_FILENAME = 'flaky-tests-report.json';
+
+/** Verdict of the quarantine rerun. `passed` means the test is genuinely flaky. */
+export type FlakyVerdict = 'passed' | 'failed';
+
+/**
+ * `flaky-candidates.json` as produced by the quarantine job of `testcafe_tests.yml`.
+ * One file per workflow run.
+ */
+export interface FlakyCandidate {
+  test: string;
+  sourceJob: string;
+  theme: string;
+  componentFolder: string;
+  timezone: string;
+  platform: string;
+  verdict: FlakyVerdict;
+  baseBranch?: string;
+}
+
+export interface FlakyCandidatesFile {
+  schemaVersion: number;
+  candidates: FlakyCandidate[];
+}
+
+/** Run metadata the collector attaches to every candidate it reads. */
+export interface RunInfo {
+  id: number;
+  runNumber: number;
+  headSha: string;
+  event: string;
+  createdAt: string;
+  htmlUrl: string;
+}
+
+export interface AggregatedTest {
+  test: string;
+  /** How many times the test was forwarded as a flaky candidate in the window. */
+  occurrences: number;
+  /** Occurrences that passed the quarantine rerun — genuinely flaky. */
+  flakyConfirmed: number;
+  /** Occurrences that failed all attempts — more likely a real regression. */
+  failedAllAttempts: number;
+  /** Distinct head commits the test flaked on. The strongest flakiness signal. */
+  distinctShas: number;
+  jobs: string[];
+  themes: string[];
+  platforms: string[];
+  firstSeen: string;
+  lastSeen: string;
+  runUrls: string[];
+}
+
+export interface FlakyTestsReport {
+  succeeded: boolean;
+  error?: string;
+  generatedAt: string;
+  windowHours: number;
+  branch: string;
+  from: string;
+  to: string;
+  repo: string;
+  workflow: string;
+  artifact: string;
+  runsScanned: number;
+  runsWithCandidates: number;
+  runsUnreadable: number;
+  totalCandidates: number;
+  /** True when `tests` was capped, so the report is not the full picture. */
+  truncated: boolean;
+  tests: AggregatedTest[];
+}
diff --git a/tools/flaky-test-reporter/src/utils.test.ts b/tools/flaky-test-reporter/src/utils.test.ts
new file mode 100644
index 000000000000..cdd6f7bf55b0
--- /dev/null
+++ b/tools/flaky-test-reporter/src/utils.test.ts
@@ -0,0 +1,44 @@
+import { mapWithConcurrency } from './utils';
+
+describe('mapWithConcurrency', () => {
+  it('preserves input order regardless of completion order', async () => {
+    const delays = [30, 5, 20, 1, 15];
+    const result = await mapWithConcurrency(delays, 2, async (delay) => {
+      await new Promise((resolve) => setTimeout(resolve, delay));
+      return delay;
+    });
+
+    expect(result).toEqual(delays);
+  });
+
+  it('never exceeds the limit', async () => {
+    let inFlight = 0;
+    let peak = 0;
+
+    await mapWithConcurrency(
+      Array.from({ length: 20 }, (_, i) => i),
+      4,
+      async () => {
+        inFlight += 1;
+        peak = Math.max(peak, inFlight);
+        await new Promise((resolve) => setTimeout(resolve, 1));
+        inFlight -= 1;
+      },
+    );
+
+    expect(peak).toBeLessThanOrEqual(4);
+  });
+
+  it.each([0, -1, 1.5, Number.NaN])(
+    'rejects a limit of %p instead of returning holes',
+    async (limit) => {
+      await expect(mapWithConcurrency([1, 2, 3], limit, async (n) => n)).rejects.toThrow(
+        /positive integer/,
+      );
+    },
+  );
+
+  it('handles an empty list', async () => {
+    await expect(mapWithConcurrency([], 4, async () => 1)).resolves.toEqual([]);
+  });
+});
diff --git a/tools/flaky-test-reporter/src/utils.ts b/tools/flaky-test-reporter/src/utils.ts
new file mode 100644
index 000000000000..025f272a7294
--- /dev/null
+++ b/tools/flaky-test-reporter/src/utils.ts
@@ -0,0 +1,30 @@
+/** Warnings go to stderr so stdout stays free for the tool's own progress output. */
+export function warn(message: string): void {
+  console.error(`warning: ${message}`);
+}
+
+/** Runs `worker` over `items` with at most `limit` in flight, preserving input order. */
+export async function mapWithConcurrency<TItem, TResult>(
+  items: TItem[],
+  limit: number,
+  worker: (item: TItem) => Promise<TResult>,
+): Promise<TResult[]> {
+  if (!Number.isInteger(limit) || limit < 1) {
+    throw new Error(`concurrency limit must be a positive integer, got: ${limit}`);
+  }
+
+  const results = new Array<TResult>(items.length);
+  let next = 0;
+
+  const runners = Array.from({ length: Math.min(limit, items.length) }, async () => {
+    for (;;) {
+      const index = next;
+      next += 1;
+      if (index >= items.length) return;
+      results[index] = await worker(items[index]);
+    }
+  });
+
+  await Promise.all(runners);
+  return results;
+}
diff --git a/tools/flaky-test-reporter/tsconfig.json b/tools/flaky-test-reporter/tsconfig.json
new file mode 100644
index 000000000000..963b1ea7a958
--- /dev/null
+++ b/tools/flaky-test-reporter/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.test*.ts"]
+}
diff --git a/tools/flaky-test-reporter/tsconfig.test.json b/tools/flaky-test-reporter/tsconfig.test.json
new file mode 100644
index 000000000000..a2ab7c2429b1
--- /dev/null
+++ b/tools/flaky-test-reporter/tsconfig.test.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["jest", "node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": []
+}
diff --git a/tools/jest.config.base.js b/tools/jest.config.base.js
new file mode 100644
index 000000000000..2c6a72c80a80
--- /dev/null
+++ b/tools/jest.config.base.js
@@ -0,0 +1,10 @@
+// Shared by every tools/* package: node environment, ts-jest with the package's own
+// tsconfig.test.json, and type errors that fail the run.
+module.exports = {
+  testEnvironment: 'node',
+  roots: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.ts$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.test.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'json'],
+};
diff --git a/tools/scripts/tsconfig.json b/tools/scripts/tsconfig.json
index 360f2499434f..0073319fdda6 100644
--- a/tools/scripts/tsconfig.json
+++ b/tools/scripts/tsconfig.json
@@ -1,20 +1,6 @@
 {
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "target": "esnext",
-    "module": "commonjs",
-    "strict": true,
-    "strictNullChecks": true,
-    "noEmitOnError": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitUseStrict": false,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "allowUnreachableCode": false,
-    "allowUnusedLabels": false,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "types": [ "node", "jest" ]
+    "types": ["node", "jest"]
   }
 }
diff --git a/tools/tsconfig.base.json b/tools/tsconfig.base.json
new file mode 100644
index 000000000000..f9f5d99384d0
--- /dev/null
+++ b/tools/tsconfig.base.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "lib": ["es2022"],
+    "module": "commonjs",
+    "strict": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "noEmitOnError": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}

From 378a677cfbffc15328e8d78476976cbadcb93190 Mon Sep 17 00:00:00 2001
From: Dmitry Lavrinovich <52966626+dmlvr@users.noreply.github.com>
Date: Wed, 9 Sep 2026 07:52:10 +0000
Subject: [PATCH 29/45] Core(Events): fix dxclick nodes disposing unsubscribe
 (#35014)

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 .../__internal/events/__tests__/click.test.ts | 84 +++++++++++++++++++
 .../devextreme/js/__internal/events/click.ts  | 24 ++----
 .../tests/DevExpress.ui.events/click.tests.js | 50 +++++++++++
 .../events.utils.nodesDisposing.tests.js      |  2 +-
 4 files changed, 143 insertions(+), 17 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/events/__tests__/click.test.ts

diff --git a/packages/devextreme/js/__internal/events/__tests__/click.test.ts b/packages/devextreme/js/__internal/events/__tests__/click.test.ts
new file mode 100644
index 000000000000..86a52d657434
--- /dev/null
+++ b/packages/devextreme/js/__internal/events/__tests__/click.test.ts
@@ -0,0 +1,84 @@
+import {
+  afterEach, describe, expect, it, jest,
+} from '@jest/globals';
+import { removeEvent } from '@js/common/core/events/remove';
+import eventsEngine from '@ts/events/core/events_engine';
+
+import { name as clickEventName } from '../click';
+
+const noop = (): void => {};
+
+const getRemoveHandlersCount = (element: Element): number => {
+  const elementData = eventsEngine.elementDataMap?.get(element);
+
+  return elementData?.[removeEvent]?.handleObjects.length ?? 0;
+};
+
+describe('dxclick nodes disposing (5025)', () => {
+  const clickableNodes: HTMLElement[] = [];
+
+  const createClickableNode = (): HTMLElement => {
+    const node = document.createElement('div');
+
+    document.body.appendChild(node);
+    eventsEngine.on(node, clickEventName, noop);
+    clickableNodes.push(node);
+
+    return node;
+  };
+
+  afterEach(() => {
+    clickableNodes.forEach((node) => {
+      eventsEngine.off(node);
+      node.remove();
+    });
+    clickableNodes.length = 0;
+  });
+
+  it('keeps a foreign dxremove handler on the previously clicked node', () => {
+    const clicked = createClickableNode();
+    const other = createClickableNode();
+
+    clicked.click();
+
+    const foreignHandler = jest.fn();
+    eventsEngine.on(clicked, removeEvent, foreignHandler);
+
+    other.click();
+    eventsEngine.triggerHandler(clicked, { type: removeEvent });
+
+    expect(foreignHandler).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps a foreign dxremove handler when the same node is clicked twice', () => {
+    const clicked = createClickableNode();
+
+    clicked.click();
+    expect(getRemoveHandlersCount(clicked)).toBe(1);
+
+    const foreignHandler = jest.fn();
+    eventsEngine.on(clicked, removeEvent, foreignHandler);
+
+    clicked.click();
+    expect(getRemoveHandlersCount(clicked)).toBe(2);
+
+    eventsEngine.triggerHandler(clicked, { type: removeEvent });
+
+    expect(foreignHandler).toHaveBeenCalledTimes(1);
+  });
+
+  it('removes only its own dxremove handler from the previously clicked node', () => {
+    const clicked = createClickableNode();
+    const other = createClickableNode();
+
+    clicked.click();
+    expect(getRemoveHandlersCount(clicked)).toBe(1);
+
+    eventsEngine.on(clicked, removeEvent, noop);
+    expect(getRemoveHandlersCount(clicked)).toBe(2);
+
+    other.click();
+
+    expect(getRemoveHandlersCount(clicked)).toBe(1);
+  });
+});
diff --git a/packages/devextreme/js/__internal/events/click.ts b/packages/devextreme/js/__internal/events/click.ts
index 29194146f916..d6f497463d3f 100644
--- a/packages/devextreme/js/__internal/events/click.ts
+++ b/packages/devextreme/js/__internal/events/click.ts
@@ -24,10 +24,11 @@ type NativeClickEvent = Event & {
 
 let prevented: boolean | null = null;
 let lastFiredEvent: NativeClickEvent | null = null;
-const subscriptions = new Map<NativeClickEvent, NodesDisposingSubscription>();
+let lastSubscription: NodesDisposingSubscription | null = null;
 
 const onNodeRemove = (): void => {
   lastFiredEvent = null;
+  lastSubscription = null;
 };
 
 const clickHandler = function (e: EmitterEvent & { originalEvent: NativeClickEvent }): void {
@@ -41,25 +42,16 @@ const clickHandler = function (e: EmitterEvent & { originalEvent: NativeClickEve
       originalEvent.DXCLICK_FIRED = true;
     }
 
-    if (lastFiredEvent && subscriptions.has(lastFiredEvent)) {
-      // @ts-expect-error the subscription stores onceCallback, not callback, so this
-      // destructured callback is always undefined and off() drops every dxremove
-      // handler from the nodes
-      const { nodes, callback } = subscriptions.get(lastFiredEvent) as NodesDisposingSubscription;
+    if (lastSubscription) {
+      const { nodes, onceCallback } = lastSubscription;
 
-      unsubscribeNodesDisposing(lastFiredEvent, callback, nodes);
-
-      subscriptions.delete(lastFiredEvent);
+      unsubscribeNodesDisposing(lastFiredEvent, onceCallback, nodes);
     }
 
     lastFiredEvent = originalEvent;
-
-    const subscriptionData: NodesDisposingSubscription = subscribeNodesDisposing(
-      lastFiredEvent,
-      onNodeRemove,
-    );
-
-    subscriptions.set(lastFiredEvent, subscriptionData);
+    lastSubscription = originalEvent
+      ? subscribeNodesDisposing(originalEvent, onNodeRemove)
+      : null;
 
     fireEvent({
       type: CLICK_EVENT_NAME,
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.events/click.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.events/click.tests.js
index b1a60379837d..d7faf25dfb2d 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.events/click.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.events/click.tests.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import { noop } from 'core/utils/common';
 import clickEvent from 'common/core/events/click';
+import { removeEvent } from 'common/core/events/remove';
 import domUtils from '__internal/core/utils/m_dom';
 import support from '__internal/core/utils/m_support';
 import devices from '__internal/core/m_devices';
@@ -425,3 +426,52 @@ QUnit.test('dxclick should not be fired twice when \'click\' is triggered from i
     pointer.start().down().up();
     $(document).off('dxclick', $.noop);
 });
+
+QUnit.test('foreign dxremove handler on the previously clicked node should survive a dxclick on another node (5025)', function(assert) {
+    let clickedNodeClickCount = 0;
+    let otherNodeClickCount = 0;
+    let foreignHandlerCallCount = 0;
+
+    const $clicked = $('#first').on('dxclick', function() {
+        clickedNodeClickCount++;
+    });
+    const $other = $('#second').on('dxclick', function() {
+        otherNodeClickCount++;
+    });
+
+    nativePointerMock($clicked).start().click();
+
+    $clicked.on(removeEvent, function() {
+        foreignHandlerCallCount++;
+    });
+
+    nativePointerMock($other).start().click();
+
+    $clicked.triggerHandler({ type: removeEvent });
+
+    assert.equal(clickedNodeClickCount, 1, 'dxclick fired on the clicked node');
+    assert.equal(otherNodeClickCount, 1, 'dxclick fired on the other node');
+    assert.equal(foreignHandlerCallCount, 1, `foreign ${removeEvent} handler is still subscribed`);
+});
+
+QUnit.test('foreign dxremove handler should survive a second dxclick on the same node', function(assert) {
+    let clickCount = 0;
+    let foreignHandlerCallCount = 0;
+
+    const $clicked = $('#first').on('dxclick', function() {
+        clickCount++;
+    });
+
+    nativePointerMock($clicked).start().click();
+
+    $clicked.on(removeEvent, function() {
+        foreignHandlerCallCount++;
+    });
+
+    nativePointerMock($clicked).start().click();
+
+    $clicked.triggerHandler({ type: removeEvent });
+
+    assert.equal(clickCount, 2, 'dxclick fired twice on the same node');
+    assert.equal(foreignHandlerCallCount, 1, `foreign ${removeEvent} handler is still subscribed`);
+});
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.events/events.utils.nodesDisposing.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.events/events.utils.nodesDisposing.tests.js
index c59021aa41f3..b42d196ee5ec 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.events/events.utils.nodesDisposing.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.events/events.utils.nodesDisposing.tests.js
@@ -31,7 +31,7 @@ QUnit.test('should clean elementDataMap when using subscribeNodesDisposing and u
         ? afterSubscribeElementData[removeEvent].handleObjects.length
         : 0;
 
-    unsubscribeNodesDisposing(clickEvent, subscriptionData.callback, subscriptionData.nodes);
+    unsubscribeNodesDisposing(clickEvent, subscriptionData.onceCallback, subscriptionData.nodes);
 
     const finalElementData = eventsEngine.elementDataMap.get(document);
     const afterUnsubscribeHandleObjectsCount = finalElementData && finalElementData[removeEvent]

From a702623f19a7c9499817d468b43a3933ba64fcd6 Mon Sep 17 00:00:00 2001
From: Alyar <Alyar666@users.noreply.github.com>
Date: Wed, 9 Sep 2026 08:26:01 +0000
Subject: [PATCH 30/45] Grids - FilterController: Cover the current filter
 behavior with tests (#35090)

Co-authored-by: Alyar <>
---
 .../__tests__/__mock__/helpers/utils.ts       |   4 +
 .../__tests__/m_utils.combine_filters.test.ts |  95 +++++
 .../columns_controller.update_filter.test.ts  | 130 ++++++
 .../data_controller.combined_filter.test.ts   | 375 ++++++++++++++++++
 ...ilter_sync.filter_value_edge_cases.test.ts |  93 +++++
 5 files changed, 697 insertions(+)
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/__tests__/m_utils.combine_filters.test.ts
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/columns_controller/__tests__/columns_controller.update_filter.test.ts
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.combined_filter.test.ts
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/filter_sync/__tests__/filter_sync.filter_value_edge_cases.test.ts

diff --git a/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts b/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts
index 3acad5bf9f84..e316924f0250 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts
@@ -78,3 +78,7 @@ export const flushAsync = async (): Promise<void> => {
   jest.runAllTimers();
   await Promise.resolve();
 };
+
+export const toPlainFilter = (value: unknown): unknown => (Array.isArray(value)
+  ? Array.from(value, toPlainFilter)
+  : value);
diff --git a/packages/devextreme/js/__internal/grids/grid_core/__tests__/m_utils.combine_filters.test.ts b/packages/devextreme/js/__internal/grids/grid_core/__tests__/m_utils.combine_filters.test.ts
new file mode 100644
index 000000000000..0496144016dd
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/__tests__/m_utils.combine_filters.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from '@jest/globals';
+import type { DataFilter } from '@ts/grids/grid_core/data_controller/types';
+import gridCoreUtils from '@ts/grids/grid_core/m_utils';
+
+const FIRST = ['a', '=', 1];
+const SECOND = ['b', '=', 2];
+const THIRD = ['c', '=', 3];
+const MATCH_NOTHING = ['!'];
+
+const combineFilters = (
+  filters: unknown[],
+  operation?: 'and' | 'or',
+): DataFilter => gridCoreUtils.combineFilters(filters as DataFilter[], operation);
+
+describe('combineFilters', () => {
+  describe('when the list is empty', () => {
+    it('should return undefined', () => {
+      expect(combineFilters([])).toBeUndefined();
+    });
+  });
+
+  describe('when every entry is empty', () => {
+    it('should return undefined', () => {
+      expect(combineFilters([null, undefined])).toBeUndefined();
+    });
+  });
+
+  describe('when a single expression is given', () => {
+    it('should unwrap it', () => {
+      expect(combineFilters([FIRST])).toEqual(FIRST);
+    });
+  });
+
+  describe('when several expressions are given', () => {
+    it('should join them with and by default', () => {
+      expect(combineFilters([FIRST, SECOND])).toEqual([FIRST, 'and', SECOND]);
+    });
+
+    it('should join them with the requested operation', () => {
+      expect(combineFilters([FIRST, SECOND], 'or')).toEqual([FIRST, 'or', SECOND]);
+    });
+
+    it('should skip the empty entries', () => {
+      expect(combineFilters([null, FIRST, undefined, SECOND]))
+        .toEqual([FIRST, 'and', SECOND]);
+    });
+  });
+
+  describe('when the same expressions are folded pairwise and combined in one call', () => {
+    it('should nest to the left while folding pairwise', () => {
+      expect(combineFilters([combineFilters([FIRST, SECOND]), THIRD]))
+        .toEqual([[FIRST, 'and', SECOND], 'and', THIRD]);
+    });
+
+    it('should stay flat while combining in one call', () => {
+      expect(combineFilters([FIRST, SECOND, THIRD]))
+        .toEqual([FIRST, 'and', SECOND, 'and', THIRD]);
+    });
+
+    it('should produce different structures for the two ways', () => {
+      expect(combineFilters([combineFilters([FIRST, SECOND]), THIRD]))
+        .not.toEqual(combineFilters([FIRST, SECOND, THIRD]));
+    });
+  });
+
+  describe('when a match-nothing filter is among the entries', () => {
+    it('should collapse an and group', () => {
+      expect(combineFilters([FIRST, MATCH_NOTHING])).toEqual(MATCH_NOTHING);
+    });
+
+    it('should be skipped in an or group', () => {
+      expect(combineFilters([FIRST, MATCH_NOTHING], 'or')).toEqual(FIRST);
+    });
+
+    it('should survive on its own', () => {
+      expect(combineFilters([MATCH_NOTHING])).toEqual(MATCH_NOTHING);
+    });
+  });
+
+  describe('when a predicate function is among the entries', () => {
+    const predicate = (item: unknown): boolean => Boolean(item);
+
+    it('should pass it through on its own', () => {
+      expect(combineFilters([predicate])).toBe(predicate);
+    });
+
+    it('should make it a member of the group next to an expression', () => {
+      const combined = combineFilters([predicate, FIRST]) as unknown as unknown[];
+
+      expect(combined).toHaveLength(3);
+      expect(combined[0]).toBe(predicate);
+      expect(combined.slice(1)).toEqual(['and', FIRST]);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/__tests__/columns_controller.update_filter.test.ts b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/__tests__/columns_controller.update_filter.test.ts
new file mode 100644
index 000000000000..2f0122ced85b
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/__tests__/columns_controller.update_filter.test.ts
@@ -0,0 +1,130 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+} from '@jest/globals';
+import type { dxElementWrapper } from '@js/core/renderer';
+import { extend } from '@js/core/utils/extend';
+import type { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
+import type { DataGridInstance } from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+} from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+
+const DATA = [
+  { id: 1, name: 'Alex', age: 15 },
+  { id: 2, name: 'Dan', age: 20 },
+];
+
+interface TaggedSelector {
+  columnIndex?: number;
+  filterValue?: unknown;
+  selectedFilterOperation?: unknown;
+}
+
+const createGrid = (): Promise<{
+  $container: dxElementWrapper;
+  component: DataGridModel;
+  instance: DataGridInstance;
+}> => createDataGrid({
+  dataSource: DATA,
+  columns: ['name', 'age'],
+});
+
+const updateFilter = (
+  instance: DataGridInstance,
+  filter: unknown,
+  remoteFiltering: boolean,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): any => instance.getController('columns').updateFilter(filter, remoteFiltering);
+
+describe('ColumnsController.updateFilter', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  describe('when filtering locally', () => {
+    it('should replace the data field with the column selector itself', async () => {
+      const { instance } = await createGrid();
+      const nameColumn = instance.getController('columns').getVisibleColumns()[0];
+
+      const result = updateFilter(instance, ['name', '=', 'Alex'], false);
+
+      expect(result[0]).toBe(nameColumn.selector);
+    });
+
+    it('should tag the column selector with its column index', async () => {
+      const { instance } = await createGrid();
+      const columns = instance.getController('columns').getVisibleColumns();
+
+      updateFilter(instance, ['age', '=', 15], false);
+
+      expect((columns[1].selector as TaggedSelector).columnIndex).toBe(columns[1].index);
+    });
+
+    it('should walk nested groups', async () => {
+      const { instance } = await createGrid();
+      const columns = instance.getController('columns').getVisibleColumns();
+
+      const result = updateFilter(
+        instance,
+        [['name', '=', 'Alex'], 'and', ['age', '=', 15]],
+        false,
+      );
+
+      expect(result[0][0]).toBe(columns[0].selector);
+      expect(result[1]).toBe('and');
+      expect(result[2][0]).toBe(columns[1].selector);
+    });
+
+    it('should leave an unknown field alone', async () => {
+      const { instance } = await createGrid();
+
+      expect(updateFilter(instance, ['unknown', '=', 1], false)).toEqual(['unknown', '=', 1]);
+    });
+  });
+
+  describe('when filtering remotely', () => {
+    it('should keep the data fields', async () => {
+      const { instance } = await createGrid();
+
+      expect(updateFilter(instance, ['name', '=', 'Alex'], true)).toEqual(['name', '=', 'Alex']);
+    });
+  });
+
+  describe('when the filter array carries its own properties', () => {
+    it('should carry them over to the result', async () => {
+      const { instance } = await createGrid();
+      const filter = extend([], [['name', '=', 'Alex'], 'and', ['age', '=', 15]]);
+
+      filter.columnIndex = 7;
+      filter.filterValue = 'ZZ';
+      filter.selectedFilterOperation = 'between';
+
+      const result = updateFilter(instance, filter, false);
+
+      expect(result.columnIndex).toBe(7);
+      expect(result.filterValue).toBe('ZZ');
+      expect(result.selectedFilterOperation).toBe('between');
+    });
+
+    it('should pass columnIndex and filterValue down but not selectedFilterOperation', async () => {
+      const { instance } = await createGrid();
+      const customSelector = (): number => 1;
+      const filter = extend([], [[customSelector, '=', 'Alex']]);
+
+      filter.columnIndex = 3;
+      filter.filterValue = 'inherited';
+      filter.selectedFilterOperation = 'between';
+
+      updateFilter(instance, filter, false);
+
+      expect((customSelector as TaggedSelector).columnIndex).toBe(3);
+      expect((customSelector as TaggedSelector).filterValue).toBe('inherited');
+      expect((customSelector as TaggedSelector).selectedFilterOperation).toBeUndefined();
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.combined_filter.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.combined_filter.test.ts
new file mode 100644
index 000000000000..82ab7a5ba0ce
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.combined_filter.test.ts
@@ -0,0 +1,375 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+} from '@jest/globals';
+import type { dxElementWrapper } from '@js/core/renderer';
+import type { Properties as DataGridProperties } from '@js/ui/data_grid';
+import type { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
+import type { DataGridInstance } from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+  toPlainFilter,
+} from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
+
+type ColumnWithSelector = Column & { selector?: unknown };
+
+const DATA = [
+  {
+    id: 1, name: 'Alex', age: 15, city: 'Berlin',
+  },
+  {
+    id: 2, name: 'Dan', age: 20, city: 'Munich',
+  },
+];
+
+const COLUMNS_WITH_ROW_AND_HEADER_FILTERS: DataGridProperties['columns'] = [
+  { dataField: 'name', filterValue: 'Alex' },
+  { dataField: 'age', filterValues: [15] },
+  'city',
+];
+
+const createGrid = (options: DataGridProperties): Promise<{
+  $container: dxElementWrapper;
+  component: DataGridModel;
+  instance: DataGridInstance;
+}> => createDataGrid({ dataSource: DATA, ...options });
+
+const getDataFieldFilter = (
+  instance: DataGridInstance,
+): unknown => toPlainFilter(instance.getCombinedFilter(true));
+
+const getVisibleColumns = (instance: DataGridInstance): ColumnWithSelector[] => instance
+  .getController('columns')
+  .getVisibleColumns() as ColumnWithSelector[];
+
+const getFilterWithoutColumn = (
+  instance: DataGridInstance,
+  column: Column,
+): unknown => toPlainFilter(
+  instance.getController('data').getCombinedFilterWithExcludedColumn(column, true),
+);
+
+describe('DataController combined filter', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  describe('when only the filter row has values', () => {
+    it('should take the value of a single column', async () => {
+      const { instance } = await createGrid({
+        columns: [{ dataField: 'name', filterValue: 'Alex' }, 'age'],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual(['name', 'contains', 'Alex']);
+    });
+
+    it('should combine the values of several columns flatly', async () => {
+      const { instance } = await createGrid({
+        columns: [
+          { dataField: 'name', filterValue: 'Alex' },
+          { dataField: 'age', filterValue: 15 },
+        ],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual([
+        ['name', 'contains', 'Alex'], 'and', ['age', '=', 15],
+      ]);
+    });
+  });
+
+  describe('when only the header filter has values', () => {
+    it('should take a single value', async () => {
+      const { instance } = await createGrid({
+        columns: [{ dataField: 'age', filterValues: [15] }, 'name'],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual(['age', '=', 15]);
+    });
+
+    it('should combine several values with or', async () => {
+      const { instance } = await createGrid({
+        columns: [{ dataField: 'age', filterValues: [15, 20] }, 'name'],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual([
+        ['age', '=', 15], 'or', ['age', '=', 20],
+      ]);
+    });
+
+    it('should negate the group for the exclude filter type', async () => {
+      const { instance } = await createGrid({
+        columns: [{ dataField: 'age', filterValues: [15], filterType: 'exclude' }, 'name'],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual(['!', ['age', '=', 15]]);
+    });
+  });
+
+  describe('when only the search panel has text', () => {
+    it('should match every searchable column with or', async () => {
+      const { instance } = await createGrid({
+        searchPanel: { text: 'Al' },
+        columns: ['name', 'city'],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual([
+        ['name', 'contains', 'Al'], 'or', ['city', 'contains', 'Al'],
+      ]);
+    });
+
+    it('should skip hidden columns while searchVisibleColumnsOnly is on', async () => {
+      const { instance } = await createGrid({
+        searchPanel: { text: 'Al', searchVisibleColumnsOnly: true },
+        columns: [{ dataField: 'name', visible: false }, 'city'],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual(['city', 'contains', 'Al']);
+    });
+  });
+
+  describe('when only the filterValue option is set', () => {
+    it('should take the option as is', async () => {
+      const { instance } = await createGrid({
+        filterValue: ['city', '=', 'Berlin'],
+        columns: ['name', 'age', 'city'],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual(['city', '=', 'Berlin']);
+    });
+  });
+
+  describe('when no source contributes', () => {
+    it('should produce no filter', async () => {
+      const { instance } = await createGrid({ columns: ['name', 'age'] });
+
+      expect(getDataFieldFilter(instance)).toBeUndefined();
+    });
+  });
+
+  describe('when all four sources contribute', () => {
+    // The chain nests to the left: every layer passes the result of `super` as the first
+    // element of its own array. A flat combination carries the same meaning but a different
+    // structure, and the QUnit suites compare structures whole.
+    it('should nest them left to right in the source order', async () => {
+      const { instance } = await createGrid({
+        filterSyncEnabled: false,
+        filterValue: ['city', '=', 'Berlin'],
+        searchPanel: { text: 'Al' },
+        columns: [
+          { dataField: 'name', filterValue: 'A', selectedFilterOperation: 'contains' },
+          { dataField: 'age', filterValues: [15, 20] },
+          'city',
+        ],
+      });
+
+      const filterRow = ['name', 'contains', 'A'];
+      const headerFilter = [['age', '=', 15], 'or', ['age', '=', 20]];
+      const search = [['name', 'contains', 'Al'], 'or', ['city', 'contains', 'Al']];
+      const filterValue = ['city', '=', 'Berlin'];
+
+      expect(getDataFieldFilter(instance)).toEqual([
+        [[filterRow, 'and', headerFilter], 'and', search], 'and', filterValue,
+      ]);
+    });
+
+    it('should keep the source order when the middle sources are empty', async () => {
+      const { instance } = await createGrid({
+        filterSyncEnabled: false,
+        filterValue: ['city', '=', 'Berlin'],
+        columns: [{ dataField: 'name', filterValue: 'Alex' }, 'age', 'city'],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual([
+        ['name', 'contains', 'Alex'], 'and', ['city', '=', 'Berlin'],
+      ]);
+    });
+  });
+
+  describe('when filter sync is off', () => {
+    it('should keep the column filters next to filterValue', async () => {
+      const { instance } = await createGrid({
+        filterSyncEnabled: false,
+        filterValue: ['city', '=', 'Berlin'],
+        columns: COLUMNS_WITH_ROW_AND_HEADER_FILTERS,
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual([
+        [['name', 'contains', 'Alex'], 'and', ['age', '=', 15]], 'and', ['city', '=', 'Berlin'],
+      ]);
+    });
+  });
+
+  describe('when filter sync is on', () => {
+    it('should drop the column filters while filterValue is set', async () => {
+      const { instance } = await createGrid({
+        filterSyncEnabled: true,
+        filterValue: ['city', '=', 'Berlin'],
+        columns: COLUMNS_WITH_ROW_AND_HEADER_FILTERS,
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual(['city', '=', 'Berlin']);
+    });
+
+    it('should keep the column filters while filterValue is not set', async () => {
+      const { instance } = await createGrid({
+        filterSyncEnabled: true,
+        columns: COLUMNS_WITH_ROW_AND_HEADER_FILTERS,
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual([
+        ['name', 'contains', 'Alex'], 'and', ['age', '=', 15],
+      ]);
+    });
+  });
+
+  describe('when filterSyncEnabled is auto', () => {
+    it('should keep the column filters while the filter panel is hidden', async () => {
+      const { instance } = await createGrid({
+        filterValue: ['city', '=', 'Berlin'],
+        columns: COLUMNS_WITH_ROW_AND_HEADER_FILTERS,
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual([
+        [['name', 'contains', 'Alex'], 'and', ['age', '=', 15]], 'and', ['city', '=', 'Berlin'],
+      ]);
+    });
+
+    it('should drop the column filters while the filter panel is visible', async () => {
+      const { instance } = await createGrid({
+        filterPanel: { visible: true },
+        filterValue: ['city', '=', 'Berlin'],
+        columns: COLUMNS_WITH_ROW_AND_HEADER_FILTERS,
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual(['city', '=', 'Berlin']);
+    });
+  });
+
+  describe('when filterPanel.filterEnabled is false', () => {
+    it('should drop filterValue and keep the column filters', async () => {
+      const { instance } = await createGrid({
+        filterSyncEnabled: false,
+        filterPanel: { visible: true, filterEnabled: false },
+        filterValue: ['city', '=', 'Berlin'],
+        columns: COLUMNS_WITH_ROW_AND_HEADER_FILTERS,
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual([
+        ['name', 'contains', 'Alex'], 'and', ['age', '=', 15],
+      ]);
+    });
+  });
+
+  describe('when no column allows filtering', () => {
+    it('should skip filterValue', async () => {
+      const { instance } = await createGrid({
+        filterSyncEnabled: false,
+        filterValue: ['name', '=', 'Alex'],
+        columns: [
+          { dataField: 'name', allowFiltering: false, allowHeaderFiltering: false },
+          { dataField: 'age', allowFiltering: false, allowHeaderFiltering: false },
+        ],
+      });
+
+      expect(instance.getController('columns').getFilteringColumns()).toHaveLength(0);
+      expect(getDataFieldFilter(instance)).toBeUndefined();
+    });
+  });
+
+  describe('when a column is excluded', () => {
+    it('should drop its filter row condition', async () => {
+      const { instance } = await createGrid({
+        columns: COLUMNS_WITH_ROW_AND_HEADER_FILTERS,
+      });
+
+      const filter = getFilterWithoutColumn(instance, getVisibleColumns(instance)[0]);
+
+      expect(filter).toEqual(['age', '=', 15]);
+    });
+
+    it('should drop its header filter condition', async () => {
+      const { instance } = await createGrid({
+        columns: COLUMNS_WITH_ROW_AND_HEADER_FILTERS,
+      });
+
+      const filter = getFilterWithoutColumn(instance, getVisibleColumns(instance)[1]);
+
+      expect(filter).toEqual(['name', 'contains', 'Alex']);
+    });
+
+    it('should change nothing when the column has no conditions', async () => {
+      const { instance } = await createGrid({
+        columns: COLUMNS_WITH_ROW_AND_HEADER_FILTERS,
+      });
+
+      const filter = getFilterWithoutColumn(instance, getVisibleColumns(instance)[2]);
+
+      expect(filter).toEqual([
+        ['name', 'contains', 'Alex'], 'and', ['age', '=', 15],
+      ]);
+    });
+
+    it('should drop its filterValue conditions while filter sync is on', async () => {
+      const { instance } = await createGrid({
+        filterPanel: { visible: true },
+        filterSyncEnabled: true,
+        filterValue: [['city', '=', 'Berlin'], 'and', ['name', '=', 'Alex']],
+        columns: ['name', 'age', 'city'],
+      });
+      const columns = getVisibleColumns(instance);
+
+      expect(getFilterWithoutColumn(instance, columns[2])).toEqual(['name', '=', 'Alex']);
+      expect(getFilterWithoutColumn(instance, columns[0])).toEqual(['city', '=', 'Berlin']);
+    });
+
+    it('should not remember the excluded column after the call', async () => {
+      const { instance } = await createGrid({
+        columns: COLUMNS_WITH_ROW_AND_HEADER_FILTERS,
+      });
+
+      getFilterWithoutColumn(instance, getVisibleColumns(instance)[0]);
+
+      expect(getDataFieldFilter(instance)).toEqual([
+        ['name', 'contains', 'Alex'], 'and', ['age', '=', 15],
+      ]);
+    });
+  });
+
+  describe('when returnDataField is off', () => {
+    it('should return the column selector instead of the data field', async () => {
+      const { instance } = await createGrid({
+        columns: [{ dataField: 'name', filterValue: 'Alex' }, 'age'],
+      });
+
+      const filter = instance.getCombinedFilter() as unknown as unknown[];
+
+      expect(typeof filter[0]).toBe('function');
+      expect(filter[0]).toBe(getVisibleColumns(instance)[0].selector);
+    });
+  });
+
+  describe('when the search text fits no column', () => {
+    it('should produce a match-nothing filter on its own', async () => {
+      const { instance } = await createGrid({
+        searchPanel: { text: 'Al' },
+        columns: [{ dataField: 'age', dataType: 'number' }],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual(['!']);
+    });
+
+    it('should collapse the other sources too', async () => {
+      const { instance } = await createGrid({
+        searchPanel: { text: 'Al' },
+        columns: [{ dataField: 'age', dataType: 'number', filterValue: 15 }],
+      });
+
+      expect(getDataFieldFilter(instance)).toEqual(['!']);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/__tests__/filter_sync.filter_value_edge_cases.test.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/__tests__/filter_sync.filter_value_edge_cases.test.ts
new file mode 100644
index 000000000000..a1a293d60d4c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/__tests__/filter_sync.filter_value_edge_cases.test.ts
@@ -0,0 +1,93 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+} from '@jest/globals';
+import type { dxElementWrapper } from '@js/core/renderer';
+import type { Properties as DataGridProperties } from '@js/ui/data_grid';
+import type { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
+import type { DataGridInstance } from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+  toPlainFilter,
+} from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+
+const DATA = [
+  { id: 1, name: 'Alex', age: 15 },
+  { id: 2, name: 'Dan', age: 20 },
+];
+
+const SAVED_STATE_WITHOUT_IDENTIFIER = {
+  columns: [
+    { visibleIndex: 0, dataField: 'name', filterValue: 'Alex' },
+    { visibleIndex: 1, filterValue: 42, allowFiltering: false },
+  ],
+};
+
+const createGrid = (options: DataGridProperties): Promise<{
+  $container: dxElementWrapper;
+  component: DataGridModel;
+  instance: DataGridInstance;
+}> => createDataGrid({ dataSource: DATA, ...options });
+
+describe('Filter sync filterValue', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  describe('when a condition has only two elements', () => {
+    it('should filter the data as if the operation were =', async () => {
+      const { instance } = await createGrid({
+        filterPanel: { visible: true },
+        filterSyncEnabled: true,
+        filterValue: ['name', 'Alex'],
+        columns: ['name', 'age'],
+      });
+
+      const names = instance.getVisibleRows().map((row) => (row.data as { name: string }).name);
+
+      expect(toPlainFilter(instance.getCombinedFilter(true))).toEqual(['name', '=', 'Alex']);
+      expect(names).toEqual(['Alex']);
+    });
+
+    it('should fill both the filter row and the header filter of the column', async () => {
+      const { instance } = await createGrid({
+        filterPanel: { visible: true },
+        filterSyncEnabled: true,
+        filterValue: ['name', 'Alex'],
+        columns: ['name', 'age'],
+      });
+
+      expect(instance.columnOption('name', 'filterValue')).toBe('Alex');
+      expect(instance.columnOption('name', 'filterValues')).toEqual(['Alex']);
+    });
+  });
+
+  describe('when a saved column has no identifier', () => {
+    it('should throw while restoring the state', async () => {
+      const { instance } = await createGrid({
+        filterPanel: { visible: true },
+        columns: ['name', 'age'],
+        stateStoring: { enabled: true, type: 'custom', customLoad: () => Promise.resolve({}) },
+      });
+
+      expect(() => instance.state(SAVED_STATE_WITHOUT_IDENTIFIER)).toThrow(TypeError);
+    });
+
+    it('should leave behind a filterValue whose field is undefined', async () => {
+      const { instance } = await createGrid({
+        filterPanel: { visible: true },
+        columns: ['name', 'age'],
+        stateStoring: { enabled: true, type: 'custom', customLoad: () => Promise.resolve({}) },
+      });
+
+      expect(() => instance.state(SAVED_STATE_WITHOUT_IDENTIFIER)).toThrow(TypeError);
+      expect(instance.option('filterValue')).toEqual([
+        ['name', 'contains', 'Alex'], 'and', [undefined, 'contains', 42],
+      ]);
+    });
+  });
+});

From 8cedccf2e3aa0285d53a7b5fc59aca8c6effaa4e Mon Sep 17 00:00:00 2001
From: Anna Shakhova <68295572+anna-shakhova@users.noreply.github.com>
Date: Wed, 9 Sep 2026 08:31:54 +0000
Subject: [PATCH 31/45] Grids: retarget store, getDataSource,
 getCachedStoreData, loadingOperationTypes methods (#35099)

---
 .../ai_assistant_integration_controller.ts    |  6 ++-
 .../controllers/m_ai_column_controller.ts     |  6 +--
 .../data_controller/data_controller.ts        | 31 +++----------
 ...data_source_controller.integration.test.ts | 16 +++----
 .../data_source/data_source_controller.ts     | 12 +++++
 .../grids/grid_core/editing/m_editing.ts      | 11 +++--
 .../grids/grid_core/focus/m_focus.ts          | 10 +----
 .../m_keyboard_navigation.ts                  |  2 +-
 .../grids/grid_core/search/m_search.ts        |  2 +-
 .../grids/grid_core/selection/m_selection.ts  |  3 +-
 .../state_storing/m_state_storing.ts          |  2 +-
 .../grids/grid_core/views/m_rows_view.ts      | 10 +++--
 .../grids/tree_list/editing/m_editing.ts      |  3 +-
 .../grids/tree_list/selection/m_selection.ts  |  2 +-
 .../testing/helpers/gridBaseMocks.js          | 26 ++++++-----
 .../columnsResizingReorderingModule.tests.js  |  5 +++
 .../dataController.tests.js                   | 12 ++---
 .../editing.tests.js                          | 44 +++++++++----------
 .../filterSync.tests.js                       |  4 +-
 .../focus.tests.js                            |  3 +-
 .../headerFilter.tests.js                     |  2 +-
 .../keyboardNavigation.accessibility.tests.js |  6 +--
 .../keyboardNavigation.keyboardKeys.tests.js  | 14 +++---
 .../rowsView.tests.js                         | 29 +++++-------
 .../selection.tests.js                        |  8 ++--
 25 files changed, 124 insertions(+), 145 deletions(-)

diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_integration_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_integration_controller.ts
index 816a27943382..85af56d76d94 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_integration_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_integration_controller.ts
@@ -7,6 +7,7 @@ import errors from '@js/ui/widget/ui.errors';
 import type { ColumnsController } from '@ts/grids/grid_core/columns_controller/m_columns_controller';
 import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 
 import { Controller } from '../m_modules';
 import type {
@@ -22,6 +23,8 @@ export class AIAssistantIntegrationController extends Controller {
 
   private dataController!: DataController;
 
+  private dataSourceController!: DataSourceController;
+
   private getAICommandCallbacks(
     callbacks?: RequestCallbacks<ExecuteGridAssistantCommandResult>,
   ): RequestCallbacks<ExecuteGridAssistantCommandResult> {
@@ -46,7 +49,7 @@ export class AIAssistantIntegrationController extends Controller {
 
   protected buildContext(): GridContext {
     return {
-      keyExpr: this.option('keyExpr') ?? this.dataController.getDataSource()?.store()?.key(),
+      keyExpr: this.option('keyExpr') ?? this.dataSourceController.key(),
       columns: this.buildColumnsContext(),
       filtering: {
         filterValue: this.option('filterValue'),
@@ -97,6 +100,7 @@ export class AIAssistantIntegrationController extends Controller {
   public init(): void {
     this.createAction('onAIAssistantRequestCreating');
     this.dataController = this.getController('data');
+    this.dataSourceController = this.getController('dataSource');
     this.columnsController = this.getController('columns');
   }
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts
index 75a7bdf788c8..f1b0f251aa94 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts
@@ -105,7 +105,7 @@ export class AIColumnController extends Controller {
   }
 
   private unsubscribeFromStoreEvents(): void {
-    const store = this.dataController.store();
+    const store = this.dataSourceController.store();
 
     if (this.storeUpdatedHandler) {
       store?.off('updated', this.storeUpdatedHandler);
@@ -119,7 +119,7 @@ export class AIColumnController extends Controller {
   }
 
   private subscribeToStoreEvents(): void {
-    const store = this.dataController.store();
+    const store = this.dataSourceController.store();
 
     if (!store) {
       return;
@@ -159,7 +159,7 @@ export class AIColumnController extends Controller {
   }
 
   private checkStoreKey(): boolean {
-    const store = this.dataController.store();
+    const store = this.dataSourceController.store();
 
     if (store && !store.key()) {
       this.dataController.fireError('E1042', 'AI Column');
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index 92fe5c4143a4..ee2403af6f00 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -8,7 +8,6 @@ import type { StoreChange } from '@js/data/store';
 import errors from '@js/ui/widget/ui.errors';
 import { findChanges } from '@ts/core/utils/m_array_compare';
 import { fromPromise } from '@ts/core/utils/m_deferred';
-import type Store from '@ts/data/abstract_store';
 import type { DataSource } from '@ts/data/data_source/data_source';
 import type { ChangingEvent } from '@ts/data/data_source/types';
 import type { Column, ColumnsChanges } from '@ts/grids/grid_core/columns_controller/types';
@@ -201,7 +200,6 @@ export class DataController extends modules.Controller {
       'endCustomLoading',
       'filter',
       'getCombinedFilter',
-      'getDataSource',
       'getKeyByRowIndex',
       'getRowIndexByKey',
       'getVisibleRows',
@@ -235,7 +233,7 @@ export class DataController extends modules.Controller {
     )) {
       const isValueChanged = args.value !== args.previousValue;
       if (isValueChanged) {
-        const store = this.store();
+        const store = this.dataSourceController.store();
         if (isLocalStore(store)) {
           store._array = args.value;
         }
@@ -321,10 +319,6 @@ export class DataController extends modules.Controller {
     return !this._isLoading;
   }
 
-  public getDataSource(): DataSource | null {
-    return this._dataSource?._dataSource ?? null;
-  }
-
   public getCombinedFilter(returnDataField?: boolean): DataFilter {
     return this.combinedFilter(undefined, returnDataField);
   }
@@ -1181,13 +1175,6 @@ export class DataController extends modules.Controller {
     );
   }
 
-  public loadingOperationTypes(): OperationTypes {
-    const dataSourceAdapter = this.dataSourceController.getAdapter();
-    const operationTypes: OperationTypes | undefined = dataSourceAdapter?.loadingOperationTypes();
-
-    return operationTypes ?? {};
-  }
-
   /**
    * @extended: virtual_scrolling, focus
    */
@@ -1359,10 +1346,6 @@ export class DataController extends modules.Controller {
     return this._dataSource ? this._dataSource.pageCount() : 1;
   }
 
-  public store(): Store | undefined {
-    return this._dataSource?.store();
-  }
-
   public loadAllItems(
     data?: RawItemData[],
     skipFilter = false,
@@ -1427,11 +1410,11 @@ export class DataController extends modules.Controller {
   }
 
   public keyOf(data: RawItemData): RowKey | undefined {
-    return this.store()?.keyOf(data);
+    return this.dataSourceController.store()?.keyOf(data);
   }
 
   private byKey(key: RowKey): DeferredObj<RawItemData> {
-    const store = this.store();
+    const store = this.dataSourceController.store();
 
     if (!store) {
       return Deferred<RawItemData>().reject();
@@ -1447,7 +1430,7 @@ export class DataController extends modules.Controller {
   }
 
   public key(): string | string[] | undefined {
-    return this.store()?.key();
+    return this.dataSourceController.key();
   }
 
   /**
@@ -1536,7 +1519,7 @@ export class DataController extends modules.Controller {
   public refresh(options?: boolean | RefreshOptions): DeferredObj<unknown> {
     const refreshOptions = getRefreshOptions(options);
 
-    const dataSource = this.getDataSource();
+    const dataSource = this.dataSourceController.getDataSource();
     const { changesOnly } = refreshOptions;
     const d = Deferred();
 
@@ -1621,10 +1604,6 @@ export class DataController extends modules.Controller {
     };
   }
 
-  public getCachedStoreData(): RawItemData[] | undefined {
-    return this._dataSource?.getCachedStoreData();
-  }
-
   /**
    * @extended: virtual_scrolling
    */
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
index 1ce4adbd61d0..bba1ae7c4c52 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
@@ -89,10 +89,12 @@ describe('dataSource module registration', () => {
     }
   });
 
-  it('leaves the getDataSource public method on DataController', async () => {
+  it('owns the getDataSource widget method', async () => {
     const { instance } = await createDataGrid({ dataSource: DATA });
 
-    expect(instance.getDataSource()).toBe(instance.getController('data').getDataSource());
+    expect(instance.getDataSource()).toBeInstanceOf(DataSourceClass);
+    expect(instance.getDataSource())
+      .toBe(instance.getController('dataSource').getDataSource());
   });
 
   it('sits at the bottom of the controller order', async () => {
@@ -196,13 +198,6 @@ describe('dataSource controller reads delegate to the adapter', () => {
   beforeEach(beforeTest);
   afterEach(afterTest);
 
-  it('delegates store', async () => {
-    const { instance } = await createDataGrid({ dataSource: DATA });
-
-    expect(instance.getController('dataSource').store())
-      .toBe(instance.getController('data').store());
-  });
-
   it('delegates key', async () => {
     const { instance } = await createDataGrid({ dataSource: DATA });
 
@@ -213,8 +208,7 @@ describe('dataSource controller reads delegate to the adapter', () => {
     const { instance } = await createDataGrid({ dataSource: DATA });
     const dataSourceController = instance.getController('dataSource');
 
-    expect(dataSourceController.getDataSource())
-      .toBe(instance.getController('data').getDataSource());
+    expect(dataSourceController.getDataSource()).toBeInstanceOf(DataSourceClass);
     expect(dataSourceController.getDataSource())
       .not.toBe(dataSourceController.getAdapter());
   });
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
index e371afe6f7ee..9b63506a0af8 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
@@ -17,6 +17,10 @@ export class DataSourceController extends modules.Controller {
 
   private isShared = false;
 
+  public publicMethods(): string[] {
+    return ['getDataSource'];
+  }
+
   /**
    * @extended: DataGrid's data_source_controller
    */
@@ -108,6 +112,10 @@ export class DataSourceController extends modules.Controller {
     return this.adapter?.operationTypes();
   }
 
+  public loadingOperationTypes(): OperationTypes {
+    return this.adapter?.loadingOperationTypes() ?? {};
+  }
+
   public isLoading(): boolean {
     return this.adapter?.isLoading() ?? false;
   }
@@ -119,4 +127,8 @@ export class DataSourceController extends modules.Controller {
   public lastLoadOptions(): Partial<NonNullable<LoadOperation['lastLoadOptions']>> {
     return this.adapter?.lastLoadOptions() ?? {};
   }
+
+  public getCachedStoreData(): RawItemData[] | undefined {
+    return this.adapter?.getCachedStoreData();
+  }
 }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts
index 7717bc4aabad..b1e7834aa242 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts
@@ -617,7 +617,8 @@ class EditingControllerImpl extends modules.ViewController {
       if (change.type === 'insert') {
         this._addInsertInfo(change);
       } else {
-        const items = dataController.getCachedStoreData() || dataController.items()?.map((item) => item.data);
+        const items = this.dataSourceController.getCachedStoreData()
+          || dataController.items()?.map((item) => item.data);
         const rowIndex = gridCoreUtils.getIndexByKey(change.key, items, dataController.key());
         this._addInternalData({ key: change.key, oldData: items[rowIndex] });
       }
@@ -1006,7 +1007,7 @@ class EditingControllerImpl extends modules.ViewController {
    */
   protected addRow(parentKey) {
     const dataController = this._dataController;
-    const store = dataController.store();
+    const store = this.dataSourceController.store();
 
     if (!store) {
       dataController.fireError('E1052', this.component.NAME);
@@ -1018,9 +1019,7 @@ class EditingControllerImpl extends modules.ViewController {
   }
 
   protected _addRow(parentKey) {
-    const dataController = this._dataController;
-    const store = dataController.store();
-    const key = store && store.key();
+    const key = this.dataSourceController.key();
     const param: any = { data: {} };
     const oldEditRowIndex = this._getVisibleEditRowIndex();
     // @ts-expect-error
@@ -1615,7 +1614,7 @@ class EditingControllerImpl extends modules.ViewController {
   }
 
   private _processChanges(deferreds, results, dataChanges, changes) {
-    const store = this._dataController.store() as Store;
+    const store = this.dataSourceController.store() as Store;
 
     each(changes, (index, change) => {
       const oldData = this._getOldData(change.key);
diff --git a/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts b/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
index fee97a227e9e..5d7d8e3098a6 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
@@ -919,14 +919,6 @@ const editing = (Base: ModuleType<EditingController>) => class FocusEditingContr
 const rowsView = (Base: ModuleType<RowsView>) => class RowsViewFocusController extends Base {
   private _scrollToFocusOnResize: any;
 
-  private dataSourceController!: DataSourceController;
-
-  public init(): void {
-    this.dataSourceController = this.getController('dataSource');
-
-    super.init();
-  }
-
   protected _createRow(row) {
     // @ts-expect-error
     const $row = super._createRow.apply(this, arguments);
@@ -946,7 +938,7 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewFocusController e
     super._checkRowKeys.apply(this, arguments);
 
     if (this.option('focusedRowEnabled') && this.option('dataSource')) {
-      const store = this._dataController.store();
+      const store = this.dataSourceController.store();
       if (store && !store.key()) {
         this._dataController.fireError('E1042', 'Row focusing');
       }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
index 37d84665cbb4..9564e9d39939 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
@@ -2591,7 +2591,7 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
   private _fireFocusedRowChanging(eventArgs: any, $newFocusedRow: dxElementWrapper) {
     const newRowIndex = this._getRowIndex($newFocusedRow);
     const prevFocusedRowIndex = this.option('focusedRowIndex');
-    const loadingOperationTypes = this._dataController.loadingOperationTypes();
+    const loadingOperationTypes = this.dataSourceController.loadingOperationTypes();
 
     const args: any = {
       rowElement: $newFocusedRow,
diff --git a/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts b/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
index 08bad15c6edd..796df8e7148a 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts
@@ -279,7 +279,7 @@ const rowsView = (
 
   private _getStringNormalizer() {
     const isCaseSensitive = this.option('searchPanel.highlightCaseSensitive');
-    const dataSource = this._dataController?.getDataSource?.();
+    const dataSource = this.dataSourceController.getDataSource();
     const langParams = dataSource?.loadOptions?.()?.langParams;
 
     return (str: string): string => toComparable(str, isCaseSensitive, langParams);
diff --git a/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts b/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
index 3a5167dc6066..8a331632e28b 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
@@ -72,8 +72,7 @@ const processLongTap = function (that, dxEvent) {
 
 const isSeveralRowsSelected = function (that, selectionFilter) {
   let keyIndex = 0;
-  const store = that._dataController.store();
-  const key = store?.key();
+  const key = that.dataSourceController.key();
   const isComplexKey = Array.isArray(key);
 
   if (!selectionFilter.length) {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/state_storing/m_state_storing.ts b/packages/devextreme/js/__internal/grids/grid_core/state_storing/m_state_storing.ts
index a9562c531e4a..eafb2d17ae80 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/state_storing/m_state_storing.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/state_storing/m_state_storing.ts
@@ -13,7 +13,7 @@ export const rowsView = (Base: ModuleType<RowsView>) => class StateStoringRowsVi
     super.init();
 
     this._dataController.stateLoaded.add(() => {
-      if (this._dataController.isLoaded() && !this._dataController.getDataSource()) {
+      if (this._dataController.isLoaded() && !this.dataSourceController.getDataSource()) {
         this.setLoading(false);
         this.renderNoDataText();
         // TODO getView
diff --git a/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts b/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts
index b5b668f7b4de..5e8004eff1d3 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts
@@ -22,6 +22,7 @@ import type {
   ColumnsResizerViewController,
 } from '@ts/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering';
 import { generateRowValues } from '@ts/grids/grid_core/data_controller/utils/row_values';
+import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type { FocusController } from '@ts/grids/grid_core/focus/m_focus';
 import type { KeyboardNavigationController } from '@ts/grids/grid_core/keyboard_navigation/m_keyboard_navigation';
 import type { ValidatingController } from '@ts/grids/grid_core/validating/m_validating';
@@ -104,6 +105,8 @@ export class RowsView extends ColumnsView {
 
   protected _validatingController!: ValidatingController;
 
+  protected dataSourceController!: DataSourceController;
+
   public _columnHeadersView!: ColumnHeadersView;
 
   public _hasHeight: boolean | undefined;
@@ -135,6 +138,7 @@ export class RowsView extends ColumnsView {
     this._focusController = this.getController('focus');
     this._keyboardNavigationController = this.getController('keyboardNavigation');
     this._validatingController = this.getController('validating');
+    this.dataSourceController = this.getController('dataSource');
     this._columnHeadersView = this.getView('columnHeadersView');
     this._rowHeight = 0;
     this._scrollTop = 0;
@@ -353,7 +357,7 @@ export class RowsView extends ColumnsView {
       $element.append('<div>');
     }
     if (force || !that._loadPanel) {
-      that._renderLoadPanel($element, $element.parent(), isLocalStore(that._dataController.store()));
+      that._renderLoadPanel($element, $element.parent(), isLocalStore(that.dataSourceController.store()));
     }
 
     if ((force || !that.getScrollable()) && that._dataController.isLoaded()) {
@@ -578,7 +582,7 @@ export class RowsView extends ColumnsView {
   protected _checkRowKeys(options) {
     const that = this;
     const rows = that._getRows(options);
-    const keyExpr = that._dataController.store()?.key();
+    const keyExpr = that.dataSourceController.key();
 
     keyExpr && rows.some((row) => {
       if (row.rowType === 'data' && row.key === undefined) {
@@ -1236,7 +1240,7 @@ export class RowsView extends ColumnsView {
       return;
     }
 
-    if (!loadPanel && messageText !== undefined && isLocalStore(dataController.store()) && loadPanelOptions.enabled === 'auto' && $element) {
+    if (!loadPanel && messageText !== undefined && isLocalStore(that.dataSourceController.store()) && loadPanelOptions.enabled === 'auto' && $element) {
       that._renderLoadPanel($element, $element.parent());
       loadPanel = that._loadPanel;
     }
diff --git a/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts b/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts
index 7f4f4bc1c79c..df36c6d53e9b 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts
@@ -111,8 +111,7 @@ class EditingController extends editingModule.controllers.editing {
     const result = super._beforeSaveEditData.apply(this, arguments);
 
     if (change && change.type !== DATA_EDIT_DATA_INSERT_TYPE) {
-      const store = this._dataController?.store();
-      const key = store?.key();
+      const key = this.dataSourceController.key();
 
       if (!isDefined(key)) {
         throw errors.Error('E1045');
diff --git a/packages/devextreme/js/__internal/grids/tree_list/selection/m_selection.ts b/packages/devextreme/js/__internal/grids/tree_list/selection/m_selection.ts
index 985a78826091..230f0f3bedd6 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/selection/m_selection.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/selection/m_selection.ts
@@ -95,7 +95,7 @@ SelectionController & TreeListSelectionControllerExtension
     config.plainItems = (cached) => {
       let result;
       if (cached) {
-        result = this._dataController.getCachedStoreData();
+        result = this.dataSourceController.getCachedStoreData();
       }
 
       result ||= plainItems.apply(this, arguments as any).map((item) => item.data);
diff --git a/packages/devextreme/testing/helpers/gridBaseMocks.js b/packages/devextreme/testing/helpers/gridBaseMocks.js
index baa77c72496e..36b48f913316 100644
--- a/packages/devextreme/testing/helpers/gridBaseMocks.js
+++ b/packages/devextreme/testing/helpers/gridBaseMocks.js
@@ -2,14 +2,15 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
     const exports = {};
 
     exports.MockDataSourceAdapter = function(options) {
-        const store = function() {
+        // Loads read options.items: the stores tests pass in options.store are write-only spies.
+        const itemsStore = function() {
             return new ArrayStore(options.items);
         };
 
         const loadCustomResult = (loadOptions) => {
             const d = $.Deferred();
 
-            store().load(loadOptions)
+            itemsStore().load(loadOptions)
                 .done((data, extra) => {
                     d.resolve({ data: data, extra: extra });
                 })
@@ -19,6 +20,7 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
         };
 
         return {
+            _dataSource: options.dataSource,
             beginLoading: function() {
             },
             endLoading: function() {
@@ -47,11 +49,19 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
             getDataIndexGetter: function() {
                 return undefined;
             },
+            getCachedStoreData: function() {
+                return undefined;
+            },
+            loadingOperationTypes: function() {
+                return undefined;
+            },
             dispose: function() {
             },
-            store: store,
+            store: function() {
+                return options.store;
+            },
             load: function(loadOptions) {
-                return store().load(loadOptions);
+                return itemsStore().load(loadOptions);
             },
             customLoader: {
                 load: loadCustomResult,
@@ -171,10 +181,6 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
                 });
             },
 
-            store: function() {
-                return options.store;
-            },
-
             insertItems: function(insertingItems) {
                 $.each(insertingItems, function() {
                     options.items.push(this);
@@ -288,10 +294,6 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
                 return gridCore.getIndexByKey(key, options.items);
             },
 
-            loadingOperationTypes: function() {
-                return {};
-            },
-
             skipProcessingPagingChange: commonUtils.noop,
             changed: $.Callbacks(),
             loadingChanged: $.Callbacks(),
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnsResizingReorderingModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnsResizingReorderingModule.tests.js
index ea8ba47f77f1..545a24d13539 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnsResizingReorderingModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnsResizingReorderingModule.tests.js
@@ -968,6 +968,11 @@ QUnit.module('Columns resizing', {
                     ]
                 }),
 
+                dataSource: {
+                    key: noop,
+                    store: noop
+                },
+
                 columnsResizer: {
                     isResizing: () => true
                 },
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
index f9e784373cba..f018d1e4c3f9 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js
@@ -3538,7 +3538,7 @@ QUnit.module('Virtual scrolling', { beforeEach: setupVirtualScrollingModule, aft
 
     QUnit.test('virtual items on end when last page size less than half page size', function(assert) {
         const dataController = this.dataController;
-        dataController.store().insert({ id: 1001, value: 'value1001' });
+        this.dataSourceController.store().insert({ id: 1001, value: 'value1001' });
         dataController.refresh();
 
         dataController.setViewportItemIndex(999);
@@ -3559,10 +3559,10 @@ QUnit.module('Virtual scrolling', { beforeEach: setupVirtualScrollingModule, aft
     // T866890
     QUnit.test('virtual items on end when last page size less than viewport size', function(assert) {
         const dataController = this.dataController;
-        dataController.store().insert({ id: 1001 });
-        dataController.store().insert({ id: 1002 });
-        dataController.store().insert({ id: 1003 });
-        dataController.store().insert({ id: 1004 });
+        this.dataSourceController.store().insert({ id: 1001 });
+        this.dataSourceController.store().insert({ id: 1002 });
+        this.dataSourceController.store().insert({ id: 1003 });
+        this.dataSourceController.store().insert({ id: 1004 });
         dataController.refresh();
 
         dataController.viewportSize(3);
@@ -8095,7 +8095,7 @@ QUnit.module('Filtering', {
         this.dataSource = undefined;
 
         // assert
-        assert.notOk(this.dataController.getDataSource(), 'no dataSource');
+        assert.notOk(this.dataSourceController.getDataSource(), 'no dataSource');
 
         // act
         this.dataController.clearFilter();
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/editing.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/editing.tests.js
index bd01b78bb8c3..aece23220c57 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/editing.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/editing.tests.js
@@ -3638,7 +3638,7 @@ QUnit.module('Editing with real dataController', {
         // arrange
         const that = this;
         const rowsView = this.rowsView;
-        const originalInsert = that.dataController.store().insert;
+        const originalInsert = that.dataSourceController.store().insert;
         const testElement = $('#container');
 
         $.extend(that.options.editing, {
@@ -3649,7 +3649,7 @@ QUnit.module('Editing with real dataController', {
             }
         });
 
-        that.dataController.store().insert = function(values) {
+        that.dataSourceController.store().insert = function(values) {
             // assert
             assert.deepEqual(values, {
                 Test1: 'test1',
@@ -3691,7 +3691,7 @@ QUnit.module('Editing with real dataController', {
         assert.equal(testElement.find('input').length, 0, 'not has inputs');
 
         // arrange
-        that.dataController.store().insert = originalInsert;
+        that.dataSourceController.store().insert = originalInsert;
         that.option('onRowInserting', function(params) {
             params.cancel = true;
         });
@@ -4163,7 +4163,7 @@ QUnit.module('Editing with real dataController', {
         // arrange
         const that = this;
         const rowsView = that.rowsView;
-        const originalUpdate = that.dataController.store().update;
+        const originalUpdate = that.dataSourceController.store().update;
         const testElement = $('#container');
 
         $.extend(that.options.editing, {
@@ -4174,7 +4174,7 @@ QUnit.module('Editing with real dataController', {
             }
         });
 
-        that.dataController.store().update = function(key, values) {
+        that.dataSourceController.store().update = function(key, values) {
             // assert
             assert.deepEqual(values, {
                 age: 15,
@@ -4247,7 +4247,7 @@ QUnit.module('Editing with real dataController', {
         assert.equal(testElement.find('.dx-cell-modified').length, 0, 'no element with class name dx-cell-modified');
 
         // arrange
-        that.dataController.store().update = originalUpdate;
+        that.dataSourceController.store().update = originalUpdate;
         that.option('onRowUpdating', function(params) {
             params.cancel = true;
         });
@@ -4295,7 +4295,7 @@ QUnit.module('Editing with real dataController', {
             }
         });
 
-        sinon.spy(that.dataController.store(), 'update');
+        sinon.spy(that.dataSourceController.store(), 'update');
 
         const cancelDeferred = $.Deferred();
 
@@ -4326,14 +4326,14 @@ QUnit.module('Editing with real dataController', {
         that.saveEditData();
 
         // assert
-        assert.ok(!that.dataController.store().update.called, 'update is not called');
+        assert.ok(!that.dataSourceController.store().update.called, 'update is not called');
 
         // act
         cancelDeferred.resolve();
 
         // assert
-        assert.equal(that.dataController.store().update.callCount, 1, 'update called one time');
-        assert.deepEqual(that.dataController.store().update.lastCall.args, [that.array[0], { name: 'Test1', room: 666 }], 'update args');
+        assert.equal(that.dataSourceController.store().update.callCount, 1, 'update called one time');
+        assert.deepEqual(that.dataSourceController.store().update.lastCall.args, [that.array[0], { name: 'Test1', room: 666 }], 'update args');
     });
 
     QUnit.test('Update cell when edit mode batch and cancel in onRowUpdating is Promise and resolved', function(assert) {
@@ -4350,7 +4350,7 @@ QUnit.module('Editing with real dataController', {
             }
         });
 
-        sinon.spy(that.dataController.store(), 'update');
+        sinon.spy(that.dataSourceController.store(), 'update');
 
         let resolve;
         const cancelPromise = new Promise(function(onResolve) {
@@ -4384,10 +4384,10 @@ QUnit.module('Editing with real dataController', {
         that.saveEditData();
 
         // assert
-        assert.ok(!that.dataController.store().update.called, 'update is not called');
+        assert.ok(!that.dataSourceController.store().update.called, 'update is not called');
         cancelPromise.then(function() {
-            assert.equal(that.dataController.store().update.callCount, 1, 'update called one time');
-            assert.deepEqual(that.dataController.store().update.lastCall.args, [that.array[0], { name: 'Test1', room: 666 }], 'update args');
+            assert.equal(that.dataSourceController.store().update.callCount, 1, 'update called one time');
+            assert.deepEqual(that.dataSourceController.store().update.lastCall.args, [that.array[0], { name: 'Test1', room: 666 }], 'update args');
         });
 
         // act
@@ -4410,7 +4410,7 @@ QUnit.module('Editing with real dataController', {
             }
         });
 
-        sinon.spy(that.dataController.store(), 'update');
+        sinon.spy(that.dataSourceController.store(), 'update');
 
         const dataErrors = [];
 
@@ -4446,13 +4446,13 @@ QUnit.module('Editing with real dataController', {
         that.saveEditData();
 
         // assert
-        assert.ok(!that.dataController.store().update.called, 'update is not called');
+        assert.ok(!that.dataSourceController.store().update.called, 'update is not called');
 
         // act
         cancelDeferred.resolve(true);
 
         // assert
-        assert.ok(!that.dataController.store().update.called, 'update is not called');
+        assert.ok(!that.dataSourceController.store().update.called, 'update is not called');
         assert.ok(!dataErrors.length, 'no data errors');
     });
 
@@ -4470,7 +4470,7 @@ QUnit.module('Editing with real dataController', {
             }
         });
 
-        sinon.spy(that.dataController.store(), 'update');
+        sinon.spy(that.dataSourceController.store(), 'update');
 
         const cancelDeferred = $.Deferred();
 
@@ -4507,7 +4507,7 @@ QUnit.module('Editing with real dataController', {
         cancelDeferred.reject('Test Error Message');
 
         // assert
-        assert.ok(!that.dataController.store().update.called, 'update is not called');
+        assert.ok(!that.dataSourceController.store().update.called, 'update is not called');
 
         assert.deepEqual(dataErrors.length, 1, 'data errors count');
         assert.ok(dataErrors[0] instanceof Error, 'error has Error type');
@@ -5827,10 +5827,10 @@ QUnit.module('Editing with real dataController', {
             return testElement;
         };
 
-        const oldUpdate = that.dataController.store().update;
+        const oldUpdate = that.dataSourceController.store().update;
 
         const updateDeferred = $.Deferred();
-        that.dataController.store().update = function() {
+        that.dataSourceController.store().update = function() {
             updateCallCount++;
             oldUpdate.apply(this, arguments);
             return updateDeferred;
@@ -12850,7 +12850,7 @@ QUnit.module('Editing with validation', {
             }, 'lastName']
         });
 
-        this.dataController.store().update = function() {
+        this.dataSourceController.store().update = function() {
             return $.Deferred().reject('Test Error');
         };
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filterSync.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filterSync.tests.js
index 8e41eed858c5..c79faaef52bc 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filterSync.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filterSync.tests.js
@@ -289,7 +289,7 @@ QUnit.module('Sync with FilterValue', {
 
         this.dataController.clearFilter();
         assert.equal(this.option('filterValue'), null);
-        assert.equal(this.dataController.getDataSource().filter(), null);
+        assert.equal(this.dataSourceController.getDataSource().filter(), null);
     });
 
     // T659816
@@ -306,7 +306,7 @@ QUnit.module('Sync with FilterValue', {
 
         this.dataController.clearFilter('filterValue');
         assert.equal(this.option('filterValue'), null);
-        assert.deepEqual(this.dataController.getDataSource().filter(), dataSourceFilter);
+        assert.deepEqual(this.dataSourceController.getDataSource().filter(), dataSourceFilter);
     });
 
     // T639390
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.tests.js
index 4b93ae71c30e..e49b3f3ae333 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.tests.js
@@ -4571,8 +4571,7 @@ QUnit.module('Focused row', getModuleConfig(true), () => {
 
             this.setupModule();
 
-            this.getController('data').store = function() {
-            };
+            this.getController('dataSource').disposeAdapter();
 
             this.getController('data').dataErrorOccurred.add(function(e) {
                 dataErrors.push(e);
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerFilter.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerFilter.tests.js
index 9a2b1631b03d..3c193e4058ed 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerFilter.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerFilter.tests.js
@@ -4084,7 +4084,7 @@ QUnit.module('Header Filter with real columnsController', {
         that.setupDataGrid();
 
         const column = that.columnsController.getVisibleColumns()[0];
-        that.dataController.store().on('loading', function(options) {
+        that.dataSourceController.store().on('loading', function(options) {
             loadOptions = options;
         });
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.accessibility.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.accessibility.tests.js
index 0ec9ea62580c..bd25a02825a4 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.accessibility.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.accessibility.tests.js
@@ -373,14 +373,14 @@ QUnit.module('Keyboard navigation accessibility', {
         headersWrapper.getHeaderItem(0, 0).focus();
 
         // assert
-        assert.notOk(this.getController('data').getDataSource().sort(), 'Sorting');
+        assert.notOk(this.getController('dataSource').getDataSource().sort(), 'Sorting');
 
         // act
         fireKeyDown(headersWrapper.getHeaderItem(0, 0), 'Enter');
         this.clock.tick(10);
 
         // assert
-        assert.deepEqual(this.getController('data').getDataSource().sort(), [{ selector: 'name', desc: false }], 'Sorting');
+        assert.deepEqual(this.getController('dataSource').getDataSource().sort(), [{ selector: 'name', desc: false }], 'Sorting');
         assert.equal(keyDownFiresCount, 1, 'keyDownFiresCount');
 
         // act
@@ -388,7 +388,7 @@ QUnit.module('Keyboard navigation accessibility', {
         this.clock.tick(10);
 
         // assert
-        assert.deepEqual(this.getController('data').getDataSource().sort(), [{ selector: 'name', desc: true }], 'Sorting');
+        assert.deepEqual(this.getController('dataSource').getDataSource().sort(), [{ selector: 'name', desc: true }], 'Sorting');
         assert.equal(keyDownFiresCount, 2, 'keyDownFiresCount');
     });
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.keyboardKeys.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.keyboardKeys.tests.js
index 791e37b4728b..e0a87d92c437 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.keyboardKeys.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.keyboardKeys.tests.js
@@ -1810,14 +1810,12 @@ QUnit.module('Keyboard keys', {
                 return $container;
             };
 
-            this.dataController.store = function() {
-                return {
-                    key: function() { },
-                    update: function(key, values) {
-                        isStoreUpdated = true;
-                        return $.Deferred().resolve(key, values);
-                    }
-                };
+            this.dataControllerOptions.store = {
+                key: function() { },
+                update: function(key, values) {
+                    isStoreUpdated = true;
+                    return $.Deferred().resolve(key, values);
+                }
             };
 
             // act
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/rowsView.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/rowsView.tests.js
index 8273c90ba416..232f18a9723c 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/rowsView.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/rowsView.tests.js
@@ -19,7 +19,6 @@ import { setupDataGridModules, MockDataController, MockColumnsController, MockSe
 import { findShadowHostOrDocument } from '../../helpers/dataGridHelper.js';
 import numberLocalization from 'common/core/localization/number';
 import virtualScrollingCore from '__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling_core';
-import ODataStore from 'common/data/odata/store';
 import ArrayStore from 'common/data/array_store';
 
 const expandCellTemplate = gridCoreUtils.getExpandCellTemplate();
@@ -941,14 +940,18 @@ QUnit.module('Rows view', {
             { data: { name: 'aaaüaaa' }, values: ['aaaüaaa'] },
             { data: { name: 'aaaaaaü' }, values: ['aaaaaaü'] },
             { data: { name: 'üaaaaaa' }, values: ['üaaaaaa'] }];
-        const dataController = new MockDataController({ items: rows });
-        dataController.getDataSource = () => ({ loadOptions: () => ({
-            langParams: {
-                collatorOptions: {
-                    sensitivity: 'base'
-                },
+        const dataController = new MockDataController({
+            items: rows,
+            dataSource: {
+                loadOptions: () => ({
+                    langParams: {
+                        collatorOptions: {
+                            sensitivity: 'base'
+                        },
+                    }
+                })
             }
-        }) });
+        });
 
         const rowsView = this.createRowsView(this.items, dataController, columns);
         const testElement = $('#container');
@@ -980,11 +983,6 @@ QUnit.module('Rows view', {
         const dataController = new MockDataController({ items: rows });
         const rowsView = this.createRowsView(this.items, dataController, columns);
         const testElement = $('#container');
-        const store = new ODataStore({ url: 'test.org' });
-
-        dataController.store = function() {
-            return store;
-        };
 
         // act
         this.options.searchPanel = {
@@ -1014,11 +1012,6 @@ QUnit.module('Rows view', {
         const dataController = new MockDataController({ items: rows });
         const rowsView = this.createRowsView(this.items, dataController, columns);
         const testElement = $('#container');
-        const store = new ODataStore({ url: 'test.org' });
-
-        dataController.store = function() {
-            return store;
-        };
 
         // act
         this.options.searchPanel = {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js
index dad71f4cf670..104f13b7c870 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/selection.tests.js
@@ -490,7 +490,7 @@ QUnit.module('Selection', { beforeEach: setupSelectionModule, afterEach: teardow
     // T135244
     QUnit.test('set selectedRows. Not Loading data then no selected rows', function(assert) {
         let loadingCount = 0;
-        this.dataController.store().on('loading', function() {
+        this.dataSourceController.store().on('loading', function() {
             loadingCount++;
         });
 
@@ -1002,7 +1002,7 @@ QUnit.module('Selection', { beforeEach: setupSelectionModule, afterEach: teardow
         this.dataController.optionChanged({ name: 'dataSource' });
 
         this.clock.tick(10);
-        this.dataController.store().on('loading', function(options) {
+        this.dataSourceController.store().on('loading', function(options) {
             loadOptions = options;
         });
 
@@ -1344,7 +1344,7 @@ QUnit.module('Selection', { beforeEach: setupSelectionModule, afterEach: teardow
         this.dataController.resetDataSource();
 
         let loadingCount = 0;
-        this.dataController.store().on('loading', function() {
+        this.dataSourceController.store().on('loading', function() {
             loadingCount++;
         });
 
@@ -2599,7 +2599,7 @@ QUnit.module('Selection SelectAllMode', {
 
         // act
         $.each(this.selectionController.getSelectedRowKeys(), function(index, key) {
-            that.dataController.store().remove(key);
+            that.dataSourceController.store().remove(key);
         });
 
         this.dataController.refresh();

From 8cae7097b2e94e58751b225943404aadb9b6a186 Mon Sep 17 00:00:00 2001
From: Alyar <Alyar666@users.noreply.github.com>
Date: Wed, 9 Sep 2026 08:36:43 +0000
Subject: [PATCH 32/45] Grids - FilterController: Move `isFilterSyncActive`
 into FilterController (#35109)

Co-authored-by: Alyar <>
---
 .../grids/grid_core/filter/filter_controller.ts |  6 ++++++
 .../filter_sync_column_headers_view.ts          | 15 ++++++++++-----
 .../extenders/filter_sync_data_controller.ts    | 17 +++--------------
 .../extenders/filter_sync_filter_controller.ts  |  6 +++---
 .../grid_core/filter_sync/m_filter_sync.ts      | 15 ++++++++-------
 .../grids/grid_core/filter_sync/utils.ts        | 11 -----------
 6 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter/filter_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/filter/filter_controller.ts
index 450bdbc8688d..dd6e280b862f 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter/filter_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter/filter_controller.ts
@@ -14,6 +14,12 @@ export class FilterController extends modules.Controller {
     this.dataSourceController = this.getController('dataSource');
   }
 
+  public isFilterSyncActive(): boolean | undefined {
+    const filterSyncEnabled = this.option('filterSyncEnabled');
+
+    return filterSyncEnabled === 'auto' ? this.option('filterPanel.visible') : filterSyncEnabled;
+  }
+
   protected getLangParams(): LangParams | undefined {
     return this.dataSourceController.getDataSource()?.loadOptions?.()?.langParams;
   }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_column_headers_view.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_column_headers_view.ts
index c55044878687..ba42c4a876ce 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_column_headers_view.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_column_headers_view.ts
@@ -1,15 +1,20 @@
 import { filterHasField } from '@ts/filter_builder/m_utils';
 import type { ColumnHeadersView } from '@ts/grids/grid_core/column_headers/m_column_headers';
-import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { FilterController } from '@ts/grids/grid_core/filter/filter_controller';
 import type { ModuleType, OptionChanged } from '@ts/grids/grid_core/m_types';
 
 import { getColumnIdentifier } from '../utils';
-import type { FilterSyncDataControllerExtension } from './filter_sync_data_controller';
 
 export const filterSyncColumnHeadersViewExtender = (
   Base: ModuleType<ColumnHeadersView>,
 ): ModuleType<ColumnHeadersView> => class ColumnHeadersViewFilterSyncExtender extends Base {
-  declare protected _dataController: DataController & FilterSyncDataControllerExtension;
+  private filterController!: FilterController;
+
+  public init(): void {
+    this.filterController = this.getController('filter');
+
+    super.init();
+  }
 
   public optionChanged(args: OptionChanged): void {
     if (args.name === 'filterValue') {
@@ -21,7 +26,7 @@ export const filterSyncColumnHeadersViewExtender = (
   }
 
   private _isHeaderFilterEmpty(column): boolean {
-    if (this._dataController.isFilterSyncActive()) {
+    if (this.filterController.isFilterSyncActive()) {
       return !filterHasField(this.option('filterValue'), getColumnIdentifier(column));
     }
 
@@ -30,6 +35,6 @@ export const filterSyncColumnHeadersViewExtender = (
   }
 
   private _needUpdateFilterIndicators(): boolean {
-    return !this._dataController.isFilterSyncActive();
+    return !this.filterController.isFilterSyncActive();
   }
 };
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_data_controller.ts
index 6d8bbfdeab4e..053fee3c9810 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_data_controller.ts
@@ -4,18 +4,11 @@ import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
 import { FILTER_TYPES_EXCLUDE } from '@ts/grids/grid_core/filter_sync/const';
 import type { FilterSyncController } from '@ts/grids/grid_core/filter_sync/m_filter_sync';
-import { isFilterSyncActive } from '@ts/grids/grid_core/filter_sync/utils';
 import type { ModuleType, OptionChanged } from '@ts/grids/grid_core/m_types';
 
-export interface FilterSyncDataControllerExtension {
-  isFilterSyncActive: () => boolean | undefined;
-}
-
 export const filterSyncDataControllerExtender = (
   Base: ModuleType<DataController>,
-): ModuleType<
-  DataController & FilterSyncDataControllerExtension
-> => class FilterSyncDataControllerExtender extends Base {
+): ModuleType<DataController> => class FilterSyncDataControllerExtender extends Base {
   private filterSyncController!: FilterSyncController;
 
   public init(): void {
@@ -29,7 +22,7 @@ export const filterSyncDataControllerExtender = (
       case 'filterValue':
         this.applyFilter();
 
-        if (this.isFilterSyncActive()) {
+        if (this.filterController.isFilterSyncActive()) {
           this.filterSyncController.syncFilterValue();
         }
         args.handled = true;
@@ -38,7 +31,7 @@ export const filterSyncDataControllerExtender = (
         args.handled = true;
         break;
       case 'columns':
-        if (this.isFilterSyncActive()) {
+        if (this.filterController.isFilterSyncActive()) {
           const column: Column = this._columnsController.getColumnByPath(args.fullName);
 
           if (column && !this.filterSyncController.isSyncingColumnOptions()) {
@@ -59,10 +52,6 @@ export const filterSyncDataControllerExtender = (
     }
   }
 
-  public isFilterSyncActive(): boolean | undefined {
-    return isFilterSyncActive(this);
-  }
-
   private parseColumnPropertyName(fullName: string): string | null {
     const matched = /.*\.(.*)/.exec(fullName);
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_filter_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_filter_controller.ts
index e1c7e39c5e56..2f7eaacf733a 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_filter_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/extenders/filter_sync_filter_controller.ts
@@ -7,7 +7,7 @@ import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { DataFilter } from '@ts/grids/grid_core/data_controller/types';
 import type { FilterController } from '@ts/grids/grid_core/filter/filter_controller';
 import type { FilterSyncController } from '@ts/grids/grid_core/filter_sync/m_filter_sync';
-import { getColumnIdentifier, isFilterSyncActive } from '@ts/grids/grid_core/filter_sync/utils';
+import { getColumnIdentifier } from '@ts/grids/grid_core/filter_sync/utils';
 import type { ModuleType } from '@ts/grids/grid_core/m_types';
 import gridCoreUtils from '@ts/grids/grid_core/m_utils';
 
@@ -26,7 +26,7 @@ export const filterSyncFilterControllerExtender = (
     const hasFilterValueOrSyncing = isDefined(this.option('filterValue'))
       || this.filterSyncController.isSyncingColumnOptions();
 
-    return hasFilterValueOrSyncing && isFilterSyncActive(this);
+    return hasFilterValueOrSyncing && this.isFilterSyncActive();
   }
 
   public getAdditionalFilter(excludedColumn?: Column | null): DataFilter {
@@ -40,7 +40,7 @@ export const filterSyncFilterControllerExtender = (
     const filters = [super.getAdditionalFilter(excludedColumn)];
     let filterValue = this.option('filterValue');
 
-    if (isFilterSyncActive(this) && isDefined(excludedColumn) && filterValue) {
+    if (this.isFilterSyncActive() && isDefined(excludedColumn) && filterValue) {
       filterValue = removeFieldConditionsFromFilter(
         filterValue,
         getColumnIdentifier(excludedColumn),
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/m_filter_sync.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/m_filter_sync.ts
index 426b8c33f8ff..c93a7ff34294 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/m_filter_sync.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/m_filter_sync.ts
@@ -11,11 +11,9 @@ import type {
 } from '@ts/grids/grid_core/columns_controller/types';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
 import type { FilterValue, FilterValueCondition } from '@ts/grids/grid_core/data_controller/types';
+import type { FilterController } from '@ts/grids/grid_core/filter/filter_controller';
 import modules from '@ts/grids/grid_core/m_modules';
 
-import type {
-  FilterSyncDataControllerExtension,
-} from './extenders/filter_sync_data_controller';
 import { anyOf, noneOf } from './m_filter_custom_operations';
 import {
   checkForErrors,
@@ -31,15 +29,18 @@ import {
 export class FilterSyncController extends modules.Controller {
   private skipSyncColumnOptions = false;
 
-  private dataController!: DataController & FilterSyncDataControllerExtension;
+  private dataController!: DataController;
 
   private columnsController!: ColumnsController;
 
+  private filterController!: FilterController;
+
   public init(): void {
-    this.dataController = this.getController('data') as DataController & FilterSyncDataControllerExtension;
+    this.dataController = this.getController('data');
     this.columnsController = this.getController('columns');
+    this.filterController = this.getController('filter');
 
-    if (this.dataController.isFilterSyncActive()) {
+    if (this.filterController.isFilterSyncActive()) {
       if (this.columnsController.isAllDataTypesDefined()) {
         this.initSync();
       } else {
@@ -132,7 +133,7 @@ export class FilterSyncController extends modules.Controller {
   public getFilterValueFromColumns(
     columns: ColumnUserState[] | undefined,
   ): FilterValue {
-    if (!this.dataController.isFilterSyncActive()) {
+    if (!this.filterController.isFilterSyncActive()) {
       return null;
     }
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/utils.ts b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/utils.ts
index 759ae671b25b..6a7e68056905 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/filter_sync/utils.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/filter_sync/utils.ts
@@ -8,7 +8,6 @@ import {
 } from '@ts/filter_builder/m_utils';
 import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { FilterValue, FilterValueCondition } from '@ts/grids/grid_core/data_controller/types';
-import type { ModuleItem } from '@ts/grids/grid_core/m_modules';
 
 import { FILTER_ROW_OPERATIONS, FILTER_TYPES_EXCLUDE, FILTER_TYPES_INCLUDE } from './const';
 import type {
@@ -30,16 +29,6 @@ const getFilterTypeByOperation = (operation: unknown): Column['filterType'] | un
   }
 };
 
-// A free function so that both the `data` and the `filter` extender can read the flag
-// without one of them reaching for the other controller.
-export const isFilterSyncActive = (
-  moduleItem: Pick<ModuleItem, 'option'>,
-): boolean | undefined => {
-  const filterSyncEnabled = moduleItem.option('filterSyncEnabled');
-
-  return filterSyncEnabled === 'auto' ? moduleItem.option('filterPanel.visible') : filterSyncEnabled;
-};
-
 export const getColumnIdentifier = (
   column: FilterSyncColumn,
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing

From 56d91f1cf1990fb72d24cf9d5aa001b78b0a6bb9 Mon Sep 17 00:00:00 2001
From: Dmitry Lavrinovich <52966626+dmlvr@users.noreply.github.com>
Date: Wed, 9 Sep 2026 10:26:36 +0000
Subject: [PATCH 33/45] chore(deps): fix deps alerts (#35110)

---
 pnpm-lock.yaml      | 75 +++++++++++++++++++++------------------------
 pnpm-workspace.yaml |  5 +--
 2 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9853abf7f4fa..ec1c7e50d17d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -179,7 +179,7 @@ catalogs:
 
 overrides:
   basic-ftp@<5.3.1: '>=5.3.1'
-  js-yaml@<4.3.1: ^4.3.1
+  js-yaml@<4.3.2: ^4.3.2
   rollup@<4.59.0: ^4.59.0
   json5@<1.0.2: ^2.2.3
   axios@<1.18.0: ^1.18.0
@@ -187,7 +187,7 @@ overrides:
   semver@<5.7.2: ^5.7.2
   qs: '>=6.16.0'
   vite@>=7.0.0 <=7.3.4: ^7.3.5
-  hono@<4.12.34: ^4.12.34
+  hono@<4.13.5: ^4.13.5
   minimatch@>=9.0.0 < 9.0.7: 9.0.9
   picomatch@>=4.0.0 <4.0.4: 4.0.4
   micromatch@<4.0.8: ^4.0.8
@@ -231,6 +231,7 @@ overrides:
   postcss-selector-parser@>=6.1.0 <6.1.3: ^6.1.3
   postcss-selector-parser@>=7.1.0 <7.1.3: ^7.1.3
   fflate@>=0.8.0 <0.8.3: ^0.8.3
+  colord@<2.9.4: ^2.9.4
 
 patchedDependencies:
   testcafe-hammerhead@31.7.8: 8655c07786177d3b611a05abf6b0ea87d32796eb2601f92a800ef041095f264c
@@ -4793,7 +4794,7 @@ packages:
     resolution: {integrity: sha512-eWpQYr67tqJLeaSUl0Q+TquuYfUdTibpOJlUMV2FfUP7+KqCC5TufnwnlXL6mobZBJbGAYRd7ZvEBDCbLInjhg==}
     engines: {node: '>=20'}
     peerDependencies:
-      hono: ^4.12.34
+      hono: ^4.13.5
 
   '@humanfs/core@0.19.2':
     resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
@@ -8779,10 +8780,6 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  axe-core@4.12.1:
-    resolution: {integrity: sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==}
-    engines: {node: '>=4'}
-
   axe-core@4.13.0:
     resolution: {integrity: sha512-UzGt8zg7Ny8djbYMhxl2zuEevVa7r2gJjYY5Lwr1xM7+XU2nd6CkIWFTVcCIbAP63vSz71NaVyyuSk9lHKcy0A==}
     engines: {node: '>=4'}
@@ -9511,8 +9508,8 @@ packages:
     resolution: {integrity: sha512-ezmVcLR3xAVp8kYOm4GS45ZLLgIE6SPAFoduLr6hTDajwb3KZ2F46gulK3XpcwRFb5KKGCSezCBAY4Dw4HsyXA==}
     engines: {node: '>=18'}
 
-  colord@2.9.3:
-    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+  colord@2.10.0:
+    resolution: {integrity: sha512-AidJptpBJmjTclAp9BkLwJi0T93fo5epJnbaZslpg6QVzpHjAiveF55mE9AcUJiGMqRHgMDY8soMsQtuNYMHfw==}
 
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
@@ -11473,8 +11470,8 @@ packages:
   hmac-drbg@1.0.1:
     resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==}
 
-  hono@4.13.0:
-    resolution: {integrity: sha512-jhunvfHWxd7J5EFfSgH4xsYJzSe/lfqbUCxiyyeaQasUsXeEHXtzVid+7EOGByc5JnFa23SSFL3Y2RV/z1T+eQ==}
+  hono@4.13.7:
+    resolution: {integrity: sha512-c8/gF9ac8Y78/agExVocyLevgR+JlpNB444Py0FSX8pJoPdYUfUzRcXtYEYGwt6l19qIlVZPN5Mfsw9jFShmQQ==}
     engines: {node: '>=16.9.0'}
 
   hookified@1.15.1:
@@ -12518,8 +12515,8 @@ packages:
   js-tokens@9.0.1:
     resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
 
-  js-yaml@4.3.1:
-    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
+  js-yaml@4.3.2:
+    resolution: {integrity: sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==}
     hasBin: true
 
   jsdom@26.1.0:
@@ -20741,7 +20738,7 @@ snapshots:
       globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.1
-      js-yaml: 4.3.1
+      js-yaml: 4.3.2
       minimatch: 3.1.5
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
@@ -20782,9 +20779,9 @@ snapshots:
   '@harperfast/extended-iterable@1.0.3':
     optional: true
 
-  '@hono/node-server@2.0.12(hono@4.13.0)':
+  '@hono/node-server@2.0.12(hono@4.13.7)':
     dependencies:
-      hono: 4.13.0
+      hono: 4.13.7
 
   '@humanfs/core@0.19.2':
     dependencies:
@@ -21322,7 +21319,7 @@ snapshots:
       camelcase: 5.3.1
       find-up: 4.1.0
       get-package-type: 0.1.0
-      js-yaml: 4.3.1
+      js-yaml: 4.3.2
       resolve-from: 5.0.0
 
   '@istanbuljs/schema@0.1.6': {}
@@ -22106,7 +22103,7 @@ snapshots:
 
   '@modelcontextprotocol/sdk@1.26.0(supports-color@7.2.0)(zod@4.1.13)':
     dependencies:
-      '@hono/node-server': 2.0.12(hono@4.13.0)
+      '@hono/node-server': 2.0.12(hono@4.13.7)
       ajv: 8.20.0
       ajv-formats: 3.0.1(ajv@8.20.0)
       content-type: 1.0.5
@@ -22116,7 +22113,7 @@ snapshots:
       eventsource-parser: 3.0.8
       express: 5.2.1(supports-color@7.2.0)
       express-rate-limit: 8.3.2(express@5.2.1)
-      hono: 4.13.0
+      hono: 4.13.7
       jose: 6.2.2
       json-schema-typed: 8.0.2
       pkce-challenge: 5.0.1
@@ -22128,7 +22125,7 @@ snapshots:
 
   '@modelcontextprotocol/sdk@1.29.0(zod@4.4.3)':
     dependencies:
-      '@hono/node-server': 2.0.12(hono@4.13.0)
+      '@hono/node-server': 2.0.12(hono@4.13.7)
       ajv: 8.20.0
       ajv-formats: 3.0.1(ajv@8.20.0)
       content-type: 1.0.5
@@ -22138,7 +22135,7 @@ snapshots:
       eventsource-parser: 3.0.8
       express: 5.2.1(supports-color@7.2.0)
       express-rate-limit: 8.3.2(express@5.2.1)
-      hono: 4.13.0
+      hono: 4.13.7
       jose: 6.2.2
       json-schema-typed: 8.0.2
       pkce-challenge: 5.0.1
@@ -26101,8 +26098,6 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
-  axe-core@4.12.1: {}
-
   axe-core@4.13.0: {}
 
   axios@1.18.1:
@@ -27049,7 +27044,7 @@ snapshots:
       color-convert: 3.1.3
       color-string: 2.1.4
 
-  colord@2.9.3: {}
+  colord@2.10.0: {}
 
   colorette@2.0.20: {}
 
@@ -27233,7 +27228,7 @@ snapshots:
   cosmiconfig@8.3.6(typescript@4.9.5):
     dependencies:
       import-fresh: 3.3.1
-      js-yaml: 4.3.1
+      js-yaml: 4.3.2
       parse-json: 5.2.0
       path-type: 4.0.0
     optionalDependencies:
@@ -27242,7 +27237,7 @@ snapshots:
   cosmiconfig@8.3.6(typescript@5.8.3):
     dependencies:
       import-fresh: 3.3.1
-      js-yaml: 4.3.1
+      js-yaml: 4.3.2
       parse-json: 5.2.0
       path-type: 4.0.0
     optionalDependencies:
@@ -27251,7 +27246,7 @@ snapshots:
   cosmiconfig@8.3.6(typescript@5.9.3):
     dependencies:
       import-fresh: 3.3.1
-      js-yaml: 4.3.1
+      js-yaml: 4.3.2
       parse-json: 5.2.0
       path-type: 4.0.0
     optionalDependencies:
@@ -27260,7 +27255,7 @@ snapshots:
   cosmiconfig@8.3.6(typescript@6.0.3):
     dependencies:
       import-fresh: 3.3.1
-      js-yaml: 4.3.1
+      js-yaml: 4.3.2
       parse-json: 5.2.0
       path-type: 4.0.0
     optionalDependencies:
@@ -27270,7 +27265,7 @@ snapshots:
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.1
-      js-yaml: 4.3.1
+      js-yaml: 4.3.2
       parse-json: 5.2.0
     optionalDependencies:
       typescript: 5.8.3
@@ -27279,7 +27274,7 @@ snapshots:
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.1
-      js-yaml: 4.3.1
+      js-yaml: 4.3.2
       parse-json: 5.2.0
     optionalDependencies:
       typescript: 5.9.3
@@ -27288,7 +27283,7 @@ snapshots:
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.1
-      js-yaml: 4.3.1
+      js-yaml: 4.3.2
       parse-json: 5.2.0
     optionalDependencies:
       typescript: 6.0.3
@@ -28688,7 +28683,7 @@ snapshots:
       array-includes: 3.1.9
       array.prototype.flatmap: 1.3.3
       ast-types-flow: 0.0.8
-      axe-core: 4.12.1
+      axe-core: 4.13.0
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
@@ -28707,7 +28702,7 @@ snapshots:
       array-includes: 3.1.9
       array.prototype.flatmap: 1.3.3
       ast-types-flow: 0.0.8
-      axe-core: 4.12.1
+      axe-core: 4.13.0
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
@@ -29990,7 +29985,7 @@ snapshots:
       minimalistic-assert: 1.0.1
       minimalistic-crypto-utils: 1.0.1
 
-  hono@4.13.0: {}
+  hono@4.13.7: {}
 
   hookified@1.15.1: {}
 
@@ -31897,7 +31892,7 @@ snapshots:
 
   js-tokens@9.0.1: {}
 
-  js-yaml@4.3.1:
+  js-yaml@4.3.2:
     dependencies:
       argparse: 2.0.1
 
@@ -35873,7 +35868,7 @@ snapshots:
       '@csstools/media-query-list-parser': 2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1)
       '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.4)
       balanced-match: 2.0.0
-      colord: 2.9.3
+      colord: 2.10.0
       cosmiconfig: 8.3.6(typescript@4.9.5)
       css-functions-list: 3.3.3
       css-tree: 2.3.1
@@ -35919,7 +35914,7 @@ snapshots:
       '@csstools/media-query-list-parser': 2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1)
       '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.4)
       balanced-match: 2.0.0
-      colord: 2.9.3
+      colord: 2.10.0
       cosmiconfig: 8.3.6(typescript@5.8.3)
       css-functions-list: 3.3.3
       css-tree: 2.3.1
@@ -35965,7 +35960,7 @@ snapshots:
       '@csstools/media-query-list-parser': 2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1)
       '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.4)
       balanced-match: 2.0.0
-      colord: 2.9.3
+      colord: 2.10.0
       cosmiconfig: 8.3.6(typescript@6.0.3)
       css-functions-list: 3.3.3
       css-tree: 2.3.1
@@ -36012,7 +36007,7 @@ snapshots:
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.5)
       '@dual-bundle/import-meta-resolve': 4.2.1
       balanced-match: 2.0.0
-      colord: 2.9.3
+      colord: 2.10.0
       cosmiconfig: 9.0.1(typescript@5.9.3)
       css-functions-list: 3.3.3
       css-tree: 3.2.1
@@ -36056,7 +36051,7 @@ snapshots:
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.5)
       '@dual-bundle/import-meta-resolve': 4.2.1
       balanced-match: 2.0.0
-      colord: 2.9.3
+      colord: 2.10.0
       cosmiconfig: 9.0.1(typescript@6.0.3)
       css-functions-list: 3.3.3
       css-tree: 3.2.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 32f077326d00..03840574c015 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -14,7 +14,7 @@ minimumReleaseAge: 0
 
 overrides:
   "basic-ftp@<5.3.1": ">=5.3.1"
-  "js-yaml@<4.3.1": "^4.3.1"
+  "js-yaml@<4.3.2": "^4.3.2"
   "rollup@<4.59.0": "^4.59.0"
   "json5@<1.0.2": ^2.2.3
   "axios@<1.18.0": ^1.18.0
@@ -22,7 +22,7 @@ overrides:
   "semver@<5.7.2": ^5.7.2
   qs: ">=6.16.0"
   "vite@>=7.0.0 <=7.3.4": ^7.3.5
-  "hono@<4.12.34": "^4.12.34"
+  "hono@<4.13.5": "^4.13.5"
   "minimatch@>=9.0.0 < 9.0.7": 9.0.9
   "picomatch@>=4.0.0 <4.0.4": 4.0.4
   "micromatch@<4.0.8": ^4.0.8
@@ -66,6 +66,7 @@ overrides:
   "postcss-selector-parser@>=6.1.0 <6.1.3": "^6.1.3"
   "postcss-selector-parser@>=7.1.0 <7.1.3": "^7.1.3"
   "fflate@>=0.8.0 <0.8.3": "^0.8.3"
+  "colord@<2.9.4": "^2.9.4"
 catalog:
   axe-core: 4.13.0
   inferno: ^8.2.3

From da52969ec7346c9a5ff9155f5e6acd7d6468b3f6 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Wed, 9 Sep 2026 10:44:30 +0000
Subject: [PATCH 34/45] Nx: remove the dead lint-css and test-styles targets of
 the devextreme project (#35120)

---
 packages/devextreme/project.json | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/packages/devextreme/project.json b/packages/devextreme/project.json
index 19efa18de2d0..a5fe2d0c2772 100644
--- a/packages/devextreme/project.json
+++ b/packages/devextreme/project.json
@@ -1849,15 +1849,6 @@
         "lint-texts"
       ]
     },
-    "lint-css": {
-      "executor": "nx:run-script",
-      "options": {
-        "script": "lint-css"
-      },
-      "inputs": [
-        "{projectRoot}/scss/**/*"
-      ]
-    },
     "lint-dts": {
       "executor": "nx:run-script",
       "options": {
@@ -1925,17 +1916,6 @@
         "{projectRoot}/build/**/*",
         "{projectRoot}/jest.*"
       ]
-    },
-    "test-styles": {
-      "executor": "nx:run-script",
-      "options": {
-        "script": "test-styles"
-      },
-      "inputs": [
-        "default",
-        "!{projectRoot}/js/**/*",
-        "!{projectRoot}/ts/**/*"
-      ]
     }
   },
   "namedInputs": {

From 17aba214e073663e6a41753ebd398f251f6efe45 Mon Sep 17 00:00:00 2001
From: Anna Shakhova <68295572+anna-shakhova@users.noreply.github.com>
Date: Wed, 9 Sep 2026 12:29:41 +0000
Subject: [PATCH 35/45] Grids: retarget `key` and `keyOf` methods (#35115)

---
 .../__tests__/__mock__/helpers/utils.ts       |   6 +
 .../ai_assistant_integration_controller.ts    |   2 +-
 .../controllers/m_ai_column_controller.ts     |   4 +-
 .../m_ai_column_integration_controller.ts     |   8 +-
 .../data_controller/data_controller.ts        |  11 +-
 ...data_source_controller.integration.test.ts | 118 ++++--------------
 .../data_source/data_source_controller.ts     |  40 ++++--
 .../grid_core/data_source_adapter/provider.ts |  10 +-
 .../grid_core/data_source_adapter/types.ts    |   6 +-
 .../extenders/editing_data_controller.ts      |   2 +-
 .../grids/grid_core/editing/m_editing.ts      |  10 +-
 .../grids/grid_core/focus/m_focus.ts          |   2 +-
 .../grids/grid_core/selection/m_selection.ts  |   6 +-
 .../grid_core/validating/m_validating.ts      |   2 +-
 .../grids/grid_core/views/m_rows_view.ts      |   2 +-
 .../data_controller/m_data_controller.ts      |  12 --
 ...data_source_controller.integration.test.ts |  93 ++++++++++++++
 .../data_source/data_source_controller.ts     |  17 ++-
 .../add_row_generated_key.integration.test.ts |  82 ++++++++++++
 .../grids/tree_list/editing/m_editing.ts      |   2 +-
 .../js/__internal/grids/tree_list/m_focus.ts  |   2 +-
 .../grids/tree_list/selection/m_selection.ts  |   2 +-
 22 files changed, 282 insertions(+), 157 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/tree_list/data_source/__tests__/data_source_controller.integration.test.ts
 create mode 100644 packages/devextreme/js/__internal/grids/tree_list/editing/__tests__/add_row_generated_key.integration.test.ts

diff --git a/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts b/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts
index e316924f0250..d040c7d964aa 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts
@@ -20,6 +20,12 @@ export type OptionSpy = jest.Mock<(optionName: string, optionValue?: unknown) =>
 export const spyOnOption = (instance: InternalGrid): OptionSpy => jest
   .spyOn(instance, 'option') as unknown as OptionSpy;
 
+// Reads the DataController._dataSource mirror. Assertions that pin the mirror have to read the
+// protected field itself rather than a delegating method. Goes away with the field, in Task B4.
+export const getMirroredAdapter = (
+  instance: { getController: (name: 'data') => unknown },
+): unknown => (instance.getController('data') as { _dataSource?: unknown })._dataSource;
+
 export const SELECTORS = {
   gridContainer: '#gridContainer',
 };
diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_integration_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_integration_controller.ts
index 85af56d76d94..742073e23aab 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_integration_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_integration_controller.ts
@@ -49,7 +49,7 @@ export class AIAssistantIntegrationController extends Controller {
 
   protected buildContext(): GridContext {
     return {
-      keyExpr: this.option('keyExpr') ?? this.dataSourceController.key(),
+      keyExpr: this.option('keyExpr') ?? this.dataSourceController.store()?.key(),
       columns: this.buildColumnsContext(),
       filtering: {
         filterValue: this.option('filterValue'),
diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts
index f1b0f251aa94..3825239cf26e 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_controller.ts
@@ -59,12 +59,12 @@ export class AIColumnController extends Controller {
 
   private addAICommandColumn(): void {
     const that = this;
-    const { dataController, aiColumnIntegrationController } = this;
+    const { dataSourceController, aiColumnIntegrationController } = this;
 
     this.columnsController.addCommandColumn({
       ...getAICommandColumnDefaultOptions(),
       calculateCellValue(data: RawItemData) {
-        const key = dataController.keyOf(data);
+        const key = dataSourceController.keyOf(data);
         const cellValue = aiColumnIntegrationController.getAIColumnText(this.name, key);
         const defaultValue = that.getDefaultCellValue(this, cellValue);
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_integration_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_integration_controller.ts
index 7654f0f132e5..a82985bf1c18 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_integration_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_column/controllers/m_ai_column_integration_controller.ts
@@ -8,6 +8,7 @@ import errors from '@js/ui/widget/ui.errors';
 
 import type { ColumnsController } from '../../columns_controller/m_columns_controller';
 import type { DataController } from '../../data_controller/data_controller';
+import type { DataSourceController } from '../../data_source/data_source_controller';
 import type { RawItemData } from '../../data_source_adapter/types';
 import type { ErrorHandlingViewController } from '../../error_handling/error_handling_view_controller';
 import { Controller } from '../../m_modules';
@@ -23,6 +24,8 @@ export class AIColumnIntegrationController extends Controller {
 
   private dataController!: DataController;
 
+  private dataSourceController!: DataSourceController;
+
   private errorHandlingController!: ErrorHandlingViewController;
 
   private aiColumnCacheController!: AIColumnCacheController;
@@ -78,12 +81,13 @@ export class AIColumnIntegrationController extends Controller {
   }
 
   private getRowKeyHash(item: RawItemData): PropertyKey {
-    return getKeyHash(this.dataController.keyOf(item)) as PropertyKey;
+    return getKeyHash(this.dataSourceController.keyOf(item)) as PropertyKey;
   }
 
   public init(): void {
     this.columnsController = this.getController('columns');
     this.dataController = this.getController('data');
+    this.dataSourceController = this.getController('dataSource');
     this.errorHandlingController = this.getController('errorHandling');
 
     this.aiColumnCacheController = new AIColumnCacheController(this.component);
@@ -136,7 +140,7 @@ export class AIColumnIntegrationController extends Controller {
       return;
     }
 
-    const keyField = this.dataController.key();
+    const keyField = this.dataSourceController.key();
     if (keyField === undefined || isKeyMissingInData(args.data, keyField)) {
       this.dataController.fireError('E1046', keyField);
       return;
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index ee2403af6f00..9bb165834199 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -203,7 +203,6 @@ export class DataController extends modules.Controller {
       'getKeyByRowIndex',
       'getRowIndexByKey',
       'getVisibleRows',
-      'keyOf',
       'pageCount',
       'pageIndex',
       'pageSize',
@@ -759,7 +758,7 @@ export class DataController extends modules.Controller {
     return {
       rowType: 'data',
       data,
-      key: this.keyOf(data),
+      key: this.dataSourceController.keyOf(data),
     };
   }
 
@@ -1409,10 +1408,6 @@ export class DataController extends modules.Controller {
     return this.items()?.[this.getRowIndexByKey(key)];
   }
 
-  public keyOf(data: RawItemData): RowKey | undefined {
-    return this.dataSourceController.store()?.keyOf(data);
-  }
-
   private byKey(key: RowKey): DeferredObj<RawItemData> {
     const store = this.dataSourceController.store();
 
@@ -1429,10 +1424,6 @@ export class DataController extends modules.Controller {
     return fromPromise(store.byKey(key)) as DeferredObj<RawItemData>;
   }
 
-  public key(): string | string[] | undefined {
-    return this.dataSourceController.key();
-  }
-
   /**
    * @extended: virtual_scrolling
    */
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
index bba1ae7c4c52..47b9ae87e9ba 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source/__tests__/data_source_controller.integration.test.ts
@@ -6,24 +6,19 @@ import {
   it,
   jest,
 } from '@jest/globals';
-import type { dxElementWrapper } from '@js/core/renderer';
-import $ from '@js/core/renderer';
 import DataSourceClass from '@js/data/data_source';
-import type { Properties as TreeListProperties } from '@js/ui/tree_list';
-import TreeList from '@js/ui/tree_list';
 import errors from '@js/ui/widget/ui.errors';
 import {
   afterTest,
   beforeTest,
   createDataGrid,
   flushAsync,
+  getMirroredAdapter,
 } from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
-import type { Controllers, InternalGrid } from '@ts/grids/grid_core/m_types';
+import type { InternalGrid } from '@ts/grids/grid_core/m_types';
 
 import { DataSourceController } from '../data_source_controller';
 
-const TREELIST_CONTAINER_ID = 'treeListContainer';
-
 const DATA = [
   { id: 1, parentId: 0, value: 'a' },
   { id: 2, parentId: 1, value: 'b' },
@@ -33,39 +28,6 @@ const OTHER_DATA = [
   { id: 3, parentId: 0, value: 'c' },
 ];
 
-// These assertions pin the _dataSource mirror, so they have to read the protected field rather
-// than a delegating method.
-const getMirroredAdapter = (
-  instance: { getController: (name: 'data') => unknown },
-): unknown => (instance.getController('data') as { _dataSource?: unknown })._dataSource;
-
-interface TreeListInstance extends TreeList {
-  getController: <T extends keyof Controllers>(name: T) => Controllers[T];
-}
-
-const createTreeList = (
-  options: TreeListProperties = {},
-): { $container: dxElementWrapper; instance: TreeListInstance } => {
-  const $container = $('<div>')
-    .attr('id', TREELIST_CONTAINER_ID)
-    .appendTo(document.body);
-
-  const instance = new TreeList(
-    $container.get(0) as HTMLDivElement,
-    { keyExpr: 'id', parentIdExpr: 'parentId', ...options },
-  ) as TreeListInstance;
-
-  jest.runAllTimers();
-
-  return { $container, instance };
-};
-
-const disposeTreeList = ($container: dxElementWrapper): void => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (($container as any).dxTreeList('instance') as TreeList | undefined)?.dispose();
-  $container.remove();
-};
-
 const getControllerNames = (instance: unknown): string[] => Object
   .keys((instance as InternalGrid)._controllers);
 
@@ -79,16 +41,6 @@ describe('dataSource module registration', () => {
     expect(instance.getController('dataSource')).toBeInstanceOf(DataSourceController);
   });
 
-  it('is reachable from TreeList', () => {
-    const { $container, instance } = createTreeList({ dataSource: DATA });
-
-    try {
-      expect(instance.getController('dataSource')).toBeInstanceOf(DataSourceController);
-    } finally {
-      disposeTreeList($container);
-    }
-  });
-
   it('owns the getDataSource widget method', async () => {
     const { instance } = await createDataGrid({ dataSource: DATA });
 
@@ -97,6 +49,14 @@ describe('dataSource module registration', () => {
       .toBe(instance.getController('dataSource').getDataSource());
   });
 
+  it('owns the keyOf widget method', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA, keyExpr: 'id' });
+
+    expect(instance.keyOf(DATA[1])).toBe(2);
+    expect(instance.keyOf(DATA[1]))
+      .toBe(instance.getController('dataSource').keyOf(DATA[1]));
+  });
+
   it('sits at the bottom of the controller order', async () => {
     const { instance } = await createDataGrid({ dataSource: DATA });
 
@@ -179,19 +139,6 @@ describe('dataSource controller holds the adapter', () => {
     expect(getMirroredAdapter(instance)).toBeNull();
     expect(dataSourceController.hasAdapter()).toBe(false);
   });
-
-  it('holds the adapter in TreeList too', () => {
-    const { $container, instance } = createTreeList({ dataSource: DATA });
-
-    try {
-      const dataSourceController = instance.getController('dataSource');
-
-      expect(dataSourceController.hasAdapter()).toBe(true);
-      expect(dataSourceController.getAdapter()).toBe(getMirroredAdapter(instance));
-    } finally {
-      disposeTreeList($container);
-    }
-  });
 });
 
 describe('dataSource controller reads delegate to the adapter', () => {
@@ -226,6 +173,23 @@ describe('dataSource controller reads delegate to the adapter', () => {
 
     expect(typeof instance.getController('dataSource').getDataIndexGetter()).toBe('function');
   });
+
+  it('answers key and keyOf from the store when the store is keyed', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA, keyExpr: 'id' });
+    const dataSourceController = instance.getController('dataSource');
+
+    expect(dataSourceController.key()).toBe('id');
+    expect(dataSourceController.keyOf(DATA[1])).toBe(2);
+  });
+
+  it('answers key and keyOf from the store when the store has no key', async () => {
+    const { instance } = await createDataGrid({ dataSource: DATA, keyExpr: undefined });
+    const dataSourceController = instance.getController('dataSource');
+
+    expect(dataSourceController.key()).toBeUndefined();
+    // A keyless ArrayStore identifies a row by the object itself.
+    expect(dataSourceController.keyOf(DATA[1])).toBe(DATA[1]);
+  });
 });
 
 describe('dataSource controller resolves its own component adapter provider', () => {
@@ -239,19 +203,6 @@ describe('dataSource controller resolves its own component adapter provider', ()
     expect(adapter).toBeTruthy();
     expect('forEachNode' in (adapter as object)).toBe(false);
   });
-
-  it('builds a TreeList adapter in TreeList', () => {
-    const { $container, instance } = createTreeList({ dataSource: DATA });
-
-    try {
-      const adapter = instance.getController('dataSource').getAdapter();
-
-      expect(adapter).toBeTruthy();
-      expect('forEachNode' in (adapter as object)).toBe(true);
-    } finally {
-      disposeTreeList($container);
-    }
-  });
 });
 
 describe('dataSource controller owns the dataSource option reading', () => {
@@ -282,21 +233,6 @@ describe('dataSource controller owns the dataSource option reading', () => {
     }
   });
 
-  it('does not warn W1011 in TreeList, where the override does not apply', () => {
-    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
-    const { $container } = createTreeList({
-      dataSource: { store: { type: 'array', data: DATA } },
-      keyExpr: 'id',
-    });
-
-    try {
-      expect(log).not.toHaveBeenCalledWith('W1011');
-    } finally {
-      log.mockRestore();
-      disposeTreeList($container);
-    }
-  });
-
   it('builds a DataSource from the array option and keys it by keyExpr', async () => {
     const { instance } = await createDataGrid({ dataSource: DATA, keyExpr: 'id' });
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
index 9b63506a0af8..7868bde16226 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source/data_source_controller.ts
@@ -10,15 +10,25 @@ import type {
   DataSourceAdapterProvider, LoadOperation, OperationTypes, RawItemData, RemoteOperationsOptions,
 } from '@ts/grids/grid_core/data_source_adapter/types';
 import modules from '@ts/grids/grid_core/m_modules';
+import type { RowKey } from '@ts/grids/grid_core/m_types';
 
-export class DataSourceController extends modules.Controller {
+export class DataSourceController<
+  TAdapter extends DataSourceAdapter = DataSourceAdapter,
+> extends modules.Controller {
   // Absent before the first dataSource assignment and again after a reset.
-  private adapter: DataSourceAdapter | null = null;
+  protected adapter: TAdapter | null = null;
 
   private isShared = false;
 
+  /**
+   * @extended: DataGrid's and TreeList's data_source_controller
+   */
+  protected getAdapterProvider(): DataSourceAdapterProvider<TAdapter> {
+    throw new Error('Method not implemented.');
+  }
+
   public publicMethods(): string[] {
-    return ['getDataSource'];
+    return ['getDataSource', 'keyOf'];
   }
 
   /**
@@ -63,14 +73,7 @@ export class DataSourceController extends modules.Controller {
     return this.adapter?._dataSource ?? null;
   }
 
-  /**
-   * @extended: DataGrid's and TreeList's data_source_controller
-   */
-  protected getAdapterProvider(): DataSourceAdapterProvider {
-    throw new Error('Method not implemented.');
-  }
-
-  public createAdapter(dataSource: DataSource): DataSourceAdapter {
+  public createAdapter(dataSource: DataSource): TAdapter {
     const adapter = this.getAdapterProvider().create(this.component);
 
     adapter.init(dataSource);
@@ -83,7 +86,7 @@ export class DataSourceController extends modules.Controller {
     return this.adapter !== null;
   }
 
-  public getAdapter(): DataSourceAdapter | null {
+  public getAdapter(): TAdapter | null {
     return this.adapter;
   }
 
@@ -96,10 +99,23 @@ export class DataSourceController extends modules.Controller {
     return this.adapter?.store();
   }
 
+  /**
+   * The key the component identifies rows by. Not interchangeable with `store()?.key()` (TreeList)
+   * Callers that need what the store itself can identify a row by have to ask the store.
+   *
+   * @extended: TreeList's data_source_controller
+   */
   public key(): StoreKey | undefined {
     return this.adapter?.key();
   }
 
+  /**
+   * @extended: TreeList's data_source_controller
+   */
+  public keyOf(data: RawItemData): RowKey | undefined {
+    return this.adapter?.store()?.keyOf(data);
+  }
+
   public remoteOperations(): RemoteOperationsOptions {
     return this.adapter?.remoteOperations() ?? {};
   }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/provider.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/provider.ts
index cbd0748990ce..1268e5291419 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/provider.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/provider.ts
@@ -2,16 +2,16 @@ import type { ModuleType } from '../m_types';
 import type DataSourceAdapter from './m_data_source_adapter';
 import type { DataSourceAdapterProvider } from './types';
 
-export function createDataSourceAdapterProvider(
-  BaseType: ModuleType<DataSourceAdapter>,
-): DataSourceAdapterProvider {
+export function createDataSourceAdapterProvider<TAdapter extends DataSourceAdapter>(
+  BaseType: ModuleType<TAdapter>,
+): DataSourceAdapterProvider<TAdapter> {
   let AdapterType = BaseType;
 
   return {
     extend(extender): void {
-      AdapterType = extender(AdapterType);
+      AdapterType = extender(AdapterType) as ModuleType<TAdapter>;
     },
-    create(component): DataSourceAdapter {
+    create(component): TAdapter {
       return new AdapterType(component);
     },
   };
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/types.ts b/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/types.ts
index 9b0b9d52dce1..64e3088c344b 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/types.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/types.ts
@@ -81,7 +81,9 @@ export type DataSourceAdapterExtender = (
   Base: ModuleType<DataSourceAdapter>,
 ) => ModuleType<DataSourceAdapter>;
 
-export interface DataSourceAdapterProvider {
+export interface DataSourceAdapterProvider<
+  TAdapter extends DataSourceAdapter = DataSourceAdapter,
+> {
   extend: (extender: DataSourceAdapterExtender) => void;
-  create: (component: InternalGrid) => DataSourceAdapter;
+  create: (component: InternalGrid) => TAdapter;
 }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/editing_data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/editing_data_controller.ts
index 8b8915a4171a..6e401fa19485 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/editing_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/editing/extenders/editing_data_controller.ts
@@ -178,7 +178,7 @@ export const editingDataControllerExtender = (
       return;
     }
 
-    const dataSourceKeys = dataSource.map((item) => this.keyOf(item));
+    const dataSourceKeys = dataSource.map((item) => this.dataSourceController.keyOf(item));
     const survivingChanges = changes.filter(
       (change) => change.type === 'insert' || dataSourceKeys.some((key) => equalByValue(change.key, key)),
     );
diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts
index b1e7834aa242..9d25d2a22197 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts
@@ -312,7 +312,7 @@ class EditingControllerImpl extends modules.ViewController {
   }
 
   public getUpdatedData(data) {
-    const key = this._dataController.keyOf(data);
+    const key = this.dataSourceController.keyOf(data);
     const changes = this.getChanges();
     const editIndex = gridCoreUtils.getIndexByKey(key, changes);
 
@@ -619,7 +619,7 @@ class EditingControllerImpl extends modules.ViewController {
       } else {
         const items = this.dataSourceController.getCachedStoreData()
           || dataController.items()?.map((item) => item.data);
-        const rowIndex = gridCoreUtils.getIndexByKey(change.key, items, dataController.key());
+        const rowIndex = gridCoreUtils.getIndexByKey(change.key, items, this.dataSourceController.key());
         this._addInternalData({ key: change.key, oldData: items[rowIndex] });
       }
     });
@@ -721,7 +721,7 @@ class EditingControllerImpl extends modules.ViewController {
             if (equalByValue(item.key, key)) {
               result = index;
             }
-          } else if (equalByValue(dataController.keyOf(item as RawItemData), key)) {
+          } else if (equalByValue(this.dataSourceController.keyOf(item as RawItemData), key)) {
             result = index;
           }
         }
@@ -914,7 +914,7 @@ class EditingControllerImpl extends modules.ViewController {
       return change.key;
     }
 
-    const keyExpr = this._dataController.key();
+    const keyExpr = this.dataSourceController.key();
     let keyValue;
     if (change.data && keyExpr && !Array.isArray(keyExpr)) {
       keyValue = change.data[keyExpr];
@@ -1019,7 +1019,7 @@ class EditingControllerImpl extends modules.ViewController {
   }
 
   protected _addRow(parentKey) {
-    const key = this.dataSourceController.key();
+    const key = this.dataSourceController.store()?.key();
     const param: any = { data: {} };
     const oldEditRowIndex = this._getVisibleEditRowIndex();
     // @ts-expect-error
diff --git a/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts b/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
index 5d7d8e3098a6..91bc8a1cc790 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts
@@ -551,7 +551,7 @@ const columns = (Base: ModuleType<ColumnsController>) => class FocusColumnsExten
   public getSortDataSourceParameters(_, sortByKey?) {
     // @ts-expect-error
     let result = super.getSortDataSourceParameters.apply(this, arguments);
-    let key = this.dataSourceController.key();
+    let key = this.dataSourceController.store()?.key();
     const remoteOperations = this.dataSourceController.remoteOperations();
     const isLocalOperations = Object.keys(remoteOperations).every((operationName) => !remoteOperations[operationName]);
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts b/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
index 8a331632e28b..c3b0f1b197ad 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts
@@ -72,7 +72,7 @@ const processLongTap = function (that, dxEvent) {
 
 const isSeveralRowsSelected = function (that, selectionFilter) {
   let keyIndex = 0;
-  const key = that.dataSourceController.key();
+  const key = that.dataSourceController.store()?.key();
   const isComplexKey = Array.isArray(key);
 
   if (!selectionFilter.length) {
@@ -234,10 +234,10 @@ export class SelectionController extends modules.Controller {
         return virtualPaging && !legacyScrollingMode && !hasGroupColumns && allowSelectAll && !deferred;
       },
       key() {
-        return dataController?.key();
+        return dataSourceController.key();
       },
       keyOf(item) {
-        return dataController?.keyOf(item);
+        return dataSourceController.keyOf(item);
       },
       dataFields() {
         return dataSourceController.select();
diff --git a/packages/devextreme/js/__internal/grids/grid_core/validating/m_validating.ts b/packages/devextreme/js/__internal/grids/grid_core/validating/m_validating.ts
index 1c2e43f2909b..1b2b53961b65 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/validating/m_validating.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/validating/m_validating.ts
@@ -767,7 +767,7 @@ export const validatingEditingExtender = (Base: ModuleType<EditingController>) =
       const { key } = change;
 
       each(items, (i, item) => {
-        if (equalByValue(key, isInsert ? item.key : this._dataController.keyOf(item))) {
+        if (equalByValue(key, isInsert ? item.key : this.dataSourceController.keyOf(item))) {
           index = i;
           return false;
         }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts b/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts
index 5e8004eff1d3..353679598357 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts
@@ -582,7 +582,7 @@ export class RowsView extends ColumnsView {
   protected _checkRowKeys(options) {
     const that = this;
     const rows = that._getRows(options);
-    const keyExpr = that.dataSourceController.key();
+    const keyExpr = that.dataSourceController.store()?.key();
 
     keyExpr && rows.some((row) => {
       if (row.rowType === 'data' && row.key === undefined) {
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts b/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts
index ff079c7767d0..6120980c9b71 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_controller/m_data_controller.ts
@@ -73,18 +73,6 @@ export class TreeListDataController extends DataController {
     super.init.apply(this, arguments as any);
   }
 
-  public keyOf(data) {
-    const dataSource = this._dataSource;
-
-    if (dataSource) {
-      return dataSource.keyOf(data);
-    }
-  }
-
-  public key() {
-    return this._dataSource?.getKeyExpr();
-  }
-
   public publicMethods() {
     return super.publicMethods().concat(['expandRow', 'collapseRow', 'isRowExpanded', 'getRootNode', 'getNodeByKey', 'loadDescendants', 'forEachNode']);
   }
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_source/__tests__/data_source_controller.integration.test.ts b/packages/devextreme/js/__internal/grids/tree_list/data_source/__tests__/data_source_controller.integration.test.ts
new file mode 100644
index 000000000000..329df8827c2e
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_source/__tests__/data_source_controller.integration.test.ts
@@ -0,0 +1,93 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import errors from '@js/ui/widget/ui.errors';
+import { getMirroredAdapter } from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+
+import {
+  afterTest,
+  beforeTest,
+  createTreeList,
+} from '../../__tests__/__mock__/helpers/utils';
+import { TreeListDataSourceController } from '../data_source_controller';
+
+const DATA = [
+  { id: 1, parentId: 0, value: 'a' },
+  { id: 2, parentId: 1, value: 'b' },
+];
+
+describe('TreeList dataSource controller', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('is the TreeList subclass', async () => {
+    const { instance } = await createTreeList({ dataSource: DATA });
+
+    expect(instance.getController('dataSource'))
+      .toBeInstanceOf(TreeListDataSourceController);
+  });
+
+  it('builds a TreeList adapter', async () => {
+    const { instance } = await createTreeList({ dataSource: DATA });
+    const adapter = instance.getController('dataSource').getAdapter();
+
+    expect(adapter).toBeTruthy();
+    expect('forEachNode' in (adapter as object)).toBe(true);
+  });
+
+  it('holds the same adapter object as DataController', async () => {
+    const { instance } = await createTreeList({ dataSource: DATA });
+    const dataSourceController = instance.getController('dataSource');
+
+    expect(dataSourceController.hasAdapter()).toBe(true);
+    expect(dataSourceController.getAdapter()).toBe(getMirroredAdapter(instance));
+  });
+
+  it('does not warn W1011, because the override does not apply to TreeList', async () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+
+    try {
+      await createTreeList({
+        dataSource: { store: { type: 'array', data: DATA } },
+        keyExpr: 'id',
+      });
+
+      expect(log).not.toHaveBeenCalledWith('W1011');
+    } finally {
+      log.mockRestore();
+    }
+  });
+});
+
+describe('TreeList answers key and keyOf from the key expression', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  // The base controller answers both from the store, which has no key in either case here.
+  it('falls back to the default key expression when nothing declares a key', async () => {
+    const { instance } = await createTreeList({ dataSource: DATA, keyExpr: undefined });
+    const dataSourceController = instance.getController('dataSource');
+
+    expect(dataSourceController.key()).toBe('id');
+    expect(dataSourceController.keyOf(DATA[1])).toBe(2);
+  });
+
+  it('parts company with the store key, which is what store-based callers still read', async () => {
+    const { instance } = await createTreeList({ dataSource: DATA, keyExpr: undefined });
+    const dataSourceController = instance.getController('dataSource');
+
+    expect(dataSourceController.store()?.key()).toBeUndefined();
+    expect(dataSourceController.key()).toBe('id');
+  });
+
+  it('uses the declared key expression when the store has no key', async () => {
+    const { instance } = await createTreeList({
+      dataSource: { store: { type: 'array', data: DATA } },
+      keyExpr: 'value',
+    });
+    const dataSourceController = instance.getController('dataSource');
+
+    expect(dataSourceController.key()).toBe('value');
+    expect(dataSourceController.keyOf(DATA[1])).toBe('b');
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts b/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts
index 31877b804a4f..87467224ba13 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/data_source/data_source_controller.ts
@@ -1,14 +1,21 @@
+import type { StoreKey } from '@ts/data/abstract_store';
 import { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
-import type { DataSourceAdapterProvider } from '@ts/grids/grid_core/data_source_adapter/types';
+import type { DataSourceAdapterProvider, RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
+import type { RowKey } from '@ts/grids/grid_core/m_types';
 import type { DataSourceAdapterTreeList } from '@ts/grids/tree_list/data_source_adapter/m_data_source_adapter';
 import dataSourceAdapterProvider from '@ts/grids/tree_list/data_source_adapter/m_data_source_adapter';
 
-export class TreeListDataSourceController extends DataSourceController {
-  protected getAdapterProvider(): DataSourceAdapterProvider {
+export class TreeListDataSourceController
+  extends DataSourceController<DataSourceAdapterTreeList> {
+  protected getAdapterProvider(): DataSourceAdapterProvider<DataSourceAdapterTreeList> {
     return dataSourceAdapterProvider;
   }
 
-  public getAdapter(): DataSourceAdapterTreeList | null {
-    return super.getAdapter() as DataSourceAdapterTreeList | null;
+  public key(): StoreKey | undefined {
+    return this.adapter?.getKeyExpr();
+  }
+
+  public keyOf(data: RawItemData): RowKey | undefined {
+    return this.adapter?.keyOf(data);
   }
 }
diff --git a/packages/devextreme/js/__internal/grids/tree_list/editing/__tests__/add_row_generated_key.integration.test.ts b/packages/devextreme/js/__internal/grids/tree_list/editing/__tests__/add_row_generated_key.integration.test.ts
new file mode 100644
index 000000000000..6a9448f832ec
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/tree_list/editing/__tests__/add_row_generated_key.integration.test.ts
@@ -0,0 +1,82 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import { flushAsync } from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+
+import {
+  afterTest,
+  beforeTest,
+  createTreeList,
+} from '../../__tests__/__mock__/helpers/utils';
+
+const DATA = [
+  { id: 1, parentId: 0, value: 'a' },
+  { id: 2, parentId: 1, value: 'b' },
+];
+
+interface InitNewRowEvent {
+  data: Record<string, unknown>;
+}
+
+const addRowAndReadNewData = async (
+  keyExpr: string | undefined,
+): Promise<Record<string, unknown>> => {
+  const onInitNewRow = jest.fn<(e: InitNewRowEvent) => void>();
+
+  // A store built from a plain object option carries no key, unlike the array shorthand, which
+  // copies keyExpr onto the store it generates.
+  const { instance } = await createTreeList({
+    dataSource: { store: { type: 'array', data: DATA } },
+    keyExpr,
+    editing: { mode: 'row', allowAdding: true },
+    onInitNewRow,
+  });
+
+  const added = instance.addRow();
+  await flushAsync();
+  await added;
+
+  expect(onInitNewRow).toHaveBeenCalledTimes(1);
+
+  return onInitNewRow.mock.calls[0][0].data;
+};
+
+describe('TreeList adds a generated key to a new row the store cannot identify', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  // TreeList answers key() from its key expression, which always resolves — to 'id' by default.
+  // Only the store knows whether it can identify a row, so _addRow has to ask the store.
+  it('generates __KEY__ when the store declares no key', async () => {
+    const data = await addRowAndReadNewData(undefined);
+
+    expect(data.__KEY__).toEqual(expect.any(String));
+  });
+
+  it('generates __KEY__ even when a key expression is declared, because the store still has none', async () => {
+    const data = await addRowAndReadNewData('id');
+
+    expect(data.__KEY__).toEqual(expect.any(String));
+  });
+});
+
+describe('TreeList leaves a new row alone when the store can identify it', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('does not generate __KEY__ for a keyed store', async () => {
+    const onInitNewRow = jest.fn<(e: InitNewRowEvent) => void>();
+    const { instance } = await createTreeList({
+      dataSource: { store: { type: 'array', data: DATA, key: 'id' } },
+      editing: { mode: 'row', allowAdding: true },
+      onInitNewRow,
+    });
+
+    const added = instance.addRow();
+    await flushAsync();
+    await added;
+
+    expect(onInitNewRow).toHaveBeenCalledTimes(1);
+    expect(onInitNewRow.mock.calls[0][0].data).not.toHaveProperty('__KEY__');
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts b/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts
index df36c6d53e9b..ca79247b904a 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts
@@ -111,7 +111,7 @@ class EditingController extends editingModule.controllers.editing {
     const result = super._beforeSaveEditData.apply(this, arguments);
 
     if (change && change.type !== DATA_EDIT_DATA_INSERT_TYPE) {
-      const key = this.dataSourceController.key();
+      const key = this.dataSourceController.store()?.key();
 
       if (!isDefined(key)) {
         throw errors.Error('E1045');
diff --git a/packages/devextreme/js/__internal/grids/tree_list/m_focus.ts b/packages/devextreme/js/__internal/grids/tree_list/m_focus.ts
index cf1ae9b9f206..dcd46912a52f 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/m_focus.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/m_focus.ts
@@ -114,7 +114,7 @@ const data = (
           return;
         }
 
-        const offset = findIndex(nodes, (node) => this.keyOf(node.data) === key);
+        const offset = findIndex(nodes, (node) => this.dataSourceController.keyOf(node.data) === key);
 
         let pageIndex = -1;
 
diff --git a/packages/devextreme/js/__internal/grids/tree_list/selection/m_selection.ts b/packages/devextreme/js/__internal/grids/tree_list/selection/m_selection.ts
index 230f0f3bedd6..7e6ba1084bcf 100644
--- a/packages/devextreme/js/__internal/grids/tree_list/selection/m_selection.ts
+++ b/packages/devextreme/js/__internal/grids/tree_list/selection/m_selection.ts
@@ -102,7 +102,7 @@ SelectionController & TreeListSelectionControllerExtension
       return result || [];
     };
     config.isItemSelected = (item) => {
-      const key = this._dataController.keyOf(item);
+      const key = this.dataSourceController.keyOf(item);
 
       return this.isRowSelected(key);
     };

From 38da153aa14d313d509a24af553453feb91feed2 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <251575087+bit-byte0@users.noreply.github.com>
Date: Wed, 9 Sep 2026 12:49:28 +0000
Subject: [PATCH 36/45] Grids - DataController: Extract summary loadAll
 knowledge to extenders (#35113)

---
 ...ary_data_controller.load_all_items.test.ts | 46 +++++++++++++++++++
 .../extenders/summary_data_controller.ts      | 12 ++++-
 .../data_controller/data_controller.ts        | 36 ++++++++++-----
 .../grids/grid_core/data_controller/types.ts  |  7 +++
 4 files changed, 88 insertions(+), 13 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/data_grid/summary/extenders/__tests__/summary_data_controller.load_all_items.test.ts

diff --git a/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/__tests__/summary_data_controller.load_all_items.test.ts b/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/__tests__/summary_data_controller.load_all_items.test.ts
new file mode 100644
index 000000000000..ebbef09ad345
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/__tests__/summary_data_controller.load_all_items.test.ts
@@ -0,0 +1,46 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+import type { Properties as DataGridProperties } from '@js/ui/data_grid';
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+  flushAsync,
+} from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+
+const DATA = [{ id: 1, value: 10 }, { id: 2, value: 20 }];
+
+const loadAllSummary = async (
+  options: DataGridProperties = {},
+): Promise<unknown> => {
+  const { instance } = await createDataGrid({ dataSource: DATA, ...options });
+  const dataController = instance.getController('data');
+
+  let resolvedSummary: unknown = null;
+  dataController.loadAllItems().done((_items, summary) => {
+    resolvedSummary = summary;
+  });
+  await flushAsync();
+
+  return resolvedSummary;
+};
+
+describe('Summary data controller loadAllItems', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('should resolve the total summary as the second argument', async () => {
+    const summary = await loadAllSummary({
+      summary: { totalItems: [{ column: 'value', summaryType: 'sum' }] },
+    });
+
+    expect(summary).toEqual([30]);
+  });
+
+  it('should resolve no second argument when no summary is configured', async () => {
+    const summary = await loadAllSummary();
+
+    expect(summary).toBeUndefined();
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/summary_data_controller.ts b/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/summary_data_controller.ts
index 937c110c9ef3..fa06dc0332d0 100644
--- a/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/summary_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/data_grid/summary/extenders/summary_data_controller.ts
@@ -6,7 +6,10 @@ import type { Format } from '@js/localization';
 import type { SummaryGroupItem as SummaryGroupItemOption } from '@js/ui/data_grid';
 import type { Column } from '@ts/grids/data_grid/types';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
-import type { DataChange, ItemProcessingOptions, ProcessedItem } from '@ts/grids/grid_core/data_controller/types';
+import type {
+  DataChange, ItemProcessingOptions, LoadAllItemsDeferred, ProcessedItem,
+} from '@ts/grids/grid_core/data_controller/types';
+import type { CustomLoadResult } from '@ts/grids/grid_core/data_source_adapter/custom_loader';
 import type { RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
 import type { ModuleType, OptionChanged } from '@ts/grids/grid_core/m_types';
 
@@ -301,6 +304,13 @@ export const summaryDataControllerExtender = (
     return super.getChangedColumnIndices(oldItem, newItem, visibleRowIndex, isLiveUpdate);
   }
 
+  protected resolveLoadAllItems(
+    d: LoadAllItemsDeferred,
+    loadResult: CustomLoadResult,
+  ): void {
+    d.resolve(this.processLoadAllItems(loadResult), loadResult.extra?.summary);
+  }
+
   protected _updateItemsCore(change: DataChange): void {
     const dataSource = this._dataSource;
     const summaryTotalItems = this.option('summary.totalItems');
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index 9bb165834199..6c98e370ae1f 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -35,6 +35,7 @@ import type {
   ItemChangeOptions,
   ItemOperationOptions,
   ItemProcessingOptions,
+  LoadAllItemsDeferred,
   PagingChanges,
   PagingDataSource,
   PagingOptionName,
@@ -1348,8 +1349,8 @@ export class DataController extends modules.Controller {
   public loadAllItems(
     data?: RawItemData[],
     skipFilter = false,
-  ): DeferredObj<ProcessedItem[]> {
-    const d = Deferred<ProcessedItem[]>();
+  ): LoadAllItemsDeferred {
+    const d = Deferred<ProcessedItem[]>() as LoadAllItemsDeferred;
     const dataSource = this._dataSource;
 
     if (!dataSource) {
@@ -1357,14 +1358,8 @@ export class DataController extends modules.Controller {
       return d;
     }
 
-    const resolveWithProcessedItems = (loadResult: CustomLoadResult): void => {
-      const items = this._processItems(
-        this._beforeProcessItems(loadResult.data),
-        { changeType: 'loadingAll' },
-      );
-
-      // @ts-expect-error DataGrid-only summary leaks into grid_core
-      d.resolve(items, loadResult.extra?.summary);
+    const resolveLoaded = (loadResult: CustomLoadResult): void => {
+      this.resolveLoadAllItems(d, loadResult);
     };
 
     if (data) {
@@ -1373,11 +1368,11 @@ export class DataController extends modules.Controller {
         group: dataSource.group(),
         sort: dataSource.sort(),
       })
-        .done(resolveWithProcessedItems)
+        .done(resolveLoaded)
         .fail(d.reject as (...args: unknown[]) => void);
     } else if (!dataSource.isLoading()) {
       dataSource.customLoader.loadAll()
-        .done(resolveWithProcessedItems)
+        .done(resolveLoaded)
         .fail(d.reject as (...args: unknown[]) => void);
     } else {
       d.reject();
@@ -1386,6 +1381,23 @@ export class DataController extends modules.Controller {
     return d;
   }
 
+  protected processLoadAllItems(loadResult: CustomLoadResult): ProcessedItem[] {
+    return this._processItems(
+      this._beforeProcessItems(loadResult.data),
+      { changeType: 'loadingAll' },
+    );
+  }
+
+  /**
+   * @extended: summary (DataGrid)
+   */
+  protected resolveLoadAllItems(
+    d: LoadAllItemsDeferred,
+    loadResult: CustomLoadResult,
+  ): void {
+    d.resolve(this.processLoadAllItems(loadResult));
+  }
+
   public async getAllDataRowKeys(): Promise<RowKey[]> {
     const items = await Promise.resolve(this.loadAllItems());
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/types.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/types.ts
index b67a9d13623a..6f0aba6a1d85 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/types.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/types.ts
@@ -73,6 +73,13 @@ export interface ProcessedItem extends GeneratedItem {
   watch?: RowWatch;
 }
 
+type LoadAllItemsCallback = (items: ProcessedItem[], totalAggregates?: unknown[]) => void;
+
+export type LoadAllItemsDeferred = Omit<DeferredObj<ProcessedItem[]>, 'done' | 'resolve'> & {
+  done: (callback: LoadAllItemsCallback) => LoadAllItemsDeferred;
+  resolve: LoadAllItemsCallback;
+};
+
 /** changes */
 
 export type RowChangeType = 'update' | 'insert' | 'remove';

From 0e7bae24d86f5845a303ed8853deb2849e001e16 Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Fri, 14 Aug 2026 16:16:44 +0300
Subject: [PATCH 37/45] Rename files: remove m_ prefix

---
 .../ui/number_box/{m_number_box.base.ts => number_box.base.ts}    | 0
 .../ui/number_box/{m_number_box.caret.ts => number_box.caret.ts}  | 0
 .../ui/number_box/{m_number_box.mask.ts => number_box.mask.ts}    | 0
 .../ui/number_box/{m_number_box.spin.ts => number_box.spin.ts}    | 0
 .../ui/number_box/{m_number_box.spins.ts => number_box.spins.ts}  | 0
 .../__internal/ui/number_box/{m_number_box.ts => number_box.ts}   | 0
 .../js/__internal/ui/number_box/{m_utils.ts => utils.ts}          | 0
 7 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/devextreme/js/__internal/ui/number_box/{m_number_box.base.ts => number_box.base.ts} (100%)
 rename packages/devextreme/js/__internal/ui/number_box/{m_number_box.caret.ts => number_box.caret.ts} (100%)
 rename packages/devextreme/js/__internal/ui/number_box/{m_number_box.mask.ts => number_box.mask.ts} (100%)
 rename packages/devextreme/js/__internal/ui/number_box/{m_number_box.spin.ts => number_box.spin.ts} (100%)
 rename packages/devextreme/js/__internal/ui/number_box/{m_number_box.spins.ts => number_box.spins.ts} (100%)
 rename packages/devextreme/js/__internal/ui/number_box/{m_number_box.ts => number_box.ts} (100%)
 rename packages/devextreme/js/__internal/ui/number_box/{m_utils.ts => utils.ts} (100%)

diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.base.ts
similarity index 100%
rename from packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts
rename to packages/devextreme/js/__internal/ui/number_box/number_box.base.ts
diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.caret.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.caret.ts
similarity index 100%
rename from packages/devextreme/js/__internal/ui/number_box/m_number_box.caret.ts
rename to packages/devextreme/js/__internal/ui/number_box/number_box.caret.ts
diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.mask.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.mask.ts
similarity index 100%
rename from packages/devextreme/js/__internal/ui/number_box/m_number_box.mask.ts
rename to packages/devextreme/js/__internal/ui/number_box/number_box.mask.ts
diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.spin.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.spin.ts
similarity index 100%
rename from packages/devextreme/js/__internal/ui/number_box/m_number_box.spin.ts
rename to packages/devextreme/js/__internal/ui/number_box/number_box.spin.ts
diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.spins.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.spins.ts
similarity index 100%
rename from packages/devextreme/js/__internal/ui/number_box/m_number_box.spins.ts
rename to packages/devextreme/js/__internal/ui/number_box/number_box.spins.ts
diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.ts
similarity index 100%
rename from packages/devextreme/js/__internal/ui/number_box/m_number_box.ts
rename to packages/devextreme/js/__internal/ui/number_box/number_box.ts
diff --git a/packages/devextreme/js/__internal/ui/number_box/m_utils.ts b/packages/devextreme/js/__internal/ui/number_box/utils.ts
similarity index 100%
rename from packages/devextreme/js/__internal/ui/number_box/m_utils.ts
rename to packages/devextreme/js/__internal/ui/number_box/utils.ts

From f5efe489c2e9bea29c33805200d798ae28a71791 Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Tue, 8 Sep 2026 14:46:01 +0300
Subject: [PATCH 38/45] NumberBox: refactor and improve typing

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../js/__internal/core/localization/number.ts |   4 +-
 .../ui/chat/message_box/chat_text_area.ts     |   2 +-
 .../js/__internal/ui/color_box/color_view.ts  |   4 +-
 .../__internal/ui/date_box/date_box.mask.ts   |   2 +-
 .../js/__internal/ui/date_box/time_view.ts    |   4 +-
 .../ui/drop_down_editor/drop_down_button.ts   |   4 +-
 .../ui/number_box/__tests__/utils.test.ts     |  85 ++++
 .../ui/number_box/number_box.base.ts          | 258 +++++-----
 .../ui/number_box/number_box.caret.ts         | 175 ++++---
 .../ui/number_box/number_box.mask.ts          | 458 ++++++++++--------
 .../ui/number_box/number_box.spin.ts          |  10 +-
 .../ui/number_box/number_box.spins.ts         |  86 ++--
 .../js/__internal/ui/number_box/number_box.ts |   2 +-
 .../js/__internal/ui/number_box/utils.ts      |  54 ++-
 .../ui/text_box/text_editor.base.ts           |  18 +-
 .../ui/text_box/text_editor.clear.ts          |   3 +-
 .../ui/text_box/text_editor.mask.ts           |   2 +-
 .../texteditor_button_collection/button.ts    |   9 +-
 .../texteditor_button_collection/custom.ts    |   8 +-
 packages/devextreme/js/ui/number_box.js       |   2 +-
 .../numberBoxParts/common.tests.js            |   2 +-
 .../numberBoxParts/mask.caret.tests.js        |   2 +-
 .../toolbar.kbn.tests.js                      |   2 +-
 23 files changed, 702 insertions(+), 494 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/ui/number_box/__tests__/utils.test.ts

diff --git a/packages/devextreme/js/__internal/core/localization/number.ts b/packages/devextreme/js/__internal/core/localization/number.ts
index 53631e00f316..67c8f5bbede1 100644
--- a/packages/devextreme/js/__internal/core/localization/number.ts
+++ b/packages/devextreme/js/__internal/core/localization/number.ts
@@ -286,7 +286,7 @@ const numberLocalizationBase = {
     return value.replace(regExp, (char) => String.fromCharCode(char.charCodeAt(0) + (toFirstDigit.charCodeAt(0) - fromFirstDigit.charCodeAt(0)))) as TValue;
   },
 
-  getNegativeEtalonRegExp(format: FormatConfig | string): RegExp {
+  getNegativeEtalonRegExp(format: LocalizationFormat): RegExp {
     const separators: FormatterConfig = this._getSeparators();
     const digitalRegExp = new RegExp(`[0-9${escapeRegExp(separators.decimalSeparator + separators.thousandsSeparator)}]+`, 'g');
     const specialCharacters = ['\\', '(', ')', '[', ']', '*', '+', '$', '^', '?', '|', '{', '}'];
@@ -301,7 +301,7 @@ const numberLocalizationBase = {
     return new RegExp(negativeEtalon, 'g');
   },
 
-  getSign(text: string, format?: FormatConfig | string): 1 | -1 {
+  getSign(text: string, format?: LocalizationFormat): 1 | -1 {
     if (!format) {
       if (text.replace(/[^0-9-]/g, '').startsWith('-')) {
         return -1;
diff --git a/packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts b/packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts
index b06013080e0d..6a809d60bb82 100644
--- a/packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts
+++ b/packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts
@@ -619,7 +619,7 @@ class ChatTextArea extends TextArea<Properties> {
     return maxHeight;
   }
 
-  _keyPressHandler(e: { originalEvent: InputEvent & KeyboardEvent }): void {
+  _keyPressHandler(e: DxEvent): void {
     super._keyPressHandler(e);
 
     this._updateButtonsState();
diff --git a/packages/devextreme/js/__internal/ui/color_box/color_view.ts b/packages/devextreme/js/__internal/ui/color_box/color_view.ts
index 349261fdff67..55072f72e081 100644
--- a/packages/devextreme/js/__internal/ui/color_box/color_view.ts
+++ b/packages/devextreme/js/__internal/ui/color_box/color_view.ts
@@ -18,8 +18,8 @@ import { isCommandKeyPressed } from '@ts/events/utils/index';
 import Draggable from '@ts/m_draggable';
 import type { EditorProperties, ValueChangedEvent } from '@ts/ui/editor/editor';
 import Editor from '@ts/ui/editor/editor';
-import NumberBox from '@ts/ui/number_box/m_number_box';
-import { WIDGET_CLASS as NUMBERBOX_CLASS } from '@ts/ui/number_box/m_number_box.base';
+import NumberBox from '@ts/ui/number_box/number_box';
+import { WIDGET_CLASS as NUMBERBOX_CLASS } from '@ts/ui/number_box/number_box.base';
 import TextBox from '@ts/ui/text_box/text_box';
 
 const COLOR_VIEW_CLASS = 'dx-colorview';
diff --git a/packages/devextreme/js/__internal/ui/date_box/date_box.mask.ts b/packages/devextreme/js/__internal/ui/date_box/date_box.mask.ts
index d62dd2b23c62..378a4486fb42 100644
--- a/packages/devextreme/js/__internal/ui/date_box/date_box.mask.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/date_box.mask.ts
@@ -273,7 +273,7 @@ class DateBoxMask<
     this._caret(this._getActivePartProp('caret'));
   }
 
-  _keyPressHandler(e: { originalEvent: InputEvent & KeyboardEvent }): void {
+  _keyPressHandler(e: DxEvent<InputEvent>): void {
     const { originalEvent: event } = e;
 
     const isBackwardDeletion = event?.inputType === 'deleteContentBackward';
diff --git a/packages/devextreme/js/__internal/ui/date_box/time_view.ts b/packages/devextreme/js/__internal/ui/date_box/time_view.ts
index a8ba0626d342..314967f395a4 100644
--- a/packages/devextreme/js/__internal/ui/date_box/time_view.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/time_view.ts
@@ -9,8 +9,8 @@ import Box from '@ts/ui/box';
 import dateUtils from '@ts/ui/date_box/date_utils';
 import type { EditorProperties } from '@ts/ui/editor/editor';
 import Editor from '@ts/ui/editor/editor';
-import NumberBox from '@ts/ui/number_box/m_number_box';
-import type { NumberBoxMaskProperties } from '@ts/ui/number_box/m_number_box.mask';
+import NumberBox from '@ts/ui/number_box/number_box';
+import type { NumberBoxMaskProperties } from '@ts/ui/number_box/number_box.mask';
 import SelectBox from '@ts/ui/select_box';
 
 const TIMEVIEW_CLASS = 'dx-timeview';
diff --git a/packages/devextreme/js/__internal/ui/drop_down_editor/drop_down_button.ts b/packages/devextreme/js/__internal/ui/drop_down_editor/drop_down_button.ts
index f528e4b59f2e..4038648987ff 100644
--- a/packages/devextreme/js/__internal/ui/drop_down_editor/drop_down_button.ts
+++ b/packages/devextreme/js/__internal/ui/drop_down_editor/drop_down_button.ts
@@ -35,9 +35,7 @@ interface EditorWithDropDown {
 export default class DropDownButton<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TComponent extends Editor<any> & EditorWithDropDown = DropDownEditor,
-> extends TextEditorButton<TComponent> {
-  declare instance: Button | null;
-
+> extends TextEditorButton<TComponent, Button> {
   currentTemplate: DropDownEditorProperties['dropDownButtonTemplate'] | null;
 
   constructor(name: string, editor: TComponent, options: ButtonProperties) {
diff --git a/packages/devextreme/js/__internal/ui/number_box/__tests__/utils.test.ts b/packages/devextreme/js/__internal/ui/number_box/__tests__/utils.test.ts
new file mode 100644
index 000000000000..a767c38ea29e
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/number_box/__tests__/utils.test.ts
@@ -0,0 +1,85 @@
+import { describe, expect, it } from '@jest/globals';
+
+import {
+  asPattern, getNthOccurrence, getRealSeparatorIndex, splitByIndex,
+} from '../utils';
+
+describe('getNthOccurrence', () => {
+  it('returns the position of the requested occurrence', () => {
+    expect(getNthOccurrence('1.234.567', '.', 1)).toBe(1);
+    expect(getNthOccurrence('1.234.567', '.', 2)).toBe(5);
+  });
+
+  it('returns -1 when the character is absent', () => {
+    expect(getNthOccurrence('1234', '.', 1)).toBe(-1);
+    expect(getNthOccurrence('', '.', 1)).toBe(-1);
+  });
+
+  it('returns -1 when there are fewer occurrences than requested', () => {
+    expect(getNthOccurrence('abc.d', '.', 2)).toBe(-1);
+    expect(getNthOccurrence('abc.d', '.', 3)).toBe(-1);
+    expect(getNthOccurrence('a.b.c', '.', 4)).toBe(-1);
+    expect(getNthOccurrence('a.b.c', '.', 5)).toBe(-1);
+  });
+
+  it('returns -1 when no occurrence is requested', () => {
+    expect(getNthOccurrence('1.2', '.', 0)).toBe(-1);
+  });
+
+  it('counts adjacent occurrences separately', () => {
+    expect(getNthOccurrence('...', '.', 1)).toBe(0);
+    expect(getNthOccurrence('...', '.', 3)).toBe(2);
+    expect(getNthOccurrence('...', '.', 4)).toBe(-1);
+  });
+});
+
+describe('getRealSeparatorIndex', () => {
+  it('reports the first separator of a plain pattern', () => {
+    expect(getRealSeparatorIndex('#0.00')).toEqual({ occurrence: 1, index: 2 });
+    expect(getRealSeparatorIndex('#,##0.##')).toEqual({ occurrence: 1, index: 5 });
+  });
+
+  it('skips separators inside escaped stubs', () => {
+    expect(getRealSeparatorIndex("'.'#0.00")).toEqual({ occurrence: 2, index: 5 });
+    expect(getRealSeparatorIndex("'..' #0.00")).toEqual({ occurrence: 3, index: 7 });
+  });
+
+  it('reports a missing separator for patterns without a float part', () => {
+    expect(getRealSeparatorIndex('#,##0')).toEqual({ occurrence: 1, index: -1 });
+  });
+
+  it('treats a format that is not a pattern as having no separator', () => {
+    expect(getRealSeparatorIndex({ type: 'fixedPoint', precision: 2 }))
+      .toEqual({ occurrence: 1, index: -1 });
+    expect(getRealSeparatorIndex(undefined)).toEqual({ occurrence: 1, index: -1 });
+  });
+
+  it('locates the separator of a stubbed pattern in the formatted text', () => {
+    const { occurrence } = getRealSeparatorIndex("'...' #0.0");
+
+    expect(getNthOccurrence('... 12.5', '.', occurrence)).toBe(6);
+    expect(getNthOccurrence('.. 12', '.', occurrence)).toBe(-1);
+  });
+});
+
+describe('splitByIndex', () => {
+  it('splits the text around the given index', () => {
+    expect(splitByIndex('12.34', 2)).toEqual(['12', '34']);
+  });
+
+  it('keeps the text whole when there is no split point', () => {
+    expect(splitByIndex('1234', -1)).toEqual(['1234']);
+  });
+});
+
+describe('asPattern', () => {
+  it('passes a pattern string through', () => {
+    expect(asPattern('#0.00')).toBe('#0.00');
+  });
+
+  it('reports an empty pattern for formats that are not strings', () => {
+    expect(asPattern(undefined)).toBe('');
+    expect(asPattern({ type: 'currency' })).toBe('');
+    expect(asPattern((value: number): string => String(value))).toBe('');
+  });
+});
diff --git a/packages/devextreme/js/__internal/ui/number_box/number_box.base.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.base.ts
index 76577f3c5d31..c87bcd6f5ad1 100644
--- a/packages/devextreme/js/__internal/ui/number_box/number_box.base.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/number_box.base.ts
@@ -13,25 +13,37 @@ import browser from '@js/core/utils/browser';
 import {
   // @ts-expect-error ts-error
   applyServerDecimalSeparator,
-  ensureDefined,
 } from '@js/core/utils/common';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred } from '@js/core/utils/deferred';
 import { fitIntoRange, inRange } from '@js/core/utils/math';
 import { isDefined } from '@js/core/utils/type';
+import type { DxEvent, InteractionEvent } from '@js/events';
+import type { Format } from '@js/localization';
 import { getGlobalFormatByDataType } from '@ts/core/global_format_config';
+import type { OptionChanged } from '@ts/core/widget/types';
+import type { SupportedKeys } from '@ts/core/widget/widget';
+import type { DxMouseWheelEvent } from '@ts/ui/scroll_view/types';
 import TextEditor from '@ts/ui/text_box/text_editor';
 
-import type { TextEditorBaseProperties } from '../text_box/text_editor.base';
+import type { TextEditorBaseProperties, TextEditorInputAttributes } from '../text_box/text_editor.base';
 import type { TextEditorButtonInfo } from '../text_box/texteditor_button_collection/index';
-import SpinButtons from './m_number_box.spins';
-
-const math = Math;
+import type { SpinChangeEvent } from './number_box.spin';
+import SpinButtons from './number_box.spins';
 
 export const WIDGET_CLASS = 'dx-numberbox';
 const FIREFOX_CONTROL_KEYS = ['tab', 'del', 'backspace', 'leftArrow', 'rightArrow', 'home', 'end', 'enter'];
 
 const FORCE_VALUECHANGE_EVENT_NAMESPACE = 'NumberBoxForceValueChange';
 
+export type NumberBoxValue = number | null;
+
+export type SpinValueChangeEvent = DxEvent<InteractionEvent> | DxMouseWheelEvent;
+
+const getSpinEvent = (
+  e: SpinChangeEvent | DxEvent<InteractionEvent>,
+): SpinValueChangeEvent => ('event' in e ? e.event : e);
+
 export interface NumberBoxBaseProperties extends TextEditorBaseProperties {
   min?: number;
   max?: number;
@@ -39,6 +51,9 @@ export interface NumberBoxBaseProperties extends TextEditorBaseProperties {
   showSpinButtons?: boolean;
   useLargeSpinButtons?: boolean;
   invalidValueMessage?: string;
+  format?: Format | null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  displayValueFormatter?: ((value: any) => string);
 }
 
 class NumberBoxBase<
@@ -48,24 +63,24 @@ class NumberBoxBase<
 
   _$submitElement!: dxElementWrapper;
 
-  _supportedKeys(): Record<string, (e: KeyboardEvent) => void> {
+  _supportedKeys(): SupportedKeys {
     return {
       ...super._supportedKeys(),
-      upArrow(e): void {
+      upArrow: (e): void => {
         if (!isCommandKeyPressed(e)) {
           e.preventDefault();
           e.stopPropagation();
           this._spinUpChangeHandler(e);
         }
       },
-      downArrow(e): void {
+      downArrow: (e): void => {
         if (!isCommandKeyPressed(e)) {
           e.preventDefault();
           e.stopPropagation();
           this._spinDownChangeHandler(e);
         }
       },
-      enter(): void {},
+      enter: (): void => {},
     };
   }
 
@@ -80,12 +95,10 @@ class NumberBoxBase<
       useLargeSpinButtons: true,
       mode: 'text',
       invalidValueMessage: messageLocalization.format('dxNumberBox-invalidValueMessage'),
-      // eslint-disable-next-line no-void
-      buttons: void 0,
+      buttons: undefined,
     };
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _useTemplates(): boolean {
     return false;
   }
@@ -95,32 +108,27 @@ class NumberBoxBase<
     return super._getDefaultButtons().concat([{ name: 'spins', Ctor: SpinButtons }]);
   }
 
-  _isSupportInputMode() {
-    // @ts-expect-error ts-error
-    const version = parseFloat(browser.version);
+  _isSupportInputMode(): boolean {
+    const version = parseFloat(browser.version ?? '');
+
+    const isSupportedChrome = !!browser.chrome && version >= 66;
+    const isSupportedSafari = !!browser.safari && version >= 12;
 
-    return (
-      browser.chrome && version >= 66
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        || browser.safari && version >= 12
-    );
+    return isSupportedChrome || isSupportedSafari;
   }
 
   _defaultOptionsRules(): DefaultOptionsRule<TProperties>[] {
     // @ts-expect-error ts-error
     return super._defaultOptionsRules().concat([
       {
-        device() {
-          return devices.real().generic && !devices.isSimulator();
-        },
+        device: (): boolean => !!devices.real().generic && !devices.isSimulator(),
         options: {
           useLargeSpinButtons: false,
         },
       },
       {
-        device: function () {
-          return devices.real().deviceType !== 'desktop' && !this._isSupportInputMode();
-        }.bind(this),
+        device: (): boolean => devices.real().deviceType !== 'desktop'
+          && !this._isSupportInputMode(),
         options: {
           mode: 'number',
         },
@@ -136,7 +144,7 @@ class NumberBoxBase<
     this._toggleTabIndex();
   }
 
-  _getDefaultAttributes() {
+  _getDefaultAttributes(): TextEditorInputAttributes {
     const attributes = super._getDefaultAttributes();
     // eslint-disable-next-line spellcheck/spell-checker
     attributes.inputmode = 'decimal';
@@ -144,18 +152,25 @@ class NumberBoxBase<
   }
 
   _renderContentImpl(): void {
-    this.option('isValid') && this._validateValue(this.option('value'));
+    const { isValid, value } = this.option();
+
+    if (isValid) {
+      this._validateValue(value);
+    }
+
     this.setAria('role', 'spinbutton');
   }
 
   _renderSubmitElement(): void {
+    const { value } = this.option();
+
     this._$submitElement = $('<input>')
       .attr('type', 'hidden')
       .appendTo(this.$element());
-    this._setSubmitValue(this.option('value'));
+    this._setSubmitValue(value);
   }
 
-  _setSubmitValue(value) {
+  _setSubmitValue(value: NumberBoxValue | undefined): void {
     this._getSubmitElement().val(applyServerDecimalSeparator(value));
   }
 
@@ -163,7 +178,7 @@ class NumberBoxBase<
     return this._$submitElement;
   }
 
-  _keyPressHandler(e) {
+  _keyPressHandler(e: DxEvent<KeyboardEvent>): void {
     super._keyPressHandler();
 
     const char = getChar(e);
@@ -173,7 +188,7 @@ class NumberBoxBase<
     if (!isInputCharValid) {
       const keyName = normalizeKeyName(e);
       // NOTE: Additional check for Firefox control keys
-      if (isCommandKeyPressed(e) || keyName && FIREFOX_CONTROL_KEYS.includes(keyName)) {
+      if (isCommandKeyPressed(e) || (keyName && FIREFOX_CONTROL_KEYS.includes(keyName))) {
         return;
       }
 
@@ -188,13 +203,14 @@ class NumberBoxBase<
     return true;
   }
 
-  _onMouseWheel(dxEvent): void {
-    dxEvent.delta > 0 ? this._spinValueChange(1, dxEvent) : this._spinValueChange(-1, dxEvent);
+  _onMouseWheel(e: DxMouseWheelEvent): void {
+    this._spinValueChange(e.delta > 0 ? 1 : -1, e);
   }
 
-  _renderValue() {
+  _renderValue(): DeferredObj<unknown> {
     const inputValue = this._input().val();
-    const value = this.option('value');
+    const { value } = this.option();
+
     if (!inputValue.length || Number(inputValue) !== value) {
       this._forceValueRender();
       this._toggleEmptinessEventHandler();
@@ -203,9 +219,8 @@ class NumberBoxBase<
     const valueText = isDefined(value) ? null : messageLocalization.format('dxNumberBox-noDataText');
 
     this.setAria({
-      // @ts-expect-error ts-error
       // eslint-disable-next-line spellcheck/spell-checker
-      valuenow: ensureDefined(value, ''),
+      valuenow: value ?? '',
       // eslint-disable-next-line spellcheck/spell-checker
       valuetext: valueText,
     });
@@ -217,17 +232,18 @@ class NumberBoxBase<
   }
 
   _forceValueRender(): void {
-    const value = this.option('value');
-    const number = Number(value);
-    const formattedValue = isNaN(number)
+    const { value } = this.option();
+    const formattedValue = isNaN(Number(value))
       ? ''
       : this._applyDisplayValueFormatter(value);
 
     this._renderDisplayText(formattedValue);
   }
 
-  _applyDisplayValueFormatter(value): string | undefined {
-    if (!this.option('format')) {
+  _applyDisplayValueFormatter(value: NumberBoxValue | undefined): string | undefined {
+    const { format, displayValueFormatter } = this.option();
+
+    if (!format) {
       const globalNumberFormat = getGlobalFormatByDataType('number');
 
       if (globalNumberFormat) {
@@ -238,70 +254,66 @@ class NumberBoxBase<
       }
     }
 
-    const { displayValueFormatter } = this.option();
-
     return displayValueFormatter?.(value);
   }
 
   _renderProps(): void {
+    const { min, max, step } = this.option();
+
     // @ts-expect-error ts-error
-    this._input().prop({
-      min: this.option('min'),
-      max: this.option('max'),
-      step: this.option('step'),
-    });
+    this._input().prop({ min, max, step });
 
     this.setAria({
-      // @ts-expect-error ts-error
       // eslint-disable-next-line spellcheck/spell-checker
-      valuemin: ensureDefined(this.option('min'), ''),
-      // @ts-expect-error ts-error
+      valuemin: min ?? '',
       // eslint-disable-next-line spellcheck/spell-checker
-      valuemax: ensureDefined(this.option('max'), ''),
+      valuemax: max ?? '',
     });
   }
 
   _spinButtonsPointerDownHandler(): void {
+    const { useLargeSpinButtons } = this.option();
     const $input = this._input();
-    if (!this.option('useLargeSpinButtons') && domAdapter.getActiveElement() !== $input[0]) {
+
+    if (!useLargeSpinButtons && domAdapter.getActiveElement() !== $input[0]) {
       // @ts-expect-error ts-error
       eventsEngine.trigger($input, 'focus');
     }
   }
 
-  _spinUpChangeHandler(e): void {
-    if (!this.option('readOnly')) {
-      this._spinValueChange(1, e.event || e);
+  _spinUpChangeHandler(e: SpinChangeEvent | DxEvent<InteractionEvent>): void {
+    const { readOnly } = this.option();
+
+    if (!readOnly) {
+      this._spinValueChange(1, getSpinEvent(e));
     }
   }
 
-  _spinDownChangeHandler(e): void {
-    if (!this.option('readOnly')) {
-      this._spinValueChange(-1, e.event || e);
+  _spinDownChangeHandler(e: SpinChangeEvent | DxEvent<InteractionEvent>): void {
+    const { readOnly } = this.option();
+
+    if (!readOnly) {
+      this._spinValueChange(-1, getSpinEvent(e));
     }
   }
 
-  _spinValueChange(sign, dxEvent): void {
-    // @ts-expect-error ts-error
-    const step = parseFloat(this.option('step'));
+  _spinValueChange(sign: number, dxEvent?: SpinValueChangeEvent): void {
+    const { step: stepOption, min, max } = this.option();
+    const step = parseFloat(String(stepOption));
+
     if (step === 0) {
       return;
     }
-    // @ts-expect-error ts-error
-    let value = parseFloat(this._normalizeInputValue()) || 0;
 
-    value = this._correctRounding(value, step * sign);
+    let value = parseFloat(String(this._normalizeInputValue())) || 0;
 
-    const min = this.option('min');
-    const max = this.option('max');
+    value = this._correctRounding(value, step * sign);
 
     if (isDefined(min)) {
-      // @ts-expect-error ts-error
       value = Math.max(min, value);
     }
 
     if (isDefined(max)) {
-      // @ts-expect-error ts-error
       value = Math.min(max, value);
     }
 
@@ -309,35 +321,28 @@ class NumberBoxBase<
     this.option('value', value);
   }
 
-  _correctRounding(value, step) {
+  _correctRounding(value: number, step: number): number {
     const regex = /[,.](.*)/;
-    const isFloatValue = regex.test(value);
-    const isFloatStep = regex.test(step);
+    const valueText = String(value);
+    const stepText = String(step);
+    const isFloatValue = regex.test(valueText);
+    const isFloatStep = regex.test(stepText);
 
     if (isFloatValue || isFloatStep) {
-      // @ts-expect-error
-      const valueAccuracy = isFloatValue ? regex.exec(value)[0].length : 0;
-      // @ts-expect-error
-      const stepAccuracy = isFloatStep ? regex.exec(step)[0].length : 0;
-      const accuracy = math.max(valueAccuracy, stepAccuracy);
-
-      value = this._round(value + step, accuracy);
+      const valueAccuracy = isFloatValue ? regex.exec(valueText)?.[0].length ?? 0 : 0;
+      const stepAccuracy = isFloatStep ? regex.exec(stepText)?.[0].length ?? 0 : 0;
+      const accuracy = Math.max(valueAccuracy, stepAccuracy);
 
-      return value;
+      return this._round(value + step, accuracy);
     }
 
     return value + step;
   }
 
-  _round(value, precision) {
-    precision = precision || 0;
-
+  _round(value: number, precision = 0): number {
     const multiplier = 10 ** precision;
 
-    value *= multiplier;
-    value = Math.round(value) / multiplier;
-
-    return value;
+    return Math.round(value * multiplier) / multiplier;
   }
 
   _renderValueChangeEvent(): void {
@@ -348,20 +353,21 @@ class NumberBoxBase<
     eventsEngine.on(this.element(), forceValueChangeEvent, this._forceRefreshInputValue.bind(this));
   }
 
-  _forceRefreshInputValue() {
-    const { mode } = this.option();
+  _forceRefreshInputValue(): void {
+    const { mode, value } = this.option();
+
     if (mode === 'number') {
       return;
     }
 
     const $input = this._input();
-    const formattedValue = this._applyDisplayValueFormatter(this.option('value'));
+    const formattedValue = this._applyDisplayValueFormatter(value);
     // @ts-expect-error ts-error
     $input.val(null);
     $input.val(formattedValue);
   }
 
-  _valueChangeEventHandler(e) {
+  _valueChangeEventHandler(e: DxEvent): void {
     const $input = this._input();
     const inputValue = this._normalizeText();
     const value = this._parseValue(inputValue);
@@ -373,8 +379,7 @@ class NumberBoxBase<
     }
 
     if (valueHasDigits) {
-      // @ts-expect-error ts-error
-      super._valueChangeEventHandler(e, isNaN(value) ? null : value);
+      super._valueChangeEventHandler(e, isNaN(Number(value)) ? null : value);
     }
 
     this._applyValueBoundaries(inputValue, value);
@@ -385,9 +390,9 @@ class NumberBoxBase<
     });
   }
 
-  _applyValueBoundaries(inputValue, parsedValue) {
+  _applyValueBoundaries(inputValue: string, parsedValue: NumberBoxValue | undefined): void {
     const isValueIncomplete = this._isValueIncomplete(inputValue);
-    const isValueCorrect = this._isValueInRange(inputValue);
+    const isValueCorrect = this._isValueInRange(Number(inputValue));
 
     if (!isValueIncomplete && !isValueCorrect && parsedValue !== null) {
       if (Number(inputValue) !== parsedValue) {
@@ -396,20 +401,19 @@ class NumberBoxBase<
     }
   }
 
-  _replaceCommaWithPoint(value): string {
+  _replaceCommaWithPoint(value: string): string {
     return value.replace(',', '.');
   }
 
   _inputIsInvalid(): boolean {
     const { mode } = this.option();
     const isNumberMode = mode === 'number';
-    // @ts-expect-error ts-error
-    const validityState = this._input().get(0).validity;
+    const input = this._input().get(0) as HTMLInputElement | undefined;
 
-    return isNumberMode && validityState?.badInput;
+    return isNumberMode && !!input?.validity.badInput;
   }
 
-  _renderDisplayText(text) {
+  _renderDisplayText(text: string | undefined): void {
     if (this._inputIsInvalid()) {
       return;
     }
@@ -417,20 +421,23 @@ class NumberBoxBase<
     super._renderDisplayText(text);
   }
 
-  _isValueIncomplete(value) {
+  _isValueIncomplete(value: string): boolean {
     const incompleteRegex = /(^-$)|(^-?\d*\.$)|(\d+e-?$)/i;
     return incompleteRegex.test(value);
   }
 
-  _isValueInRange(value) {
-    return inRange(value, this.option('min'), this.option('max'));
+  _isValueInRange(value: number): boolean {
+    const { min, max } = this.option();
+
+    return inRange(value, min, max);
   }
 
-  _isNumber(value) {
+  _isNumber(value: string): boolean {
     return this._parseValue(value) !== null;
   }
 
-  _validateValue(value?) {
+  _validateValue(value?: NumberBoxValue): boolean {
+    const { invalidValueMessage } = this.option();
     const inputValue = this._normalizeText();
     const isValueValid = this._isValueValid();
     let isValid = true;
@@ -450,31 +457,32 @@ class NumberBoxBase<
       isValid,
       validationError: isValid ? null : {
         editorSpecific: true,
-        message: this.option('invalidValueMessage'),
+        message: invalidValueMessage,
       },
     });
 
     return isValid;
   }
 
-  _normalizeInputValue(): number | null {
+  _normalizeInputValue(): NumberBoxValue | undefined {
     return this._parseValue(this._normalizeText());
   }
 
-  _normalizeText() {
+  _normalizeText(): string {
     const value = this._input().val().trim();
 
     return this._replaceCommaWithPoint(value);
   }
 
-  _parseValue(value): number | null {
-    const number = parseFloat(value);
+  _parseValue(value?: string | NumberBoxValue): NumberBoxValue | undefined {
+    const { min, max } = this.option();
+    const parsedValue = parseFloat(String(value ?? ''));
 
-    if (isNaN(number)) {
+    if (isNaN(parsedValue)) {
       return null;
     }
 
-    return fitIntoRange(number, this.option('min'), this.option('max'));
+    return fitIntoRange(parsedValue, min, max);
   }
 
   _clearValue(): void {
@@ -486,7 +494,9 @@ class NumberBoxBase<
   }
 
   clear(): void {
-    if (this.option('value') === null) {
+    const { value } = this.option();
+
+    if (value === null) {
       this.option('text', '');
       if (this._input().length) {
         this._renderValue();
@@ -496,22 +506,28 @@ class NumberBoxBase<
     }
   }
 
-  _optionChanged(args) {
+  _optionChanged(args: OptionChanged<TProperties>): void {
     switch (args.name) {
-      case 'value':
-        this._validateValue(args.value);
-        this._setSubmitValue(args.value);
+      case 'value': {
+        const value = args.value as NumberBoxValue | undefined;
+
+        this._validateValue(value);
+        this._setSubmitValue(value);
         super._optionChanged(args);
         this._resumeValueChangeAction();
         break;
+      }
       case 'step':
         this._renderProps();
         break;
       case 'min':
-      case 'max':
+      case 'max': {
+        const { value } = this.option();
+
         this._renderProps();
-        this.option('value', this._parseValue(this.option('value')));
+        this.option('value', this._parseValue(value));
         break;
+      }
       case 'showSpinButtons':
       case 'useLargeSpinButtons':
         this._updateButtons(['spins']);
diff --git a/packages/devextreme/js/__internal/ui/number_box/number_box.caret.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.caret.ts
index 0ba137034deb..426ef848ce10 100644
--- a/packages/devextreme/js/__internal/ui/number_box/number_box.caret.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/number_box.caret.ts
@@ -1,50 +1,34 @@
 import number from '@js/common/core/localization/number';
 import { escapeRegExp } from '@js/core/utils/common';
 import { fitIntoRange } from '@js/core/utils/math';
+import type { Format } from '@js/localization';
+import type { CaretRange } from '@ts/ui/text_box/utils.caret';
 
-import { getNthOccurrence, getRealSeparatorIndex, splitByIndex } from './m_utils';
+import { getNthOccurrence, getRealSeparatorIndex, splitByIndex } from './utils';
 
-export const getCaretBoundaries = function (text, format) {
-  if (typeof format === 'string') {
-    const signParts = format.split(';');
-    const sign = number.getSign(text, format);
-
-    signParts[1] = signParts[1] || `-${signParts[0]}`;
-    format = signParts[sign < 0 ? 1 : 0];
-
-    const mockEscapedStubs = (str) => str.replace(/'([^']*)'/g, (str) => str.split('').map(() => ' ').join('').substr(2));
-
-    format = mockEscapedStubs(format);
+export interface CaretBoundaries {
+  start: number;
+  end: number;
+}
 
-    // @ts-expect-error
-    const prefixStubLength = /^[^#0.,]*/.exec(format)[0].length;
-    // @ts-expect-error
-    const postfixStubLength = /[^#0.,]*$/.exec(format)[0].length;
+export type CaretPosition = number | CaretRange;
 
-    return {
-      start: prefixStubLength,
-      end: text.length - postfixStubLength,
-    };
-  }
-  return { start: 0, end: text.length };
-};
+const mockEscapedStubs = (format: string): string => format.replace(
+  /'([^']*)'/g,
+  (stub) => stub.split('').map(() => ' ').join('').substr(2),
+);
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _getDigitCountBeforeIndex = function (index, text) {
-  const decimalSeparator = number.getDecimalSeparator();
+const getDigitCountBeforeIndex = (index: number, text: string): number => {
+  const decimalSeparator: string = number.getDecimalSeparator();
   const regExp = new RegExp(`[^0-9${escapeRegExp(decimalSeparator)}]`, 'g');
   const textBeforePosition = text.slice(0, index);
 
   return textBeforePosition.replace(regExp, '').length;
 };
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _reverseText = function (text) {
-  return text.split('').reverse().join('');
-};
+const reverseText = (text: string): string => text.split('').reverse().join('');
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _getDigitPositionByIndex = function (digitIndex, text) {
+const getDigitPositionByIndex = (digitIndex: number, text: string): number => {
   if (!digitIndex) {
     return -1;
   }
@@ -59,82 +43,117 @@ const _getDigitPositionByIndex = function (digitIndex, text) {
     if (counter >= digitIndex) {
       return index;
     }
-    counter++;
+    counter += 1;
     result = regExp.exec(text);
   }
 
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  return index === null ? text.length : index;
+  return index ?? text.length;
 };
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _trimNonNumericCharsFromEnd = function (text) {
-  return text.replace(/[^0-9e]+$/, '');
-};
+const trimNonNumericCharsFromEnd = (text: string): string => text.replace(/[^0-9e]+$/, '');
+
+const isSeparatorBasedString = (text: string): boolean => text.length === 1
+  && !!text.match(/^[,.][0-9]*$/g);
+
+export const getCaretBoundaries = (text: string, format: Format): CaretBoundaries => {
+  if (typeof format === 'string') {
+    const signParts = format.split(';');
+    const sign = number.getSign(text, format);
+
+    signParts[1] = signParts[1] || `-${signParts[0]}`;
 
-export const getCaretWithOffset = function (caret, offset) {
-  if (caret.start === undefined) {
-    caret = { start: caret, end: caret };
+    const signFormat = mockEscapedStubs(signParts[sign < 0 ? 1 : 0]);
+
+    const prefixStubLength = /^[^#0.,]*/.exec(signFormat)?.[0].length ?? 0;
+    const postfixStubLength = /[^#0.,]*$/.exec(signFormat)?.[0].length ?? 0;
+
+    return {
+      start: prefixStubLength,
+      end: text.length - postfixStubLength,
+    };
   }
+  return { start: 0, end: text.length };
+};
+
+export const getCaretWithOffset = (
+  caret: CaretPosition,
+  offset: number,
+): CaretBoundaries => {
+  const range = typeof caret === 'number' ? { start: caret, end: caret } : caret;
+
+  return {
+    start: (range.start ?? 0) + offset,
+    end: (range.end ?? 0) + offset,
+  };
+};
+
+export const getCaretInBoundaries = (
+  caret: CaretPosition,
+  text: string,
+  format: Format,
+): CaretBoundaries => {
+  const normalizedCaret = getCaretWithOffset(caret, 0);
+  const boundaries = getCaretBoundaries(text, format);
 
   return {
-    start: caret.start + offset,
-    end: caret.end + offset,
+    start: fitIntoRange(normalizedCaret.start, boundaries.start, boundaries.end),
+    end: fitIntoRange(normalizedCaret.end, boundaries.start, boundaries.end),
   };
 };
 
-export const getCaretAfterFormat = function (text, formatted, caret, format) {
-  caret = getCaretWithOffset(caret, 0);
+export const getCaretAfterFormat = (
+  text: string,
+  formatted: string,
+  caret: CaretPosition,
+  format: Format,
+): CaretBoundaries => {
+  const normalizedCaret = getCaretWithOffset(caret, 0);
 
-  const point = number.getDecimalSeparator();
-  const isSeparatorBasedText = isSeparatorBasedString(text);
+  const point: string = number.getDecimalSeparator();
   const realSeparatorOccurrenceIndex = getRealSeparatorIndex(format).occurrence;
-  const pointPosition = isSeparatorBasedText ? 0 : getNthOccurrence(text, point, realSeparatorOccurrenceIndex);
+  const pointPosition = isSeparatorBasedString(text)
+    ? 0
+    : getNthOccurrence(text, point, realSeparatorOccurrenceIndex);
   const newPointPosition = getNthOccurrence(formatted, point, realSeparatorOccurrenceIndex);
   const textParts = splitByIndex(text, pointPosition);
   const formattedParts = splitByIndex(formatted, newPointPosition);
-  const isCaretOnFloat = pointPosition !== -1 && caret.start > pointPosition;
+  const isCaretOnFloat = pointPosition !== -1 && normalizedCaret.start > pointPosition;
 
   if (isCaretOnFloat) {
-    const relativeIndex = caret.start - pointPosition - 1;
-    const digitsBefore = _getDigitCountBeforeIndex(relativeIndex, textParts[1]);
-    const newPosition = formattedParts[1] ? newPointPosition + 1 + _getDigitPositionByIndex(digitsBefore, formattedParts[1]) + 1 : formatted.length;
+    const relativeIndex = normalizedCaret.start - pointPosition - 1;
+    const digitsBefore = getDigitCountBeforeIndex(relativeIndex, textParts[1]);
+    const newPosition = formattedParts[1]
+      ? newPointPosition + 1 + getDigitPositionByIndex(digitsBefore, formattedParts[1]) + 1
+      : formatted.length;
 
     return getCaretInBoundaries(newPosition, formatted, format);
   }
-  const formattedIntPart = _trimNonNumericCharsFromEnd(formattedParts[0]);
-  const positionFromEnd = textParts[0].length - caret.start;
-  const digitsFromEnd = _getDigitCountBeforeIndex(positionFromEnd, _reverseText(textParts[0]));
-  const newPositionFromEnd = _getDigitPositionByIndex(digitsFromEnd, _reverseText(formattedIntPart));
+
+  const formattedIntPart = trimNonNumericCharsFromEnd(formattedParts[0]);
+  const positionFromEnd = textParts[0].length - normalizedCaret.start;
+  const digitsFromEnd = getDigitCountBeforeIndex(positionFromEnd, reverseText(textParts[0]));
+  const newPositionFromEnd = getDigitPositionByIndex(digitsFromEnd, reverseText(formattedIntPart));
   const newPositionFromBegin = formattedIntPart.length - (newPositionFromEnd + 1);
 
   return getCaretInBoundaries(newPositionFromBegin, formatted, format);
 };
 
-function isSeparatorBasedString(text) {
-  return text.length === 1 && !!text.match(/^[,.][0-9]*$/g);
-}
-
-export const isCaretInBoundaries = function (caret, text, format) {
-  caret = getCaretWithOffset(caret, 0);
+export const isCaretInBoundaries = (
+  caret: CaretPosition,
+  text: string,
+  format: Format,
+): boolean => {
+  const normalizedCaret = getCaretWithOffset(caret, 0);
+  const boundaries = getCaretInBoundaries(normalizedCaret, text, format);
 
-  const boundaries = getCaretInBoundaries(caret, text, format);
-  return caret.start >= boundaries.start && caret.end <= boundaries.end;
+  return normalizedCaret.start >= boundaries.start && normalizedCaret.end <= boundaries.end;
 };
 
-export function getCaretInBoundaries(caret, text, format) {
-  caret = getCaretWithOffset(caret, 0);
-
-  const boundaries = getCaretBoundaries(text, format);
-  const adjustedCaret = {
-    start: fitIntoRange(caret.start, boundaries.start, boundaries.end),
-    end: fitIntoRange(caret.end, boundaries.start, boundaries.end),
-  };
-
-  return adjustedCaret;
-}
-
-export const getCaretOffset = function (previousText, newText, format) {
+export const getCaretOffset = (
+  previousText: string,
+  newText: string,
+  format: Format,
+): number => {
   const previousBoundaries = getCaretBoundaries(previousText, format);
   const newBoundaries = getCaretBoundaries(newText, format);
 
diff --git a/packages/devextreme/js/__internal/ui/number_box/number_box.mask.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.mask.ts
index 11a9995839ad..72f9dabe79e3 100644
--- a/packages/devextreme/js/__internal/ui/number_box/number_box.mask.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/number_box.mask.ts
@@ -3,30 +3,36 @@ import { name as dxDblClickEvent } from '@js/common/core/events/double_click';
 import {
   addNamespace, getChar, isCommandKeyPressed, normalizeKeyName,
 } from '@js/common/core/events/utils/index';
-import { getFormat as getLDMLFormat } from '@js/common/core/localization/ldml/number';
 import number from '@js/common/core/localization/number';
 import devices from '@js/core/devices';
-import { ensureDefined, escapeRegExp } from '@js/core/utils/common';
+import { escapeRegExp } from '@js/core/utils/common';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { fitIntoRange, inRange } from '@js/core/utils/math';
 import {
   isDefined, isFunction, isNumeric, isPlainObject, isString,
 } from '@js/core/utils/type';
-import type { NativeEventInfo } from '@js/events';
+import type { DxEvent, NativeEventInfo } from '@js/events';
 import type { Format, FormatObject } from '@js/localization';
 import type { Properties } from '@js/ui/number_box';
 import { getGlobalFormatByDataType } from '@ts/core/global_format_config';
+import { getFormat as getLDMLFormat } from '@ts/core/localization/ldml/number';
+import type { OptionChanged } from '@ts/core/widget/types';
+import type { SupportedKeys } from '@ts/core/widget/widget';
+import type { KeyboardKeyDownEvent } from '@ts/events/core/keyboard_processor';
 import type { TextEditorInternalProperties } from '@ts/ui/text_box/text_editor.base';
+import type { CaretRange } from '@ts/ui/text_box/utils.caret';
 
-import NumberBoxBase from './m_number_box.base';
+import type { NumberBoxBaseProperties, NumberBoxValue } from './number_box.base';
+import NumberBoxBase from './number_box.base';
 import {
   getCaretAfterFormat, getCaretBoundaries, getCaretInBoundaries,
   getCaretOffset,
   getCaretWithOffset, isCaretInBoundaries,
-} from './m_number_box.caret';
+} from './number_box.caret';
 import {
-  adjustPercentValue, getNthOccurrence, getRealSeparatorIndex,
+  adjustPercentValue, asPattern, getNthOccurrence, getRealSeparatorIndex,
   splitByIndex,
-} from './m_utils';
+} from './utils';
 
 const NUMBER_FORMATTER_NAMESPACE = 'dxNumberFormatter';
 const MOVE_FORWARD = 1 as const;
@@ -46,17 +52,24 @@ const asFormatObject = (format: Format | undefined): FormatObject | undefined =>
   isPlainObject(format) ? format as FormatObject : undefined
 );
 
+const isNegativeValue = (value: NumberBoxValue | undefined): boolean => {
+  const parsedValue = Number(value);
+
+  return parsedValue < 0 || 1 / parsedValue === -Infinity;
+};
+
 export interface NumberBoxMaskProperties extends Omit<Properties, 'onChange' | 'onCopy' | 'onCut' | 'onEnterKey' | 'onFocusIn' | 'onFocusOut' | 'onInput'
 | 'onKeyDown' | 'onKeyUp' | 'onPaste' | 'onValueChanged' | 'onContentReady' | 'onDisposing'
-| 'onOptionChanged' | 'onInitialized' >, Omit<TextEditorInternalProperties, 'displayValueFormatter'> {
+| 'onOptionChanged' | 'onInitialized' | 'format' >, Omit<TextEditorInternalProperties, 'displayValueFormatter'> {
+  format?: Format | null;
+
   useMaskBehavior?: boolean;
 
-  displayValueFormatter?: ((value: any) => string);
+  displayValueFormatter?: NumberBoxBaseProperties['displayValueFormatter'];
 
   onValueChanged?: (
-    e: NativeEventInfo<unknown> & { value?: number | null; previousValue?: number | null },
+    e: NativeEventInfo<unknown> & { value?: NumberBoxValue; previousValue?: NumberBoxValue },
   ) => void;
-
 }
 
 class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
@@ -64,7 +77,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
 
   _focusOutOccurs?: boolean;
 
-  _parsedValue?: number | null;
+  _parsedValue?: NumberBoxValue;
 
   _lastKeyName?: string | null;
 
@@ -72,40 +85,35 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
 
   _formattedValue?: string;
 
-  _isValuePasted?: boolean;
-
-  _currentFormat?: any;
+  _currentFormat?: Format;
 
   _getDefaultOptions(): NumberBoxMaskProperties {
     return {
       ...super._getDefaultOptions(),
       useMaskBehavior: true,
-      // @ts-expect-error ts-error
       format: null,
     };
   }
 
-  _isDeleteKey(key): boolean {
+  _isDeleteKey(key: string | null | undefined): boolean {
     return key === 'del';
   }
 
-  _supportedKeys() {
+  _supportedKeys(): SupportedKeys {
     if (!this._useMaskBehavior()) {
       return super._supportedKeys();
     }
 
-    const that = this;
-
     return {
       ...super._supportedKeys(),
-      minus: that._revertSign.bind(that),
-      del: that._removeHandler.bind(that),
-      backspace: that._removeHandler.bind(that),
-      leftArrow: that._arrowHandler.bind(that, MOVE_BACKWARD),
-      rightArrow: that._arrowHandler.bind(that, MOVE_FORWARD),
-      home: that._boundaryKeyHandler.bind(that, MOVE_FORWARD),
-      enter: that._updateFormattedValue.bind(that),
-      end: that._boundaryKeyHandler.bind(that, MOVE_BACKWARD),
+      minus: (e): void => this._revertSign(e),
+      del: (e): void => this._removeHandler(e),
+      backspace: (e): void => this._removeHandler(e),
+      leftArrow: (e): void => this._arrowHandler(MOVE_BACKWARD, e),
+      rightArrow: (e): void => this._arrowHandler(MOVE_FORWARD, e),
+      home: (e): void => this._boundaryKeyHandler(MOVE_FORWARD, e),
+      enter: (): void => this._updateFormattedValue(),
+      end: (e): void => this._boundaryKeyHandler(MOVE_BACKWARD, e),
     };
   }
 
@@ -117,15 +125,13 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
       : getGlobalFormatByDataType('number');
   }
 
-  _getTextSeparatorIndex(text) {
-    const decimalSeparator = number.getDecimalSeparator();
-    const formatPattern = this._getFormatPattern();
-    const patternString = isString(formatPattern) ? formatPattern : '';
-    const realSeparatorOccurrenceIndex = getRealSeparatorIndex(patternString).occurrence;
+  _getTextSeparatorIndex(text: string): number {
+    const decimalSeparator: string = number.getDecimalSeparator();
+    const realSeparatorOccurrenceIndex = getRealSeparatorIndex(this._getFormatPattern()).occurrence;
     return getNthOccurrence(text, decimalSeparator, realSeparatorOccurrenceIndex);
   }
 
-  _focusInHandler(e): void {
+  _focusInHandler(e: DxEvent<FocusEvent>): void {
     if (!this._preventNestedFocusEvent(e)) {
       this.clearCaretTimeout();
       this._caretTimeout = setTimeout(() => {
@@ -148,7 +154,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     super._focusInHandler(e);
   }
 
-  _focusOutHandler(e): void {
+  _focusOutHandler(e: DxEvent): void {
     const shouldHandleEvent = !this._preventNestedFocusEvent(e);
 
     if (shouldHandleEvent) {
@@ -165,15 +171,15 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     }
   }
 
-  _hasValueBeenChanged(inputValue) {
+  _hasValueBeenChanged(inputValue: string): boolean {
     const format = this._getFormatPattern();
-    const value = this.option('value');
+    const { value } = this.option();
     const formatted = this._format(value, format) || '';
 
     return formatted !== inputValue;
   }
 
-  _updateFormattedValue() {
+  _updateFormattedValue(): void {
     const inputValue = this._getInputVal();
 
     if (this._hasValueBeenChanged(inputValue)) {
@@ -191,19 +197,26 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     }
   }
 
-  _arrowHandler(step, e) {
+  _arrowHandler(step: CaretMoveDirection, e: DxEvent<KeyboardEvent>): void {
     if (!this._useMaskBehavior()) {
       return;
     }
 
+    const caret = this._caret();
+
+    if (!caret) {
+      return;
+    }
+
     const text = this._getInputVal();
     const format = this._getFormatPattern();
-    let nextCaret = getCaretWithOffset(this._caret(), step);
+    const nextCaret = getCaretWithOffset(caret, step);
 
     if (!isCaretInBoundaries(nextCaret, text, format)) {
-      nextCaret = step === MOVE_FORWARD ? nextCaret.end : nextCaret.start;
+      const nextCaretPosition = step === MOVE_FORWARD ? nextCaret.end : nextCaret.start;
+
       e.preventDefault();
-      this._caret(getCaretInBoundaries(nextCaret, text, format));
+      this._caret(getCaretInBoundaries(nextCaretPosition, text, format));
       this._scrollInputTo(step === MOVE_FORWARD ? 'end' : 'start');
     }
   }
@@ -232,7 +245,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     this._caret(newCaret);
   }
 
-  _boundaryKeyHandler(direction: CaretMoveDirection, e: KeyboardEvent): void {
+  _boundaryKeyHandler(direction: CaretMoveDirection, e: DxEvent<KeyboardEvent>): void {
     if (!this._useMaskBehavior() || e.shiftKey) {
       return;
     }
@@ -242,19 +255,25 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     this._scrollInputTo(direction === MOVE_FORWARD ? 'start' : 'end');
   }
 
-  _shouldMoveCaret(text, caret) {
+  _shouldMoveCaret(text: string, caret: CaretRange | undefined): boolean {
+    if (!caret) {
+      return false;
+    }
+
     const decimalSeparator = number.getDecimalSeparator();
-    const isDecimalSeparatorNext = text.charAt(caret.end) === decimalSeparator;
-    const moveToFloat = (this._lastKey === decimalSeparator || this._lastKey === '.' || this._lastKey === ',') && isDecimalSeparatorNext;
+    const isDecimalSeparatorNext = text.charAt(caret.end ?? 0) === decimalSeparator;
+    const isSeparatorKey = this._lastKey === decimalSeparator || this._lastKey === '.' || this._lastKey === ',';
 
-    return moveToFloat;
+    return isSeparatorKey && isDecimalSeparatorNext;
   }
 
-  _getInputVal() {
-    return number.convertDigits(this._input().val(), true);
+  _getInputVal(): string {
+    const inputValue: string = number.convertDigits(this._input().val(), true);
+
+    return inputValue;
   }
 
-  _keyboardHandler(e): boolean {
+  _keyboardHandler(e: KeyboardKeyDownEvent): boolean {
     this.clearCaretTimeout();
 
     this._lastKey = number.convertDigits(getChar(e), true);
@@ -267,11 +286,11 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     const normalizedText = this._getInputVal();
     const caret = this._caret();
 
-    let enteredChar;
+    let enteredChar = this._lastKey;
     if (this._lastKeyName === MINUS_KEY) {
       enteredChar = '';
-    } else {
-      enteredChar = e.which === NUMPAD_DOT_KEY_CODE ? number.getDecimalSeparator() : this._lastKey;
+    } else if (e.which === NUMPAD_DOT_KEY_CODE) {
+      enteredChar = number.getDecimalSeparator();
     }
     const newValue = this._tryParse(normalizedText, caret, enteredChar);
 
@@ -291,13 +310,13 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     return super._keyboardHandler(e);
   }
 
-  _keyPressHandler(e): void {
+  _keyPressHandler(e: DxEvent<KeyboardEvent>): void {
     if (!this._useMaskBehavior()) {
       super._keyPressHandler(e);
     }
   }
 
-  _removeHandler(e) {
+  _removeHandler(e: DxEvent<KeyboardEvent>): void {
     const caret = this._caret();
     const text = this._getInputVal();
 
@@ -312,14 +331,15 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     if (start === end) {
       const caretPosition = start;
 
-      const canDelete = isBackspaceKey
-        && caretPosition > 0
-        || isDeleteKey
-        && caretPosition < text.length;
+      const canDelete = (isBackspaceKey && caretPosition > 0)
+        || (isDeleteKey && caretPosition < text.length);
 
       if (canDelete) {
-        isDeleteKey && end++;
-        isBackspaceKey && start--;
+        if (isDeleteKey) {
+          end += 1;
+        } else {
+          start -= 1;
+        }
       } else {
         e.preventDefault();
         return;
@@ -330,12 +350,11 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
 
     if (this._isStub(char)) {
       this._moveCaret(isDeleteKey ? 1 : -1);
-      // @ts-expect-error ts-error
-      if (this._parsedValue < 0 || 1 / this._parsedValue === -Infinity) {
+      if (isNegativeValue(this._parsedValue)) {
         this._revertSign(e);
         this._setTextByParsedValue();
-        // @ts-expect-error ts-error
-        const shouldTriggerInputEvent = this.option('valueChangeEvent').split(' ').includes('input');
+        const { valueChangeEvent } = this.option();
+        const shouldTriggerInputEvent = valueChangeEvent?.split(' ').includes('input');
         if (shouldTriggerInputEvent) {
           // @ts-expect-error ts-error
           eventsEngine.trigger(this._input(), 'input');
@@ -345,7 +364,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
       return;
     }
 
-    const decimalSeparator = number.getDecimalSeparator();
+    const decimalSeparator: string = number.getDecimalSeparator();
     if (char === decimalSeparator) {
       const decimalSeparatorIndex = text.indexOf(decimalSeparator);
       if (this._isNonStubAfter(decimalSeparatorIndex + 1)) {
@@ -360,8 +379,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
       const noDigits = editedText.search(/[0-9]/) < 0;
 
       if (noDigits && this._isValueInRange(0)) {
-        // @ts-expect-error ts-error
-        this._parsedValue = this._parsedValue < 0 || 1 / this._parsedValue === -Infinity ? -0 : 0;
+        this._parsedValue = isNegativeValue(this._parsedValue) ? -0 : 0;
         return;
       }
     }
@@ -374,48 +392,52 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     }
   }
 
-  _isPercentFormat() {
-    const format = this._getFormatPattern();
-    const noEscapedFormat = format.replace(/'[^']+'/g, '');
+  _isPercentFormat(): boolean {
+    const noEscapedFormat = asPattern(this._getFormatPattern()).replace(/'[^']+'/g, '');
 
-    return noEscapedFormat.indexOf('%') !== -1;
+    return noEscapedFormat.includes('%');
   }
 
-  _parse(text, format) {
-    const formatOption = this._getEffectiveFormatOption();
-    const customParser = asFormatObject(formatOption)?.parser;
-    const isCustomParser = isFunction(customParser);
-    const parser = isCustomParser ? customParser : number.parse;
+  _parse(text: string, format: Format): NumberBoxValue | undefined {
+    const customParser = asFormatObject(this._getEffectiveFormatOption())?.parser;
+
+    if (isFunction(customParser)) {
+      const customParsedValue = customParser(text);
+
+      return customParsedValue instanceof Date ? undefined : customParsedValue;
+    }
+
     let integerPartStartIndex = 0;
 
-    if (!isCustomParser) {
+    if (isString(format)) {
       const formatPointIndex = getRealSeparatorIndex(format).index;
       const textPointIndex = this._getTextSeparatorIndex(text);
 
       const formatIntegerPartLength = formatPointIndex !== -1 ? formatPointIndex : format.length;
       const textIntegerPartLength = textPointIndex !== -1 ? textPointIndex : text.length;
 
-      if (textIntegerPartLength > formatIntegerPartLength && format.indexOf('#') === -1) {
+      if (textIntegerPartLength > formatIntegerPartLength && !format.includes('#')) {
         integerPartStartIndex = textIntegerPartLength - formatIntegerPartLength;
       }
     }
 
-    text = text.substr(integerPartStartIndex);
-
-    return parser(text, format);
+    return number.parse(
+      text.substr(integerPartStartIndex),
+      isString(format) ? format : asFormatObject(format),
+    );
   }
 
-  _format(value, format) {
+  _format(value: NumberBoxValue | undefined, format: Format): string | undefined {
     const formatOption = this._getEffectiveFormatOption();
     const customFormatter = asFormatObject(formatOption)?.formatter ?? formatOption;
-    const formatter = isFunction(customFormatter) ? customFormatter : number.format;
-
-    const formattedValue = value === null ? '' : formatter(value, format);
+    const formatter = (isFunction(customFormatter) ? customFormatter : number.format) as (
+      value: number, valueFormat: Format,
+    ) => string | undefined;
 
-    return formattedValue;
+    return isDefined(value) ? formatter(value, format) : '';
   }
 
-  _getFormatPattern() {
+  _getFormatPattern(): Format {
     if (!this._currentFormat) {
       this._updateFormat();
     }
@@ -433,28 +455,30 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
 
     this._currentFormat = shouldUseFormatAsIs
       ? format
-      : getLDMLFormat((value) => {
-        const text = this._format(value, format);
-        return number.convertDigits(text, true);
+      : getLDMLFormat((value: number): string => {
+        const text = this._format(value, format) ?? '';
+        const convertedText: string = number.convertDigits(text, true);
+
+        return convertedText;
       });
   }
 
-  _getFormatForSign(text) {
+  _getFormatForSign(text: string): string {
     const format = this._getFormatPattern();
     if (isString(format)) {
       const signParts = format.split(';');
-      const sign = number.getSign(text, format);
+      const sign: number = number.getSign(text, format);
 
       signParts[1] = signParts[1] || `-${signParts[0]}`;
       return sign < 0 ? signParts[1] : signParts[0];
     }
-    const sign = number.getSign(text);
+    const sign: number = number.getSign(text);
     return sign < 0 ? '-' : '';
   }
 
-  _removeStubs(text, excludeComma?): string {
+  _removeStubs(text: string, excludeComma?: boolean): string {
     const format = this._getFormatForSign(text);
-    const thousandsSeparator = number.getThousandsSeparator();
+    const thousandsSeparator: string = number.getThousandsSeparator();
     const stubs = this._getStubs(format);
     let result = text;
 
@@ -472,42 +496,54 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     return result;
   }
 
-  _getStubs(format) {
-    const regExpResult = /[^']([#0.,]+)/g.exec(format);
-    const pattern = regExpResult && regExpResult[0].trim();
+  _getStubs(format: string): string[] {
+    const patternMatch = /[^']([#0.,]+)/g.exec(format);
+    const pattern = patternMatch?.[0].trim();
+    const stubs = isDefined(pattern) ? format.split(pattern) : [format];
 
-    return format
-      .split(pattern)
-      .map((stub) => stub.replace(/'/g, ''));
+    return stubs.map((stub) => stub.replace(/'/g, ''));
   }
 
-  _truncateToPrecision(value, maxPrecision) {
+  _truncateToPrecision(
+    value: NumberBoxValue | undefined,
+    maxPrecision: number,
+  ): NumberBoxValue | undefined {
     if (isDefined(value)) {
       const strValue = value.toString();
       const decimalSeparatorIndex = strValue.indexOf('.');
 
       if (strValue && decimalSeparatorIndex > -1) {
-        const parsedValue = parseFloat(strValue.substr(0, decimalSeparatorIndex + maxPrecision + 1));
+        const truncatedValue = strValue.substr(0, decimalSeparatorIndex + maxPrecision + 1);
+        const parsedValue = parseFloat(truncatedValue);
+
         return isNaN(parsedValue) ? value : parsedValue;
       }
     }
     return value;
   }
 
-  _tryParse(text, selection, char?) {
-    const isTextSelected = selection.start !== selection.end;
-    const isWholeTextSelected = isTextSelected && selection.start === 0 && selection.end === text.length;
-    const decimalSeparator = number.getDecimalSeparator();
+  _tryParse(
+    text: string,
+    selection: CaretRange | undefined,
+    char?: string | null,
+  ): NumberBoxValue | undefined {
+    const { start = 0, end = 0 } = selection ?? {};
+    const isTextSelected = start !== end;
+    const isWholeTextSelected = isTextSelected && start === 0 && end === text.length;
+    const decimalSeparator: string = number.getDecimalSeparator();
 
     if (isWholeTextSelected && char === decimalSeparator) {
       return 0;
     }
 
-    const editedText = this._replaceSelectedText(text, selection, char);
+    const editedText = this._replaceSelectedText(text, { start, end }, char ?? undefined);
     const format = this._getFormatPattern();
+    const hasCustomParser = isFunction(asFormatObject(format)?.parser);
 
     let parsedValue = this._getParsedValue(editedText, format);
-    const maxPrecision = !format.parser && this._getPrecisionLimits(editedText).max;
+    const maxPrecision = hasCustomParser
+      ? undefined
+      : this._getPrecisionLimits(this._getFormatForSign(editedText)).max;
     const isValueChanged = parsedValue !== this._parsedValue;
 
     const isDecimalPointRestricted = char === decimalSeparator && maxPrecision === 0;
@@ -521,8 +557,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     }
 
     if (this._removeStubs(editedText) === '') {
-      // @ts-expect-error ts-error
-      parsedValue = Math.abs(this._parsedValue * 0);
+      parsedValue = Math.abs(Number(this._parsedValue) * 0);
     }
 
     if (isNaN(Number(parsedValue))) {
@@ -532,8 +567,8 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     const value = parsedValue === null ? this._parsedValue : parsedValue;
     parsedValue = maxPrecision ? this._truncateToPrecision(value, maxPrecision) : parsedValue;
 
-    if (!format.parser && this._isPercentFormat()) {
-      const interval = this._getIntervalFromPrecision(maxPrecision);
+    if (!hasCustomParser && this._isPercentFormat()) {
+      const interval = this._getIntervalFromPrecision(maxPrecision ?? 0);
 
       return adjustPercentValue(parsedValue, interval);
     }
@@ -541,7 +576,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     return parsedValue;
   }
 
-  _getIntervalFromPrecision(precision) {
+  _getIntervalFromPrecision(precision: number): number {
     if (precision < 1) {
       return 1;
     }
@@ -549,23 +584,24 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     return 10 ** -precision;
   }
 
-  _getParsedValue(text, format) {
-    const sign = number.getSign(text, format?.formatter || format);
+  _getParsedValue(text: string, format: Format): NumberBoxValue | undefined {
+    const signFormat = asFormatObject(format)?.formatter ?? format;
+    const sign: number = number.getSign(text, signFormat);
     const textWithoutStubs = this._removeStubs(text, true);
     const parsedValue = this._parse(textWithoutStubs, format);
-    const parsedValueSign = parsedValue != null && parsedValue < 0 ? -1 : 1;
-    const parsedValueWithSign = isNumeric(parsedValue) && sign !== parsedValueSign ? sign * parsedValue : parsedValue;
+    const parsedValueSign = Number(parsedValue) < 0 ? -1 : 1;
+    const shouldRevertSign = isNumeric(parsedValue) && sign !== parsedValueSign;
 
-    return parsedValueWithSign;
+    return shouldRevertSign ? sign * parsedValue : parsedValue;
   }
 
-  _isValueIncomplete(text) {
+  _isValueIncomplete(text: string): boolean {
     if (!this._useMaskBehavior()) {
       return super._isValueIncomplete(text);
     }
 
     const caret = this._caret();
-    const point = number.getDecimalSeparator();
+    const point: string = number.getDecimalSeparator();
     const pointIndex = this._getTextSeparatorIndex(text);
     const isCaretOnFloat = pointIndex >= 0 && pointIndex < (caret?.start ?? 0);
     const textParts = this._removeStubs(text, true).split(point);
@@ -575,34 +611,41 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     }
 
     const floatLength = textParts[1].length;
-    const format = this._getFormatPattern();
-    const isCustomParser = !!format.parser;
-    const precision = !isCustomParser && this._getPrecisionLimits(this._getFormatPattern());
-    const isPrecisionInRange = isCustomParser
-      ? true
-      // @ts-expect-error ts-error
-      : inRange(floatLength, precision.min, precision.max);
     const endsWithZero = textParts[1].charAt(floatLength - 1) === '0';
+    const isFloatPartComplete = endsWithZero || !floatLength;
+
+    const format = this._getFormatPattern();
 
-    return isPrecisionInRange && (endsWithZero || !floatLength);
+    if (isFunction(asFormatObject(format)?.parser)) {
+      return isFloatPartComplete;
+    }
+
+    const precision = this._getPrecisionLimits(this._getFormatForSign(asPattern(format)));
+
+    return inRange(floatLength, precision.min, precision.max) && isFloatPartComplete;
   }
 
-  _isValueInRange(value) {
-    const min = ensureDefined(this.option('min'), -Infinity);
-    const max = ensureDefined(this.option('max'), Infinity);
+  _isValueInRange(value: number): boolean {
+    const { min, max } = this.option();
 
-    return inRange(value, min, max);
+    return inRange(value, min ?? -Infinity, max ?? Infinity);
   }
 
-  _setInputText(text): void {
-    const normalizedText = number.convertDigits(text, true);
-    const newCaret = getCaretAfterFormat(this._getInputVal(), normalizedText, this._caret(), this._getFormatPattern());
+  _setInputText(text: string): void {
+    const normalizedText: string = number.convertDigits(text, true);
+    const caret = this._caret();
+    const newCaret = caret && getCaretAfterFormat(
+      this._getInputVal(),
+      normalizedText,
+      caret,
+      this._getFormatPattern(),
+    );
 
     this._input().val(text);
     this._toggleEmptinessEventHandler();
     this._formattedValue = text;
 
-    if (!this._focusOutOccurs) {
+    if (newCaret && !this._focusOutOccurs) {
       this._caret(newCaret);
     }
   }
@@ -625,24 +668,31 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     }
   }
 
-  _isChar(str) {
+  _isChar(str: string | null | undefined): boolean {
     return isString(str) && str.length === 1;
   }
 
-  _moveCaret(offset?): void {
-    if (!offset) {
+  _moveCaret(offset?: number): void {
+    const caret = this._caret();
+
+    if (!offset || !caret) {
       return;
     }
 
-    const newCaret = getCaretWithOffset(this._caret(), offset);
-    const adjustedCaret = getCaretInBoundaries(newCaret, this._getInputVal(), this._getFormatPattern());
+    const newCaret = getCaretWithOffset(caret, offset);
+    const adjustedCaret = getCaretInBoundaries(
+      newCaret,
+      this._getInputVal(),
+      this._getFormatPattern(),
+    );
 
     this._caret(adjustedCaret);
   }
 
-  _shouldHandleKey(e): boolean {
+  _shouldHandleKey(e: KeyboardEvent): boolean {
     const keyName = normalizeKeyName(e);
-    const isSpecialChar = isCommandKeyPressed(e) || e.altKey || e.shiftKey || !this._isChar(keyName);
+    const isSpecialChar = isCommandKeyPressed(e) || e.altKey || e.shiftKey
+      || !this._isChar(keyName);
     const isMinusKey = keyName === MINUS_KEY;
     const useMaskBehavior = this._useMaskBehavior();
 
@@ -654,7 +704,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     this._renderFormatter();
   }
 
-  _renderFormatter() {
+  _renderFormatter(): void {
     this._clearCache();
     this._detachFormatterEvents();
 
@@ -663,32 +713,37 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     }
   }
 
-  _detachFormatterEvents() {
+  _detachFormatterEvents(): void {
     eventsEngine.off(this._input(), `.${NUMBER_FORMATTER_NAMESPACE}`);
   }
 
-  _isInputFromPaste(e) {
-    const inputType = e.originalEvent?.inputType;
-
-    if (isDefined(inputType)) {
-      return inputType === 'insertFromPaste';
-    }
-    return this._isValuePasted;
+  _isInputFromPaste(e: DxEvent<InputEvent>): boolean {
+    return e.originalEvent?.inputType === 'insertFromPaste';
   }
 
   _attachFormatterEvents(): void {
     const $input = this._input();
 
-    eventsEngine.on($input, addNamespace(INPUT_EVENT, NUMBER_FORMATTER_NAMESPACE), (e) => {
-      this._formatValue(e);
-      this._isValuePasted = false;
-    });
+    eventsEngine.on(
+      $input,
+      addNamespace(INPUT_EVENT, NUMBER_FORMATTER_NAMESPACE),
+      (e: DxEvent<InputEvent>) => { this._formatValue(e); },
+    );
 
     eventsEngine.on($input, addNamespace('dxclick', NUMBER_FORMATTER_NAMESPACE), () => {
       if (!this._caretTimeout) {
         this._caretTimeout = setTimeout(() => {
           this._caretTimeout = undefined;
-          this._caret(getCaretInBoundaries(this._caret(), this._getInputVal(), this._getFormatPattern()));
+
+          const caret = this._caret();
+
+          if (caret) {
+            this._caret(getCaretInBoundaries(
+              caret,
+              this._getInputVal(),
+              this._getFormatPattern(),
+            ));
+          }
         }, CARET_TIMEOUT_DURATION);
       }
     });
@@ -703,44 +758,44 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     this._caretTimeout = undefined;
   }
 
-  _forceRefreshInputValue() {
+  _forceRefreshInputValue(): void {
     if (!this._useMaskBehavior()) {
-      return super._forceRefreshInputValue();
+      super._forceRefreshInputValue();
     }
   }
 
-  _isNonStubAfter(index) {
+  _isNonStubAfter(index: number): boolean {
     const text = this._getInputVal().slice(index);
-    return text && !this._isStub(text, true);
+
+    return !!text && !this._isStub(text, true);
   }
 
-  _isStub(str, isString?) {
+  _isStub(str: string | null | undefined, allowMultipleChars?: boolean): boolean {
     const escapedDecimalSeparator = escapeRegExp(number.getDecimalSeparator());
     const regExpString = `^[^0-9${escapedDecimalSeparator}]+$`;
     const stubRegExp = new RegExp(regExpString, 'g');
 
-    return stubRegExp.test(str) && (isString || this._isChar(str));
+    return stubRegExp.test(str ?? '') && (!!allowMultipleChars || this._isChar(str));
   }
 
-  _parseValue(text?): number | null {
+  _parseValue(text?: string | NumberBoxValue): NumberBoxValue | undefined {
     if (!this._useMaskBehavior()) {
       return super._parseValue(text);
     }
-    // @ts-expect-error ts-error
+
     return this._parsedValue;
   }
 
-  _getPrecisionLimits(text): { min: number; max: number } {
-    const currentFormat = this._getFormatForSign(text);
-    const realSeparatorIndex = getRealSeparatorIndex(currentFormat).index;
-    const floatPart = (splitByIndex(currentFormat, realSeparatorIndex)[1] || '').replace(/[^#0]/g, '');
+  _getPrecisionLimits(pattern: string): { min: number; max: number } {
+    const realSeparatorIndex = getRealSeparatorIndex(pattern).index;
+    const floatPart = (splitByIndex(pattern, realSeparatorIndex)[1] || '').replace(/[^#0]/g, '');
     const minPrecision = floatPart.replace(/^(0*)#*/, '$1').length;
     const maxPrecision = floatPart.length;
 
     return { min: minPrecision, max: maxPrecision };
   }
 
-  _revertSign(e) {
+  _revertSign(e: DxEvent<KeyboardEvent>): void {
     if (!this._useMaskBehavior()) {
       return;
     }
@@ -758,8 +813,12 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     this._applyRevertedSign(e, caret);
   }
 
-  _applyRevertedSign(e, caret, preserveSelectedText?): void {
-    const newValue = -1 * ensureDefined(this._parsedValue, null);
+  _applyRevertedSign(
+    e: DxEvent<KeyboardEvent>,
+    caret: CaretRange | undefined,
+    preserveSelectedText?: boolean,
+  ): void {
+    const newValue = -1 * (this._parsedValue ?? 0);
 
     if (this._isValueInRange(newValue) || newValue === 0) {
       this._parsedValue = newValue;
@@ -771,25 +830,26 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
         this._setTextByParsedValue();
         e.preventDefault();
 
-        const currentText = this._getInputVal();
-        const offset = getCaretOffset(previousText, currentText, format);
-
-        caret = getCaretWithOffset(caret, offset);
+        if (caret) {
+          const currentText = this._getInputVal();
+          const offset = getCaretOffset(previousText, currentText, format);
+          const caretWithOffset = getCaretWithOffset(caret, offset);
+          const caretInBoundaries = getCaretInBoundaries(caretWithOffset, currentText, format);
 
-        const caretInBoundaries = getCaretInBoundaries(caret, currentText, format);
-
-        this._caret(caretInBoundaries);
+          this._caret(caretInBoundaries);
+        }
       }
     }
   }
 
-  _removeMinusFromText(text, caret) {
-    const isMinusPressed = this._lastKeyName === MINUS_KEY && text.charAt(caret.start - 1) === MINUS;
+  _removeMinusFromText(text: string, caret: CaretRange | undefined): string {
+    const caretStart = caret?.start ?? 0;
+    const isMinusPressed = this._lastKeyName === MINUS_KEY
+      && text.charAt(caretStart - 1) === MINUS;
 
-    return isMinusPressed ? this._replaceSelectedText(text, {
-      start: caret.start - 1,
-      end: caret.start,
-    }, '') : text;
+    return isMinusPressed
+      ? this._replaceSelectedText(text, { start: caretStart - 1, end: caretStart }, '')
+      : text;
   }
 
   _setTextByParsedValue(): void {
@@ -800,7 +860,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     this._setInputText(formatted);
   }
 
-  _formatValue(e): void {
+  _formatValue(e: DxEvent<InputEvent>): void {
     let normalizedText = this._getInputVal();
     const caret = this._caret();
     const textWithoutMinus = this._removeMinusFromText(normalizedText, caret);
@@ -817,7 +877,8 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
       return;
     }
 
-    const textWasChanged = number.convertDigits(this._formattedValue, true) !== normalizedText;
+    const formattedValue: string | undefined = number.convertDigits(this._formattedValue, true);
+    const textWasChanged = formattedValue !== normalizedText;
 
     if (textWasChanged) {
       const value = this._tryParse(normalizedText, caret, '');
@@ -830,18 +891,18 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     this._setTextByParsedValue();
   }
 
-  _renderDisplayText(): void {
+  _renderDisplayText(text?: string): void {
     if (this._useMaskBehavior()) {
       this._toggleEmptinessEventHandler();
     } else {
-      // @ts-expect-error ts-error
-      super._renderDisplayText.apply(this, arguments);
+      super._renderDisplayText(text);
     }
   }
 
-  _renderValue() {
+  _renderValue(): DeferredObj<unknown> {
     if (this._useMaskBehavior()) {
       const { value } = this.option();
+
       this._parsedValue = value;
       this._setTextByParsedValue();
     }
@@ -867,12 +928,15 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
       return;
     }
 
-    this._parsedValue = fitIntoRange(parsedValue, this.option('min'), this.option('max'));
+    const { min, max } = this.option();
+
+    this._parsedValue = fitIntoRange(parsedValue, min, max);
   }
 
-  _valueChangeEventHandler(e): void {
+  _valueChangeEventHandler(e: DxEvent): void {
     if (!this._useMaskBehavior()) {
-      return super._valueChangeEventHandler(e);
+      super._valueChangeEventHandler(e);
+      return;
     }
 
     const caret = this._caret();
@@ -890,7 +954,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     }
   }
 
-  _optionChanged(args): void {
+  _optionChanged(args: OptionChanged<NumberBoxMaskProperties>): void {
     switch (args.name) {
       case 'format':
       case 'useMaskBehavior':
diff --git a/packages/devextreme/js/__internal/ui/number_box/number_box.spin.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.spin.ts
index d739bae81ba5..2ec292543b26 100644
--- a/packages/devextreme/js/__internal/ui/number_box/number_box.spin.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/number_box.spin.ts
@@ -8,6 +8,7 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred } from '@js/core/utils/deferred';
+import type { DxEvent, PointerInteractionEvent } from '@js/events/events.types';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { WidgetProperties } from '@ts/core/widget/widget';
 import Widget from '@ts/core/widget/widget';
@@ -21,10 +22,14 @@ const NUMBER_BOX = 'dxNumberBox';
 const POINTERUP_EVENT_NAME = addNamespace(pointerEvents.up, NUMBER_BOX);
 const POINTERCANCEL_EVENT_NAME = addNamespace(pointerEvents.cancel, NUMBER_BOX);
 
+export interface SpinChangeEvent {
+  event: DxEvent<PointerInteractionEvent>;
+}
+
 export interface SpinButtonProperties extends WidgetProperties {
   direction?: string;
 
-  onChange?: () => void;
+  onChange?: ((e: SpinChangeEvent) => void) | null;
 }
 
 class SpinButton extends Widget<SpinButtonProperties> {
@@ -40,7 +45,6 @@ class SpinButton extends Widget<SpinButtonProperties> {
     return {
       ...super._getDefaultOptions(),
       direction: 'up',
-      // @ts-expect-error ts-error
       onChange: null,
       activeStateEnabled: true,
       hoverStateEnabled: true,
@@ -73,7 +77,7 @@ class SpinButton extends Widget<SpinButtonProperties> {
     this._spinChangeHandler = this._createActionByOption('onChange');
   }
 
-  _spinDownHandler(e): void {
+  _spinDownHandler(e: DxEvent<PointerInteractionEvent>): void {
     e.preventDefault();
 
     this._clearTimer();
diff --git a/packages/devextreme/js/__internal/ui/number_box/number_box.spins.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.spins.ts
index 75560e162804..1c289dd3c24a 100644
--- a/packages/devextreme/js/__internal/ui/number_box/number_box.spins.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/number_box.spins.ts
@@ -3,16 +3,23 @@ import pointer from '@js/common/core/events/pointer';
 import { addNamespace } from '@js/common/core/events/utils/index';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
-import { extend } from '@js/core/utils/extend';
+import type { DxEvent, PointerInteractionEvent } from '@js/events/events.types';
 import TextEditorButton from '@ts/ui/text_box/texteditor_button_collection/button';
 
-import SpinButton from './m_number_box.spin';
+import type NumberBoxBase from './number_box.base';
+import type { SpinChangeEvent } from './number_box.spin';
+import SpinButton from './number_box.spin';
 
 const SPIN_CLASS = 'dx-numberbox-spin';
 const SPIN_CONTAINER_CLASS = 'dx-numberbox-spin-container';
 const SPIN_TOUCH_FRIENDLY_CLASS = 'dx-numberbox-spin-touch-friendly';
 
-export default class SpinButtons extends TextEditorButton {
+interface SpinButtonsOptions {
+  visible: boolean;
+  disabled: boolean;
+}
+
+export default class SpinButtons extends TextEditorButton<NumberBoxBase, dxElementWrapper> {
   _attachEvents(
     instance: dxElementWrapper,
     $spinContainer: dxElementWrapper,
@@ -27,8 +34,7 @@ export default class SpinButtons extends TextEditorButton {
     const $spinContainerChildren = $spinContainer.children();
 
     const pointerDownAction = editor._createAction(
-      // @ts-expect-error Private API
-      (e) => { this.editor?._spinButtonsPointerDownHandler(e); },
+      () => { this.editor?._spinButtonsPointerDownHandler(); },
     );
 
     eventsEngine.off($spinContainer, eventName);
@@ -36,28 +42,30 @@ export default class SpinButtons extends TextEditorButton {
     eventsEngine.on(
       $spinContainer,
       eventName,
-      (e) => pointerDownAction({ event: e }),
+      (e: DxEvent<PointerInteractionEvent>) => pointerDownAction({ event: e }),
     );
 
-    SpinButton.getInstance($spinContainerChildren.eq(0)).option(
+    SpinButton.getInstance<SpinButton>($spinContainerChildren.eq(0)).option(
       'onChange',
-      // @ts-expect-error Private API
-      (e) => { this.editor?._spinUpChangeHandler(e); },
+      (e: SpinChangeEvent) => { this.editor?._spinUpChangeHandler(e); },
     );
 
-    SpinButton.getInstance($spinContainerChildren.eq(1)).option(
+    SpinButton.getInstance<SpinButton>($spinContainerChildren.eq(1)).option(
       'onChange',
-      // @ts-expect-error Private API
-      (e) => { this.editor?._spinDownChangeHandler(e); },
+      (e: SpinChangeEvent) => { this.editor?._spinDownChangeHandler(e); },
     );
   }
 
   _create(): {
     $element: dxElementWrapper;
     instance: dxElementWrapper;
-  } {
+  } | undefined {
     const { editor } = this;
 
+    if (!editor) {
+      return undefined;
+    }
+
     const $spinContainer = $('<div>').addClass(SPIN_CONTAINER_CLASS);
     const $spinUp = $('<div>').appendTo($spinContainer);
     const $spinDown = $('<div>').appendTo($spinContainer);
@@ -65,10 +73,10 @@ export default class SpinButtons extends TextEditorButton {
 
     this._addToContainer($spinContainer);
 
-    editor?._createComponent($spinUp, SpinButton, extend({ direction: 'up' }, options));
-    editor?._createComponent($spinDown, SpinButton, extend({ direction: 'down' }, options));
+    editor._createComponent($spinUp, SpinButton, { direction: 'up', ...options });
+    editor._createComponent($spinDown, SpinButton, { direction: 'down', ...options });
 
-    this._legacyRender(editor?.$element(), this._isTouchFriendly(), options.visible);
+    this._legacyRender(editor.$element(), this._isTouchFriendly(), options.visible);
 
     return {
       instance: $spinContainer,
@@ -76,57 +84,57 @@ export default class SpinButtons extends TextEditorButton {
     };
   }
 
-  _getOptions() {
+  _getOptions(): SpinButtonsOptions {
     const { editor } = this;
 
-    const visible = this._isVisible();
-    const disabled = editor?.option('disabled');
+    const { disabled } = editor?.option() ?? {};
 
     return {
-      visible,
-      disabled,
+      visible: this._isVisible(),
+      disabled: !!disabled,
     };
   }
 
-  // @ts-expect-error
-  _isVisible() {
+  _isVisible(): boolean {
     const { editor } = this;
+    const { showSpinButtons } = editor?.option() ?? {};
 
-    return super._isVisible() && editor?.option('showSpinButtons');
+    return super._isVisible() && !!showSpinButtons;
   }
 
-  _isTouchFriendly() {
+  _isTouchFriendly(): boolean {
     const { editor } = this;
+    const { showSpinButtons, useLargeSpinButtons } = editor?.option() ?? {};
 
-    return editor?.option('showSpinButtons') && editor?.option('useLargeSpinButtons');
+    return !!showSpinButtons && !!useLargeSpinButtons;
   }
 
   // TODO: get rid of it
-  _legacyRender($editor, isTouchFriendly, isVisible) {
+  _legacyRender(
+    $editor: dxElementWrapper,
+    isTouchFriendly: boolean,
+    isVisible: boolean,
+  ): void {
     $editor.toggleClass(SPIN_TOUCH_FRIENDLY_CLASS, isTouchFriendly);
     $editor.toggleClass(SPIN_CLASS, isVisible);
   }
 
-  // @ts-expect-error
-  update(): void {
+  update(): boolean {
     const shouldUpdate = super.update();
+    const { editor, instance } = this;
 
-    if (shouldUpdate) {
-      const { editor, instance } = this;
-
-      const $editor = editor?.$element();
-      const isVisible = this._isVisible();
-      const isTouchFriendly = this._isTouchFriendly();
-      // @ts-expect-error
+    if (shouldUpdate && instance && editor) {
       const $spinButtons = instance.children();
-      const spinUp = SpinButton.getInstance($spinButtons.eq(0));
-      const spinDown = SpinButton.getInstance($spinButtons.eq(1));
+      const spinUp = SpinButton.getInstance<SpinButton>($spinButtons.eq(0));
+      const spinDown = SpinButton.getInstance<SpinButton>($spinButtons.eq(1));
       const options = this._getOptions();
 
       spinUp.option(options);
       spinDown.option(options);
 
-      this._legacyRender($editor, isTouchFriendly, isVisible);
+      this._legacyRender(editor.$element(), this._isTouchFriendly(), options.visible);
     }
+
+    return shouldUpdate;
   }
 }
diff --git a/packages/devextreme/js/__internal/ui/number_box/number_box.ts b/packages/devextreme/js/__internal/ui/number_box/number_box.ts
index 9b862fa02055..1b484d08e202 100644
--- a/packages/devextreme/js/__internal/ui/number_box/number_box.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/number_box.ts
@@ -1,6 +1,6 @@
 import registerComponent from '@js/core/component_registrator';
 
-import NumberBoxMask from './m_number_box.mask';
+import NumberBoxMask from './number_box.mask';
 
 // STYLE numberBox
 
diff --git a/packages/devextreme/js/__internal/ui/number_box/utils.ts b/packages/devextreme/js/__internal/ui/number_box/utils.ts
index 388587c56f7f..ca4d4ec140f2 100644
--- a/packages/devextreme/js/__internal/ui/number_box/utils.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/utils.ts
@@ -1,15 +1,25 @@
-import { adjust, roundFloatPart } from '@js/core/utils/math';
+import { adjust } from '@js/core/utils/math';
+import { isString } from '@js/core/utils/type';
+import type { Format } from '@js/localization';
 
-const getRealSeparatorIndex = function (str) {
+export interface SeparatorPosition {
+  occurrence: number;
+  index: number;
+}
+
+const asPattern = (format: Format): string => (isString(format) ? format : '');
+
+const getRealSeparatorIndex = (format: Format): SeparatorPosition => {
+  const pattern = asPattern(format);
   let quoteBalance = 0;
   let separatorCount = 0;
 
-  for (let i = 0; i < str.length; ++i) {
-    if (str[i] === '\'') {
-      quoteBalance++;
+  for (let i = 0; i < pattern.length; i += 1) {
+    if (pattern[i] === '\'') {
+      quoteBalance += 1;
     }
-    if (str[i] === '.') {
-      ++separatorCount;
+    if (pattern[i] === '.') {
+      separatorCount += 1;
       if (quoteBalance % 2 === 0) {
         return {
           occurrence: separatorCount,
@@ -22,17 +32,21 @@ const getRealSeparatorIndex = function (str) {
   return { occurrence: 1, index: -1 };
 };
 
-const getNthOccurrence = function (str, c, n) {
-  let i = -1;
+const getNthOccurrence = (str: string, char: string, occurrence: number): number => {
+  let index = -1;
+
+  for (let remaining = occurrence; remaining > 0; remaining -= 1) {
+    index = str.indexOf(char, index + 1);
 
-  while (n-- && i++ < str.length) {
-    i = str.indexOf(c, i);
+    if (index === -1) {
+      return -1;
+    }
   }
 
-  return i;
+  return index;
 };
 
-const splitByIndex = function (str, index) {
+const splitByIndex = (str: string, index: number): string[] => {
   if (index === -1) {
     return [str];
   }
@@ -40,7 +54,10 @@ const splitByIndex = function (str, index) {
   return [str.slice(0, index), str.slice(index + 1)];
 };
 
-const adjustPercentValue = function (rawValue, interval) {
+const adjustPercentValue = (
+  rawValue: number | null | undefined,
+  interval: number,
+): number | null | undefined => {
   if (!rawValue) {
     return rawValue;
   }
@@ -48,17 +65,10 @@ const adjustPercentValue = function (rawValue, interval) {
   return adjust(rawValue / 100, interval / 100);
 };
 
-const roundFloatPartPercentValue = function (rawValue: number, precision: number) {
-  if (!rawValue) {
-    return rawValue;
-  }
-  return roundFloatPart(rawValue / 100, precision);
-};
-
 export {
   adjustPercentValue,
+  asPattern,
   getNthOccurrence,
   getRealSeparatorIndex,
-  roundFloatPartPercentValue,
   splitByIndex,
 };
diff --git a/packages/devextreme/js/__internal/ui/text_box/text_editor.base.ts b/packages/devextreme/js/__internal/ui/text_box/text_editor.base.ts
index a95ae65b7456..6fe15ab75575 100644
--- a/packages/devextreme/js/__internal/ui/text_box/text_editor.base.ts
+++ b/packages/devextreme/js/__internal/ui/text_box/text_editor.base.ts
@@ -34,6 +34,15 @@ import { TextEditorLabel } from './text_editor.label';
 import type { TextEditorButtonInfo } from './texteditor_button_collection/index';
 import TextEditorButtonCollection from './texteditor_button_collection/index';
 
+export interface TextEditorInputAttributes {
+  autocomplete: string;
+
+  placeholder: string | null;
+
+  // eslint-disable-next-line spellcheck/spell-checker
+  inputmode?: string;
+}
+
 export interface TextEditorInternalProperties extends EditorInternalProperties {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   displayValueFormatter?: ((value: string | any[]) => string);
@@ -446,12 +455,7 @@ class TextEditorBase<
     return value;
   }
 
-  _getDefaultAttributes(): {
-    autocomplete: string;
-    placeholder: string | null;
-    // eslint-disable-next-line spellcheck/spell-checker
-    inputmode?: string;
-  } {
+  _getDefaultAttributes(): TextEditorInputAttributes {
     const defaultAttributes = {
       autocomplete: 'off',
       placeholder: this._getPlaceholderAttr(),
@@ -773,7 +777,7 @@ class TextEditorBase<
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _keyPressHandler(e?: { originalEvent: InputEvent & KeyboardEvent }): void {
+  _keyPressHandler(e?: DxEvent): void {
     this.option('text', this._input().val());
   }
 
diff --git a/packages/devextreme/js/__internal/ui/text_box/text_editor.clear.ts b/packages/devextreme/js/__internal/ui/text_box/text_editor.clear.ts
index f072220c37d5..4935f48cee4f 100644
--- a/packages/devextreme/js/__internal/ui/text_box/text_editor.clear.ts
+++ b/packages/devextreme/js/__internal/ui/text_box/text_editor.clear.ts
@@ -32,7 +32,7 @@ interface EditorWithClearButton {
 export default class ClearButton<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TComponent extends Editor<any> & EditorWithClearButton = TextEditorBase,
-> extends TextEditorButton<TComponent> {
+> extends TextEditorButton<TComponent, dxElementWrapper> {
   _create(): {
     instance: dxElementWrapper;
     $element: dxElementWrapper;
@@ -101,7 +101,6 @@ export default class ClearButton<
     const isVisible = this._isVisible();
 
     if (instance) {
-      // @ts-expect-error instance is dxElementWrapper
       instance.toggleClass(STATE_INVISIBLE_CLASS, !isVisible);
     }
 
diff --git a/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts b/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts
index 46d0e038133a..4a18e79436ff 100644
--- a/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts
+++ b/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts
@@ -340,7 +340,7 @@ class TextEditorMask<
   _replaceSelectedText(
     text: string,
     selection: CaretRange,
-    char: string,
+    char: string | undefined,
   ): string {
     if (char === undefined) {
       return text;
diff --git a/packages/devextreme/js/__internal/ui/text_box/texteditor_button_collection/button.ts b/packages/devextreme/js/__internal/ui/text_box/texteditor_button_collection/button.ts
index f519c2a6e2e2..04f31a4fb39e 100644
--- a/packages/devextreme/js/__internal/ui/text_box/texteditor_button_collection/button.ts
+++ b/packages/devextreme/js/__internal/ui/text_box/texteditor_button_collection/button.ts
@@ -5,7 +5,7 @@ import Button from '@js/ui/button';
 import type Widget from '@ts/core/widget/widget';
 import type TextEditorBase from '@ts/ui/text_box/text_editor.base';
 
-type TextEditorButtonInstance = dxElementWrapper | Button;
+export type TextEditorButtonInstance = dxElementWrapper | Button;
 
 export const isButtonInstance = (
   instance: unknown,
@@ -14,12 +14,13 @@ export const isButtonInstance = (
 export default class TextEditorButton<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TComponent extends Widget<any> = TextEditorBase,
+  TInstance extends TextEditorButtonInstance = TextEditorButtonInstance,
 > {
   $container!: dxElementWrapper | null;
 
   $placeMarker?: dxElementWrapper | null;
 
-  instance?: TextEditorButtonInstance | null;
+  instance?: TInstance | null;
 
   editor!: TComponent | null;
 
@@ -55,12 +56,12 @@ export default class TextEditorButton<
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _attachEvents(instance: unknown, $element?: dxElementWrapper): void {
+  _attachEvents(instance: TInstance | undefined, $element?: dxElementWrapper): void {
     throw new Error('Not implemented');
   }
 
   _create(): {
-    instance: Button | dxElementWrapper;
+    instance: TInstance;
     $element: dxElementWrapper;
   } | undefined {
     throw new Error('Not implemented');
diff --git a/packages/devextreme/js/__internal/ui/text_box/texteditor_button_collection/custom.ts b/packages/devextreme/js/__internal/ui/text_box/texteditor_button_collection/custom.ts
index fdb6748a60fb..225953ea1f41 100644
--- a/packages/devextreme/js/__internal/ui/text_box/texteditor_button_collection/custom.ts
+++ b/packages/devextreme/js/__internal/ui/text_box/texteditor_button_collection/custom.ts
@@ -6,11 +6,11 @@ import $ from '@js/core/renderer';
 import type { Properties as ButtonProperties } from '@js/ui/button';
 import Button from '@js/ui/button';
 import type TextEditorBase from '@ts/ui/text_box/text_editor.base';
-import TextEditorButton, { isButtonInstance } from '@ts/ui/text_box/texteditor_button_collection/button';
+import TextEditorButton from '@ts/ui/text_box/texteditor_button_collection/button';
 
 const CUSTOM_BUTTON_HOVERED_CLASS = 'dx-custom-button-hovered';
 
-export default class CustomButton extends TextEditorButton {
+export default class CustomButton extends TextEditorButton<TextEditorBase, Button> {
   _attachEvents(
     instance: Button,
     $element: dxElementWrapper,
@@ -70,7 +70,7 @@ export default class CustomButton extends TextEditorButton {
   update(): boolean {
     const isUpdated = super.update();
 
-    if (isButtonInstance(this.instance)) {
+    if (this.instance) {
       this.instance.option('disabled', this._isDisabled());
     }
 
@@ -86,7 +86,7 @@ export default class CustomButton extends TextEditorButton {
   _isDisabled(): boolean | undefined {
     const isDefinedByUser = this.options.disabled !== undefined;
     if (isDefinedByUser) {
-      if (isButtonInstance(this.instance)) {
+      if (this.instance) {
         return this.instance.option('disabled');
       }
 
diff --git a/packages/devextreme/js/ui/number_box.js b/packages/devextreme/js/ui/number_box.js
index 5ea396acda04..a682bbaa8a92 100644
--- a/packages/devextreme/js/ui/number_box.js
+++ b/packages/devextreme/js/ui/number_box.js
@@ -1,4 +1,4 @@
-import NumberBox from '../__internal/ui/number_box/m_number_box';
+import NumberBox from '../__internal/ui/number_box/number_box';
 
 export default NumberBox;
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/numberBoxParts/common.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/numberBoxParts/common.tests.js
index 9e82f2737153..63d935a73456 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/numberBoxParts/common.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/numberBoxParts/common.tests.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import SpinButton from '__internal/ui/number_box/m_number_box.spin';
+import SpinButton from '__internal/ui/number_box/number_box.spin';
 import config from 'core/config';
 import eventsEngine from 'common/core/events/core/events_engine';
 import keyboardMock from '../../../helpers/keyboardMock.js';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/numberBoxParts/mask.caret.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/numberBoxParts/mask.caret.tests.js
index 546b5dd3d923..b070db9ed5b1 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/numberBoxParts/mask.caret.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/numberBoxParts/mask.caret.tests.js
@@ -4,7 +4,7 @@ import {
     getCaretInBoundaries,
     isCaretInBoundaries,
     getCaretAfterFormat,
-} from '__internal/ui/number_box/m_number_box.caret';
+} from '__internal/ui/number_box/number_box.caret';
 
 QUnit.module('format caret', () => {
     const customFormat = {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.kbn.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.kbn.tests.js
index 564c6efcfa6b..d5fec4952418 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.kbn.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.kbn.tests.js
@@ -29,7 +29,7 @@ import { DROP_DOWN_BUTTON_CLASS } from '__internal/ui/drop_down_button';
 
 import { TEXTEDITOR_CLASS, TEXTEDITOR_INPUT_CLASS } from '__internal/ui/text_box/text_editor.base';
 import { TEXTBOX_CLASS } from '__internal/ui/text_box/text_box';
-import { WIDGET_CLASS as NUMBERBOX_CLASS } from '__internal/ui/number_box/m_number_box.base';
+import { WIDGET_CLASS as NUMBERBOX_CLASS } from '__internal/ui/number_box/number_box.base';
 import { SELECTBOX_CLASS } from '__internal/ui/select_box';
 
 import { SWITCH_CLASS } from '__internal/ui/switch';

From 475c22798f18a01dbb21aa959e9babb369b61fb8 Mon Sep 17 00:00:00 2001
From: "ilya.kharchenko" <14272298+IlyaKhD@users.noreply.github.com>
Date: Wed, 9 Sep 2026 15:14:04 +0000
Subject: [PATCH 39/45] fix(env): restore minimumReleaseAge (#35133)

---
 pnpm-workspace.yaml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 03840574c015..d31827f24daa 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -10,7 +10,10 @@ preferWorkspacePackages: true
 saveWorkspaceProtocol: false
 packageManagerStrict: false
 engineStrict: true
-minimumReleaseAge: 0
+
+# Supply-chain guard: ignore npm versions published less than 24 hours ago.
+# Need a fresher version? Add a targeted minimumReleaseAgeExclude entry with the exact version.
+minimumReleaseAge: 1440 # ⚠️ Do NOT modify this.
 
 overrides:
   "basic-ftp@<5.3.1": ">=5.3.1"

From e4054afbae40579e7f8aa2d55cc4ebf0b18b1ed1 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Wed, 9 Sep 2026 22:48:59 +0000
Subject: [PATCH 40/45] Tabs: label icon-only tabs after their icon, as Button
 does (#5077) (#35122)

---
 apps/demos/testing/common.test.ts             |   4 -
 .../tests/accessibility/tabPanel.ts           |   4 +-
 .../tests/accessibility/tabs.ts               |   4 +-
 .../js/__internal/core/utils/m_icon.ts        |  24 +++
 .../js/__internal/ui/button/button.tsx        |  33 +----
 .../js/__internal/ui/tab_panel/tab_panel.ts   |   9 +-
 .../devextreme/js/__internal/ui/tabs/tabs.ts  |  32 +++-
 .../tests/DevExpress.core/utils.icon.tests.js |  36 +++++
 .../tabPanel.markup.tests.js                  |  92 ++++++++++++
 .../tabs.markup.tests.js                      | 140 ++++++++++++++++++
 10 files changed, 338 insertions(+), 40 deletions(-)

diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts
index 40c4cd51fe31..192deec511ad 100644
--- a/apps/demos/testing/common.test.ts
+++ b/apps/demos/testing/common.test.ts
@@ -111,10 +111,6 @@ const getIgnoredRules = (testName) => {
     'Gantt-Validation': ['aria-required-parent', 'aria-valid-attr-value'],
 
     'Localization-UsingGlobalize': ['label'],
-
-    // Icon-only tabs render no text, so they have no accessible name.
-    // Naming them needs Tabs widget support (like Button labels icon-only buttons).
-    'Tabs-Overview': ['aria-tab-name'],
   };
 
   return [
diff --git a/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts
index 33872a37b182..ae6dd7dc7d9b 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts
@@ -14,7 +14,9 @@ const items: Item[] = [
   { title: 'Olivia Peyton', text: 'Olivia Peyton' },
   { title: 'Ed Holmes', text: 'Ed Holmes' },
   { title: 'Wally Hobbs', text: 'Wally Hobbs' },
-  { title: 'Brad Jameson', text: 'Brad Jameson' },
+  { title: 'Brad Jameson', text: 'Brad Jameson', icon: 'user' },
+  { icon: 'chart', text: 'Chart' },
+  { icon: 'find', badge: '3', text: 'Find' },
 ];
 
 const options: Options<Properties> = {
diff --git a/e2e/testcafe-devextreme/tests/accessibility/tabs.ts b/e2e/testcafe-devextreme/tests/accessibility/tabs.ts
index 9000466ab201..e156e60a4f15 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/tabs.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/tabs.ts
@@ -14,7 +14,9 @@ const items: Item[] = [
   { text: 'Olivia Peyton' },
   { text: 'Ed Holmes' },
   { text: 'Wally Hobbs' },
-  { text: 'Brad Jameson' },
+  { text: 'Brad Jameson', icon: 'user' },
+  { icon: 'chart' },
+  { icon: 'find', badge: '3' },
 ];
 
 const options: Options<Properties> = {
diff --git a/packages/devextreme/js/__internal/core/utils/m_icon.ts b/packages/devextreme/js/__internal/core/utils/m_icon.ts
index 41e144fa31e9..9a41ae01a46b 100644
--- a/packages/devextreme/js/__internal/core/utils/m_icon.ts
+++ b/packages/devextreme/js/__internal/core/utils/m_icon.ts
@@ -1,8 +1,14 @@
+import messageLocalization from '@js/common/core/localization/message';
 import $ from '@js/core/renderer';
+import { camelize } from '@js/core/utils/inflector';
 
 export const ICON_CLASS = 'dx-icon';
 const SVG_ICON_CLASS = 'dx-svg-icon';
 
+const NOT_URL_REGEXP = /^(?!(?:https?:\/\/)|(?:ftp:\/\/)|(?:www\.))[^\s]+$/;
+const FILE_NAME_REGEXP = /.+\/([^.]+)\..+$/;
+const SVG_TITLE_REGEXP = /<title>(.+?)<\/title>/;
+
 export const getImageSourceType = (source) => {
   if (!source || typeof source !== 'string') {
     return false;
@@ -41,3 +47,21 @@ export const getImageContainer = (source) => {
       return null;
   }
 };
+
+export const getImageAriaLabel = (source: string): string | undefined => {
+  switch (getImageSourceType(source)) {
+    case 'image': {
+      const isPathToImage = !source.includes('base64') && NOT_URL_REGEXP.test(source);
+
+      return isPathToImage ? source.replace(FILE_NAME_REGEXP, '$1') : undefined;
+    }
+    case 'dxIcon':
+      return messageLocalization.format(camelize(source, true)) || source;
+    case 'fontIcon':
+      return source;
+    case 'svg':
+      return SVG_TITLE_REGEXP.exec(source)?.[1];
+    default:
+      return undefined;
+  }
+};
diff --git a/packages/devextreme/js/__internal/ui/button/button.tsx b/packages/devextreme/js/__internal/ui/button/button.tsx
index e9b8ef9ce442..fdc740883193 100644
--- a/packages/devextreme/js/__internal/ui/button/button.tsx
+++ b/packages/devextreme/js/__internal/ui/button/button.tsx
@@ -1,10 +1,7 @@
 import { click } from '@js/common/core/events/short';
-import messageLocalization from '@js/common/core/localization/message';
 import devices from '@js/core/devices';
 import type { DefaultOptionsRule } from '@js/core/options/utils';
 import { convertRulesToOptions, createDefaultOptionRules } from '@js/core/options/utils';
-import { getImageSourceType } from '@js/core/utils/icon';
-import { camelize } from '@js/core/utils/inflector';
 import type { DxEvent } from '@js/events';
 import type { Properties as ButtonProperties, TemplateData } from '@js/ui/button.d';
 import { current, isMaterial } from '@js/ui/themes';
@@ -16,6 +13,7 @@ import type { EffectReturn } from '@ts/core/r1/utils/effect_return';
 import { getTemplate } from '@ts/core/r1/utils/index';
 import { Widget } from '@ts/core/r1/widget';
 import { combineClasses } from '@ts/core/utils/combine_classes';
+import { getImageAriaLabel } from '@ts/core/utils/m_icon';
 import { createRef as infernoCreateRef } from 'inferno';
 
 import { Icon } from './icon';
@@ -229,34 +227,7 @@ export class Button extends InfernoWrapperComponent<ButtonProps> {
 
   get aria(): Record<string, string> {
     const { icon, text } = this.props;
-    let label = text ?? '';
-
-    if (!text && icon) {
-      const iconSource = getImageSourceType(icon);
-
-      switch (iconSource) {
-        case 'image':
-        {
-          const notURLRegexp = /^(?!(?:https?:\/\/)|(?:ftp:\/\/)|(?:www\.))[^\s]+$/;
-          const isPathToImage = !icon.includes('base64') && notURLRegexp.test(icon);
-          label = isPathToImage ? icon.replace(/.+\/([^.]+)\..+$/, '$1') : '';
-          break;
-        }
-        case 'dxIcon':
-          label = messageLocalization.format(camelize(icon, true)) || icon;
-          break;
-        case 'fontIcon':
-          label = icon;
-          break;
-        case 'svg': {
-          const titleRegexp = /<title>(.*?)<\/title>/;
-          label = titleRegexp.exec(icon)?.[1] ?? '';
-          break;
-        }
-        default:
-          break;
-      }
-    }
+    const label = !text && icon ? getImageAriaLabel(icon) : text;
 
     return {
       role: 'button',
diff --git a/packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts b/packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts
index 0022f9aa56d5..827c7cdbe7ad 100644
--- a/packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts
+++ b/packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts
@@ -12,11 +12,11 @@ import { getPublicElement } from '@js/core/element';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { BindableTemplate } from '@js/core/templates/bindable_template';
-import { getImageContainer } from '@js/core/utils/icon';
 import { isDefined, isPlainObject } from '@js/core/utils/type';
 import type { DxEvent } from '@js/events';
 import type { Item, Properties } from '@js/ui/tab_panel';
 import { current as currentTheme, isFluent, isMaterialBased } from '@js/ui/themes';
+import { getImageAriaLabel, getImageContainer } from '@ts/core/utils/m_icon';
 import supportUtils from '@ts/core/utils/m_support';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { MultiViewProperties } from '@ts/ui/multi_view/multi_view';
@@ -388,6 +388,13 @@ class TabPanel extends MultiView<TabPanelProperties> {
       iconPosition,
       stylingMode,
       _itemAttributes: { class: TABPANEL_TABS_ITEM_CLASS },
+      _itemAriaLabelExpr: (data: Item): string | undefined => {
+        if (data?.title || !data?.icon) {
+          return undefined;
+        }
+
+        return getImageAriaLabel(data.icon);
+      },
       _indicatorPosition: tabsIndicatorPosition,
     };
   }
diff --git a/packages/devextreme/js/__internal/ui/tabs/tabs.ts b/packages/devextreme/js/__internal/ui/tabs/tabs.ts
index 9a8d09132c7e..8b24c7fe49dd 100644
--- a/packages/devextreme/js/__internal/ui/tabs/tabs.ts
+++ b/packages/devextreme/js/__internal/ui/tabs/tabs.ts
@@ -9,7 +9,6 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import resizeObserverSingleton from '@js/core/resize_observer';
 import { BindableTemplate } from '@js/core/templates/bindable_template';
-import { getImageContainer } from '@js/core/utils/icon';
 import { each } from '@js/core/utils/iterator';
 import { getHeight, getOuterWidth, getWidth } from '@js/core/utils/size';
 import { isDefined, isPlainObject } from '@js/core/utils/type';
@@ -27,8 +26,13 @@ import type {
 } from '@js/ui/tabs';
 import { current as currentTheme, isFluent, isMaterial } from '@js/ui/themes';
 import { render } from '@ts/core/utils/ink_ripple';
+import { getImageAriaLabel, getImageContainer } from '@ts/core/utils/m_icon';
 import type { OptionChanged } from '@ts/core/widget/types';
-import type { CollectionItemInfo, InkRippleEvent } from '@ts/ui/collection/collection_widget.base';
+import type {
+  CollectionItemInfo,
+  InkRippleEvent,
+  PostprocessRenderItemInfo,
+} from '@ts/ui/collection/collection_widget.base';
 import type { CollectionWidgetLiveUpdateProperties } from '@ts/ui/collection/collection_widget.live_update';
 import Scrollable from '@ts/ui/scroll_view/scrollable';
 import {
@@ -136,6 +140,8 @@ export interface TabsProperties extends Properties, Omit<
 
   badgeExpr?: (data) => string | undefined;
 
+  _itemAriaLabelExpr?: (data: Item) => string | undefined;
+
   _indicatorPosition?: Position | null;
 }
 
@@ -180,6 +186,13 @@ class Tabs extends CollectionWidgetLiveUpdate<TabsProperties> {
       badgeExpr(data: Item): string | undefined {
         return data?.badge;
       },
+      _itemAriaLabelExpr(data: Item): string | undefined {
+        if (data?.text || data?.html || !data?.icon) {
+          return undefined;
+        }
+
+        return getImageAriaLabel(data.icon);
+      },
       _itemAttributes: { role: 'tab' },
       _indicatorPosition: null,
     };
@@ -318,6 +331,20 @@ class Tabs extends CollectionWidgetLiveUpdate<TabsProperties> {
     this._renderScrolling();
   }
 
+  _postprocessRenderItem(args: PostprocessRenderItemInfo<Item>): void {
+    super._postprocessRenderItem(args);
+
+    this._renderItemAriaLabel(args);
+  }
+
+  _renderItemAriaLabel({ itemData, itemElement }: PostprocessRenderItemInfo<Item>): void {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { _itemAriaLabelExpr } = this.option();
+    const label = _itemAriaLabelExpr?.(itemData);
+
+    this.setAria('label', label, itemElement);
+  }
+
   _renderScrolling(): void {
     const removeClasses = [TABS_STRETCHED_CLASS, TABS_EXPANDED_CLASS, OVERFLOW_HIDDEN_CLASS];
     this.$element().removeClass(removeClasses.join(' '));
@@ -836,6 +863,7 @@ class Tabs extends CollectionWidgetLiveUpdate<TabsProperties> {
         super._optionChanged(args);
         break;
       case 'badgeExpr':
+      case '_itemAriaLabelExpr':
         this._invalidate();
         break;
       case 'focusedElement': {
diff --git a/packages/devextreme/testing/tests/DevExpress.core/utils.icon.tests.js b/packages/devextreme/testing/tests/DevExpress.core/utils.icon.tests.js
index 2956a9598ff1..c61c0e8a06b9 100644
--- a/packages/devextreme/testing/tests/DevExpress.core/utils.icon.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.core/utils.icon.tests.js
@@ -1,4 +1,7 @@
 import { getImageSourceType, getImageContainer } from 'core/utils/icon';
+import { getImageAriaLabel } from '__internal/core/utils/m_icon';
+import localization from 'localization';
+import ja from 'localization/messages/ja.json!';
 
 const { module: testModule, test } = QUnit;
 
@@ -144,3 +147,36 @@ testModule('icon utils', {
         });
     });
 });
+
+testModule('getImageAriaLabel', () => {
+    [
+        { source: 'close', expected: 'Close', description: 'a dxIcon with a localized message' },
+        { source: 'iconName', expected: 'iconName', description: 'a dxIcon without a localized message' },
+        { source: 'fa fa-home', expected: 'fa fa-home', description: 'a font icon' },
+        { source: '/path/file.png', expected: 'file', description: 'a path to an image' },
+        { source: 'https://example.com/path/file.png', expected: undefined, description: 'an image URL' },
+        { source: 'www.example.com/file.png', expected: undefined, description: 'an image URL without a protocol' },
+        { source: 'data:image/png;base64,qwerty', expected: undefined, description: 'a base64 image' },
+        { source: '<svg><title>Svg title</title><path d="M0 0h1v1H0z"/></svg>', expected: 'Svg title', description: 'an svg with a title' },
+        { source: '<svg><title></title><path d="M0 0h1v1H0z"/></svg>', expected: undefined, description: 'an svg with an empty title' },
+        { source: '<svg><path d="M0 0h1v1H0z"/></svg>', expected: undefined, description: 'an svg without a title' },
+        { source: '', expected: undefined, description: 'an empty string' },
+    ].forEach(({ source, expected, description }) => {
+        test(`should return ${JSON.stringify(expected) || 'undefined'} for ${description}`, function(assert) {
+            assert.strictEqual(getImageAriaLabel(source), expected);
+        });
+    });
+
+    test('should localize the dxIcon name with the current locale', function(assert) {
+        const defaultLocale = localization.locale();
+
+        try {
+            localization.loadMessages(ja);
+            localization.locale('ja');
+
+            assert.strictEqual(getImageAriaLabel('close'), '閉じる');
+        } finally {
+            localization.locale(defaultLocale);
+        }
+    });
+});
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.markup.tests.js
index 738a7c0e6c4b..0c3a12da8732 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.markup.tests.js
@@ -202,4 +202,96 @@ QUnit.module('aria accessibility', () => {
         instance.option('focusedElement', $element.find('.dx-item:eq(1)'));
         assert.equal($element.attr('aria-activedescendant'), undefined, 'aria-activedescendant does not exist after selection update');
     });
+
+    QUnit.module('aria-label of tabs', {
+        beforeEach: function() {
+            this.createTabPanel = (options) => {
+                this.$element = $('<div>').appendTo('#qunit-fixture').dxTabPanel(options);
+                this.instance = this.$element.dxTabPanel('instance');
+            };
+            this.getTab = (index) => this.$element.find(`.${TABS_ITEM_CLASS}`).eq(index);
+        }
+    }, () => {
+        QUnit.test('tab with title and icon should not get aria-label', function(assert) {
+            this.createTabPanel({ items: [{ title: 'User', icon: 'user' }] });
+
+            assert.strictEqual(this.getTab(0).attr('aria-label'), undefined);
+        });
+
+        QUnit.test('string item should not get aria-label', function(assert) {
+            this.createTabPanel({ items: ['User'] });
+
+            assert.strictEqual(this.getTab(0).attr('aria-label'), undefined);
+        });
+
+        QUnit.test('tab of the item without title and icon should not get aria-label', function(assert) {
+            this.createTabPanel({ items: [{ text: 'User content' }] });
+
+            assert.strictEqual(this.getTab(0).attr('aria-label'), undefined);
+        });
+
+        [
+            { icon: 'user', expected: 'user', description: 'a dxIcon without a localized message' },
+            { icon: 'close', expected: 'Close', description: 'a dxIcon with a localized message' },
+            { icon: '/path/file.png', expected: 'file', description: 'a path to an image' },
+        ].forEach(({ icon, expected, description }) => {
+            QUnit.test(`icon-only tab should get aria-label "${expected}" for ${description}`, function(assert) {
+                this.createTabPanel({ items: [{ icon }] });
+
+                assert.strictEqual(this.getTab(0).attr('aria-label'), expected);
+            });
+        });
+
+        QUnit.test('icon-only tab should get aria-label even if the item has content text or html', function(assert) {
+            this.createTabPanel({
+                items: [
+                    { icon: 'user', text: 'User content' },
+                    { icon: 'find', html: '<b>Find content</b>' },
+                ],
+            });
+
+            assert.strictEqual(this.getTab(0).attr('aria-label'), 'user', 'item with text');
+            assert.strictEqual(this.getTab(1).attr('aria-label'), 'find', 'item with html');
+        });
+
+        QUnit.test('icon-only tab with badge should get aria-label derived from icon', function(assert) {
+            this.createTabPanel({ items: [{ icon: 'user', badge: '5' }] });
+
+            assert.strictEqual(this.getTab(0).attr('aria-label'), 'user');
+        });
+
+        QUnit.test('aria-label should be derived from item data when a custom itemTitleTemplate is used', function(assert) {
+            this.createTabPanel({
+                items: [{ icon: 'user' }, { icon: 'user', title: 'User' }],
+                itemTitleTemplate: (data) => `<i class="dx-icon dx-icon-${data.icon}"></i>`,
+            });
+
+            assert.strictEqual(this.getTab(0).attr('aria-label'), 'user', 'icon-only item');
+            assert.strictEqual(this.getTab(1).attr('aria-label'), undefined, 'item with title');
+        });
+
+        [true, false].forEach((repaintChangesOnly) => {
+            QUnit.test(`aria-label should follow item title and icon changes, repaintChangesOnly: ${repaintChangesOnly}`, function(assert) {
+                this.createTabPanel({ items: [{ title: 'User', icon: 'user' }], repaintChangesOnly });
+
+                this.instance.option('items[0].title', '');
+                assert.strictEqual(this.getTab(0).attr('aria-label'), 'user', 'label appears when title is cleared');
+
+                this.instance.option('items[0].icon', 'close');
+                assert.strictEqual(this.getTab(0).attr('aria-label'), 'Close', 'label follows the icon');
+
+                this.instance.option('items[0].title', 'Close');
+                assert.strictEqual(this.getTab(0).attr('aria-label'), undefined, 'label is removed when title is set');
+            });
+
+            QUnit.test(`aria-label should be recalculated when items are replaced, repaintChangesOnly: ${repaintChangesOnly}`, function(assert) {
+                this.createTabPanel({ items: [{ icon: 'user' }], repaintChangesOnly });
+
+                this.instance.option('items', [{ title: 'User', icon: 'user' }, { icon: 'find' }]);
+
+                assert.strictEqual(this.getTab(0).attr('aria-label'), undefined, 'title and icon item');
+                assert.strictEqual(this.getTab(1).attr('aria-label'), 'find', 'icon-only item');
+            });
+        });
+    });
 });
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js
index cb451d655c54..05fa8dab32f4 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js
@@ -1,10 +1,12 @@
 import $ from 'jquery';
 import Tabs from 'ui/tabs';
+import { DataSource } from 'common/data/data_source/data_source';
 import windowUtils from 'core/utils/window';
 import ariaAccessibilityTestHelper from '../../helpers/ariaAccessibilityTestHelper.js';
 import {
     TABS_CLASS,
     TABS_WRAPPER_CLASS,
+    TABS_ITEM_CLASS,
     TABS_ITEM_TEXT_SPAN_CLASS,
     TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS
 } from '__internal/ui/tabs/tabs';
@@ -195,6 +197,144 @@ QUnit.module('Aria accessibility', {
     });
 });
 
+QUnit.module('Aria label', {
+    beforeEach: function() {
+        this.createTabs = (options) => {
+            this.$element = $('#tabs').dxTabs(options);
+            this.instance = this.$element.dxTabs('instance');
+        };
+        this.getTab = (index) => this.$element.find(`.${TABS_ITEM_CLASS}`).eq(index);
+    }
+}, () => {
+    QUnit.test('item with text and icon should not get aria-label', function(assert) {
+        this.createTabs({ items: [{ text: 'User', icon: 'user' }] });
+
+        assert.strictEqual(this.getTab(0).attr('aria-label'), undefined);
+    });
+
+    QUnit.test('item with html and icon should not get aria-label', function(assert) {
+        this.createTabs({ items: [{ html: '<b>User</b>', icon: 'user' }] });
+
+        assert.strictEqual(this.getTab(0).attr('aria-label'), undefined);
+    });
+
+    QUnit.test('string item should not get aria-label', function(assert) {
+        this.createTabs({ items: ['User'] });
+
+        assert.strictEqual(this.getTab(0).attr('aria-label'), undefined);
+    });
+
+    QUnit.test('item without text and icon should not get aria-label', function(assert) {
+        this.createTabs({ items: [{ badge: '5' }] });
+
+        assert.strictEqual(this.getTab(0).attr('aria-label'), undefined);
+    });
+
+    [
+        { icon: 'user', expected: 'user', description: 'a dxIcon without a localized message' },
+        { icon: 'close', expected: 'Close', description: 'a dxIcon with a localized message' },
+        { icon: 'fa fa-home', expected: 'fa fa-home', description: 'a font icon' },
+        { icon: '/path/file.png', expected: 'file', description: 'a path to an image' },
+        { icon: '<svg><title>Svg title</title><path d="M0 0h1v1H0z"/></svg>', expected: 'Svg title', description: 'an svg with a title' },
+    ].forEach(({ icon, expected, description }) => {
+        QUnit.test(`icon-only item should get aria-label "${expected}" for ${description}`, function(assert) {
+            this.createTabs({ items: [{ icon }] });
+
+            assert.strictEqual(this.getTab(0).attr('aria-label'), expected);
+        });
+    });
+
+    [
+        { icon: 'data:image/png;base64,qwerty', description: 'a base64 image' },
+        { icon: 'https://example.com/path/file.png', description: 'an image URL' },
+        { icon: '<svg><path d="M0 0h1v1H0z"/></svg>', description: 'an svg without a title' },
+    ].forEach(({ icon, description }) => {
+        QUnit.test(`icon-only item should not get aria-label for ${description}`, function(assert) {
+            this.createTabs({ items: [{ icon }] });
+
+            assert.strictEqual(this.getTab(0).attr('aria-label'), undefined);
+        });
+    });
+
+    QUnit.test('icon-only item with badge should get aria-label derived from icon', function(assert) {
+        this.createTabs({ items: [{ icon: 'user', badge: '5' }] });
+
+        assert.strictEqual(this.getTab(0).attr('aria-label'), 'user');
+    });
+
+    QUnit.test('only icon-only items should get aria-label', function(assert) {
+        this.createTabs({ items: [{ text: 'Users' }, { icon: 'user' }, { text: 'Find', icon: 'find' }] });
+
+        assert.strictEqual(this.getTab(0).attr('aria-label'), undefined, 'text item');
+        assert.strictEqual(this.getTab(1).attr('aria-label'), 'user', 'icon-only item');
+        assert.strictEqual(this.getTab(2).attr('aria-label'), undefined, 'text and icon item');
+    });
+
+    QUnit.test('aria-label should be derived from item data when a custom itemTemplate is used', function(assert) {
+        this.createTabs({
+            items: [{ icon: 'user' }, { icon: 'user', text: 'User' }],
+            itemTemplate: (data) => `<i class="dx-icon dx-icon-${data.icon}"></i>`,
+        });
+
+        assert.strictEqual(this.getTab(0).attr('aria-label'), 'user', 'icon-only item');
+        assert.strictEqual(this.getTab(1).attr('aria-label'), undefined, 'item with text');
+    });
+
+    [true, false].forEach((repaintChangesOnly) => {
+        QUnit.test(`aria-label should follow item text and icon changes, repaintChangesOnly: ${repaintChangesOnly}`, function(assert) {
+            this.createTabs({ items: [{ text: 'User', icon: 'user' }], repaintChangesOnly });
+
+            this.instance.option('items[0].text', '');
+            assert.strictEqual(this.getTab(0).attr('aria-label'), 'user', 'label appears when text is cleared');
+
+            this.instance.option('items[0].icon', 'close');
+            assert.strictEqual(this.getTab(0).attr('aria-label'), 'Close', 'label follows the icon');
+
+            this.instance.option('items[0].text', 'Close');
+            assert.strictEqual(this.getTab(0).attr('aria-label'), undefined, 'label is removed when text is set');
+        });
+
+        QUnit.test(`aria-label should be recalculated when items are replaced, repaintChangesOnly: ${repaintChangesOnly}`, function(assert) {
+            this.createTabs({ items: [{ icon: 'user' }], repaintChangesOnly });
+
+            this.instance.option('items', [{ text: 'User', icon: 'user' }, { icon: 'find' }]);
+
+            assert.strictEqual(this.getTab(0).attr('aria-label'), undefined, 'text and icon item');
+            assert.strictEqual(this.getTab(1).attr('aria-label'), 'find', 'icon-only item');
+        });
+    });
+
+    QUnit.test('aria-label should be recalculated when the _itemAriaLabelExpr option changes', function(assert) {
+        this.createTabs({ items: [{ icon: 'user', badge: 'New' }] });
+
+        this.instance.option('_itemAriaLabelExpr', (data) => data.badge);
+        assert.strictEqual(this.getTab(0).attr('aria-label'), 'New', 'label follows the new rule');
+
+        this.instance.option('_itemAriaLabelExpr', () => undefined);
+        assert.strictEqual(this.getTab(0).attr('aria-label'), undefined, 'label is removed when the rule returns nothing');
+    });
+
+    QUnit.test('items inserted and updated through the data source push should get aria-label', function(assert) {
+        const data = [{ id: 0, text: 'User', icon: 'user' }];
+        const dataSource = new DataSource({
+            paginate: false,
+            pushAggregationTimeout: 0,
+            load: () => data,
+            key: 'id',
+        });
+
+        this.createTabs({ dataSource, repaintChangesOnly: true });
+
+        const store = dataSource.store();
+
+        store.push([{ type: 'insert', data: { id: 1, icon: 'find' } }]);
+        assert.strictEqual(this.getTab(1).attr('aria-label'), 'find', 'inserted icon-only item');
+
+        store.push([{ type: 'update', key: 0, data: { id: 0, text: '', icon: 'user' } }]);
+        assert.strictEqual(this.getTab(0).attr('aria-label'), 'user', 'updated item without text');
+    });
+});
+
 QUnit.module('Default template', {
     beforeEach: function() {
         this.prepareItemTest = (data) => {

From 452d172946bd9e420f63e294e0862eb667ac18e8 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <251575087+bit-byte0@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:24:41 +0000
Subject: [PATCH 41/45] Grids - DataController: Extract scrolling knowledge to
 extenders (#35130)

---
 .../data_controller/data_controller.ts        | 25 +++++--
 .../utils/__tests__/paging.test.ts            | 27 +------
 .../grid_core/data_controller/utils/paging.ts | 11 ---
 ...l_scrolling_data_controller.paging.test.ts | 73 +++++++++++++++++++
 .../virtual_scrolling_data_controller.ts      | 24 +++++-
 .../stateStoring.tests.js                     |  3 +
 6 files changed, 118 insertions(+), 45 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/__tests__/virtual_scrolling_data_controller.paging.test.ts

diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index 6c98e370ae1f..c6177c211930 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -48,7 +48,7 @@ import type {
   UpdateItemChange,
   UserState,
 } from './types';
-import { resolvePaginate, syncPaging } from './utils/paging';
+import { syncPaging } from './utils/paging';
 import { getRefreshOptions } from './utils/refresh';
 import {
   attachChangedItems,
@@ -275,7 +275,6 @@ export class DataController extends modules.Controller {
       case 'remoteOperations':
       case 'keyExpr':
       case 'dataSource':
-      case 'scrolling':
         args.handled = true;
         this.reset();
         break;
@@ -617,19 +616,31 @@ export class DataController extends modules.Controller {
   }
 
   private applyPagingOptions(dataSource: PagingDataSource): PagingChanges {
-    const { scrolling, paging } = this.option();
+    const { paging } = this.option();
 
-    // Not paging state to reconcile, but a per-load request flag: infinite
-    // scrolling detects the last page locally and needs no grand total.
-    dataSource.requireTotalCount(scrolling?.mode !== 'infinite');
+    dataSource.requireTotalCount(this.requiresTotalCount());
 
     return syncPaging(dataSource, {
-      paginate: resolvePaginate(paging?.enabled, scrolling?.mode),
+      paginate: this.resolvePaginate(paging?.enabled),
       pageSize: paging?.pageSize,
       pageIndex: paging?.pageIndex,
     });
   }
 
+  /**
+   * @extended: virtual_scrolling
+   */
+  protected resolvePaginate(enabled: boolean | undefined): boolean | undefined {
+    return enabled;
+  }
+
+  /**
+   * @extended: virtual_scrolling
+   */
+  protected requiresTotalCount(): boolean {
+    return true;
+  }
+
   /**
    * @extended: state_storing, virtual_scrolling
    */
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/__tests__/paging.test.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/__tests__/paging.test.ts
index 185dc4ae86a5..0a58ae260560 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/__tests__/paging.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/__tests__/paging.test.ts
@@ -1,32 +1,7 @@
 import { describe, expect, it } from '@jest/globals';
 
 import type { PagingDataSource } from '../../types';
-import { resolvePaginate, syncPaging } from '../paging';
-
-describe('resolvePaginate', () => {
-  it.each([
-    { enabled: true, scrollingMode: 'standard', expected: true },
-    { enabled: false, scrollingMode: 'standard', expected: false },
-    // Virtual and infinite scrolling paginate even with paging disabled.
-    { enabled: false, scrollingMode: 'virtual', expected: true },
-    { enabled: false, scrollingMode: 'infinite', expected: true },
-    { enabled: true, scrollingMode: 'virtual', expected: true },
-    { enabled: true, scrollingMode: 'infinite', expected: true },
-  ])('should be $expected for enabled=$enabled, scrolling.mode=$scrollingMode', ({
-    enabled, scrollingMode, expected,
-  }) => {
-    expect(resolvePaginate(enabled, scrollingMode)).toBe(expected);
-  });
-
-  // An undefined `paging.enabled` leaves the data source's paginate alone,
-  // even in a mode that would otherwise force it on.
-  it.each(['standard', 'virtual', 'infinite'])(
-    'should be undefined when enabled is undefined in %s mode',
-    (scrollingMode) => {
-      expect(resolvePaginate(undefined, scrollingMode)).toBeUndefined();
-    },
-  );
-});
+import { syncPaging } from '../paging';
 
 const createDataSourceMock = (
   state: { paginate: boolean; pageSize: number; pageIndex: number },
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/paging.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/paging.ts
index 0d4ba2ec690a..dc8f50219e70 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/paging.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/utils/paging.ts
@@ -1,16 +1,5 @@
 import type { PagingChanges, PagingDataSource, SyncPagingOptions } from '../types';
 
-export function resolvePaginate(
-  enabled: boolean | undefined,
-  scrollingMode: string | undefined,
-): boolean | undefined {
-  if (enabled === undefined) {
-    return undefined;
-  }
-
-  return enabled || scrollingMode === 'virtual' || scrollingMode === 'infinite';
-}
-
 export function syncPaging(
   dataSource: PagingDataSource,
   options: SyncPagingOptions,
diff --git a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/__tests__/virtual_scrolling_data_controller.paging.test.ts b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/__tests__/virtual_scrolling_data_controller.paging.test.ts
new file mode 100644
index 000000000000..74c28fa4b410
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/__tests__/virtual_scrolling_data_controller.paging.test.ts
@@ -0,0 +1,73 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import type { DataGridScrollMode } from '@js/ui/data_grid';
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+} from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+
+declare class ExposedDataController extends DataController {
+  public resolvePaginate(enabled: boolean | undefined): boolean | undefined;
+
+  public requiresTotalCount(): boolean;
+}
+
+const withScrollingMode = async (mode: DataGridScrollMode): Promise<ExposedDataController> => {
+  const { instance } = await createDataGrid({ dataSource: [], scrolling: { mode } });
+
+  return instance.getController('data') as unknown as ExposedDataController;
+};
+
+describe('Virtual scrolling data controller paging', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  describe('resolvePaginate', () => {
+    it.each<{ mode: DataGridScrollMode; enabled: boolean; expected: boolean }>([
+      { mode: 'standard', enabled: true, expected: true },
+      { mode: 'standard', enabled: false, expected: false },
+      { mode: 'virtual', enabled: false, expected: true },
+      { mode: 'infinite', enabled: false, expected: true },
+    ])('should be $expected in $mode mode with enabled=$enabled', async ({
+      mode, enabled, expected,
+    }) => {
+      const dataController = await withScrollingMode(mode);
+
+      expect(dataController.resolvePaginate(enabled)).toBe(expected);
+    });
+
+    it.each<DataGridScrollMode>(['standard', 'virtual', 'infinite'])(
+      'should leave paginate untouched when enabled is undefined in %s mode',
+      async (mode) => {
+        const dataController = await withScrollingMode(mode);
+
+        expect(dataController.resolvePaginate(undefined)).toBeUndefined();
+      },
+    );
+  });
+
+  describe('requiresTotalCount', () => {
+    it.each<{ mode: DataGridScrollMode; expected: boolean }>([
+      { mode: 'standard', expected: true },
+      { mode: 'virtual', expected: true },
+      { mode: 'infinite', expected: false },
+    ])('should be $expected in $mode mode', async ({ mode, expected }) => {
+      const dataController = await withScrollingMode(mode);
+
+      expect(dataController.requiresTotalCount()).toBe(expected);
+    });
+  });
+
+  it('should reset the data controller when the scrolling option changes', async () => {
+    const { instance } = await createDataGrid({ dataSource: [] });
+    const dataController = instance.getController('data');
+    const resetSpy = jest.spyOn(dataController, 'reset');
+
+    instance.option('scrolling.mode', 'virtual');
+
+    expect(resetSpy).toHaveBeenCalled();
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/virtual_scrolling_data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/virtual_scrolling_data_controller.ts
index d85f9fa8473a..5fc7324010ca 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/virtual_scrolling_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/extenders/virtual_scrolling_data_controller.ts
@@ -25,7 +25,7 @@ import type {
   DataChange, PagingOptionName, PagingResult, ProcessedItem, RefreshOptions,
 } from '@ts/grids/grid_core/data_controller/types';
 import type { RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
-import type { ModuleType } from '@ts/grids/grid_core/m_types';
+import type { ModuleType, OptionChanged } from '@ts/grids/grid_core/m_types';
 import type { VirtualItemsCount } from '@ts/grids/grid_core/virtual_data_loader/types';
 
 import gridCoreUtils from '../../m_utils';
@@ -933,6 +933,28 @@ export const virtualScrollingDataControllerExtender = (
     return result;
   }
 
+  protected resolvePaginate(enabled: boolean | undefined): boolean | undefined {
+    if (enabled === undefined) {
+      return undefined;
+    }
+
+    return enabled || isVirtualPaging(this);
+  }
+
+  protected requiresTotalCount(): boolean {
+    return !isInfiniteMode(this);
+  }
+
+  public optionChanged(args: OptionChanged): void {
+    if (args.name === 'scrolling') {
+      args.handled = true;
+      this.reset();
+      return;
+    }
+
+    super.optionChanged(args);
+  }
+
   public isEmpty(): boolean {
     return this.option(LEGACY_SCROLLING_MODE) === false ? !this.items(true).length : super.isEmpty.apply(this, arguments as any);
   }
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/stateStoring.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/stateStoring.tests.js
index e8889da63876..b22518b54933 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/stateStoring.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/stateStoring.tests.js
@@ -34,6 +34,9 @@ QUnit.module('State Storing', {
                     keyExpr: 'id',
                     parentIdExpr: 'parentId',
                     loadingTimeout: null,
+                    paging: {
+                        enabled: true
+                    },
                     scrolling: {
                         mode: 'virtual'
                     }

From ed2e328daee40df04895ac04ab93f45215828349 Mon Sep 17 00:00:00 2001
From: Alex Lavrov <36633600+alexslavr@users.noreply.github.com>
Date: Thu, 10 Sep 2026 11:57:55 +0000
Subject: [PATCH 42/45] CI: Extend on-demand runners usage (#35141)

---
 .github/workflows/qunit_tests.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/qunit_tests.yml b/.github/workflows/qunit_tests.yml
index b019e242b351..a9aa5e76a696 100644
--- a/.github/workflows/qunit_tests.yml
+++ b/.github/workflows/qunit_tests.yml
@@ -127,7 +127,7 @@ jobs:
 
   qunit-tests:
     needs: build
-    runs-on: devextreme-shr2
+    runs-on: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || 'devextreme-shr2' }}
     name: Constel ${{ matrix.CONSTEL }}${{ matrix.TIMEZONE != '' && format('-{0}', matrix.TIMEZONE) || '' }}${{ matrix.CSP == 'false' && '-no-csp' || '' }}
     timeout-minutes: 25
     strategy:

From bdc81f414b4c21798d9a69c9e6227c9e3f792cc9 Mon Sep 17 00:00:00 2001
From: Tom <22076961+artem-kurchenko@users.noreply.github.com>
Date: Thu, 10 Sep 2026 12:03:56 +0000
Subject: [PATCH 43/45] HtmlEditor - AI Text Editing demo: fix typo in Angular
 import path (#35129)

---
 .../Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts
index f04866495dcc..7c99ac1335d9 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { type DxHtmlEditorTypes } from 'devextreme-angular/ui/html_editor';
+import { type DxHtmlEditorTypes } from 'devextreme-angular/ui/html-editor';
 
 const extractKeywordsPrompt: DxHtmlEditorTypes.AICustomCommand['prompt'] = () =>
   'Extract a list of keywords from the text and return it as a comma-separated string';

From 92883d858dc3d3b3f2b560956cd022ecf93cbad5 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <251575087+bit-byte0@users.noreply.github.com>
Date: Thu, 10 Sep 2026 12:32:11 +0000
Subject: [PATCH 44/45] Grids - DataController: Extract getRowIndicesForExpand
 into master detail (#35137)

---
 .../extenders/adaptivity_data_controller.ts   |  7 ++-
 .../data_controller/data_controller.ts        | 12 -----
 .../get_row_indices_for_expand.test.ts        | 47 +++++++++++++++++++
 .../master_detail/m_master_detail.ts          | 11 ++++-
 4 files changed, 61 insertions(+), 16 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/grids/grid_core/master_detail/__tests__/get_row_indices_for_expand.test.ts

diff --git a/packages/devextreme/js/__internal/grids/grid_core/adaptivity/extenders/adaptivity_data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/adaptivity/extenders/adaptivity_data_controller.ts
index ed851fd89be5..67486143bdda 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/adaptivity/extenders/adaptivity_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/adaptivity/extenders/adaptivity_data_controller.ts
@@ -4,6 +4,7 @@ import type { DataChange, ProcessedItem } from '@ts/grids/grid_core/data_control
 import type { RawItemData } from '@ts/grids/grid_core/data_source_adapter/types';
 import type { ModuleType, RowKey } from '@ts/grids/grid_core/m_types';
 import gridCoreUtils from '@ts/grids/grid_core/m_utils';
+import type { MasterDetailDataControllerExtension } from '@ts/grids/grid_core/master_detail/m_master_detail';
 
 import {
   ADAPTIVE_ROW_TYPE,
@@ -15,8 +16,10 @@ import type { AdaptiveColumnsController } from '../m_adaptivity';
 import type { AdaptivityDataController } from '../types';
 import { getAdaptiveDetailRowIndex, resolveAdaptiveDetailRowTarget } from '../utils';
 
+type AdaptivityDataControllerBase = DataController & MasterDetailDataControllerExtension;
+
 export const adaptivityDataControllerExtender = (
-  Base: ModuleType<DataController>,
+  Base: ModuleType<AdaptivityDataControllerBase>,
 ): ModuleType<AdaptivityDataController> => class AdaptivityDataControllerExtender extends Base {
   private adaptiveExpandedKey?: RowKey;
 
@@ -59,7 +62,7 @@ export const adaptivityDataControllerExtender = (
     return processedItems;
   }
 
-  protected getRowIndicesForExpand(key: RowKey): number[] {
+  public override getRowIndicesForExpand(key: RowKey): number[] {
     const rowIndices = super.getRowIndicesForExpand(key);
 
     if (this.adaptiveColumnsController.isAdaptiveDetailRowExpanded(key)) {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
index c6177c211930..4991d4ff46d7 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts
@@ -160,18 +160,6 @@ export class DataController extends modules.Controller {
     this.resetDataSource();
   }
 
-  /**
-   * TODO: Define this method only in masterDetail.
-   * Remove the override from adaptive behavior
-   * and move the implementation to masterDetail.
-   *
-   * @extended: adaptivity, master_detail
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected getRowIndicesForExpand(key: RowKey): number[] {
-    return [];
-  }
-
   /**
    * @extended: virtual_scrolling
    */
diff --git a/packages/devextreme/js/__internal/grids/grid_core/master_detail/__tests__/get_row_indices_for_expand.test.ts b/packages/devextreme/js/__internal/grids/grid_core/master_detail/__tests__/get_row_indices_for_expand.test.ts
new file mode 100644
index 000000000000..d54dad4f1b78
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/grid_core/master_detail/__tests__/get_row_indices_for_expand.test.ts
@@ -0,0 +1,47 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+import {
+  afterTest, beforeTest, createDataGrid, flushAsync,
+} from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
+import type { MasterDetailDataControllerExtension } from '@ts/grids/grid_core/master_detail/m_master_detail';
+import {
+  afterTest as afterTreeListTest,
+  beforeTest as beforeTreeListTest,
+  createTreeList,
+} from '@ts/grids/tree_list/__tests__/__mock__/helpers/utils';
+
+type MasterDetailDataController = DataController & MasterDetailDataControllerExtension;
+
+const DATA = [{ id: 1 }, { id: 2 }, { id: 3 }];
+
+describe('DataController getRowIndicesForExpand', () => {
+  describe('DataGrid', () => {
+    beforeEach(beforeTest);
+    afterEach(afterTest);
+
+    it('should reach master_detail through the adaptivity chain', async () => {
+      const { instance } = await createDataGrid({ dataSource: DATA });
+      await flushAsync();
+      const dataController = instance.getController('data') as MasterDetailDataController;
+
+      expect(dataController.getRowIndicesForExpand(1)).toEqual([0, 1]);
+      expect(dataController.getRowIndicesForExpand(3)).toEqual([2, 3]);
+    });
+  });
+
+  describe('TreeList', () => {
+    beforeEach(beforeTreeListTest);
+    afterEach(afterTreeListTest);
+
+    it('should reach master_detail through the adaptivity chain', async () => {
+      const { instance } = await createTreeList({ dataSource: DATA });
+      await flushAsync();
+      const dataController = instance.getController('data') as MasterDetailDataController;
+
+      expect(dataController.getRowIndicesForExpand(1)).toEqual([0, 1]);
+      expect(dataController.getRowIndicesForExpand(3)).toEqual([2, 3]);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts b/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts
index 2ab0f0fdebca..2be2bbe8aad4 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts
@@ -44,7 +44,14 @@ const initMasterDetail = function (that) {
   that._isExpandAll = that.option('masterDetail.autoExpandAll');
 };
 
-export const dataMasterDetailExtenderMixin = (Base: ModuleType<DataController>) => class DataMasterDetailExtender extends Base {
+export interface MasterDetailDataControllerExtension {
+  // eslint-disable-next-line @typescript-eslint/method-signature-style
+  getRowIndicesForExpand(key: RowKey): number[];
+}
+
+export const dataMasterDetailExtenderMixin = (
+  Base: ModuleType<DataController>,
+): ModuleType<DataController & MasterDetailDataControllerExtension> => class DataMasterDetailExtender extends Base {
   private _isExpandAll: any;
 
   private _expandedItems: any;
@@ -98,7 +105,7 @@ export const dataMasterDetailExtenderMixin = (Base: ModuleType<DataController>)
     return !!(that._isExpandAll ^ (expandIndex >= 0 && that._expandedItems[expandIndex].visible));
   }
 
-  protected getRowIndicesForExpand(key: RowKey): number[] {
+  public getRowIndicesForExpand(key: RowKey): number[] {
     const rowIndex = this.getRowIndexByKey(key);
 
     return [rowIndex, rowIndex + 1];

From 2045c339183753e568dd6230d1b5bf5b93ef3945 Mon Sep 17 00:00:00 2001
From: Andrey Vorobev <738482+vorobey@users.noreply.github.com>
Date: Thu, 10 Sep 2026 13:12:45 +0000
Subject: [PATCH 45/45] chore: partial revert for demo-render-signal origins
 (#35124)

---
 apps/demos/README.md                          | 42 -------------
 .../server/demo-render-signal.runtime.js      |  3 +-
 .../server/demo-render-signal.runtime.test.js | 59 ++++++++++++-------
 3 files changed, 40 insertions(+), 64 deletions(-)

diff --git a/apps/demos/README.md b/apps/demos/README.md
index c307e742ac9f..07b8c7706398 100644
--- a/apps/demos/README.md
+++ b/apps/demos/README.md
@@ -28,48 +28,6 @@ You can pass a port as an extra argument. That is useful when you need to switch
 
 Angular, React, and Vue demos are bundled on demand when you open a page. jQuery demos load `dx.all.js` from `devextreme-dist`.
 
-### Demo render signal
-
-Angular, React, and Vue demos are not bundled from their own entry point directly. `utils/server/demo-render-signal.js` generates a shim that becomes the bundle's entry point; the shim waits for `themes.initialized()` from `devextreme/ui/themes`, then imports the demo's entry (`index.tsx` / `index.ts` / `app/app.component.ts`), so nothing mounts before the theme CSS is applied. 
-
-Once the demo has rendered, the shim posts one message to the embedding page:
-
-```js
-window.parent.postMessage({ type: 'demo-rendered' }, targetOrigin);
-```
-
-#### Allowed embedding origins
-
-`targetOrigin` is never `'*'` — the runtime resolves the embedder's origin and posts only when it is trusted:
-
-1. Not framed, or framed by a page on the demo's own origin — posts to the own origin. This covers local development and the visual tests, so `localhost` needs no configuration.
-2. Framed cross-origin — the origin comes from `location.ancestorOrigins[0]`, falling back to the origin of `document.referrer` (Firefox has no `ancestorOrigins`), and must match the allowlist.
-3. Origin not derivable (for example, an embedder sending `Referrer-Policy: no-referrer` on Firefox) or not on the allowlist — nothing is posted, and the demo logs a warning to the console.
-
-The allowlist defaults to the sandboxes that embed the demos:
-
-| Entry | Covers |
-| --- | --- |
-| `*.devexpress.com` | `js.devexpress.com`, `js-stage.devexpress.com`, `az-jsserver.corp.devexpress.com` |
-| `js.devexpress.devx` | the internal dev host |
-| `localhost` | the local site on any port, when it frames demos served from another port |
-
-An entry is `[<scheme>://]<host>[:<port>]`, and an omitted part matches anything:
-
-- **Host** — either an exact hostname or a `*.<suffix>` subdomain wildcard. The wildcard requires a dot before the suffix, so `*.devexpress.com` accepts `js.devexpress.com` and `az-jsserver.corp.devexpress.com` but rejects the `devexpress.com` apex and `evil-devexpress.com`.
-- **Scheme** — omit it to accept both HTTP and HTTPS; write `https://js.devexpress.com` to accept only HTTPS.
-- **Port** — omit it to accept any port; write `localhost:44332` to accept only that one. A pinned port must match the origin's explicit port, so `:443` will not match `https://host`.
-
-Anything that is not a bare origin — a trailing slash or a path, for example — never matches and is silently ignored.
-
-Override the list at build time with a comma-separated `DEMO_PARENT_ORIGINS`:
-
-```
-DEMO_PARENT_ORIGINS='https://js.devexpress.com,https://staging.example:8443' node utils/server/csp-bundle.js --framework=React
-```
-
-The list is baked into every demo bundle, so adding a sandbox origin means rebuilding the demos.
-
 ### Before Commiting Changes
 
 Auto-fix lint errors:
diff --git a/apps/demos/utils/server/demo-render-signal.runtime.js b/apps/demos/utils/server/demo-render-signal.runtime.js
index cb843746e4e7..4fc043e37a52 100644
--- a/apps/demos/utils/server/demo-render-signal.runtime.js
+++ b/apps/demos/utils/server/demo-render-signal.runtime.js
@@ -6,9 +6,8 @@ export const ROOT_SELECTOR = '#app, demo-app';
 export const RENDER_TIMEOUT_MS = 10000;
 
 export const DEFAULT_ALLOWED_ORIGINS = [
-  '*.devexpress.com',
-  'js.devexpress.devx',
   'localhost',
+  'https://js.devexpress.com',
 ];
 
 const PATTERN = /^(?:([a-z][a-z0-9+.-]*):\/\/)?([^/:]+)(?::(\d+))?$/i;
diff --git a/apps/demos/utils/tests/server/demo-render-signal.runtime.test.js b/apps/demos/utils/tests/server/demo-render-signal.runtime.test.js
index 1ee30a1a1e42..e2f94564b2eb 100644
--- a/apps/demos/utils/tests/server/demo-render-signal.runtime.test.js
+++ b/apps/demos/utils/tests/server/demo-render-signal.runtime.test.js
@@ -1,5 +1,6 @@
-const OWN_ORIGIN = 'http://localhost:8080';
-const ALLOWED_PARENT = 'https://js.devexpress.com';
+const OWN_ORIGIN = 'https://demos.test';
+const ALLOWED_PARENT_HOST = 'js.devexpress.com';
+const ALLOWED_PARENT = `https://${ALLOWED_PARENT_HOST}`;
 
 let messages;
 let root;
@@ -107,7 +108,7 @@ describe('signal', () => {
 
     expect(messages).toHaveLength(0);
     expect(warnings).toHaveLength(1);
-    expect(warnings[0]).toContain('*.devexpress.com');
+    expect(warnings[0]).toContain(ALLOWED_PARENT_HOST);
   });
 
   test('gives up for good after a dropped message', () => {
@@ -130,12 +131,9 @@ describe('resolveTargetOrigin', () => {
   });
 
   test.each([
-    'https://az-jsserver.corp.devexpress.com',
-    'https://js-stage.devexpress.com',
     'https://js.devexpress.com',
-    'https://js.devexpress.devx',
-    'http://localhost:44332',
     'http://localhost:8080',
+    'http://localhost:3000',
   ])('allows the %s sandbox', (origin) => {
     embedIn(origin);
     const { resolveTargetOrigin } = loadRuntime();
@@ -145,15 +143,16 @@ describe('resolveTargetOrigin', () => {
 
   test('allows any scheme for an entry that omits one', () => {
     embedIn('http://js.devexpress.com');
-    const { resolveTargetOrigin } = loadRuntime();
+    const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
+
+    setAllowedOrigins(['js.devexpress.com']);
 
     expect(resolveTargetOrigin()).toBe('http://js.devexpress.com');
   });
 
   test.each([
-    ['the apex domain, which no sandbox uses', 'https://devexpress.com'],
-    ['a host that only ends with the wildcard suffix', 'https://evil-devexpress.com'],
-    ['a host shorter than the wildcard suffix', 'https://dx.com'],
+    ['the apex of an allowed host', 'https://devexpress.com'],
+    ['a host that merely ends with an allowed one', 'https://evil-js.devexpress.com'],
     ['a host that merely starts with an allowed one', 'https://localhost.evil.example'],
     ['an opaque origin', 'null'],
   ])('rejects %s', (_, origin) => {
@@ -176,18 +175,40 @@ describe('resolveTargetOrigin', () => {
     embedIn('http://localhost:9999');
     const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
 
-    setAllowedOrigins(['localhost:44332']);
+    setAllowedOrigins(['localhost:8080']);
 
     expect(resolveTargetOrigin()).toBeNull();
   });
 
   test('matches a pinned port', () => {
-    embedIn('http://localhost:44332');
+    embedIn('http://localhost:8080');
+    const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
+
+    setAllowedOrigins(['http://localhost:8080']);
+
+    expect(resolveTargetOrigin()).toBe('http://localhost:8080');
+  });
+
+  test('allows a subdomain of a wildcard entry', () => {
+    embedIn('https://demos.example.com');
+    const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
+
+    setAllowedOrigins(['*.example.com']);
+
+    expect(resolveTargetOrigin()).toBe('https://demos.example.com');
+  });
+
+  test.each([
+    ['the apex domain', 'https://example.com'],
+    ['a host that only ends with the wildcard suffix', 'https://evil-example.com'],
+    ['a host shorter than the wildcard suffix', 'https://ex.com'],
+  ])('rejects %s for a wildcard entry', (_, origin) => {
+    embedIn(origin);
     const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
 
-    setAllowedOrigins(['http://localhost:44332']);
+    setAllowedOrigins(['*.example.com']);
 
-    expect(resolveTargetOrigin()).toBe('http://localhost:44332');
+    expect(resolveTargetOrigin()).toBeNull();
   });
 
   test('ignores an entry that is not a bare origin', () => {
@@ -200,11 +221,10 @@ describe('resolveTargetOrigin', () => {
   });
 
   test('allows an embedder on the demo own origin, allowlisted or not', () => {
-    global.window.location.origin = 'https://unlisted.example';
-    embedIn('https://unlisted.example');
+    embedIn(OWN_ORIGIN);
     const { resolveTargetOrigin } = loadRuntime();
 
-    expect(resolveTargetOrigin()).toBe('https://unlisted.example');
+    expect(resolveTargetOrigin()).toBe(OWN_ORIGIN);
   });
 
   test('targets the own origin when the demo is not framed', () => {
@@ -258,13 +278,12 @@ describe('setAllowedOrigins', () => {
   });
 
   test('keeps the default allowlist when the build injects nothing', () => {
-    const { setAllowedOrigins, resolveTargetOrigin, DEFAULT_ALLOWED_ORIGINS } = loadRuntime();
+    const { setAllowedOrigins, resolveTargetOrigin } = loadRuntime();
 
     setAllowedOrigins(null);
     setAllowedOrigins([]);
 
     expect(resolveTargetOrigin()).toBe(ALLOWED_PARENT);
-    expect(DEFAULT_ALLOWED_ORIGINS).toContain('*.devexpress.com');
   });
 });