@progress/kendo-theme-fluent 13.0.0-dev.1 → 13.0.0-dev.3

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "13.0.0-dev.1",
+    "version": "13.0.0-dev.3",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-1-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent 1 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "13.0.0-dev.1",
+    "version": "13.0.0-dev.3",
     "previewColors": [
         "#1b1a19",
         "#21201f",

package/lib/swatches/fluent-1.json

@@ -3,7 +3,7 @@
     "name": "Fluent 1",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "13.0.0-dev.1",
+    "version": "13.0.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#faf9f8",

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "13.0.0-dev.1",
+    "version": "13.0.0-dev.3",
     "previewColors": [
         "#1F1F1F",
         "#292929",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "13.0.0-dev.1",
+    "version": "13.0.0-dev.3",
     "previewColors": [
         "#fafafa",
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "13.0.0-dev.1",
+  "version": "13.0.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -55,12 +55,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.8.0",
-    "@progress/kendo-theme-core": "13.0.0-dev.1",
-    "@progress/kendo-theme-utils": "13.0.0-dev.1"
+    "@progress/kendo-theme-core": "13.0.0-dev.3",
+    "@progress/kendo-theme-utils": "13.0.0-dev.3"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "c1e883bc20fcf4b83398d27c582cd0fcb3e6f71f"
+  "gitHead": "e416202d88c228d1ab3f6f310633e644b141e642"
 }

package/scss/bubble/_variables.scss

@@ -2,13 +2,13 @@
 
 /// The border radius of the Bubble.
 /// @group bubble
-$kendo-bubble-border-radius: k-border-radius(xl) !default;
+$kendo-bubble-border-radius: k-border-radius(xxl) !default;
 /// The small border radius of the Bubble.
 /// @group bubble
 $kendo-bubble-border-radius-sm: k-border-radius(sm) !default;
 /// The vertical padding of the Bubble.
 /// @group bubble
-$kendo-bubble-padding-y: k-spacing(2) !default;
+$kendo-bubble-padding-y: k-spacing(2.5) !default;
 /// The horizontal padding of the Bubble.
 /// @group bubble
 $kendo-bubble-padding-x: k-spacing(3) !default;

package/scss/chat/_index.scss

@@ -12,6 +12,7 @@
 @use "../speech-to-text-button/_index.scss" as *;
 @use "../suggestion/_index.scss" as *;
 @use "../skeleton/_index.scss" as *;
+@use "../prompt-box/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
@@ -33,6 +34,7 @@
         @include kendo-upload--styles();
         @include kendo-dropzone--styles();
         @include kendo-avatar--styles();
+        @include kendo-prompt-box--styles();
         @include kendo-speech-to-text-button--styles();
         @include kendo-chat--layout();
         @include kendo-chat--theme();

package/scss/chat/_layout.scss

@@ -29,14 +29,6 @@
     }
 
     // Message states
-    .k-message:has(.k-selected) {
-
-        .k-message-time,
-        .k-message-status {
-            gap: $kendo-chat-bubble-spacing;
-        }
-    }
-
     .k-chat .k-card-deck {
         margin-inline: calc( #{$kendo-chat-message-list-padding-x} * -1 );
         padding-block-start: $kendo-chat-message-list-padding-y;

package/scss/chat/_theme.scss

@@ -5,27 +5,8 @@
 
 @mixin kendo-chat--theme() {
     @include kendo-chat--theme-base();
-
-    // Bubbles
-    .k-message-group-sender .k-chat-bubble {
-
-        &:focus,
-        &.k-focus {
-            @include focus-indicator( $kendo-chat-alt-bubble-focus-shadow, true, true );
-        }
-
-        &:hover,
-        &.k-hover {
-            @include fill( $bg: $kendo-chat-alt-bubble-hover-bg, $border: $kendo-chat-alt-bubble-hover-border );
-        }
-    }
-
+    
     .k-message-time {
         color: $kendo-chat-timestamp-text;
     }
-
-    .k-message-reference .k-chat-file {
-        background-color: $kendo-chat-file-bg;
-        border-color: $kendo-chat-file-border;
-    }
 }

package/scss/chat/_variables.scss

@@ -6,16 +6,16 @@
 
 /// The horizontal padding of the Chat.
 /// @group chat
-$kendo-chat-padding-x: var( --kendo-chat-padding-x, #{k-spacing(4)} ) !default;
+$kendo-chat-padding-x: var( --kendo-chat-padding-x, #{k-spacing(5)} ) !default;
 /// The vertical padding of the Chat.
 /// @group chat
-$kendo-chat-padding-y: k-spacing(4) !default;
+$kendo-chat-padding-y: var( --kendo-chat-padding-y, #{k-spacing(5)} ) !default;
 /// The minimum width of the Chat.
 /// @group chat
-$kendo-chat-width: 280px !default;
+$kendo-chat-width: var( --kendo-chat-width, 280px ) !default;
 /// The minimum height of the Chat.
 /// @group chat
-$kendo-chat-height: var( --kendo-chat-height, 600px ) !default;
+$kendo-chat-height: var( --kendo-chat-height, 320px ) !default;
 /// The border width of the Chat.
 /// @group chat
 $kendo-chat-border-width: var( --kendo-chat-border-width, 1px ) !default;
@@ -31,24 +31,31 @@ $kendo-chat-line-height: var( --kendo-chat-line-height, var( --kendo-line-height
 
 /// The vertical spacing between the items of the Chat.
 /// @group chat
-$kendo-chat-item-spacing-y: k-spacing(4) !default;
+$kendo-chat-item-spacing-y: var( --kendo-chat-item-spacing-y, #{k-spacing(4)} ) !default;
 
 /// The maximum width of the Chat message.
 /// @group chat
-$kendo-chat-message-max-width: min(75%, 460px) !default;
+$kendo-chat-message-max-width: var( --kendo-chat-message-max-width, min(75%, 460px) ) !default;
 /// The spacing between the items of the Chat message.
 /// @group chat
-$kendo-chat-message-gap: k-spacing(2) !default;
+$kendo-chat-message-gap: var( --kendo-chat-message-gap, #{k-spacing(2)} ) !default;
+
+/// The border radius of sequential Chat messages.
+/// @group chat
+$kendo-sequential-messages-border-radius: var( --kendo-sequential-messages-border-radius, #{k-border-radius(sm)} ) !default;
 
 /// The horizontal padding of the Chat message list.
 /// @group chat
-$kendo-chat-message-list-padding-x: $kendo-chat-padding-x !default;
+$kendo-chat-message-list-padding-x: var( --kendo-chat-message-list-padding-x, #{k-spacing(5)} ) !default;
 /// The vertical padding of the Chat message list.
 /// @group chat
-$kendo-chat-message-list-padding-y: $kendo-chat-padding-y !default;
+$kendo-chat-message-list-padding-y: var( --kendo-chat-message-list-padding-y, #{k-spacing(5)} ) !default;
 /// The spacing of the Chat message list.
 /// @group chat
-$kendo-chat-message-list-spacing: $kendo-chat-item-spacing-y !default;
+$kendo-chat-message-list-spacing: var( --kendo-chat-message-list-spacing, #{k-spacing(4)} ) !default;
+/// The spacing of the Chat message box wrapper.
+/// @group chat
+$kendo-chat-message-box-wrapper-spacing: var( --kendo-chat-message-box-wrapper-spacing, #{k-spacing(4)} ) !default;
 
 /// The minimum size of the Chat message status.
 /// @group chat
@@ -58,7 +65,7 @@ $kendo-chat-status-min-size: var(--kendo-chat-status-min-size, #{k-spacing(1.5)}
 $kendo-chat-status-max-size: var(--kendo-chat-status-max-size, #{k-spacing(8)}) !default;
 /// The spacing between the icon and text in the Chat message status.
 /// @group chat
-$kendo-chat-message-status-gap: k-spacing(1) !default;
+$kendo-chat-message-status-gap: var( --kendo-chat-message-status-gap, #{k-spacing(1)} ) !default;
 
 /// The font size of the Chat timestamp.
 /// @group chat
@@ -68,55 +75,55 @@ $kendo-chat-timestamp-font-size: var( --kendo-chat-timestamp-font-size, var( --k
 $kendo-chat-timestamp-line-height: var( --kendo-chat-timestamp-line-height, var( --kendo-line-height-lg, normal ) ) !default;
 /// The text transform of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-transform: none !default;
+$kendo-chat-timestamp-transform: var( --kendo-chat-timestamp-transform, none ) !default;
 /// The text color of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-text: var( --kendo-chat-timestamp-text, #{k-color(subtle)} ) !default;
 /// The background color of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-bg: transparent !default;
+$kendo-chat-timestamp-bg: var( --kendo-chat-timestamp-bg, transparent ) !default;
 /// The background color of the Chat timestamp separator.
 /// @group chat
-$kendo-chat-timestamp-separator-bg: color-mix(in srgb, k-color(border) 26%, transparent) !default;
+$kendo-chat-timestamp-separator-bg: var( --kendo-chat-timestamp-separator-bg, #{color-mix(in srgb, k-color(border) 26%, transparent)} ) !default;
 /// The spacing between the Chat timestamp and its separator.
 /// @group chat
-$kendo-chat-timestamp-separator-spacing: k-spacing(1) !default;
+$kendo-chat-timestamp-separator-spacing: var( --kendo-chat-timestamp-separator-spacing, #{k-spacing(1)} ) !default;
 
 /// The font size of the Chat message meta text.
 /// @group chat
 $kendo-chat-message-meta-font-size: var( --kendo-chat-message-meta-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line height of the Chat message meta text.
 /// @group chat
-$kendo-chat-message-meta-line-height: var( --kendo-chat-message-meta-line-height, var( --kendo-line-height-lg, normal ) ) !default;
+$kendo-chat-message-meta-line-height: var( --kendo-chat-message-meta-line-height, var( --kendo-line-height-xs, normal ) ) !default;
 
 /// The font size of the Chat author text.
 /// @group chat
 $kendo-chat-author-font-size: var( --kendo-chat-author-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line height of the Chat author text.
 /// @group chat
-$kendo-chat-author-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-chat-author-line-height: var( --kendo-chat-author-line-height, var( --kendo-line-height-xs, normal ) ) !default;
 
 /// The text color of the Chat status.
 /// @group chat
-$kendo-chat-status-text: k-color(subtle) !default;
+$kendo-chat-status-text: var( --kendo-chat-status-text, #{k-color(subtle)} ) !default;
 
 /// The spacing of the Chat bubble message.
 /// @group chat
-$kendo-chat-bubble-spacing: k-spacing(2) !default;
+$kendo-chat-bubble-spacing: var( --kendo-chat-bubble-spacing, #{k-spacing(1)} ) !default;
 
 /// The background color of the Chat Toolbar.
 /// @group chat
-$kendo-chat-toolbar-bg: var( --kendo-chat-toolbar-bg, #{$kendo-toolbar-bg} ) !default;
+$kendo-chat-toolbar-bg: var( --kendo-chat-toolbar-bg, $kendo-toolbar-bg ) !default;
 /// The text color of the Chat Toolbar.
 /// @group chat
-$kendo-chat-toolbar-text: var( --kendo-chat-toolbar-text, #{$kendo-toolbar-text} ) !default;
+$kendo-chat-toolbar-text: var( --kendo-chat-toolbar-text, $kendo-toolbar-text ) !default;
 /// The border color of the Chat Toolbar.
 /// @group chat
 $kendo-chat-toolbar-border: var( --kendo-chat-toolbar-border, inherit ) !default;
 
 /// The background color of the Chat.
 /// @group chat
-$kendo-chat-bg: var( --kendo-chat-bg, #{k-color(surface)} ) !default;
+$kendo-chat-bg: var( --kendo-chat-bg, transparent ) !default;
 /// The text color of the Chat.
 /// @group chat
 $kendo-chat-text: var( --kendo-chat-text, #{k-color(on-app-surface)} ) !default;
@@ -132,124 +139,97 @@ $kendo-chat-alt-bubble-bg: var( --kendo-chat-alt-bubble-bg, #{k-color(primary)}
 $kendo-chat-alt-bubble-text: var( --kendo-chat-alt-bubble-text, #{k-color(surface-alt)} ) !default;
 /// The border color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-border: var( --kendo-chat-alt-bubble-border, #{$kendo-chat-alt-bubble-bg} ) !default;
+$kendo-chat-alt-bubble-border: var( --kendo-chat-alt-bubble-border, $kendo-chat-alt-bubble-bg ) !default;
 /// The shadow of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-shadow: none !default;
+$kendo-chat-alt-bubble-shadow: var( --kendo-chat-alt-bubble-shadow, none ) !default;
 
 /// The background color of the hovered alt Bubble.
 /// @group bubble
-$kendo-chat-alt-bubble-hover-bg: k-color(primary-hover) !default;
+$kendo-chat-alt-bubble-hover-bg: var( --kendo-chat-alt-bubble-hover-bg, #{k-color(primary-hover)} ) !default;
 /// The border color of the hovered alt Bubble.
 /// @group bubble
-$kendo-chat-alt-bubble-hover-border: $kendo-chat-alt-bubble-hover-bg !default;
+$kendo-chat-alt-bubble-hover-border: var( --kendo-chat-alt-bubble-hover-border, $kendo-chat-alt-bubble-hover-bg ) !default;
 /// The background color of the active Bubble.
 /// @group bubble
-$kendo-chat-alt-bubble-active-bg: k-color(primary-active) !default;
+$kendo-chat-alt-bubble-active-bg: var( --kendo-chat-alt-bubble-active-bg, #{k-color(primary-active)} ) !default;
 /// The border color of the active alt Bubble.
 /// @group bubble
-$kendo-chat-alt-bubble-active-border: $kendo-chat-alt-bubble-active-bg !default;
+$kendo-chat-alt-bubble-active-border: var( --kendo-chat-alt-bubble-active-border, $kendo-chat-alt-bubble-active-bg ) !default;
 /// The background color of the focused alt Bubble.
 /// @group bubble
-$kendo-chat-alt-bubble-focus-bg: $kendo-chat-alt-bubble-bg !default;
+$kendo-chat-alt-bubble-focus-bg: var( --kendo-chat-alt-bubble-focus-bg, $kendo-chat-alt-bubble-bg ) !default;
 /// The border color of the focused alt Bubble.
 /// @group bubble
-$kendo-chat-alt-bubble-focus-border: k-color(on-base) !default;
+$kendo-chat-alt-bubble-focus-border: var( --kendo-chat-alt-bubble-focus-border, #{k-color(on-base)} ) !default;
 /// The box shadow of the focused alt Bubble.
 /// @group bubble
-$kendo-chat-alt-bubble-focus-shadow: inset 0 0 0 #{$kendo-chat-border-width} k-color(on-base), inset 0 0 0 calc( #{$kendo-chat-border-width} * 2 ) k-color(surface) !default;
-
-/// The color of the typing indicator dots.
-/// @group chat
-$kendo-chat-typing-indicator-text: k-color(base-on-subtle) !default;
+$kendo-chat-alt-bubble-focus-shadow: var( --kendo-chat-alt-bubble-focus-shadow, inset 0 0 0 #{$kendo-chat-border-width} k-color(on-base), inset 0 0 0 calc( #{$kendo-chat-border-width} * 2 ) k-color(surface) ) !default;
 
-/// The minimum width of a file in the Chat Textarea.
-/// @group chat
-$kendo-chat-file-min-width: var(--kendo-chat-file-min-width, 96px) !default;
-/// The maximum width of a file in the Chat Textarea.
-/// @group chat
-$kendo-chat-file-max-width: var(--kendo-chat-file-max-width, 160px) !default;
-/// The font size of the Chat file name.
+/// The text color of the bubble of the failed Chat message.
 /// @group chat
-$kendo-chat-file-name-font-size: var(--kendo-chat-file-name-font-size, var( --kendo-font-size-sm, inherit )) !default;
-/// The line height of the Chat file name.
+$kendo-chat-failed-bubble-text: var(--kendo-chat-failed-bubble-text, k-color(base-on-subtle)) !default;
+/// The background color of the bubble of the failed Chat message.
 /// @group chat
-$kendo-chat-file-name-line-height: var(--kendo-chat-file-name-line-height, var( --kendo-line-height-lg, normal )) !default;
-/// The font size of the Chat file size.
+$kendo-chat-failed-bubble-bg: var(--kendo-chat-failed-bubble-bg, k-color(error-subtle)) !default;
+/// The border color of the bubble of the failed Chat message.
 /// @group chat
-$kendo-chat-file-size-font-size: var(--kendo-chat-file-size-font-size, var( --kendo-font-size-xs, inherit )) !default;
-/// The line height of the Chat file size.
+$kendo-chat-failed-bubble-border: var(--kendo-chat-failed-bubble-border, k-color(error-emphasis)) !default;
+/// The text color of the failed Chat message content.
 /// @group chat
-$kendo-chat-file-size-line-height: var(--kendo-chat-file-size-line-height, var( --kendo-line-height-xs, normal )) !default;
-/// The horizontal padding of the Chat file.
-/// @group chat
-$kendo-chat-file-padding-x: k-spacing(1) !default;
-/// The vertical padding of the Chat file.
-/// @group chat
-$kendo-chat-file-padding-y: k-spacing(1) !default;
-/// The spacing between the elements of the Chat file.
-/// @group chat
-$kendo-chat-file-gap: k-spacing(1) !default;
+$kendo-chat-failed-content-color: var(--kendo-chat-failed-content-color, k-color(error-on-surface)) !default;
 
-/// The border width of the Chat file.
-/// @group chat
-$kendo-chat-file-border-width: 1px !default;
-/// The border style of the Chat file.
+/// The background color of the hovered bubble of the failed Chat message.
 /// @group chat
-$kendo-chat-file-border-style: solid !default;
+$kendo-chat-failed-bubble-hover-bg: var( --kendo-chat-failed-bubble-hover-bg, #{k-color(error-subtle-hover)} ) !default;
 
-/// The background color of the Chat file.
+/// The background color of the selected bubble of the failed Chat message.
 /// @group chat
-$kendo-chat-file-bg: color-mix(in srgb, k-color(base-on-subtle) 8%, transparent) !default;
-/// The text color of the Chat file.
-/// @group chat
-$kendo-chat-file-text: k-color(base-on-subtle) !default;
-/// The border color of the Chat file.
-/// @group chat
-$kendo-chat-file-border: $kendo-chat-file-bg !default;
-/// The border-radius of the Chat file.
+$kendo-chat-failed-bubble-selected-bg: var( --kendo-chat-failed-bubble-selected-bg, #{k-color(error-subtle-active)} ) !default;
+
+/// The color of the typing indicator dots.
 /// @group chat
-$kendo-chat-file-border-radius: k-border-radius(md) !default;
+$kendo-chat-typing-indicator-text: var( --kendo-chat-typing-indicator-text, #{k-color(base-on-subtle)} ) !default;
 
 /// The background color of the Chat sender file.
 /// @group chat
-$kendo-chat-sender-file-bg: color-mix(in srgb, k-color(on-primary) 14%, transparent) !default;
+$kendo-chat-sender-file-bg: var( --kendo-chat-sender-file-bg, #{color-mix(in srgb, k-color(on-primary) 14%, transparent)} ) !default;
 /// The text color of the Chat sender file.
 /// @group chat
-$kendo-chat-sender-file-text: k-color(on-primary) !default;
+$kendo-chat-sender-file-text: var( --kendo-chat-sender-file-text, #{k-color(on-primary)} ) !default;
 /// The border color of the Chat sender file.
 /// @group chat
-$kendo-chat-sender-file-border: $kendo-chat-sender-file-bg !default;
+$kendo-chat-sender-file-border: var( --kendo-chat-sender-file-border, $kendo-chat-sender-file-bg ) !default;
 
 /// The border width of the Chat pinned message;
 /// @group chat
-$kendo-chat-message-pinned-border-width: 1px !default;
+$kendo-chat-message-pinned-border-width: var( --kendo-chat-message-pinned-border-width, 1px ) !default;
 /// The border style of the Chat pinned message;
 /// @group chat
-$kendo-chat-message-pinned-border-style: solid !default;
+$kendo-chat-message-pinned-border-style: var( --kendo-chat-message-pinned-border-style, solid ) !default;
 /// The border color of the Chat pinned message;
 /// @group chat
-$kendo-chat-message-pinned-border-color: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-chat-message-pinned-border-color: var( --kendo-chat-message-pinned-border-color, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 /// The horizontal padding of the Chat message reference.
 /// @group chat
-$kendo-chat-message-reference-padding-x: k-spacing(1) !default;
+$kendo-chat-message-reference-padding-x: var( --kendo-chat-message-reference-padding-x, #{k-spacing(1)} ) !default;
 /// The vertical padding of the Chat message reference.
 /// @group chat
-$kendo-chat-message-reference-padding-y: k-spacing(1) !default;
+$kendo-chat-message-reference-padding-y: var( --kendo-chat-message-reference-padding-y, #{k-spacing(1)} ) !default;
 
 /// The background color of the Chat message reference.
 /// @group chat
-$kendo-chat-message-reference-bg: k-color(surface) !default;
+$kendo-chat-message-reference-bg: var( --kendo-chat-message-reference-bg, #{color-mix(in srgb, k-color(surface) 90%, transparent)} ) !default;
 /// The text color of the Chat message reference.
 /// @group chat
-$kendo-chat-message-reference-text: k-color(on-app-surface) !default;
+$kendo-chat-message-reference-text: var( --kendo-chat-message-reference-text, #{k-color(on-app-surface)} ) !default;
 /// The background color of the message reference marker.
 /// @group chat
-$kendo-chat-message-reference-marker-bg: k-color(base-emphasis) !default;
+$kendo-chat-message-reference-marker-bg: var( --kendo-chat-message-reference-marker-bg, #{k-color(base-emphasis)} ) !default;
 /// The background color of the message reference alt marker.
 /// @group chat
-$kendo-chat-message-reference-marker-alt-bg: k-color(primary) !default;
+$kendo-chat-message-reference-marker-alt-bg: var( --kendo-chat-message-reference-marker-alt-bg, #{k-color(primary)} ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/chat/_variables.scss" with (
     $kendo-chat-padding-x: $kendo-chat-padding-x,
@@ -263,9 +243,11 @@ $kendo-chat-message-reference-marker-alt-bg: k-color(primary) !default;
     $kendo-chat-item-spacing-y: $kendo-chat-item-spacing-y,
     $kendo-chat-message-max-width: $kendo-chat-message-max-width,
     $kendo-chat-message-gap: $kendo-chat-message-gap,
+    $kendo-sequential-messages-border-radius: $kendo-sequential-messages-border-radius,
     $kendo-chat-message-list-padding-x: $kendo-chat-message-list-padding-x,
     $kendo-chat-message-list-padding-y: $kendo-chat-message-list-padding-y,
     $kendo-chat-message-list-spacing: $kendo-chat-message-list-spacing,
+    $kendo-chat-message-box-wrapper-spacing: $kendo-chat-message-box-wrapper-spacing,
     $kendo-chat-status-min-size: $kendo-chat-status-min-size,
     $kendo-chat-status-max-size: $kendo-chat-status-max-size,
     $kendo-chat-message-status-gap: $kendo-chat-message-status-gap,
@@ -299,22 +281,13 @@ $kendo-chat-message-reference-marker-alt-bg: k-color(primary) !default;
     $kendo-chat-alt-bubble-focus-bg: $kendo-chat-alt-bubble-focus-bg,
     $kendo-chat-alt-bubble-focus-border: $kendo-chat-alt-bubble-focus-border,
     $kendo-chat-alt-bubble-focus-shadow: $kendo-chat-alt-bubble-focus-shadow,
+    $kendo-chat-failed-bubble-text: $kendo-chat-failed-bubble-text,
+    $kendo-chat-failed-bubble-bg: $kendo-chat-failed-bubble-bg,
+    $kendo-chat-failed-bubble-border: $kendo-chat-failed-bubble-border,
+    $kendo-chat-failed-content-color: $kendo-chat-failed-content-color,
+    $kendo-chat-failed-bubble-hover-bg: $kendo-chat-failed-bubble-hover-bg,
+    $kendo-chat-failed-bubble-selected-bg: $kendo-chat-failed-bubble-selected-bg,
     $kendo-chat-typing-indicator-text: $kendo-chat-typing-indicator-text,
-    $kendo-chat-file-min-width: $kendo-chat-file-min-width,
-    $kendo-chat-file-max-width: $kendo-chat-file-max-width,
-    $kendo-chat-file-name-font-size: $kendo-chat-file-name-font-size,
-    $kendo-chat-file-name-line-height: $kendo-chat-file-name-line-height,
-    $kendo-chat-file-size-font-size: $kendo-chat-file-size-font-size,
-    $kendo-chat-file-size-line-height: $kendo-chat-file-size-line-height,
-    $kendo-chat-file-padding-x: $kendo-chat-file-padding-x,
-    $kendo-chat-file-padding-y: $kendo-chat-file-padding-y,
-    $kendo-chat-file-gap: $kendo-chat-file-gap,
-    $kendo-chat-file-border-width: $kendo-chat-file-border-width,
-    $kendo-chat-file-border-style: $kendo-chat-file-border-style,
-    $kendo-chat-file-bg: $kendo-chat-file-bg,
-    $kendo-chat-file-text: $kendo-chat-file-text,
-    $kendo-chat-file-border: $kendo-chat-file-border,
-    $kendo-chat-file-border-radius: $kendo-chat-file-border-radius,
     $kendo-chat-sender-file-bg: $kendo-chat-sender-file-bg,
     $kendo-chat-sender-file-text: $kendo-chat-sender-file-text,
     $kendo-chat-sender-file-border: $kendo-chat-sender-file-border,

package/scss/core/motion/_index.scss

@@ -9,6 +9,7 @@ $default-easings: (
     sharp: cubic-bezier(0.75, 0, 0.25, 1),
     bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55),
     elastic: cubic-bezier(0.5, -0.5, 0.5, 1.5),
+    stretchy: cubic-bezier(.07, 1.81, .3, .81)
 ) !default;
 
 $default-durations: (

package/scss/dropdowntree/_variables.scss

@@ -4,12 +4,21 @@
 
 /// The horizontal padding of the DropdownTree popup
 /// @group dropdowntree
-$kendo-dropdowntree-popup-padding-x: $kendo-popup-content-padding-x !default;
+$kendo-dropdowntree-popup-padding-x: k-spacing(1) !default;
 /// The vertical padding of the DropdownTree popup
 /// @group dropdowntree
-$kendo-dropdowntree-popup-padding-y: $kendo-popup-content-padding-y !default;
+$kendo-dropdowntree-popup-padding-y: k-spacing(1) !default;
+
+/// The horizontal padding of the DropdownTree check all
+/// @group dropdowntree
+$kendo-dropdowntree-check-all-padding-x: var(--kendo-dropdowntree-check-all-padding-x, k-spacing(2)) !default;
+/// The vertical padding of the DropdownTree check all
+/// @group dropdowntree
+$kendo-dropdowntree-check-all-padding-y: var(--kendo-dropdowntree-check-all-padding-y, k-spacing(2)) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/dropdowntree/_variables.scss" with (
     $kendo-dropdowntree-popup-padding-x: $kendo-dropdowntree-popup-padding-x,
-    $kendo-dropdowntree-popup-padding-y: $kendo-dropdowntree-popup-padding-y
+    $kendo-dropdowntree-popup-padding-y: $kendo-dropdowntree-popup-padding-y,
+    $kendo-dropdowntree-check-all-padding-x: $kendo-dropdowntree-check-all-padding-x,
+    $kendo-dropdowntree-check-all-padding-y: $kendo-dropdowntree-check-all-padding-y
 );

package/scss/file-box/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-file-box--styles() {
+    @include import-once( "file-box" ) {
+        @include core-styles();
+        @include kendo-file-box--layout();
+        @include kendo-file-box--theme();
+    }
+}

package/scss/file-box/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/file-box/_layout.scss" as *;
+
+
+@mixin kendo-file-box--layout() {
+    @include kendo-file-box--layout-base();
+}

package/scss/file-box/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/file-box/_theme.scss" as *;
+
+
+@mixin kendo-file-box--theme() {
+    @include kendo-file-box--theme-base();
+}

package/scss/file-box/_variables.scss

@@ -0,0 +1,73 @@
+@use "../core/_index.scss" as *;
+
+// File Box
+
+/// The horizontal padding of the File Box.
+/// @group file-box
+$kendo-file-box-padding-x: var(--kendo-file-box-padding-x, k-spacing(1) ) !default;
+/// The vertical padding of the File Box.
+/// @group file-box
+$kendo-file-box-padding-y: var(--kendo-file-box-padding-y, k-spacing(1) ) !default;
+/// The spacing between the elements of the File Box.
+/// @group file-box
+$kendo-file-box-gap: var(--kendo-file-box-gap, k-spacing(1) ) !default;
+/// The minimum width of the File Box.
+/// @group file-box
+$kendo-file-box-min-width: var(--kendo-file-box-min-width, var(--kendo-file-box-min-width, 96px) ) !default;
+/// The maximum width of the File Box.
+/// @group file-box
+$kendo-file-box-max-width: var(--kendo-file-box-max-width, var(--kendo-file-box-max-width, 160px) ) !default;
+/// The border width of the File Box.
+/// @group file-box
+$kendo-file-box-border-width: var(--kendo-file-box-border-width, 1px ) !default;
+/// The border style of the File Box.
+/// @group file-box
+$kendo-file-box-border-style: var(--kendo-file-box-border-style, solid ) !default;
+/// The border-radius of the File Box.
+/// @group file-box
+$kendo-file-box-border-radius: var(--kendo-file-box-border-radius, k-border-radius(md) ) !default;
+/// The font size of the File Box file name.
+/// @group file-box
+$kendo-file-box-name-font-size: var(--kendo-file-box-name-font-size, var( --kendo-font-size-sm, inherit )) !default;
+/// The line height of the File Box file name.
+/// @group file-box
+$kendo-file-box-name-line-height: var(--kendo-file-box-name-line-height, var( --kendo-line-height-lg, normal )) !default;
+/// The font size of the File Box file size.
+/// @group file-box
+$kendo-file-box-size-font-size: var(--kendo-file-box-size-font-size, var( --kendo-font-size-xs, inherit )) !default;
+/// The line height of the File Box file size.
+/// @group file-box
+$kendo-file-box-size-line-height: var(--kendo-file-box-size-line-height, var( --kendo-line-height-xs, normal )) !default;
+
+/// The background color of the File Box.
+/// @group file-box
+$kendo-file-box-bg: var(--kendo-file-box-bg, color-mix(in srgb, k-color(base-on-subtle) 8%, transparent) ) !default;
+/// The text color of the File Box.
+/// @group file-box
+$kendo-file-box-text: var(--kendo-file-box-text, k-color(base-on-subtle) ) !default;
+/// The border color of the File Box.
+/// @group file-box
+$kendo-file-box-border: var(--kendo-file-box-border, $kendo-file-box-bg ) !default;
+
+/// The gradient used for the File Box wrapper scrolling indicator.
+/// @group file-box
+$kendo-file-box-wrapper-scroll-gradient: var(--kendo-file-box-wrapper-scroll-gradient, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 1) 100% ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/file-box/_variables.scss" with (
+    $kendo-file-box-padding-x: $kendo-file-box-padding-x,
+    $kendo-file-box-padding-y: $kendo-file-box-padding-y,
+    $kendo-file-box-gap: $kendo-file-box-gap,
+    $kendo-file-box-min-width: $kendo-file-box-min-width,
+    $kendo-file-box-max-width: $kendo-file-box-max-width,
+    $kendo-file-box-border-width: $kendo-file-box-border-width,
+    $kendo-file-box-border-style: $kendo-file-box-border-style,
+    $kendo-file-box-border-radius: $kendo-file-box-border-radius,
+    $kendo-file-box-name-font-size: $kendo-file-box-name-font-size,
+    $kendo-file-box-name-line-height: $kendo-file-box-name-line-height,
+    $kendo-file-box-size-font-size: $kendo-file-box-size-font-size,
+    $kendo-file-box-size-line-height: $kendo-file-box-size-line-height,
+    $kendo-file-box-bg: $kendo-file-box-bg,
+    $kendo-file-box-text: $kendo-file-box-text,
+    $kendo-file-box-border: $kendo-file-box-border,
+    $kendo-file-box-wrapper-scroll-gradient: $kendo-file-box-wrapper-scroll-gradient
+);