devextreme-themebuilder 25.2.8-build-26135-2002 → 26.1.2-beta

package/data/metadata/dx-theme-builder-metadata.js

@@ -3064,11 +3064,6 @@ exports.metadata = {
             'Name': '80. Selected tab icon color',
             'Type': 'color'
         },
-        {
-            'Key': '$tabs-tab-icon-disabled-color',
-            'Name': '90. Disabled tab icon color',
-            'Type': 'color'
-        },
         {
             'Key': '$tabs-hovered-tab-bg-color',
             'Name': '100. Hovered tab background color',
@@ -3084,6 +3079,11 @@ exports.metadata = {
             'Name': '120. Active tab background color',
             'Type': 'color'
         },
+        {
+            'Key': '$tabs-tab-icon-disabled-color',
+            'Name': '90. Disabled tab icon color',
+            'Type': 'color'
+        },
         {
             'Key': '$tagbox-tag-color',
             'Name': '10. Tag text color',
@@ -3099,11 +3099,6 @@ exports.metadata = {
             'Name': '30. Tag active text color',
             'Type': 'color'
         },
-        {
-            'Key': '$tagbox-tag-button-remove-bg',
-            'Name': '40. Tag close button color',
-            'Type': 'color'
-        },
         {
             'Key': '$textbox-search-icon-color',
             'Name': '80. Search icon color',
@@ -4965,7 +4960,7 @@ exports.metadata = {
         }
     ]
 };
-exports.version = '25.2.8-build-26135-2002';
+exports.version = '26.1.2-beta';
 exports.browsersList = [
     'last 2 Chrome versions',
     'last 2 Firefox versions',
@@ -5070,6 +5065,10 @@ exports.dependencies = {
         'loadpanel',
         'scrollview'
     ],
+    'speechtotext': [
+        'validation',
+        'button'
+    ],
     'progressbar': [
         'validation'
     ],
@@ -5081,8 +5080,10 @@ exports.dependencies = {
         'loadpanel',
         'scrollview',
         'toolbar',
+        'speechtotext',
         'progressbar',
-        'textbox'
+        'textbox',
+        'buttongroup'
     ],
     'selectbox': [
         'validation',
@@ -5271,10 +5272,6 @@ exports.dependencies = {
         'tooltip',
         'slider'
     ],
-    'speechtotext': [
-        'validation',
-        'button'
-    ],
     'speeddialaction': [],
     'stepper': [],
     'splitter': [],
@@ -5347,7 +5344,9 @@ exports.dependencies = {
         'menu',
         'filterbuilder',
         'sortable',
-        'toast'
+        'toast',
+        'speechtotext',
+        'chat'
     ],
     'treelist': [
         'loadindicator',
@@ -5462,6 +5461,8 @@ exports.dependencies = {
         'filterbuilder',
         'sortable',
         'toast',
+        'speechtotext',
+        'chat',
         'datagrid',
         'drawer'
     ],
@@ -5524,6 +5525,8 @@ exports.dependencies = {
         'filterbuilder',
         'sortable',
         'toast',
+        'speechtotext',
+        'chat',
         'treelist'
     ]
 };

package/data/scss/widgets/base/_htmlEditor.scss

@@ -1,4 +1,6 @@
+@use "sass:list";
 @use "sass:math";
+@use "sass:selector";
 
 // adduse
 
@@ -60,7 +62,7 @@ $transparent-border: 1px solid transparent;
       counter-increment: list-#{$counter};
 
       &::before {
-        content: counter(list-#{$counter}, nth($list-style, ($counter % 3) + 1)) ". ";
+        content: counter(list-#{$counter}, list.nth($list-style, ($counter % 3) + 1)) ". ";
       }
     }
 
@@ -253,7 +255,7 @@ $transparent-border: 1px solid transparent;
     counter-increment: list-0;
 
     &::before {
-      content: counter(list-0, nth($list-style, 1)) ". ";
+      content: counter(list-0, list.nth($list-style, 1)) ". ";
     }
   }
 
@@ -445,7 +447,7 @@ $transparent-border: 1px solid transparent;
     height: $resize-handle-size;
     border-radius: 0;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       width: $touch-resize-handle-size;
       height: $touch-resize-handle-size;
     }
@@ -455,7 +457,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-corner-bottom-right {
     right: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       right: -$half-touch-resize-handle-size;
     }
   }
@@ -464,7 +466,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-corner-bottom-left {
     left: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       left: -$half-touch-resize-handle-size;
     }
   }
