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

package/dist/meta/variables.json

@@ -0,0 +1 @@
+{}

package/dist/meta/variables.scss

@@ -0,0 +1,10 @@
+@use "sass:meta";
+@use "../all.scss";
+
+$_vars: meta.module-variables("all");
+
+body {
+    @each $key, $val in $_vars {
+        var: k-resolve-var( unquote($key), meta.type-of( $val ), $val );
+    }
+}

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.1.1-dev.8+237a5fdca",
+    "version": "6.2.1-dev.0+7a0fad806",
     "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.1.1-dev.8+237a5fdca",
+    "version": "6.2.1-dev.0+7a0fad806",
     "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.1.1-dev.8+237a5fdca",
+  "version": "6.2.1-dev.0+7a0fad806",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.4.0",
-    "@progress/kendo-theme-core": "^6.1.1-dev.8+237a5fdca",
-    "@progress/kendo-theme-utils": "^6.1.1-dev.8+237a5fdca"
+    "@progress/kendo-theme-core": "6.2.1-dev.0+7a0fad806",
+    "@progress/kendo-theme-utils": "6.2.1-dev.0+7a0fad806"
   },
-  "gitHead": "237a5fdca51516273f563421c40d03335734d230"
+  "gitHead": "7a0fad8063cd9fe27e17a9898e289cca17895c32"
 }

package/scss/action-buttons/_layout.scss

@@ -26,7 +26,7 @@
     .k-edit-buttons,
     .k-action-buttons,
     .k-columnmenu-actions {
-        @extend .k-actions;
+        @extend .k-actions !optional;
     }
 
     // Actions align

package/scss/adaptive/_layout.scss

