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

package/dist/meta/variables.json

@@ -810,9 +810,9 @@
     },
     "default-elevation": {
         "type": "Map",
-        "value": "(1: (0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)), 2: (0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)), 3: (0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12)), 4: (0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12)), 5: (0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12)), 6: (0 12px 14px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12)), 7: (0 14px 16px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12)), 8: (0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12)), 9: (0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12)))",
+        "value": "(1: 0 2px 3px rgba(0, 0, 0, 0.04), 2: (0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)), 3: (0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12)), 4: (0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12)), 5: (0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12)), 6: (0 12px 14px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12)), 7: (0 14px 16px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12)), 8: (0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12)), 9: (0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12)))",
         "prettyValue": {
-            "1": "(0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "1": "(0 2px 3px rgba(0, 0, 0, 0.04))",
             "2": "(0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))",
             "3": "(0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))",
             "4": "(0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
@@ -825,9 +825,9 @@
     },
     "kendo-elevation": {
         "type": "Map",
-        "value": "(1: (0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)), 2: (0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)), 3: (0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12)), 4: (0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12)), 5: (0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12)), 6: (0 12px 14px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12)), 7: (0 14px 16px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12)), 8: (0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12)), 9: (0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12)))",
+        "value": "(1: 0 2px 3px rgba(0, 0, 0, 0.04), 2: (0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)), 3: (0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12)), 4: (0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12)), 5: (0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12)), 6: (0 12px 14px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12)), 7: (0 14px 16px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12)), 8: (0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12)), 9: (0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12)))",
         "prettyValue": {
-            "1": "(0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "1": "(0 2px 3px rgba(0, 0, 0, 0.04))",
             "2": "(0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))",
             "3": "(0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))",
             "4": "(0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
@@ -1170,7 +1170,7 @@
     },
     "default-easings": {
         "type": "Map",
-        "value": "(linear: cubic-bezier(0, 0, 1, 1), accelerate: cubic-bezier(0.42, 0, 1, 1), decelerate: cubic-bezier(0, 0, 0.58, 1), standard: cubic-bezier(0.42, 0, 0.58, 1), 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))",
+        "value": "(linear: cubic-bezier(0, 0, 1, 1), accelerate: cubic-bezier(0.42, 0, 1, 1), decelerate: cubic-bezier(0, 0, 0.58, 1), standard: cubic-bezier(0.42, 0, 0.58, 1), 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(0.07, 1.81, 0.3, 0.81))",
         "prettyValue": {
             "linear": "cubic-bezier(0, 0, 1, 1)",
             "accelerate": "cubic-bezier(0.42, 0, 1, 1)",
@@ -1178,7 +1178,8 @@
             "standard": "cubic-bezier(0.42, 0, 0.58, 1)",
             "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)"
+            "elastic": "cubic-bezier(0.5, -0.5, 0.5, 1.5)",
+            "stretchy": "cubic-bezier(0.07, 1.81, 0.3, 0.81)"
         }
     },
     "default-durations": {
@@ -1316,7 +1317,7 @@
     },
     "kendo-easings": {
         "type": "Map",
-        "value": "(linear: cubic-bezier(0, 0, 1, 1), accelerate: cubic-bezier(0.42, 0, 1, 1), decelerate: cubic-bezier(0, 0, 0.58, 1), standard: cubic-bezier(0.42, 0, 0.58, 1), 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))",
+        "value": "(linear: cubic-bezier(0, 0, 1, 1), accelerate: cubic-bezier(0.42, 0, 1, 1), decelerate: cubic-bezier(0, 0, 0.58, 1), standard: cubic-bezier(0.42, 0, 0.58, 1), 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(0.07, 1.81, 0.3, 0.81))",
         "prettyValue": {
             "linear": "cubic-bezier(0, 0, 1, 1)",
             "accelerate": "cubic-bezier(0.42, 0, 1, 1)",
@@ -1324,7 +1325,8 @@
             "standard": "cubic-bezier(0.42, 0, 0.58, 1)",
             "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)"
+            "elastic": "cubic-bezier(0.5, -0.5, 0.5, 1.5)",
+            "stretchy": "cubic-bezier(0.07, 1.81, 0.3, 0.81)"
         }
     },
     "kendo-durations": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "13.0.0-dev.1",
+  "version": "13.0.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "c1e883bc20fcf4b83398d27c582cd0fcb3e6f71f"
+  "gitHead": "e416202d88c228d1ab3f6f310633e644b141e642"
 }

package/scss/components/bubble/_layout.scss

@@ -53,9 +53,8 @@
         .k-bubble-expandable-indicator {
             padding-inline: $kendo-bubble-expandable-icon-padding-x;
             padding-block: $kendo-bubble-expandable-icon-padding-y;
-            margin-block-start: calc( #{$kendo-bubble-padding-y} * -1);
             margin-inline-end: calc( #{$kendo-bubble-padding-x} * -1);
-            margin-block-end: calc( ( #{$kendo-bubble-padding-x} / 2 ) * -1);
+            margin-block: calc( (#{$kendo-bubble-expandable-icon-padding-y} - #{$kendo-bubble-border-width} * 2 ) * -1);
             display: flex;
             flex-shrink: 0;
             cursor: pointer;

package/scss/components/chat/_layout.scss

@@ -7,6 +7,7 @@
 @use "../toolbar/_variables.scss" as *;
 @use "../bubble/_variables.scss" as *;
 @use "../button/_variables.scss" as *;
+@use "../file-box/_variables.scss" as *;
 
 @mixin kendo-chat--layout-base() {
 
@@ -28,17 +29,19 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
-        .k-chat-file {
-            width: 100%;
-            min-width: $kendo-chat-file-min-width;
-            max-width: $kendo-chat-file-max-width;
-            flex-shrink: 0;
+        .k-suggestion {
+            font-size: var(--kendo-font-size-sm, inherit);
         }
     }
 
     // Chat header
     .k-chat-header {
         flex-shrink: 0;
+        width: 100%;
+        position: sticky;
+        z-index: k-z-index("banner");
+        border-inline-width: 0;
+        border-block-start-width: 0;
     }
 
     // Message list
@@ -53,7 +56,7 @@
     }
 
     .k-message-list-content {
-        padding-block: $kendo-chat-message-list-padding-y calc(#{$kendo-chat-message-list-padding-y} / 2);
+        padding-block: $kendo-chat-message-list-padding-y;
         padding-inline: $kendo-chat-message-list-padding-x;
         width: 100%;
         box-sizing: border-box;
@@ -91,27 +94,16 @@
         }
 
         .k-avatar {
-            align-self: flex-end;
-        }
-
-        // Add margin to the avatar and user status when the last message is selected
-        // so that the avatar is aligned to the bubble and not to the status
-        &:has(.k-message-group-content .k-message:last-child .k-chat-bubble.k-selected + .k-message-status) .k-avatar {
-            &,
-            + .k-chat-user-status {
-                margin-block-end: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size + $kendo-chat-bubble-spacing);
-                transition: margin k-transition(fade-out);
-            }
+            align-self: flex-start;
         }
 
-        .k-chat-file-wrapper {
-            padding: 0;
-            overflow: hidden;
+        &:has(.k-message-author) .k-avatar {
+            margin-block-start: calc( #{$kendo-chat-author-font-size} * #{$kendo-chat-author-line-height} + $kendo-chat-bubble-spacing );
         }
 
         > .k-chat-user-status-wrapper {
             position: relative;
-            align-self: flex-end;
+            align-self: flex-start;
             overflow: hidden;
         }
 
@@ -149,7 +141,7 @@
     .k-chat-download-button-wrapper {
         width: 100%;
         box-sizing: border-box;
-        border-radius: 0 0 $kendo-chat-file-border-radius $kendo-chat-file-border-radius;
+        border-radius: 0 0 $kendo-file-box-border-radius $kendo-file-box-border-radius;
         text-align: start;
     }
 
@@ -165,24 +157,29 @@
             align-items: flex-end;
         }
 
-        .k-message-status {
-            align-self: flex-end;
+        .k-message-info {
+            justify-content: flex-end;
+        }
+
+        .k-message-time {
+            order: -1;
         }
 
         .k-message:has(+.k-message) .k-chat-bubble {
-            border-end-end-radius: 0;
+            border-end-end-radius: $kendo-sequential-messages-border-radius;
             border-end-start-radius: $kendo-bubble-border-radius;
+            border-start-end-radius: $kendo-sequential-messages-border-radius;
+            border-start-start-radius: $kendo-bubble-border-radius;
         }
 
         .k-message + .k-message .k-chat-bubble {
-            border-start-end-radius: 0;
+            border-start-end-radius: $kendo-sequential-messages-border-radius;
             border-start-start-radius: $kendo-bubble-border-radius;
             border-end-start-radius: $kendo-bubble-border-radius;
         }
 
         .k-message:last-of-type .k-chat-bubble {
             border-end-start-radius: $kendo-bubble-border-radius;
-            border-end-end-radius: $kendo-bubble-border-radius-sm;
             border-start-start-radius: $kendo-bubble-border-radius;
         }
     }
@@ -207,16 +204,27 @@
         }
 
         &:has(+.k-message) .k-chat-bubble {
-            border-end-start-radius: 0;
+            border-end-start-radius: $kendo-sequential-messages-border-radius;
+            border-start-start-radius: $kendo-sequential-messages-border-radius;
         }
 
         & + .k-message .k-chat-bubble {
-            border-start-start-radius: 0;
-            border-end-start-radius: 0;
+            border-start-start-radius: $kendo-sequential-messages-border-radius;
         }
 
-        &:last-of-type .k-chat-bubble {
-            border-end-start-radius: $kendo-bubble-border-radius-sm;
+        .k-file-box-wrapper {
+            padding: 0;
+        }
+    }
+
+    // Failed message
+    .k-message-failed {
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: flex-end;
+
+        .k-bubble {
+            max-width: calc(100% - #{$kendo-button-md-inner-calc-size});
         }
     }
 
@@ -270,15 +278,32 @@
     }
 
     // Message meta
+    .k-message-info {
+        display: flex;
+        width: 100%;
+        justify-content: flex-start;
+        gap: k-spacing(1);
+    }
+
+    .k-message .k-selected + .k-message-info,
+    .k-message:has(.k-message-failed-content) .k-message-info {
+        margin-block-start: k-spacing(1);
+    }
+
     .k-message-time,
-    .k-message-status {
+    .k-message-status,
+    .k-message-failed-content {
         font-size: $kendo-chat-message-meta-font-size;
         line-height: $kendo-chat-message-meta-line-height;
         white-space: nowrap;
         pointer-events: none;
+        overflow: hidden;
+    }
+
+    .k-message-time,
+    .k-message-status {
         transition: height k-transition(fade-out);
         height: 0;
-        overflow: hidden;
     }
 
     .k-message-time {
@@ -288,7 +313,13 @@
     .k-message-status {
         display: inline-flex;
         align-items: center;
-        gap: $kendo-chat-message-status-gap;
+        gap: calc( #{$kendo-chat-message-status-gap} / 2);
+    }
+
+    .k-message-failed-content {
+        display: flex;
+        align-items: center;
+        gap: k-spacing(1);
     }
 
     // Bubble
@@ -386,6 +417,10 @@
     }
 
     .k-message-pinned {
+        position: sticky;
+        top: 0;
+        z-index: k-z-index("banner");
+        width: 100%;
         border-block-end-width: $kendo-chat-message-pinned-border-width;
         border-block-end-style: $kendo-chat-message-pinned-border-style;
         cursor: pointer;
@@ -397,7 +432,7 @@
 
     // Author
     .k-message-author {
-        margin-block-end: calc( #{$kendo-chat-bubble-spacing} / 2);
+        margin-block-end: $kendo-chat-bubble-spacing;
         font-size: $kendo-chat-author-font-size;
         line-height: $kendo-chat-author-line-height;
         font-weight: bold;
@@ -417,14 +452,7 @@
     .k-timestamp {
         text-transform: $kendo-chat-timestamp-transform;
         align-self: stretch;
-
-        &::before,
-        &::after {
-            display: inline-flex;
-            content: "";
-            height: 1px;
-            flex: 1;
-        }
+        align-self: center;
     }
 
     // Events
@@ -435,16 +463,10 @@
 
     .k-message-box-wrapper {
         padding-inline: $kendo-chat-padding-x;
-        padding-block: calc( #{$kendo-chat-padding-y} / 2 ) $kendo-chat-padding-y;
+        padding-block: $kendo-chat-padding-y;
         display: flex;
         flex-direction: column;
-        gap: $kendo-chat-padding-y;
-
-        .k-chat-file-wrapper {
-            flex-flow: row nowrap;
-            overflow-x: auto;
-            scrollbar-width: none;
-        }
+        gap: $kendo-chat-message-box-wrapper-spacing;
     }
 
     // Message box
@@ -479,86 +501,6 @@
         }
     }
 
-    .k-chat-file-wrapper {
-        display: flex;
-        flex-flow: column wrap;
-        flex-shrink: 0;
-        padding-inline: $kendo-chat-file-padding-x;
-        padding-block: $kendo-chat-file-padding-y;
-        margin: 0;
-        gap: $kendo-chat-file-gap;
-        box-sizing: border-box;
-        min-width: 0;
-        width: 100%;
-        max-width: 100%;
-        overflow: hidden;
-
-        &.k-chat-files-horizontal {
-            overflow-x: auto;
-            scrollbar-width: none;
-        }
-    }
-
-    .k-chat-files-horizontal,
-    .k-chat-files-wrap {
-        flex-direction: row;
-    }
-
-    .k-chat-files-horizontal {
-        flex-wrap: nowrap;
-    }
-
-    .k-chat-file {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        overflow: hidden;
-        box-sizing: border-box;
-        gap: $kendo-chat-file-gap;
-        border-width: $kendo-chat-file-border-width;
-        border-style: $kendo-chat-file-border-style;
-        padding-inline: $kendo-chat-file-padding-x;
-        padding-block: $kendo-chat-file-padding-y;
-        border-radius: $kendo-chat-file-border-radius;
-        min-width: 0;
-
-        >.k-icon {
-            flex-shrink: 0;
-        }
-
-        .k-chat-file-info {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            text-align: start;
-            flex: 1;
-            overflow: hidden;
-            min-width: 0;
-            max-width: 100%;
-            text-overflow: ellipsis;
-        }
-
-        .k-chat-file-name {
-            font-weight: bold;
-            font-size: $kendo-chat-file-name-font-size;
-            line-height: $kendo-chat-file-name-line-height;
-            width: 100%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .k-chat-file-size,
-        .k-chat-file-status {
-            font-size: $kendo-chat-file-size-font-size;
-            line-height: $kendo-chat-file-size-line-height;
-        }
-
-        &.k-chat-file-deleted {
-            min-height: calc( #{$kendo-button-md-calc-size} + 2 * #{$kendo-chat-file-padding-y} + 2 * #{$kendo-chat-file-border-width});
-        }
-    }
-
     .k-chat-file-download-wrapper {
         display: flex;
         flex-direction: column;
@@ -648,6 +590,20 @@
         }
     }
 
+    // Scroll to bottom container
+    .k-chat-scroll-to-bottom-container {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        box-sizing: border-box;
+        position: sticky;
+        bottom: k-spacing(4);
+
+        .k-fab {
+            position: static;
+        }
+    }
+
     // Upload
     .k-chat-upload {
         .k-external-dropzone {

package/scss/components/chat/_theme.scss

@@ -62,6 +62,29 @@
         }
     }
 
+    .k-message-failed .k-chat-bubble {
+        @include fill(
+            $kendo-chat-failed-bubble-text,
+            $kendo-chat-failed-bubble-bg,
+            $kendo-chat-failed-bubble-border
+        );
+
+        &:hover,
+        &.k-hover {
+            background-color: $kendo-chat-failed-bubble-hover-bg;
+            border-color: $kendo-chat-failed-bubble-border;
+        }
+
+        &.k-selected {
+            background-color: $kendo-chat-failed-bubble-selected-bg;
+            border-color: $kendo-chat-failed-bubble-border;
+        }
+    }
+
+    .k-message-failed-content {
+        color: $kendo-chat-failed-content-color;
+    }
+
     // Typing indicator
     .k-typing-indicator {
         @include fill(
@@ -70,33 +93,19 @@
     }
 
     // Chat attachment
-    .k-chat-file {
-        background-color: $kendo-chat-file-bg;
-        color: $kendo-chat-file-text;
-        border-color: $kendo-chat-file-border;
-    }
-
-    .k-message-group-sender .k-chat-file {
+    .k-message-group-sender .k-file-box {
         background-color: $kendo-chat-sender-file-bg;
         color: $kendo-chat-sender-file-text;
         border-color: $kendo-chat-sender-file-border;
     }
 
-    // Attachment within Textarea prefix
-    .k-message-box-wrapper .k-chat-file {
-        @include fill(
-            $kendo-chat-file-text,
-            $kendo-chat-file-bg,
-            $kendo-chat-file-border
-        );
-    }
-
     // Message reference
     .k-message-reference {
         @include fill(
             $kendo-chat-message-reference-text,
             $kendo-chat-message-reference-bg
         );
+        backdrop-filter: blur(2px);
     }
 
     .k-message-reference-sender {

package/scss/components/chat/_variables.scss

@@ -15,10 +15,14 @@ $kendo-chat-message-spacing: null !default;
 $kendo-chat-message-max-width: null !default;
 $kendo-chat-message-gap: null !default;
 
+$kendo-sequential-messages-border-radius: null !default;
+
 $kendo-chat-message-list-padding-x: null !default;
 $kendo-chat-message-list-padding-y: null !default;
 $kendo-chat-message-list-spacing: null !default;
 
+$kendo-chat-message-box-wrapper-spacing: null !default;
+
 $kendo-chat-status-min-size: null !default;
 $kendo-chat-status-max-size: null !default;
 $kendo-chat-message-status-gap: null !default;
@@ -61,25 +65,15 @@ $kendo-chat-alt-bubble-focus-bg: null !default;
 $kendo-chat-alt-bubble-focus-border: null !default;
 $kendo-chat-alt-bubble-focus-shadow: null !default;
 
-$kendo-chat-typing-indicator-text: null !default;
+$kendo-chat-failed-bubble-text: null !default;
+$kendo-chat-failed-bubble-bg: null !default;
+$kendo-chat-failed-bubble-border: null !default;
+$kendo-chat-failed-content-color: null !default;
 
-$kendo-chat-file-min-width: null !default;
-$kendo-chat-file-max-width: null !default;
-$kendo-chat-file-name-font-size: null !default;
-$kendo-chat-file-name-line-height: null !default;
-$kendo-chat-file-size-font-size: null !default;
-$kendo-chat-file-size-line-height: null !default;
-$kendo-chat-file-padding-x: null !default;
-$kendo-chat-file-padding-y: null !default;
-$kendo-chat-file-gap: null !default;
-$kendo-chat-file-border-width: null !default;
-$kendo-chat-file-border-style: null !default;
-$kendo-chat-file-bg: null !default;
-$kendo-chat-file-text: null !default;
-$kendo-chat-file-border: null !default;
-$kendo-chat-file-border-radius: null !default;
-$kendo-chat-file-download-padding-x: null !default;
-$kendo-chat-file-download-padding-y: null !default;
+$kendo-chat-failed-bubble-hover-bg: null !default;
+$kendo-chat-failed-bubble-selected-bg: null !default;
+
+$kendo-chat-typing-indicator-text: null !default;
 
 $kendo-chat-sender-file-bg: null !default;
 $kendo-chat-sender-file-text: null !default;

package/scss/components/dropdowntree/_layout.scss

@@ -9,14 +9,14 @@
     .k-popup-dropdowntree, // remove legacy class once updated in components
     .k-dropdowntree-popup,
     .k-multiselecttree-popup {
-        .k-treeview {
-            padding-block: calc( #{$kendo-dropdowntree-popup-padding-y} / 2 );
-            padding-inline: calc( #{$kendo-dropdowntree-popup-padding-x} / 2 );
-        }
+        padding-block: $kendo-dropdowntree-popup-padding-y;
+        padding-inline: $kendo-dropdowntree-popup-padding-x;
+        overflow: hidden;
 
-        .k-check-all {
-            padding-block: $kendo-dropdowntree-popup-padding-y;
-            padding-inline: $kendo-dropdowntree-popup-padding-x;
+        .k-check-all,
+        .k-list-filter {
+            padding-block: $kendo-dropdowntree-check-all-padding-y;
+            padding-inline: $kendo-dropdowntree-check-all-padding-x;
         }
     }
 

package/scss/components/dropdowntree/_variables.scss

@@ -2,3 +2,6 @@
 
 $kendo-dropdowntree-popup-padding-x: null !default;
 $kendo-dropdowntree-popup-padding-y: null !default;
+
+$kendo-dropdowntree-check-all-padding-x: null !default;
+$kendo-dropdowntree-check-all-padding-y: null !default;