@@ -473,7 +475,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-corner-top-left {
     top: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       top: -$half-touch-resize-handle-size;
     }
   }
@@ -482,7 +484,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-corner-bottom-left {
     bottom: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       bottom: -$half-touch-resize-handle-size;
     }
   }
@@ -498,7 +500,7 @@ $transparent-border: 1px solid transparent;
       height: $resize-handle-size;
       border: 1px solid white;
 
-      @at-root #{selector-append(".dx-touch-device", &)} {
+      @at-root #{selector.append(".dx-touch-device", &)} {
         width: $touch-resize-handle-size;
         height: $touch-resize-handle-size;
       }
@@ -510,7 +512,7 @@ $transparent-border: 1px solid transparent;
     &::after {
       top: calc(50% - #{$half-resize-handle-size});
 
-      @at-root #{selector-append(".dx-touch-device", &)} {
+      @at-root #{selector.append(".dx-touch-device", &)} {
         top: calc(50% - #{$half-touch-resize-handle-size});
       }
     }
@@ -521,7 +523,7 @@ $transparent-border: 1px solid transparent;
     &::after {
       left: calc(50% - #{$half-resize-handle-size});
 
-      @at-root #{selector-append(".dx-touch-device", &)} {
+      @at-root #{selector.append(".dx-touch-device", &)} {
         left: calc(50% - #{$half-touch-resize-handle-size});
       }
     }
@@ -530,7 +532,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-right::after {
     right: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       right: -$half-touch-resize-handle-size;
     }
   }
@@ -538,7 +540,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-left::after {
     left: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       left: -$half-touch-resize-handle-size;
     }
   }
@@ -546,7 +548,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-top::after {
     top: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       top: -$half-touch-resize-handle-size;
     }
   }
@@ -554,7 +556,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-bottom::after {
     bottom: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       bottom: -$half-touch-resize-handle-size;
     }
   }

package/data/scss/widgets/base/_icon_fonts.scss

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:map";
+@use "sass:selector";
 
 .dx-icon-plus,
 .dx-icon-overflow,
@@ -194,7 +195,11 @@
 .dx-icon-checkmarkcirclefilled,
 .dx-icon-botoutline,
 .dx-icon-botfilled,