@@ -140,7 +140,8 @@
 
             .k-recur-items-wrap {
                 width: 100%;
-                margin: -1px 0;
+                margin-block: -1px;
+                margin-inline: 0;
             }
 
             .k-scheduler-recur-end-wrap {
@@ -166,7 +167,8 @@
         }
 
         .k-scheduler-toolbar {
-            padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x;
+            padding-block: $kendo-toolbar-md-padding-y;
+            padding-inline: $kendo-toolbar-md-padding-x;
 
             > * {
                 margin: 0;
@@ -201,7 +203,8 @@
         }
 
         .k-scheduler-footer {
-            padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x;
+            padding-block: $kendo-toolbar-md-padding-y;
+            padding-inline: $kendo-toolbar-md-padding-x;
             display: flex;
             justify-content: space-between;
 
@@ -360,12 +363,14 @@
 
         .k-list-title,
         .k-filter-help-text {
-            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
             display: block;
         }
 
         .k-listgroup-title {
-            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
             font-weight: bold;
             text-transform: uppercase;
         }

package/scss/breadcrumb/_layout.scss

@@ -102,7 +102,8 @@
     }
 
     .k-breadcrumb-link > .k-image,
-    .k-breadcrumb-icontext-link .k-icon {
+    .k-breadcrumb-icontext-link .k-icon,
+    .k-breadcrumb-icontext-link .k-svg-icon {
         margin-inline-end: var( --kendo-breadcrumb-link-icon-spacing, #{$kendo-breadcrumb-link-icon-spacing} );
     }
 

package/scss/calendar/_layout.scss

@@ -42,7 +42,8 @@
 
     // Calendar table
     .k-calendar-table {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         border-width: 0;
         border-color: inherit;
         border-spacing: 0;
@@ -261,7 +262,7 @@
             block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
         }
         .k-link {
-            text-align: left;
+            text-align: start;
         }
     }
 

package/scss/chat/_layout.scss

@@ -61,7 +61,7 @@
         }
         .k-message-group:not(.k-alt) {
             align-items: flex-start;
-            text-align: left;
+            text-align: start;
 
             .k-message-time {
                 margin-inline-start: var( --kendo-chat-item-spacing-x, #{ $kendo-chat-item-spacing-x } );
@@ -83,7 +83,7 @@
         .k-message-group.k-alt {
             align-self: flex-end;
             align-items: flex-end;
-            text-align: right;
+            text-align: end;
 
             .k-message-time {
                 margin-inline-end: var( --kendo-chat-item-spacing-x, #{ $kendo-chat-item-spacing-x } );

package/scss/chip/_layout.scss

@@ -55,14 +55,21 @@
 
     // Chip content
     .k-chip-content {
-        padding: .5em 0;
-        margin: -.5em 0;
+        padding-block: .5em;
+        padding-inline: 0;
+        margin-block: -.5em;
+        margin-inline: 0;
         min-width: 0;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
         overflow: hidden;
         flex: 1 1 auto;
+
+        // Adjustment for kendo-icon-wrapper
+        .k-icon-wrapper-host {
+            display: initial;
+        }
     }
 
     .k-chip-content:first-child {
@@ -106,7 +113,8 @@
 
     // Actions
     .k-chip-actions {
-        margin: -5em 0;
+        margin-block: -5em;
+        margin-inline: 0;
         flex: none;
         display: flex;
         flex-flow: row nowrap;

package/scss/colorgradient/_layout.scss

@@ -168,12 +168,14 @@
             align-items: center;
             gap: calc( var( --kendo-color-gradient-contrast-spacing,  #{$kendo-color-gradient-contrast-spacing} ) / 2 );
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 vertical-align: middle;
             }
 
             // Needed for the double check icons
             .k-icon + .k-icon,
+            .k-svg-icon + .k-svg-icon,
             .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
                 margin-inline-start: -13px;
             }

package/scss/colorpicker/_layout.scss

@@ -9,7 +9,7 @@
 
     // Alias
     .k-colorpicker {
-        @extend .k-color-picker;
+        @extend .k-color-picker !optional;
     }
 
 }

package/scss/dataviz/_layout.scss

@@ -98,7 +98,7 @@
 
     .k-chart-tooltip td {
         width: auto;
-        text-align: left;
+        text-align: start;
         padding-inline: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
         padding-block: var( --kendo-padding-y-sm, #{$kendo-padding-sm-y} );
         line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
@@ -358,7 +358,7 @@
     }
 
     .k-gauge {
-        text-align: left;
+        text-align: start;
         position: relative;
     }
 

package/scss/daterangepicker/_layout.scss

@@ -35,6 +35,6 @@
 
     // Alias
     .k-daterangepicker {
-        @extend .k-daterange-picker;
+        @extend .k-daterange-picker !optional;
     }
 }

package/scss/dropzone/_layout.scss

@@ -25,7 +25,6 @@
         align-items: center;
         justify-content: center;
         position: relative;
-        cursor: pointer;
 
         .k-icon,
         .k-dropzone-icon {
@@ -33,6 +32,11 @@
             font-size: var( --kendo-dropzone-icon-size, #{$kendo-dropzone-icon-size} );
         }
 
+        .k-svg-icon {
+            width: var( --kendo-dropzone-icon-size, #{$kendo-dropzone-icon-size} );
+            height: var( --kendo-dropzone-icon-size, #{$kendo-dropzone-icon-size} );
+        }
+
         .k-dropzone-hint {
             margin-block-end: var( --kendo-dropzone-hint-spacing, #{$kendo-dropzone-hint-spacing} );
             font-size: var( --kendo-dropzone-hint-font-size, #{$kendo-dropzone-hint-font-size} );

package/scss/dropzone/_theme.scss

@@ -12,6 +12,7 @@
         );
 
         .k-icon,
+        .k-svg-icon,
         .k-dropzone-icon {
             color: var( --kendo-dropzone-icon-text, #{$kendo-dropzone-icon-text} );
         }
@@ -27,6 +28,7 @@
     // Hover
     .k-external-dropzone-hover {
         .k-icon,
+        .k-svg-icon,
         .k-dropzone-icon {
             color: var( --kendo-dropzone-icon-hover-text, #{$kendo-dropzone-icon-hover-text} );
         }

package/scss/editor/_layout.scss

@@ -41,7 +41,8 @@
     // Inline editor
     .k-editor-inline {
         @include border-radius( $kendo-border-radius-md );
-        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+        padding-block: $kendo-padding-sm-y;
+        padding-inline: $kendo-padding-sm-x;
         border: 1px solid transparent;
         word-wrap: break-word;
         overflow: auto;
@@ -148,11 +149,13 @@
         flex-shrink: 0;
 
         .k-editor-export {
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 margin-inline-end: var( --kendo-editor-export-tool-icon-margin-x, #{$kendo-editor-export-tool-icon-margin-x} );
             }
 
             .k-icon,
+            .k-svg-icon,
             .k-export-tool-text {
                 vertical-align: middle;
             }
@@ -220,7 +223,8 @@
         th {
             min-width: 1em;
             border: 1px solid;
-            padding: 3px 5px;
+            padding-block: 3px;
+            padding-inline: 5px;
             vertical-align: top;
             box-sizing: border-box;
             position: relative;
@@ -228,7 +232,10 @@
 
         th {
             font-weight: bold;
-            text-align: left;
+            text-align: start;
+        }
+        td {
+            text-align: start;
         }
 
         // Give selected cells a blue overlay
@@ -247,8 +254,10 @@
     .k-edit-form-content {
         flex: 1 1 auto;
         overflow: auto;
-        margin: (-$kendo-window-inner-padding-y) (-$kendo-window-inner-padding-x);
-        padding: $kendo-window-inner-padding-y $kendo-window-inner-padding-x;
+        margin-block: (-$kendo-window-inner-padding-y);
+        margin-inline: (-$kendo-window-inner-padding-x);
+        padding-block: $kendo-window-inner-padding-y;
+        padding-inline: $kendo-window-inner-padding-x;
     }
 
     // Insert table
@@ -354,7 +363,8 @@
                 flex: 1;
                 width: 100px; // fix width for Edge
             }
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 margin: 0;
                 position: static;
             }
@@ -390,7 +400,8 @@
             height: 390px;
             max-height: 50vh;
             margin-block-end: map.get( $kendo-spacing, 4 );
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             border-top-width: 0;
             overflow: auto;
         }
@@ -398,7 +409,8 @@
         .k-tile {
             width: 33%;
             height: 90px;
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             box-sizing: border-box;
             white-space: nowrap;
             overflow: hidden;
@@ -450,7 +462,8 @@
             inset-inline-start: $kendo-input-md-padding-x;
             inset-block-start: $kendo-input-md-padding-y;
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 position: static;
                 margin-block-start: 0;
             }
@@ -510,7 +523,8 @@
 
             td {
                 min-width: 1px;
-                padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+                padding-block: $kendo-padding-sm-y;
+                padding-inline: $kendo-padding-sm-x;
             }
         }
 
@@ -574,7 +588,8 @@
                 .k-column-resize-marker {
                     width: 2px;
                     height: 100%;
-                    margin: 0 auto;
+                    margin-block: 0;
+                    margin-inline: auto;
                     display: none;
                     opacity: .8;
                 }

package/scss/filemanager/_layout.scss

@@ -241,7 +241,9 @@
         flex-direction: row;
         align-items: center;
     }
-    .k-filemanager-drag-hint .k-icon {
+
+    .k-filemanager-drag-hint .k-icon,
+    .k-filemanager-drag-hint .k-svg-icon {
         margin-inline-end: var( --kendo-icon-spacing, .5rem );
 
     }

package/scss/floating-label/_layout.scss

@@ -19,7 +19,7 @@
         }
 
         > .k-label {
-            max-width: 90%;
+            max-width: var( --kendo-floating-label-max-width, #{$kendo-floating-label-max-width} );
             font-size: var( --kendo-floating-label-font-size, #{$kendo-floating-label-font-size} );
             font-weight: var( --kendo-floating-label-font-weight, #{$kendo-floating-label-font-weight} );
             line-height: var( --kendo-floating-label-line-height, #{$kendo-floating-label-line-height} );

package/scss/floating-label/_variables.scss

@@ -9,6 +9,10 @@ $kendo-floating-label-scale: 1 !default;
 /// @group floating-label
 $kendo-floating-label-font-size: var( --kendo-font-size, inherit ) !default;
 
+/// The max-width of the floating label
+/// @group floating-label
+$kendo-floating-label-max-width: 90% !default;
+
 /// The font weight of the floating label
 /// @group floating-label
 $kendo-floating-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default;

package/scss/forms/_layout.scss

@@ -126,7 +126,7 @@
 
     // Form Buttons Container
     .k-form-buttons {
-        @extend .k-actions;
+        @extend .k-actions !optional;
         padding: 0;
         overflow: visible;
     }
@@ -223,7 +223,7 @@
 
         legend {
             font-size: var( --kendo-font-size-sm, #{$kendo-font-size-sm} );
-            text-align: left;
+            text-align: start;
             font-weight: 600;
             line-height: 1;
             margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-lg-y} ) * 2 );
@@ -235,12 +235,12 @@
         .k-form-field {
             display: flex;
             align-items: flex-start;
-            text-align: left;
+            text-align: start;
             margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-lg-y} ) * 2 );
 
             > span:not(.k-widget) {
                 width: var( --kendo-inline-form-element-width, #{$kendo-inline-form-element-width} );
-                text-align: right;
+                text-align: end;
                 line-height: var( --kendo-line-height, #{$kendo-line-height-md} );
                 padding-block: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} );
                 padding-inline-end: var( --kendo-padding-x-lg, #{$kendo-padding-lg-x} );
@@ -294,7 +294,7 @@
         padding-block: calc( #{$kendo-input-md-padding-y} + #{$kendo-input-border-width} );
         width: 30%;
         line-height: var( --kendo-form-line-height, #{$kendo-form-line-height} );
-        text-align: right;
+        text-align: end;
         float: left;
         clear: both;
     }

package/scss/gantt/_layout.scss

@@ -85,7 +85,8 @@
             }
             .k-grid-header th:last-child {
                 .k-header {
-                    padding: $kendo-grid-header-padding-y $kendo-grid-header-padding-x;
+                    padding-block: $kendo-grid-header-padding-y;
+                    padding-inline: $kendo-grid-header-padding-x;
                     border-width: 0 0 1px $kendo-grid-cell-border-width-y;
                     white-space: nowrap;
                 }
@@ -299,7 +300,8 @@
             overflow-x: scroll;
         }
         .k-header {
-            padding: $kendo-grid-header-padding-y $kendo-grid-header-padding-x;
+            padding-block: $kendo-grid-header-padding-y;
+            padding-inline: $kendo-grid-header-padding-x;
             border-block-start-width: 0;
             border-block-end-width: 1px;
             border-inline-start-width: $kendo-grid-cell-border-width-y;
@@ -389,8 +391,10 @@
     }
 
     .k-task-wrap {
-        margin: 0 -21px;
-        padding: 5px 21px;
+        margin-block: 0;
+        margin-inline: -21px;
+        padding-block: 5px;
+        padding-inline: 21px;
         display: inline-flex;
         flex-direction: row;
         align-items: center;
@@ -598,14 +602,16 @@
         white-space: nowrap;
 
         .k-resource {
-            margin: 0 5px;
+            margin-block: 0;
+            margin-inline: 5px;
         }
     }
 
 
     // Task tooltip
     .k-task-details {
-        padding: $kendo-padding-md-y $kendo-padding-md-x;
+        padding-block: $kendo-padding-md-y;
+        padding-inline: $kendo-padding-md-x;
         white-space: nowrap;
 
         strong {

package/scss/grid/_layout.scss

@@ -160,7 +160,8 @@
             text-overflow: clip;
         }
 
-        .k-grouping-row .k-icon {
+        .k-grouping-row .k-icon,
+        .k-grouping-row .k-svg-icon {
             margin-inline-start: calc( ( var( --kendo-icon-size, 1rem ) / 2 ) - var( --INTERNAL--kendo-grid-cell-padding-x, 0 ) );
             margin-inline-end: calc( var( --kendo-icon-size, 1rem ) / 2 );
             text-decoration: none;
@@ -184,7 +185,8 @@
             padding: 0;
             overflow: visible;
 
-            > .k-icon {
+            > .k-icon,
+            > .k-svg-icon {
                 padding-inline: 0;
                 padding-block: var( --INTERNAL--kendo-grid-cell-padding-y, 0 );
                 width: 100%;
@@ -237,7 +239,8 @@
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
+        .k-hierarchy-cell .k-icon,
+        .k-hierarchy-cell .k-svg-icon {
             border-width: 0;
         }
 
@@ -331,7 +334,7 @@
 
     // Alias used in jQuery
     .k-reorder-cue {
-        @extend .k-grouping-dropclue;
+        @extend .k-grouping-dropclue !optional;
     }
 
     // Grid header / footer
@@ -412,7 +415,8 @@
             text-overflow: ellipsis;
             outline: 0;
 
-            > .k-icon {
+            > .k-icon,
+            > .k-svg-icon {
                 margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
             }
         }
@@ -447,6 +451,7 @@
         }
 
         .k-cell-inner > .k-link > .k-icon,
+        .k-cell-inner > .k-link > .k-svg-icon,
         .k-cell-inner > .k-link > .k-sort-icon {
             vertical-align: text-top;
             margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
@@ -888,7 +893,8 @@
 
     .k-grid-norecords-template {
         box-sizing: border-box;
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: 20em;
         height: 4em;
         border: 1px solid;
@@ -926,7 +932,8 @@
             flex: 1;
             overflow: hidden;
 
-            > .k-icon {
+            > .k-icon,
+            > .k-svg-icon {
                 margin-left: 0;
                 display: inline-block;
                 flex-shrink: 0;
@@ -949,7 +956,8 @@
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
+        .k-hierarchy-cell .k-icon,
+        .k-hierarchy-cell .k-svg-icon {
             text-align: center;
             display: inline-block;
             flex-shrink: 0;
@@ -1103,7 +1111,11 @@
         kendo-grid-string-filter-menu,
         kendo-grid-date-filter-menu,
         kendo-grid-numeric-filter-menu,
-        kendo-grid-filter-menu-input-wrapper {
+        kendo-grid-filter-menu-input-wrapper,
+        kendo-treelist-string-filter-menu,
+        kendo-treelist-date-filter-menu,
+        kendo-treelist-numeric-filter-menu,
+        kendo-treelist-filter-menu-input-wrapper {
             display: flex;
             flex-flow: column nowrap;
             align-items: stretch;
@@ -1234,7 +1246,8 @@
         outline: 0;
         cursor: pointer;
 
-        > .k-icon {
+        > .k-icon,
+        > .k-svg-icon {
             margin-inline-end: var( --kendo-grid-column-menu-item-icon-spacing, #{$kendo-grid-column-menu-item-icon-spacing} );
         }
     }