@progress/kendo-theme-fluent 6.2.1-dev.151 → 6.2.1-dev.170

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.2.1-dev.151+d6d7eb1c2",
+    "version": "6.2.1-dev.170+8a13808d8",
     "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.151+d6d7eb1c2",
+    "version": "6.2.1-dev.170+8a13808d8",
     "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.151+d6d7eb1c2",
+  "version": "6.2.1-dev.170+8a13808d8",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.4.2",
-    "@progress/kendo-theme-core": "6.2.1-dev.151+d6d7eb1c2",
-    "@progress/kendo-theme-utils": "6.2.1-dev.151+d6d7eb1c2"
+    "@progress/kendo-theme-core": "6.2.1-dev.170+8a13808d8",
+    "@progress/kendo-theme-utils": "6.2.1-dev.170+8a13808d8"
   },
-  "gitHead": "d6d7eb1c2046ac5f9c3bfe3b423b037cbaa7fa23"
+  "gitHead": "8a13808d819533aac7618d8548361f9c8d476de2"
 }

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,15 +476,23 @@
         cursor: col-resize;
     }
 
-    .k-row-resizer {
-        width: 100%;
-        height: 2px;
+    .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;
-        inset-block-end: 0;
+        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} );
 
@@ -672,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;
@@ -997,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} );
@@ -1013,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} );
         }
     }
 
@@ -1214,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,16 +538,16 @@
         border-color: $kendo-grid-border;
     }
 
-    .k-row-resizer {
-        @include fill (
-            $bg: var( --kendo-grid-row-resizer-bg, #{$kendo-grid-row-resizer-bg} ),
-         );
+    .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 {
-            @include fill (
-                $bg: var( --kendo-grid-row-resizer-active-bg, #{$kendo-grid-row-resizer-active-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;
@@ -534,7 +575,10 @@ $kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo
 
 /// Background color of the grid row resize indicator
 /// @group grid
-$kendo-grid-row-resizer-bg: get-theme-color-var( neutral-90 ) !default;
+$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",