-.dx-icon-copyfilled {
+.dx-icon-copyfilled,
+.dx-icon-gridkanban,
+.dx-icon-chatdismiss,
+.dx-icon-listbartreeoffset,
+.dx-icon-clearhistory {
   background-position: 0 0;
   background-repeat: no-repeat;
 }
@@ -210,7 +215,7 @@
 @mixin dx-icon-sizing($icon-size, $container-size: $icon-size, $borders-size: 0) {
   $icon-paddings-dirty: $container-size - $icon-size;
   $icon-paddings: $icon-paddings-dirty - $borders-size;
-  $icon-padding: floor(math.div($icon-paddings, 2));
+  $icon-padding: math.floor(math.div($icon-paddings, 2));
 
   // Geometry
   width: $container-size;
@@ -245,7 +250,7 @@
   }
 
   @if $position == relative {
-    @at-root #{selector-append(".dx-rtl", &)},
+    @at-root #{selector.append(".dx-rtl", &)},
     .dx-rtl & {
       &::before {
         left: 0;
@@ -604,6 +609,10 @@ $icons: (
     "botoutline": "\f236",
     "botfilled": "\f237",
     "copyfilled": "\f238",
+    "chatdismiss": "\f239",
+    "gridkanban": "\f240",
+    "listbartreeoffset": "\f241",
+    "clearhistory": "\f242",
 );
 
 // stylelint-enable

package/data/scss/widgets/base/_popup.scss

@@ -1,3 +1,4 @@
+@use "sass:selector";
 @use "./mixins" as *;
 
 // adduse
@@ -56,7 +57,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  @at-root #{selector-append(".dx-overlay-wrapper .dx-overlay-content", &)} {
+  @at-root #{selector.append(".dx-overlay-wrapper .dx-overlay-content", &)} {
     > .dx-popup-title,
     > .dx-popup-bottom {
       width: 100%;

package/data/scss/widgets/base/_sortable.scss

@@ -38,7 +38,8 @@ $base-accent: null !default;
   position: absolute;
   top: 0;
   left: 0;
-  border: 1px solid $base-accent;
+  border: 1px solid;
+  border-color: $base-accent;
   box-sizing: border-box;
   z-index: $max-integer;
 }

package/data/scss/widgets/base/_speedDialAction.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:color";
 
 .dx-fa-button .dx-overlay-content {
   border-radius: 50%;
@@ -38,7 +39,7 @@
         box-shadow: $speed-dial-action-shadow;
 
         &.dx-state-hover {
-          background-color: darken($button-default-bg, 10%);
+          background-color: color.adjust($button-default-bg, $lightness: -10%, $space: hsl);
 
           .dx-fa-button-icon {
             background-color: transparent;
@@ -46,7 +47,7 @@
         }
 
         &.dx-state-active {
-          background-color: darken($button-default-bg, 15%);
+          background-color: color.adjust($button-default-bg, $lightness: -15%, $space: hsl);
 
           .dx-fa-button-icon {
             background-color: transparent;

package/data/scss/widgets/base/_tagBox.scss

@@ -1,4 +1,5 @@
 @use "./mixins" as *;
+@use "sass:selector";
 
 // adduse
 
@@ -57,7 +58,7 @@
     }
   }
 
-  @at-root #{selector-append(".dx-texteditor-container", &)} {
+  @at-root #{selector.append(".dx-texteditor-container", &)} {
     white-space: normal;
   }
 }

package/data/scss/widgets/base/_ui.scss

@@ -38,6 +38,16 @@
   z-index: $max-integer;
 }
 
+.dx-screen-reader-only {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+}
+
 .dx-animating {
   pointer-events: none;
 }

package/data/scss/widgets/base/calendar/_mixins.scss

@@ -152,7 +152,8 @@
 
     &.dx-calendar-today {
       span {
-        border: 2px solid $base-accent;
+        border: 2px solid;
+        border-color: $base-accent;
       }
     }
 

package/data/scss/widgets/base/cardView/content_view/content/card/_index.scss

@@ -7,7 +7,8 @@
   width: 100%;
   min-width: var(--dx-cardview-card-min-width, $cardview-card-min-width);
   max-width: var(--dx-cardview-card-max-width);
-  border: $cardview-card-border-width solid $cardview-card-border-color;
+  border: $cardview-card-border-width solid;
+  border-color: $cardview-card-border-color;
   border-radius: $cardview-card-border-radius;
   background-color: $cardview-card-bg-color;
   color: $cardview-card-text-color;
@@ -18,7 +19,8 @@
   }
 
   &:focus-visible {
-    outline: 2px $cardview-card--focused-outline-color solid;
+    outline: 2px solid;
+    outline-color: $cardview-card--focused-outline-color;
     outline-offset: -2px;
   }
 }

package/data/scss/widgets/base/cardView/content_view/content/card/content/_index.scss

@@ -7,7 +7,8 @@
   grid-template-columns: auto 1fr;
   row-gap: $cardview-card__content-row-gap;
   width: 100%;
-  border-top: $cardview-card-border-width solid $cardview-card-divider-color;
+  border-top: $cardview-card-border-width solid;
+  border-top-color: $cardview-card-divider-color;
 
   // NOTE: Override default fonts only in "material-compact"
   font-size: $cardview-card__content-font-size;

package/data/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss

@@ -5,7 +5,8 @@
   overflow: hidden;
   display: flex;
   justify-content: center;
-  border-top: $cardview-card-border-width solid $cardview-card-divider-color;
+  border-top: $cardview-card-border-width solid;
+  border-top-color: $cardview-card-divider-color;
   max-height: var(--dx-cardview-card-cover-max-height);
   aspect-ratio: var(--dx-cardview-card-cover-ratio);
   width: 100%;

package/data/scss/widgets/base/cardView/header_panel/_index.scss

@@ -76,7 +76,8 @@ $sortable-side-offset: 6px;
 }
 
 .dx-cardview-header-item-sort-indicator {
-  border: $cardview-header-item__sort-indicator__border-size solid $cardview-header-item__sort-indicator__border-color;
+  border: $cardview-header-item__sort-indicator__border-size solid;
+  border-color: $cardview-header-item__sort-indicator__border-color;
   border-radius: $cardview-header-item__sort-indicator__border-radius;
 }
 

package/data/scss/widgets/base/cardView/header_panel/item/_index.scss

