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

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.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "c21230377775b7e87f6c8c6590409f0c2d41d99f"
+  "gitHead": "918845c4b6e60435531f8b2fef5c0d0110b54c6d"
 }

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
@@ -80,21 +94,40 @@
             align-self: flex-end;
         }
 
-        // Add margin to the avatar when the last message is selected
+        // 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 {
-            margin-block-end: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size + $kendo-chat-bubble-spacing);
-            transition: margin .2s ease-in-out;
+            &,
+            + .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 .2s ease-in-out;
+            }
         }
 
         .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 +149,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 +169,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 +206,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 +238,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 +399,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 +423,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 +487,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 +515,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 +535,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 +545,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 +559,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/grid/_layout.scss

@@ -553,7 +553,7 @@
     }
 
     .k-grid-filter-popup {
-        min-width: $kendo-grid-column-menu-width;
+        width: $kendo-grid-column-menu-width;
         max-width: $kendo-grid-column-menu-max-width;
     }
 
@@ -1276,7 +1276,7 @@
 
     // Filter menu
     .k-filter-menu-popup {
-        min-width: $kendo-grid-column-menu-width;
+        width: $kendo-grid-column-menu-width;
         max-width: $kendo-grid-column-menu-max-width;
     }
     .k-filter-menu {
@@ -1321,7 +1321,7 @@
     .k-grid-filter-popup.k-popup {
 
         .k-filter-menu-container {
-            min-width: $kendo-grid-column-menu-width;
+            width: $kendo-grid-column-menu-width;
             max-width: $kendo-grid-column-menu-max-width;
         }
     }

package/scss/components/list/_layout.scss

@@ -90,7 +90,8 @@
 
 
     // List item
-    .k-list-item {
+    .k-list-item,
+    .k-list-custom-value {
         padding-block: $kendo-list-md-item-padding-y;
         padding-inline: $kendo-list-md-item-padding-x;
         border: 0;
@@ -133,7 +134,6 @@
     }
 
     .k-list-custom-value {
-        @extend .k-list-item !optional;
         font-style: italic;
         position: sticky;
     }
@@ -244,7 +244,8 @@
                 padding-block: $_filter-padding-y;
             }
 
-            .k-list-item {
+            .k-list-item,
+            .k-list-custom-value {
                 padding-block: $_item-padding-y;
                 padding-inline: $_item-padding-x;
                 font-size: $_item-font-size;

package/scss/components/list/_theme.scss

@@ -29,7 +29,8 @@
 
 
     // List item
-    .k-list-item {
+    .k-list-item,
+    .k-list-custom-value {
         @include fill(
             $kendo-list-item-text,
             $kendo-list-item-bg
@@ -63,8 +64,8 @@
         }
         &.k-selected:hover,
         &.k-selected.k-hover {
-            color: $kendo-list-item-selected-text;
-            background-color: k-color(primary-hover);
+            color: $kendo-list-item-selected-hover-text;
+            background-color: $kendo-list-item-selected-hover-bg;
         }
     }
 

package/scss/components/list/_variables.scss

@@ -125,6 +125,9 @@ $kendo-list-item-focus-shadow: null !default;
 $kendo-list-item-selected-bg: null !default;
 $kendo-list-item-selected-text: null !default;
 
+$kendo-list-item-selected-hover-bg: null !default;
+$kendo-list-item-selected-hover-text: null !default;
+
 $kendo-list-group-item-bg: null !default;
 $kendo-list-group-item-text: null !default;
 $kendo-list-group-item-border: null !default;

package/scss/components/pager/_layout.scss

@@ -69,10 +69,6 @@
         display: flex;
         flex-direction: row;
         position: relative;
-
-        select.k-dropdown-list {
-            width: $kendo-pager-md-dropdown-width;
-        }
     }
     .k-pager-numbers {
         display: flex;
@@ -155,22 +151,20 @@
                     min-width: $_item-min-width;
                 }
 
-                .k-pager-input,
-                > select.k-dropdown-list {
+                .k-pager-input {
                     margin-inline-start: $_item-group-spacing;
                     margin-inline-end: $_item-group-spacing;
                 }
             }
-
-            .k-pager-sizes {
-                .k-dropdown-list,
-                > select {
-                    width: $_pager-dropdown-width;
-                }
-            }
         }
     }
 
+    .k-pager-sizes {
+        .k-dropdownlist {
+            min-width: $kendo-pager-dropdown-width;
+            width: fit-content;
+        }
+    }
 }
 
 

package/scss/components/pager/_variables.scss

@@ -31,8 +31,6 @@ $kendo-pager-item-spacing: null !default;
 
 $kendo-pager-input-width: null !default;
 
-$kendo-pager-sm-dropdown-width: null !default;
-$kendo-pager-md-dropdown-width: null !default;
-$kendo-pager-lg-dropdown-width: null !default;
+$kendo-pager-dropdown-width: null !default;
 
 $kendo-pager-sizes: null !default;

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;
     }