@progress/kendo-theme-core 12.1.0 → 12.2.0-dev.0

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": "12.1.0",
+  "version": "12.2.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "c21230377775b7e87f6c8c6590409f0c2d41d99f"
+  "gitHead": "5a687d60086d3e91f182d65b18f54f969d760af6"
 }

package/scss/components/breadcrumb/_theme.scss

@@ -44,7 +44,7 @@
                 $kendo-breadcrumb-link-focus-bg,
                 $kendo-breadcrumb-link-focus-border
             );
-            @include focus-indicator( $kendo-breadcrumb-link-focus-shadow );
+            @include focus-indicator( $kendo-breadcrumb-link-focus-shadow, true );
         }
     }
 
@@ -75,7 +75,7 @@
                 $kendo-breadcrumb-root-link-focus-bg,
                 $kendo-breadcrumb-root-link-focus-border
             );
-            @include focus-indicator( $kendo-breadcrumb-root-link-focus-shadow );
+            @include focus-indicator( $kendo-breadcrumb-root-link-focus-shadow, true );
         }
     }
 

package/scss/components/chat/_layout.scss

@@ -6,6 +6,7 @@
 @use "./variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "../bubble/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
 @use "../../color-system/_functions.import.scss" as *;
 
 @mixin kendo-chat--layout-base() {
@@ -27,6 +28,12 @@
         overflow: hidden;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        .k-chat-file {
+            min-width: $kendo-chat-file-min-width;
+            max-width: $kendo-chat-file-max-width;
+            flex-shrink: 0;
+        }
     }
 
     // Chat header
@@ -46,7 +53,7 @@
     }
 
     .k-message-list-content {
-        padding-block: $kendo-chat-message-list-padding-y;
+        padding-block: $kendo-chat-message-list-padding-y calc(#{$kendo-chat-message-list-padding-y} / 2);
         padding-inline: $kendo-chat-message-list-padding-x;
         width: 100%;
         box-sizing: border-box;
@@ -60,6 +67,13 @@
         > * + * {
             margin-block-start: $kendo-chat-message-list-spacing;
         }
+
+        &.k-message-list-content-empty {
+            flex: 1;
+            flex-flow: column wrap;
+            align-content: center;
+            justify-content: center;
+        }
     }
 
     // Message group
@@ -89,12 +103,28 @@
 
         .k-chat-file-wrapper {
             padding: 0;
-            gap: 0;
             overflow: hidden;
         }
 
-        .k-chat-file {
-            width: 100%;
+        > .k-chat-user-status-wrapper {
+            position: relative;
+            align-self: flex-end;
+            overflow: hidden;
+        }
+
+        .k-chat-user-status {
+            display: flex;
+            width: auto;
+            min-width: $kendo-chat-status-min-size;
+            max-width: $kendo-chat-status-max-size;
+            height: auto;
+            min-height: $kendo-chat-status-min-size;
+            max-height: $kendo-chat-status-max-size;
+            overflow: hidden;
+            position: absolute;
+            bottom: 0;
+            inset-inline-end: 0;
+            border-radius: k-border-radius(full);
         }
     }
 
@@ -116,8 +146,6 @@
     .k-chat-download-button-wrapper {
         width: 100%;
         box-sizing: border-box;
-        padding-inline: $kendo-chat-file-download-padding-x;
-        padding-block-end: $kendo-chat-file-download-padding-y;
         border-radius: 0 0 $kendo-chat-file-border-radius $kendo-chat-file-border-radius;
         text-align: start;
     }
@@ -138,9 +166,21 @@
             align-self: flex-end;
         }
 
+        .k-message:has(+.k-message) .k-chat-bubble {
+            border-end-end-radius: 0;
+            border-end-start-radius: $kendo-bubble-border-radius;
+        }
+
+        .k-message + .k-message .k-chat-bubble {
+            border-start-end-radius: 0;
+            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;
         }
     }
 
@@ -163,6 +203,15 @@
             border-end-start-radius: $kendo-bubble-border-radius;
         }
 
+        &:has(+.k-message) .k-chat-bubble {
+            border-end-start-radius: 0;
+        }
+
+        & + .k-message .k-chat-bubble {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+
         &:last-of-type .k-chat-bubble {
             border-end-start-radius: $kendo-bubble-border-radius-sm;
         }
@@ -186,8 +235,11 @@
         width: 100%;
         max-width: 100%;
 
-        .k-message,
-        .k-chat-bubble {
+        &.k-message-group-sender .k-message:has(.k-skeleton) {
+            align-self: stretch;
+        }
+
+        .k-chat-bubble:has(.k-skeleton) {
             width: 100%;
         }
     }
@@ -344,16 +396,20 @@
         font-weight: bold;
     }
 
-    // Timestamp
-    .k-timestamp {
+    // Timestamp and event
+    .k-timestamp,
+    .k-chat-event {
         font-size: $kendo-chat-timestamp-font-size;
         line-height: $kendo-chat-timestamp-line-height;
-        text-transform: $kendo-chat-timestamp-transform;
-        text-align: center;
-        align-self: stretch;
         display: flex;
         align-items: center;
         gap: $kendo-chat-timestamp-separator-spacing;
+    }
+
+    // Timestamp
+    .k-timestamp {
+        text-transform: $kendo-chat-timestamp-transform;
+        align-self: stretch;
 
         &::before,
         &::after {
@@ -364,15 +420,23 @@
         }
     }
 
+    // Events
+    .k-chat-event {
+        width: 100%;
+        justify-content: center;
+    }
+
     .k-message-box-wrapper {
         padding-inline: $kendo-chat-padding-x;
-        padding-block-end: $kendo-chat-padding-y;
+        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-direction: row;
+            flex-flow: row nowrap;
+            overflow-x: auto;
+            scrollbar-width: none;
         }
     }
 
