@progress/kendo-theme-core 13.0.0-dev.0 → 13.0.0-dev.2

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
@@ -438,13 +466,7 @@
         padding-block: calc( #{$kendo-chat-padding-y} / 2 ) $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;

package/scss/components/file-box/_layout.scss

@@ -0,0 +1,122 @@
+@use "./_variables.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../motion/index.scss" as *;
+@use "../../spacing/index.scss" as *;
+@use "../../z-index/index.scss" as *;
+@use "../button/_variables.scss" as *;
+
+@mixin kendo-file-box--layout-base() {
+
+    .k-file-box-wrapper {
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        padding-inline: $kendo-file-box-padding-x;
+        padding-block: $kendo-file-box-padding-y;
+        margin: 0;
+        gap: $kendo-file-box-gap;
+        box-sizing: border-box;
+        min-width: 0;
+        width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+        scrollbar-width: none;
+
+        &.k-files-wrap {
+            flex-flow: row wrap;
+        }
+
+        &.k-files-vertical {
+            flex-flow: column wrap;
+        }
+    }
+
+    .k-files-scroll {
+        display: flex;
+        flex-flow: row nowrap;
+        overflow-x: auto;
+        scrollbar-width: none;
+        white-space: nowrap;
+        gap: $kendo-file-box-gap;
+    }
+
+    .k-file-box-wrapper-scrollable-end::before,
+    .k-file-box-wrapper-scrollable-start::after{
+        content: '';
+        aspect-ratio: .3;
+        position: absolute;
+        z-index: k-z-index("base", 3);
+        height: calc(100% - #{$kendo-file-box-padding-y} * 2 );
+    }
+
+    .k-file-box-wrapper-scrollable-end::before {
+        left: 0;
+    }
+
+    .k-file-box-wrapper-scrollable-start::after {
+        right: 0;
+    }
+
+    .k-file-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        overflow: hidden;
+        box-sizing: border-box;
+        gap: $kendo-file-box-gap;
+        border-width: $kendo-file-box-border-width;
+        border-style: $kendo-file-box-border-style;
+        padding-inline: $kendo-file-box-padding-x;
+        padding-block: $kendo-file-box-padding-y;
+        border-radius: $kendo-file-box-border-radius;
+        width: 100%;
+        min-width: $kendo-file-box-min-width;
+        max-width: $kendo-file-box-max-width;
+        flex-shrink: 0;
+
+        >.k-icon {
+            flex-shrink: 0;
+        }
+
+        .k-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-file-box-name,
+        .k-file-name {
+            font-weight: bold;
+            font-size: $kendo-file-box-name-font-size;
+            line-height: $kendo-file-box-name-line-height;
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .k-file-box-size,
+        .k-file-box-status,
+        .k-file-size,
+        .k-file-status {
+            font-size: $kendo-file-box-size-font-size;
+            line-height: $kendo-file-box-size-line-height;
+        }
+
+        &.k-file-deleted {
+            min-height: calc( #{$kendo-button-md-calc-size} + 2 * #{$kendo-file-box-padding-y} + 2 * #{$kendo-file-box-border-width});
+        }
+
+    }
+
+}
+
+@mixin kendo-file-box--layout() {
+    @include kendo-file-box--layout-base();
+}

package/scss/components/file-box/_theme.scss

@@ -0,0 +1,22 @@
+@use "./_variables.scss" as *;
+@use "../../mixins/index.scss" as *;
+
+@use "../../spacing/index.scss" as *;
+@use "../../color-system/_functions.scss" as *;
+@use "../../_variables.scss" as *;
+
+@mixin kendo-file-box--theme-base() {
+   .k-file-box {
+        background-color: $kendo-file-box-bg;
+        color: $kendo-file-box-text;
+        border-color: $kendo-file-box-border;
+    }
+
+    .k-file-box-wrapper-scrollable-start::after {
+        background: linear-gradient(90deg, $kendo-file-box-wrapper-scroll-gradient);
+    }
+
+    .k-file-box-wrapper-scrollable-end::before {
+        background: linear-gradient(270deg, $kendo-file-box-wrapper-scroll-gradient);
+    }
+}

package/scss/components/file-box/_variables.scss

@@ -0,0 +1,19 @@
+$kendo-file-box-padding-x: null !default;
+$kendo-file-box-padding-y: null !default;
+$kendo-file-box-gap: null !default;
+$kendo-file-box-min-width: null !default;
+$kendo-file-box-max-width: null !default;
+$kendo-file-box-border-width: null !default;
+$kendo-file-box-border-style: null !default;
+$kendo-file-box-border-radius: null !default;
+$kendo-file-box-name-font-size: null !default;
+$kendo-file-box-name-line-height: null !default;
+$kendo-file-box-size-font-size: null !default;
+$kendo-file-box-size-line-height: null !default;
+
+$kendo-file-box-bg: null !default;
+$kendo-file-box-text: null !default;
+$kendo-file-box-border: null !default;
+
+$kendo-file-box-wrapper-scroll-gradient: null !default;
+