@@ -52,7 +52,8 @@
   }
 
   &:focus-visible {
-    outline: 2px $cardview-header-panel__item--focused-outline-color solid;
+    outline: 2px solid;
+    outline-color: $cardview-header-panel__item--focused-outline-color;
     outline-offset: -2px;
   }
 

package/data/scss/widgets/base/chat/_index.scss

@@ -9,6 +9,7 @@
 @use "layout/chat-confirmationpopup" as *;
 @use "layout/chat-messagegroup" as *;
 @use "layout/chat-messagelist" as *;
+@use "layout/chat-suggestions" as *;
 @use "layout/chat-typingindicator" as *;
 
 // adduse

package/data/scss/widgets/base/chat/_mixins.scss

@@ -1,11 +1,12 @@
-@import 'layout/chat/mixins';
-@import 'layout/chat-avatar/mixins';
-@import 'layout/chat-fileview/mixins';
-@import 'layout/chat-alertlist/mixins';
-@import 'layout/chat-messagebox/mixins';
-@import 'layout/chat-messagebox-editing-preview/mixins';
-@import 'layout/chat-messagebubble/mixins';
-@import 'layout/chat-messagegroup/mixins';
-@import 'layout/chat-messagelist/mixins';
-@import 'layout/chat-typingindicator/mixins';
-@import 'layout/chat-confirmationpopup/mixins';
+@forward 'layout/chat/mixins';
+@forward 'layout/chat-avatar/mixins';
+@forward 'layout/chat-fileview/mixins';
+@forward 'layout/chat-alertlist/mixins';
+@forward 'layout/chat-messagebox/mixins';
+@forward 'layout/chat-messagebox-editing-preview/mixins';
+@forward 'layout/chat-messagebubble/mixins';
+@forward 'layout/chat-messagegroup/mixins';
+@forward 'layout/chat-messagelist/mixins';
+@forward 'layout/chat-suggestions/mixins';
+@forward 'layout/chat-typingindicator/mixins';
+@forward 'layout/chat-confirmationpopup/mixins';

package/data/scss/widgets/base/chat/layout/chat/_mixins.scss

@@ -5,7 +5,8 @@
 ) {
   .dx-chat {
     background-color: $background-color;
-    border: 1px solid $border-color;
+    border: 1px solid;
+    border-color: $border-color;
     border-radius: $border-radius;
   }
 }

package/data/scss/widgets/base/chat/layout/chat-messagelist/_index.scss

@@ -47,6 +47,10 @@
 }
 
 .dx-chat-messagelist-empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
   .dx-scrollview-content {
     display: flex;
     height: 100%;

package/data/scss/widgets/base/chat/layout/chat-suggestions/_index.scss

@@ -0,0 +1,5 @@
+.dx-chat-suggestions {
+  .dx-buttongroup-wrapper {
+    flex-wrap: wrap;
+  }
+}

package/data/scss/widgets/base/chat/layout/chat-suggestions/_mixins.scss

@@ -0,0 +1,43 @@
+@mixin chat-suggestions(
+  $padding,
+  $border-radius,
+  $border-width,
+  $max-width,
+  $gap,
+  $box-shadow,
+) {
+  .dx-chat-suggestions {
+    padding: $padding;
+
+    &:empty {
+      padding: 0;
+    }
+
+    .dx-button {
+      max-width: $max-width;
+      box-shadow: $box-shadow;
+    }
+
+    &.dx-buttongroup {
+      &.dx-buttongroup-mode-contained {
+        border-radius: 0;
+        box-shadow: unset;
+      }
+
+      .dx-buttongroup-wrapper {
+        gap: $gap;
+      }
+    }
+
+    .dx-buttongroup-item {
+      &.dx-button-mode-outlined,
+      &.dx-button-mode-contained {
+        border-inline-start-width: $border-width;
+
+        &.dx-button {
+          border-radius: $border-radius;
+        }
+      }
+    }
+  }
+}

package/data/scss/widgets/base/colorView/_mixins.scss

@@ -5,12 +5,14 @@
   }
 
   .dx-colorview-hue-scale-handle {
-    border: 1px solid $handle-border-color;
+    border: 1px solid;
+    border-color: $handle-border-color;
     box-shadow: inset -5px 0 0 3px $handle-color, inset 5px 0 0 3px $handle-color, inset -6px 0 1px 4px $handle-border-color, inset 6px 0 1px 4px $handle-border-color;
   }
 
   .dx-colorview-alpha-channel-handle {
-    border: 1px solid $handle-border-color;
+    border: 1px solid;
+    border-color: $handle-border-color;
     box-shadow: inset 0 -5px 0 3px $handle-color, inset 0 5px 0 3px $handle-color, inset 0 -6px 1px 4px $handle-border-color, inset 0 6px 1px 4px $handle-border-color;
   }
 }

