@progress/kendo-theme-fluent 6.7.0-dev.0 → 6.7.0-dev.2

package/lib/swatches/all.json

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

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.7.0-dev.0",
+    "version": "6.7.0-dev.2",
     "api": "modern",
     "previewColors": [
         "#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": "6.7.0-dev.0",
+  "version": "6.7.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,8 +52,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.8.0",
-    "@progress/kendo-theme-core": "6.7.0-dev.0",
-    "@progress/kendo-theme-utils": "6.7.0-dev.0"
+    "@progress/kendo-theme-core": "6.7.0-dev.2",
+    "@progress/kendo-theme-utils": "6.7.0-dev.2"
   },
-  "gitHead": "dca7760b1c668eca96ff626ff9ec6dc6bdf5a3d3"
+  "gitHead": "48b9852e24736586f7bb277b8db520075eadd6e4"
 }

package/scss/chat/_layout.scss

@@ -71,12 +71,12 @@
                 inset-inline-start: 0;
             }
 
-            .k-first .k-bubble,
-            .k-only .k-bubble {
+            .k-first .k-chat-bubble,
+            .k-only .k-chat-bubble {
                 border-end-start-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
             }
-            .k-middle .k-bubble,
-            .k-last .k-bubble {
+            .k-middle .k-chat-bubble,
+            .k-last .k-chat-bubble {
                 border-end-start-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
             }
         }
@@ -93,12 +93,12 @@
                 inset-inline-end: 0;
             }
 