@@ -420,6 +484,20 @@
         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 {
@@ -434,6 +512,7 @@
         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;
@@ -453,7 +532,8 @@
 
         .k-chat-file-name {
             font-weight: bold;
-            font-size: var( --kendo-font-size-sm, inherit);
+            font-size: $kendo-chat-file-name-font-size;
+            line-height: $kendo-chat-file-name-line-height;
             width: 100%;
             white-space: nowrap;
             overflow: hidden;
@@ -462,13 +542,12 @@
 
         .k-chat-file-size,
         .k-chat-file-status {
-            font-size: var( --kendo-font-size-xs, inherit);
+            font-size: $kendo-chat-file-size-font-size;
+            line-height: $kendo-chat-file-size-line-height;
         }
-    }
 
-    .k-message-group {
-        .k-chat-file + .k-chat-file:not(.k-chat-file-deleted) {
-            padding-block-start: 0;
+        &.k-chat-file-deleted {
+            min-height: calc( #{$kendo-button-md-calc-size} + 2 * #{$kendo-chat-file-padding-y} + 2 * #{$kendo-chat-file-border-width});
         }
     }
 
@@ -477,14 +556,6 @@
         flex-direction: column;
     }
 
-    .k-message-box-wrapper,
-    .k-message-group-full-width,
-    .k-message:has(.k-bubble-expandable) + .k-chat-file-wrapper {
-        .k-chat-file {
-            width: $kendo-chat-file-width;
-        }
-    }
-
     // Card list
     .k-chat .k-card-list {
         margin: $kendo-chat-bubble-spacing 0 0;

package/scss/components/chat/_theme.scss

@@ -72,15 +72,15 @@
 
     // Chat attachment
     .k-chat-file {
-        border-color: transparent;
+        background-color: $kendo-chat-file-bg;
+        color: $kendo-chat-file-text;
+        border-color: $kendo-chat-file-border;
     }
 
-    .k-chat-file-deleted {
-        @include fill(
-            k-color(error-on-subtle),
-            k-color(error-subtle),
-            k-color(error-subtle)
-        );
+    .k-message-group-sender .k-chat-file {
+        background-color: $kendo-chat-sender-file-bg;
+        color: $kendo-chat-sender-file-text;
+        border-color: $kendo-chat-sender-file-border;
     }
 
     // Attachment within Textarea prefix

package/scss/components/chat/_variables.scss

@@ -19,6 +19,8 @@ $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-status-min-size: null !default;
+$kendo-chat-status-max-size: null !default;
 $kendo-chat-message-status-gap: null !default;
 
 $kendo-chat-timestamp-font-size: null !default;
@@ -61,7 +63,12 @@ $kendo-chat-alt-bubble-focus-shadow: null !default;
 
 $kendo-chat-typing-indicator-text: null !default;
 
-$kendo-chat-file-width: 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;
@@ -74,6 +81,10 @@ $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-sender-file-bg: null !default;
+$kendo-chat-sender-file-text: null !default;
+$kendo-chat-sender-file-border: null !default;
+
 $kendo-chat-message-pinned-border-width: null !default;
 $kendo-chat-message-pinned-border-style: null !default;
 $kendo-chat-message-pinned-border-color: null !default;

package/scss/components/chip/_theme.scss

@@ -98,26 +98,6 @@
                         $bg: $kendo-chip-outline-selected-bg
                     );
                 }
-            } @else if ($name == "warning") {
-                @include fill(
-                    k-color(on-#{$name}),
-                    transparent,
-                    k-color(#{$name}-on-surface)
-                );
-
-                &:focus,
-                &.k-focus {
-                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color(#{$name}-on-surface) 16%, transparent));
-                }
-
-                &:hover,
-                &.k-hover,
-                &.k-selected {
-                    @include fill(
-                        $color: k-color(on-#{$name}),
-                        $bg: k-color(#{$name}-on-surface)
-                    );
-                }
             } @else {
                 @include fill(
                     k-color(#{$name}-on-surface),

package/scss/components/suggestion/_layout.scss

@@ -27,8 +27,23 @@
         display: flex;
         flex-wrap: wrap;
         gap: $kendo-suggestion-spacing;
+        align-self: normal;
 
+        &.k-suggestion-group-scrollable {
+            flex-wrap: nowrap;
+            overflow-x: auto;
+            scrollbar-width: none;
+        }
+    }
+
+    .k-suggestion-group-scrollable,
+    .k-suggestion-scrollwrap {
+        .k-suggestion {
+            white-space: nowrap;
+            max-width: none;
+        }
     }
+
     .k-suggestion {
         @include border-radius( $kendo-suggestion-border-radius );
         max-width: 100%;
@@ -44,6 +59,7 @@
         transition-timing-function: ease-in-out;
         cursor: pointer;
         outline: none;
+        white-space: normal;
     }