package/data/scss/widgets/base/dataGrid/_index.scss

@@ -29,24 +29,31 @@ $datagrid-text-stub-background-image-path: null !default;
   > .dx-datagrid-rowsview,
   > .dx-datagrid-total-footer {
     border-left: $datagrid-border;
+    border-left-color: $datagrid-border-color;
     border-right: $datagrid-border;
+    border-right-color: $datagrid-border-color;
   }
 
   > .dx-datagrid-rowsview,
   > .dx-datagrid-total-footer {
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
   }
 
   > .dx-datagrid-headers,
   > .dx-datagrid-filter-panel {
     border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
   }
 
   > .dx-datagrid-filter-panel {
     border-top-width: 0;
     border-left: $datagrid-border;
+    border-left-color: $datagrid-border-color;
     border-right: $datagrid-border;
+    border-right-color: $datagrid-border-color;
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
   }
 }
 
@@ -104,7 +111,8 @@ $datagrid-text-stub-background-image-path: null !default;
     &.dx-state-focused .dx-datagrid-group-panel {
       .dx-group-panel-item:focus,
       .dx-header-filter:focus {
-        outline: 2px solid $datagrid-focused-border-color;
+        outline: 2px solid;
+        outline-color: $datagrid-focused-border-color;
         outline-offset: -2px;
       }
 
@@ -121,7 +129,8 @@ $datagrid-text-stub-background-image-path: null !default;
 
     &.dx-state-focused .dx-header-row {
       td .dx-header-filter:focus {
-        outline: 2px solid $datagrid-focused-border-color;
+        outline: 2px solid;
+        outline-color: $datagrid-focused-border-color;
         outline-offset: 2px;
       }
     }
@@ -154,7 +163,8 @@ $datagrid-text-stub-background-image-path: null !default;
 
   .dx-datagrid-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
-      outline: 2px solid $datagrid-focused-border-color;
+      outline: 2px solid;
+      outline-color: $datagrid-focused-border-color;
       outline-offset: 2px;
     }
 
@@ -226,6 +236,7 @@ $datagrid-text-stub-background-image-path: null !default;
 .dx-datagrid-filter-panel {
   color: $datagrid-base-color;
   border-top: $datagrid-border;
+  border-top-color: $datagrid-border-color;
 
   .dx-icon-filter,
   .dx-datagrid-filter-panel-text,
@@ -237,7 +248,8 @@ $datagrid-text-stub-background-image-path: null !default;
     .dx-icon-filter:focus,
     .dx-datagrid-filter-panel-text:focus,
     .dx-datagrid-filter-panel-clear-filter:focus {
-      outline: 2px solid $datagrid-focused-border-color;
+      outline: 2px solid;
+      outline-color: $datagrid-focused-border-color;
       outline-offset: 3px;
     }
   }
@@ -318,7 +330,8 @@ $datagrid-text-stub-background-image-path: null !default;
     left: 0;
     bottom: 0;
     right: 0;
-    outline: 2px solid $datagrid-focused-border-color;
+    outline: 2px solid;
+    outline-color: $datagrid-focused-border-color;
     outline-offset: -1px;
     z-index: 4; // should overlap sticky column cells
     pointer-events: none;
@@ -327,5 +340,6 @@ $datagrid-text-stub-background-image-path: null !default;
 }
 
 .dx-command-ai-header-button .dx-button.dx-state-focused {
-  outline: 2px solid $datagrid-focused-border-color;
+  outline: 2px solid;
+  outline-color: $datagrid-focused-border-color;
 }

package/data/scss/widgets/base/dropDownEditor/_index.scss

@@ -1,3 +1,4 @@
+@use "sass:selector";
 @use "../mixins" as *;
 @use "./mixins" as *;
 @use "../textEditor/mixins" as *;
@@ -76,7 +77,7 @@
     white-space: nowrap;
   }
 
-  @at-root #{selector-append(".dx-rtl", &)},
+  @at-root #{selector.append(".dx-rtl", &)},
   .dx-rtl & {
     float: left;
   }