-            .k-first .k-bubble,
-            .k-only .k-bubble {
+            .k-first .k-chat-bubble,
+            .k-only .k-chat-bubble {
                 border-end-end-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
             }
-            .k-middle .k-bubble,
-            .k-last .k-bubble {
+            .k-middle .k-chat-bubble,
+            .k-last .k-chat-bubble {
                 border-end-end-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
             }
         }
@@ -139,7 +139,7 @@
 
 
         // Bubble
-        .k-bubble {
+        .k-chat-bubble {
             @include border-radius( var( --kendo-chat-bubble-border-radius, #{ $kendo-chat-bubble-border-radius } ) );
             padding-inline: var( --kendo-chat-bubble-padding-x, #{ $kendo-chat-bubble-padding-x } );
             padding-block: var( --kendo-chat-bubble-padding-y, #{ $kendo-chat-bubble-padding-y } );
@@ -175,10 +175,7 @@
 
         // Avatar
         .k-avatar {
-            @include border-radius( 100% );
             margin: 0;
-            width: var( --kendo-chat-avatar-size, #{ $kendo-chat-avatar-size } );
-            height: var( --kendo-chat-avatar-size, #{ $kendo-chat-avatar-size } );
             position: absolute;
 
             @at-root .k-message-group:not(.k-alt) > .k-avatar {
@@ -305,7 +302,7 @@
             }
 
             .k-rtl &,
-            &[dir="rtl"] {
+            [dir="rtl"] & {
                 transform: scaleX(-1);
             }
         }
@@ -318,6 +315,11 @@
         margin: $kendo-chat-bubble-spacing 0 0;
     }
 
+    .k-message-group.k-alt + .k-card-list,
+    .k-message-group.k-alt + kendo-chat-message-attachments.k-card-list {
+        align-self: flex-end;
+    }
+
     .k-chat .k-card-deck {
         max-width: calc( 100% + #{ $kendo-chat-message-list-padding-y * 2 } ); // prevent overflowing in the parent element
         max-width: calc( 100% + var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y * 2} ) );
@@ -330,8 +332,7 @@
         overflow-x: auto;
         scroll-behavior: smooth;
     }
-    .k-chat .k-card-deck .k-card,
-    .k-chat .k-card-deck .k-card-wrap {
+    .k-chat .k-card-deck .k-card {
         width: 200px;
     }
 
@@ -402,16 +403,10 @@
 
 @mixin kendo-chat-toolbar--layout() {
 
-    .k-chat-toolbar,
-    .k-chat .k-toolbar-box {
-        padding-inline: var( --kendo-chat-toolbar-padding-x, #{ $kendo-chat-toolbar-padding-x } );
-        padding-block: var( --kendo-chat-toolbar-padding-y, #{ $kendo-chat-toolbar-padding-y } );
+    .k-chat-toolbar {
         width: 100%;
         border-width: 1px 0 0;
-        box-sizing: border-box;
         flex: none;
-        overflow: hidden;
-        position: relative;
 
         &::before {
             display: none;

package/scss/chat/_theme.scss

@@ -25,7 +25,7 @@
 
 
         // Bubbles
-        .k-bubble {
+        .k-chat-bubble {
             @include fill(
                 var( --kendo-chat-bubble-text, #{ $kendo-chat-bubble-text } ),
                 var( --kendo-chat-bubble-bg, #{ $kendo-chat-bubble-bg } ),
@@ -38,14 +38,14 @@
             a { color: var( --kendo-chat-link-text, #{ $kendo-chat-link-text } ) };
             a:hover { color: var( --kendo-chat-link-hover-text, #{ $kendo-chat-link-hover-text } ) };
         }
-        .k-bubble:hover {
+        .k-chat-bubble:hover {
             @include box-shadow( var( --kendo-chat-bubble-hover-shadow, #{ $kendo-chat-bubble-hover-shadow } ) );
         }
-        .k-selected .k-bubble {
+        .k-selected .k-chat-bubble {
             @include box-shadow( var( --kendo-chat-bubble-selected-shadow, #{ $kendo-chat-bubble-selected-shadow } ) );
         }
 
-        .k-alt .k-bubble {
+        .k-alt .k-chat-bubble {
             @include fill(
                 var( --kendo-chat-alt-bubble-text, #{ $kendo-chat-alt-bubble-text } ),
                 var( --kendo-chat-alt-bubble-bg, #{ $kendo-chat-alt-bubble-bg } ),
@@ -53,10 +53,10 @@
             );
             @include box-shadow( var( --kendo-chat-alt-bubble-shadow, #{ $kendo-chat-alt-bubble-shadow } ) );
         }
-        .k-alt .k-bubble:hover {
+        .k-alt .k-chat-bubble:hover {
             @include box-shadow( var( --kendo-chat-alt-bubble-hover-shadow, #{ $kendo-chat-alt-bubble-hover-shadow } ) );
         }
-        .k-alt .k-selected .k-bubble {
+        .k-alt .k-selected .k-chat-bubble {
             @include box-shadow( var( --kendo-chat-alt-bubble-selected-shadow, #{ $kendo-chat-alt-bubble-selected-shadow } ) );
         }
 

package/scss/chat/_variables.scss

@@ -112,12 +112,6 @@ $kendo-chat-avatar-size: 32px !default;
 /// @group chat
 $kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;
 
-/// The horizontal padding of the toolbar in the chat.
-/// @group chat
-$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
-/// The vertical padding of the toolbar in the chat.
-/// @group chat
-$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
 /// The spacing of the toolbar in the chat.
 /// @group chat
 $kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;

package/scss/grid/_layout.scss

@@ -90,10 +90,6 @@
                 outline: none;
             }
 
-            .k-placeholder-line {
-                width: var( --kendo-grid-cell-placeholder-width, #{$kendo-grid-cell-placeholder-width} );
-            }
-
             > .k-radio,
             > .k-radio-wrap,
             > .k-checkbox,
@@ -713,14 +709,6 @@
         border-width: 0 0 1px;
     }
 
-    .k-pager-input {
-        .k-numerictextbox {
-            margin-block: 0;
-            margin-inline: calc( var( --kendo-font-size, 14px ) / 2 );
-            width: 5em;
-        }
-    }
-
     .k-grid-virtual .k-grid-content {
         .k-grid-table-wrap {
             float: left;

package/scss/grid/_variables.scss

@@ -319,10 +319,6 @@ $kendo-grid-cell-border-width-y: $kendo-grid-border-width !default;
 /// Horizontal border width of the grid cell.
 /// @group grid
 $kendo-grid-cell-border-width-x: 0px !default;
-/// Default width of the grid cell placeholder.
-/// @group grid
-$kendo-grid-cell-placeholder-width: 80% !default;
-
 /// Font size of the grid sort index.
 /// @group grid
 $kendo-grid-sort-index-font-size: var( --kendo-font-size-sm, inherit ) !default;

package/scss/pager/_layout.scss

@@ -72,8 +72,7 @@
         position: relative;
 
         select.k-dropdown-list {
-            cursor: pointer;
-            display: none;
+            width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
         }
     }
     .k-pager-numbers {
@@ -109,9 +108,10 @@
     // Pager input
     .k-pager-input {
         @extend %base-pager-section !optional;
+        gap: 1ex;
 
-        .k-textbox {
-            margin-inline: 1ex;
+        .k-textbox,
+        .k-numerictextbox {
             margin-block: 0;
             width: var( --kendo-pager-input-width, #{$kendo-pager-input-width} );
         }
@@ -121,10 +121,10 @@
     // Pager sizes
     .k-pager-sizes {
         @extend %base-pager-section !optional;
+        gap: 1ex;
 
         .k-dropdown-list,
         > select {
-            margin-inline-end: 1ex;
             width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
         }
 
@@ -152,31 +152,6 @@
         order: 10;
     }
 
-    // Responsive
-    .k-pager-mobile-sm {
-        overflow: visible;
-
-        // Show native select
-        .k-pager-numbers-wrap {
-            select.k-dropdown-list {
-                @extend %base-pager-section !optional;
-                @if ($kendo-pager-section-spacing) {
-                    margin-left: $kendo-pager-section-spacing;
-                    margin-right: $kendo-pager-section-spacing;
-                }
-                width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
-            }
-        }
-    }
-
-    // Hide components
-    .k-pager-mobile-md .k-pager-info,
-    .k-pager-mobile-sm .k-pager-info,
-    .k-pager-mobile-sm .k-pager-sizes,
-    .k-pager-mobile-sm .k-pager-numbers {
-        display: none;
-    }
-
     // Pager sizes
     @each $size, $size-props in $kendo-pager-sizes {
         $_padding-x: map.get($size-props, padding-x);
@@ -188,7 +163,8 @@
             --INTERNAL--kendo-pager-padding-y: var( --kendo-pager-#{$size}-padding-y, #{$_padding-y} );
             --INTERNAL--kendo-pager-spacing: var( --kendo-pager-#{$size}-spacing, #{$_item-group-spacing} );
 
-            .k-pager-input {
+            .k-pager-input,
+            select.k-dropdown-list {
                 margin-inline-start: var( --kendo-pager-input-margin-start, #{$_item-group-spacing} );
                 margin-inline-end: var( --kendo-pager-input-margin-end, #{$_item-group-spacing} );
             }

package/scss/pager/_variables.scss

@@ -61,10 +61,6 @@ $kendo-pager-focus-text: var( --kendo-pager-text, #{$kendo-pager-text}) !default
 /// @group pager
 $kendo-pager-focus-border: k-get-theme-color-var( neutral-130 ) !default;
 
-/// The spacing between the Pager sections.
-/// @group pager
-$kendo-pager-section-spacing: 1em !default;
-
 /// The border radius of the Pager items.
 /// @group pager
 $kendo-pager-item-border-radius: 0 !default;

package/scss/scrollview/_layout.scss

@@ -2,8 +2,7 @@
 @use "./_variables.scss" as *;
 
 @mixin kendo-scrollview--layout() {
-    kendo-scrollview.k-scrollview-wrap,
-    kendo-scrollview.k-scrollview,
+
     .k-scrollview {
         border-width: var( --kendo-scrollview-border-width, #{$kendo-scrollview-border-width} );
         border-style: solid;
@@ -19,14 +18,14 @@
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }
 
-    .k-scrollview-wrap .k-scrollview,
-    .k-scrollview .k-scrollview-wrap {
-        list-style-type: none;
+    .k-scrollview-wrap {
         position: absolute;
         margin: 0;
         padding: 0;
-        width: 100%;
         height: 100%;
+        width: 100%;
+        display: flex;
+        flex-flow: row nowrap;
         cursor: default;
         white-space: nowrap;
 
@@ -34,40 +33,34 @@
             user-select: none;
         }
 
-        & > li {
-            display: inline-block;
-            overflow: hidden;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-
-        & > [data-role="page"] {
-            vertical-align: top;
-            display: inline-block;
-            min-height: 1px;
-        }
     }
 
+    // Can be removed once Angular are able to rely on the animations from the themes
+    kendo-scrollview.k-scrollview .k-scrollview-wrap > .k-scrollview-view {
+        display: inline-block;
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
 
-    // Blazor rendering
     .k-scrollview-wrap.k-scrollview-animate {
-        display: flex;
-        flex-flow: row nowrap;
-        width: calc( var( --kendo-scrollview-views, 1) * 100% );
+        width: calc( var(--kendo-scrollview-views, 1) * 100% );
         transition-duration: var( --kendo-scrollview-transition-duration, #{$kendo-scrollview-transition-duration} );
         transition-timing-function: var( --kendo-scrollview-transition-timing-function, #{$kendo-scrollview-transition-timing-function} );
         transform: translateX( calc( -100% / var( --kendo-scrollview-views, 1) * ( var( --kendo-scrollview-current, 1) - 1) ) );
 
+        [dir="rtl"] &,
+        .k-rtl & {
+            transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
+        }
+
         .k-scrollview-view {
-            width: calc( 100% / var( --kendo-scrollview-views, 1) );
-            flex: 0 0 calc( 100% / var( --kendo-scrollview-views, 1) );
+            width: calc( 100% / var(--kendo-scrollview-views, 1) );
+            flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
         }
     }
 
-
-    kendo-scrollview.k-scrollview-wrap kendo-scrollview-pager,
-    kendo-scrollview.k-scrollview kendo-scrollview-pager,
     .k-scrollview-nav-wrap {
         padding: 0;
         margin: 0;
@@ -79,17 +72,14 @@
         text-align: center;
     }
 
-    kendo-scrollview.k-scrollview-wrap kendo-scrollview-pager,
     kendo-scrollview.k-scrollview kendo-scrollview-pager {
         pointer-events: none;
     }
 
-    kendo-scrollview.k-scrollview-wrap .k-scrollview-nav,
     kendo-scrollview.k-scrollview .k-scrollview-nav {
         pointer-events: initial;
     }
 
-    .k-scrollview-pageable,
     .k-scrollview-nav {
         margin: 0;
         padding: var( --kendo-scrollview-pager-item-spacing, #{$kendo-scrollview-pager-item-spacing} );
@@ -175,20 +165,4 @@
         transition-timing-function: ease-in-out;
     }
 
-
-    @supports (-webkit-user-select: none) {
-        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
-        kendo-scrollview.k-scrollview ul.k-scrollview-wrap li > *,
-        div.k-scrollview ul.k-scrollview-wrap li > * {
-            pointer-events: auto;
-        }
-    }
-
-    @supports (not (-webkit-user-select: none)) {
-        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
-        kendo-scrollview.k-scrollview ul.k-scrollview-wrap li > *,
-        div.k-scrollview ul.k-scrollview-wrap li > * {
-            pointer-events: none;
-        }
-    }
 }

package/scss/scrollview/_theme.scss

@@ -3,9 +3,7 @@
 
 @mixin kendo-scrollview--theme() {
 
-    kendo-scrollview.k-scrollview-wrap,
-    kendo-scrollview.k-scrollview,
-    div.k-scrollview {
+    .k-scrollview {
         @include fill(
             var( --kendo-scrollview-text, #{$kendo-scrollview-text} ),
             var( --kendo-scrollview-bg, #{$kendo-scrollview-bg} ),

package/scss/tilelayout/_layout.scss

@@ -9,6 +9,8 @@
         box-sizing: border-box;
         outline: 0;
         display: grid;
+        padding-block: var( --kendo-tile-layout-padding-y, #{$kendo-tile-layout-padding-y} );
+        padding-inline: var( --kendo-tile-layout-padding-x, #{$kendo-tile-layout-padding-x} );
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }

package/scss/tilelayout/_variables.scss

@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:map";
 @use "../core/" as *;
 @use "../card/_variables.scss" as *;
 
@@ -9,6 +10,14 @@ $kendo-tile-layout-border-width: 0px !default;
 /// @group tilelayout
 $kendo-tile-layout-bg: k-get-theme-color-var( neutral-10 ) !default;
 
+/// The horizontal padding of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-padding-x: map.get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the TileLayout
+/// @group tilelayout
+$kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
+
 /// The width of the border around the TileLayout hint.
 /// @group tilelayout
 $kendo-tile-layout-hint-border-width: 1px !default;