@progress/kendo-theme-fluent 6.2.1-dev.8 → 6.3.1-dev.0

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.2.1-dev.8+79dd700c6",
+    "version": "6.3.1-dev.0",
     "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.2.1-dev.8+79dd700c6",
+    "version": "6.3.1-dev.0",
     "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.2.1-dev.8+79dd700c6",
+  "version": "6.3.1-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,9 +49,9 @@
     "postpublish": "echo 'no postpublish for the Fluent theme'"
   },
   "dependencies": {
-    "@progress/kendo-font-icons": "1.4.0",
-    "@progress/kendo-theme-core": "6.2.1-dev.8+79dd700c6",
-    "@progress/kendo-theme-utils": "6.2.1-dev.8+79dd700c6"
+    "@progress/kendo-font-icons": "1.4.2",
+    "@progress/kendo-theme-core": "6.3.1-dev.0",
+    "@progress/kendo-theme-utils": "6.3.1-dev.0"
   },
-  "gitHead": "79dd700c627f9d132a97c8fa78f2478d9b204c60"
+  "gitHead": "f5a3aaf1f33a6c5fbc8347314d44052752d71a43"
 }

package/scss/calendar/_layout.scss

@@ -86,8 +86,8 @@
     .k-calendar-th {
         padding-inline: var( --kendo-calendar-header-cell-padding-x, #{$kendo-calendar-header-cell-padding-x} );
         padding-block: var( --kendo-calendar-header-cell-padding-y, #{$kendo-calendar-header-cell-padding-y} );
-        width: var( --kendo-calendar-header-cell-width, #{$kendo-calendar-header-cell-width} );
-        height: var( --kendo-calendar-header-cell-height, #{$kendo-calendar-header-cell-height} );
+        inline-size: var( --INTERNAL--kendo-calendar-cell-size, var( --kendo-calendar-header-cell-width, #{$kendo-calendar-header-cell-width} ) );
+        block-size: var( --INTERNAL--kendo-calendar-cell-size, var( --kendo-calendar-header-cell-height, #{$kendo-calendar-header-cell-height} ) );
         font-size: var( --kendo-calendar-header-cell-font-size, #{$kendo-calendar-header-cell-font-size} );
         line-height: var( --kendo-calendar-header-cell-line-height, #{$kendo-calendar-header-cell-line-height} );
         text-transform: uppercase;
@@ -519,6 +519,8 @@
 
     // RTL
     .k-rtl .k-calendar,
+    [dir="rtl"] .k-calendar,
+    .k-calendar.k-rtl,
     .k-calendar[dir="rtl"] {
 
         .k-calendar-nav-prev,

package/scss/core/module-system/_components.scss

@@ -2,7 +2,6 @@ $components: (
     // Typography and utils
     "typography",
     "utils",
-    "cursor",
     "draggable",
 
     // Generic content

package/scss/datetimepicker/_layout.scss

@@ -49,12 +49,12 @@
         transform: translateX(-100%);
     }
 
-    k-datetimepicker {
+    .k-time-tab .k-datetime-selector {
+        &.k-rtl,
         &[dir="rtl"],
-        .k-rtl & {
-            .k-time-tab .k-datetime-selector {
-                transform: translateX(100%);
-            }
+        .k-rtl &,
+        [dir="rtl"] & {
+            transform: translateX(100%);
         }
     }
 }

package/scss/dropdowntree/_layout.scss

@@ -6,7 +6,9 @@
     .k-dropdown-tree {}
 
     // Dropdowntree popup
-    .k-popup-dropdowntree {
+    .k-popup-dropdowntree, // remove legacy class once updated in components
+    .k-dropdowntree-popup,
+    .k-multiselecttree-popup {
         padding: 0;
 
         .k-check-all {

package/scss/fab/_layout.scss

@@ -58,6 +58,7 @@
         width: var( --kendo-fab-icon-width, #{$kendo-fab-icon-width} );
         height: var( --kendo-fab-icon-height, #{$kendo-fab-icon-height} );
 
+        .k-icon-wrapper-host:not(:only-child) &,
         &:not(:only-child) {
             margin-inline-end: var( --kendo-fab-icon-spacing, #{$kendo-fab-icon-spacing} );
             margin-inline-start: calc( var( --kendo-fab-icon-spacing, #{$kendo-fab-icon-spacing} ) * -1 );
@@ -126,7 +127,8 @@
             flex-direction: row;
 
             .k-fab-item-text {
-                margin-inline-end: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
+                // Needed for fab item positioning in RTL
+                margin-right: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
             }
         }
 
@@ -134,7 +136,8 @@
             flex-direction: row-reverse;
 
             .k-fab-item-text {
-                margin-inline-start: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
+                // Needed for fab item positioning in RTL
+                margin-left: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
             }
         }
     }
@@ -166,4 +169,15 @@
         }
     }
 
+    .k-rtl .k-fab-popup,
+    [dir="rtl"] .k-fab-popup {
+        .k-fab-item.k-text-left {
+            flex-direction: row;
+        }
+
+        .k-fab-item.k-text-right {
+            flex-direction: row-reverse;
+        }
+    }
+
 }

package/scss/grid/_layout.scss

@@ -5,6 +5,7 @@
 @use "../chip/_variables.scss" as *;
 @use "../forms/_variables.scss" as *;
 @use "../table/_variables.scss" as *;
+@use "../tabstrip/_variables.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-grid--layout() {
@@ -475,6 +476,23 @@
         cursor: col-resize;
     }
 
+    .k-resizer-wrap {
+        display: block;
+        width: 100%;
+        padding-block-start: calc( var( --INTERNAL--kendo-grid-edit-cell-padding-x, 0 ) - #{$kendo-grid-row-resizer-height} );
+        padding-block-end: var( --INTERNAL--kendo-grid-edit-cell-padding-x, 0 );
+        position: absolute;
+        background: none;
+        cursor: row-resize;
+    }
+
+    .k-row-resizer {
+        display: block;
+        height: var( --kendo-grid-row-resizer-height, #{$kendo-grid-row-resizer-height} );
+        width: 100%;
+        background: none;
+     }
+
     .k-grid-footer {
         border-block-start-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
 
@@ -663,6 +681,22 @@
     }
 
 
+    // Selection Aggregates
+    .k-selection-aggregates {
+        padding-inline: var( --INTERNAL--kendo-grid-selection-aggregates-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-grid-selection-aggregates-padding-y, 0 );
+        border-width: var( --kendo-grid-selection-aggregates-border-width, #{$kendo-grid-selection-aggregates-border-width} ) 0 0;
+        border-style: solid;
+        line-height: var( --kendo-grid-selection-aggregates-line-height, #{$kendo-grid-selection-aggregates-line-height} );
+        display: flex;
+        justify-content: flex-end;
+        gap: var( --kendo-grid-selection-aggregates-spacing, #{$kendo-grid-selection-aggregates-spacing} );
+    }
+    .k-selection-aggregates-item-value {
+        font-weight: var( --kendo-grid-selection-aggregates-font-weight, #{$kendo-grid-selection-aggregates-font-weight} );
+    }
+
+
     // Pager
     .k-grid-pager {
         border-width: 1px 0 0;
@@ -988,6 +1022,8 @@
         $_button-calc-size: map.get( $size-props, button-calc-size );
         $_button-line-height: map.get( $size-props, button-line-height );
         $_group-dropclue-height: map.get( $size-props, group-dropclue-height );
+        $_selection-aggregates-padding-x: map.get( $size-props, selection-aggregates-padding-x );
+        $_selection-aggregates-padding-y: map.get( $size-props, selection-aggregates-padding-y );
 
         .k-grid-#{$size} {
             --INTERNAL--kendo-grid-header-padding-x: var( --kendo-grid-header-padding-x-#{$size}, #{$_header-padding-x} );
@@ -1004,6 +1040,8 @@
             --INTERNAL--kendo-button-calc-size: var( --kendo-button-calc-size-#{$size}, #{$_button-calc-size} );
             --INTERNAL--kendo-button-line-height: var( --kendo-button-line-height-#{$size}, #{$_button-line-height} );
             --INTERNAL--kendo-grid-group-drop-hint-height: var( --kendo-group-dropclue-height-#{$size}, #{$_group-dropclue-height} );
+            --INTERNAL--kendo-grid-selection-aggregates-padding-x: var( --kendo-grid-selection-aggregates-padding-x-#{$size}, #{$_selection-aggregates-padding-x} );
+            --INTERNAL--kendo-grid-selection-aggregates-padding-y: var( --kendo-grid-selection-aggregates-padding-y-#{$size}, #{$_selection-aggregates-padding-y} );
         }
     }
 
@@ -1205,6 +1243,27 @@
             }
         }
     }
+    .k-column-menu-tabbed {
+        border-radius: var( --kendo-tabstrip-item-border-radius, #{$kendo-tabstrip-item-border-radius} ) var( --kendo-tabstrip-item-border-radius, #{$kendo-tabstrip-item-border-radius} ) 0 0;
+
+        .k-tabstrip-items {
+            margin: calc( var( --kendo-tabstrip-item-border-width, #{$kendo-tabstrip-item-border-width} ) * -1 ) calc( var( --kendo-tabstrip-item-border-width, #{$kendo-tabstrip-item-border-width} ) * -1 ) 0;
+
+            .k-item {
+                flex: 1;
+            }
+
+            .k-link {
+                justify-content: center;
+            }
+        }
+
+        .k-tabstrip-content {
+            padding-inline: var( --kendo-grid-column-menu-tabbed-tabstrip-content-padding-x, #{$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x} );
+            padding-block: var( --kendo-grid-column-menu-tabbed-tabstrip-content-padding-y, #{$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y} );
+            border-width: 0;
+        }
+    }
 
     .k-column-list {
         padding: 0;

package/scss/grid/_theme.scss

@@ -276,6 +276,15 @@
         }
     }
 
+    // Selection Aggregates
+    .k-selection-aggregates {
+        @include fill(
+            var( --kendo-grid-selection-aggregates-text, #{$kendo-grid-selection-aggregates-text} ),
+            var( --kendo-grid-selection-aggregates-bg, #{$kendo-grid-selection-aggregates-bg} ),
+            var( --kendo-grid-selection-aggregates-border, #{$kendo-grid-selection-aggregates-border} )
+        );
+    }
+
     // Content
     .k-master-row {
         .k-grid-content-sticky {
@@ -519,6 +528,9 @@
             }
         }
     }
+    .k-column-menu-tabbed {
+        background-color: var( --kendo-grid-column-menu-tabbed-bg, #{$kendo-grid-column-menu-tabbed-bg} );
+    }
 
 
     .k-grid-norecords-template {
@@ -526,4 +538,16 @@
         border-color: $kendo-grid-border;
     }
 
+    .k-resizer-wrap {
+
+        &.k-hover .k-row-resizer {
+            @include fill( $bg: var( --kendo-grid-row-resizer-hover-bg, #{$kendo-grid-row-resizer-hover-bg} ) );
+        }
+
+        &.k-active .k-row-resizer {
+            @include fill( $bg: var( --kendo-grid-row-resizer-active-bg, #{$kendo-grid-row-resizer-active-bg} ) );
+        }
+
+    }
+
 }

package/scss/grid/_variables.scss

@@ -95,6 +95,8 @@ $kendo-grid-sm-filter-cell-padding-y: map.get( $kendo-spacing, 2 ) !default;
 $kendo-grid-sm-edit-cell-padding-x: $kendo-grid-sm-padding-x !default;
 $kendo-grid-sm-edit-cell-padding-y: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 $kendo-grid-sm-group-dropclue-height: calc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
+$kendo-grid-sm-selection-aggregates-padding-x: $kendo-grid-sm-padding-y !default;
+$kendo-grid-sm-selection-aggregates-padding-y: $kendo-grid-sm-padding-y !default;
 
 $kendo-grid-md-padding-x: $kendo-grid-padding-x !default;
 $kendo-grid-md-padding-y: $kendo-grid-padding-y !default;
@@ -109,6 +111,8 @@ $kendo-grid-md-filter-cell-padding-y: $kendo-grid-filter-cell-padding-y !default
 $kendo-grid-md-edit-cell-padding-x: $kendo-grid-edit-cell-padding-x !default;
 $kendo-grid-md-edit-cell-padding-y: $kendo-grid-edit-cell-padding-y !default;
 $kendo-grid-md-group-dropclue-height: $kendo-grid-group-drop-hint-height !default;
+$kendo-grid-md-selection-aggregates-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-x !default;
 
 
 // Kendo Grid sizes
@@ -126,7 +130,9 @@ $kendo-grid-sizes: (
         edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
         button-padding-y: $kendo-button-sm-padding-y,
         button-calc-size: $kendo-button-sm-calc-size,
-        group-dropclue-height: $kendo-grid-sm-group-dropclue-height
+        group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y
     ),
     md: (
         header-padding-x: $kendo-grid-md-header-padding-x,
@@ -141,7 +147,9 @@ $kendo-grid-sizes: (
         edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
         button-padding-y: $kendo-button-md-padding-y,
         button-calc-size: $kendo-button-md-calc-size,
-        group-dropclue-height: $kendo-grid-sm-group-dropclue-height
+        group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y
     ),
 ) !default;
 
@@ -240,6 +248,28 @@ $kendo-grid-footer-text: $kendo-table-footer-text !default;
 /// @group grid
 $kendo-grid-footer-border: $kendo-table-footer-border !default;
 
+/// Background color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-bg: $kendo-toolbar-bg !default;
+/// Text color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-text: $kendo-grid-text !default;
+/// Border color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-border: $kendo-grid-border !default;
+/// Border width of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-border-width: $kendo-grid-border-width !default;
+/// Spacing between the selection aggregates items
+/// @group grid
+$kendo-grid-selection-aggregates-spacing: map.get( $kendo-spacing, 2 ) !default;
+/// Line height of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
+/// Font weight of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
+
 /// Background color of the grid grouping header.
 /// @group grid
 $kendo-grid-grouping-header-bg: $kendo-toolbar-bg !default;
@@ -522,6 +552,17 @@ $kendo-grid-column-menu-group-header-text: var( --kendo-component-text, inherit
 /// @group grid
 $kendo-grid-column-menu-group-header-border: var( --kendo-component-border, inherit) !default;
 
+/// Horizontal padding of the tabstrip content in the grid tabbed column menu.
+/// @group grid
+$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: 0 !default;
+/// Vertical padding of the tabstrip content in the grid tabbed column menu.
+/// @group grid
+$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: map.get( $kendo-spacing, 3 ) !default;
+
+/// Background color of the grid tabbed column menu.
+/// @group grid
+$kendo-grid-column-menu-tabbed-bg: var( --kendo-base-bg, inherit ) !default;
+
 /// Default width of the grid drag cell.
 /// @group grid
 $kendo-grid-drag-cell-width: calc( var( --kendo-icon-size, 1rem ) * 2.25 ) !default;
@@ -531,3 +572,13 @@ $kendo-grid-hierarchy-col-width: calc( var( --kendo-icon-size, 1rem ) * 2 ) !def
 /// Spacing of the grid filterable icon.
 /// @group grid
 $kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-spacing} ) !default;
+
+/// Background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-hover-bg: get-theme-color-var( neutral-90 ) !default;
+/// Active background color of the grid row indicator
+/// @group grid
+$kendo-grid-row-resizer-active-bg: get-theme-color-var( primary-100 ) !default;
+/// Height of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-height: map-get( $kendo-spacing, 0.5 ) !default;

package/scss/grid/index.scss

@@ -17,6 +17,7 @@ $_kendo-module-meta: (
         "progressbar",
         "validator",
         "table",
+        "tabstrip",
         "list",
         "menu",
         "dialog",

package/scss/spreadsheet/_layout.scss

@@ -460,14 +460,11 @@
         box-sizing: border-box;
         position: absolute;
     }
-    .k-spreadsheet .k-selection-wrapper .k-spreadsheet-editor-button {
+    .k-spreadsheet .k-spreadsheet-editor-button {
         position: absolute;
         padding: 0;
         z-index: 60;
     }
-    .k-spreadsheet .k-selection-wrapper .k-spreadsheet-editor-button.k-spreadsheet-last-column {
-        transform: translateX(-100%);
-    }
 
     .k-spreadsheet-active-cell {
         // sass-lint:disable-block no-important