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

package/scss/grid/_theme.scss

@@ -138,7 +138,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 {
             @include fill( $color: var( --kendo-grid-header-text, #{$kendo-grid-header-text} ) );
         }
 
@@ -147,7 +148,8 @@
                 $bg: var( --kendo-grid-grouping-row-bg, #{$kendo-grid-grouping-row-bg} )
             );
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 @include fill(
                     $color: var( --kendo-grid-header-text, #{$kendo-grid-header-text} )
                 );
@@ -228,7 +230,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 {
             &:hover {
                 @include fill(
                     $color: var( --kendo-hover-text, inherit ),
@@ -454,7 +457,8 @@
                 var( --kendo-grid-column-menu-item-bg, #{$kendo-grid-column-menu-item-bg} )
             );
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 @include fill(
                     var( --kendo-grid-column-menu-item-icon-text, #{$kendo-grid-column-menu-item-icon-text} )
                 );
@@ -487,7 +491,8 @@
             }
 
             &.k-disabled .k-link,
-            &.k-disabled .k-icon {
+            &.k-disabled .k-icon,
+            &.k-disabled .k-svg-icon {
                 @include disabled(
                     var( --kendo-disabled-text, inherit )
                 );

package/scss/icon/_layout.scss

@@ -30,10 +30,10 @@
     // RTL icons
     .k-rtl .k-i-indent-increase,
     .k-rtl .k-i-indent-decrease,
-    .k-rtl .k-i-expand,
-    .k-rtl .k-i-collapse,
-    [dir="rtl"] .k-i-expand,
-    [dir="rtl"] .k-i-collapse {
+    .k-rtl .k-i-caret-alt-right,
+    .k-rtl .k-i-caret-alt-down,
+    [dir="rtl"] .k-i-caret-alt-right,
+    [dir="rtl"] .k-i-caret-alt-down {
         transform: scaleX(-1);
     }
 

package/scss/input/_layout.scss

@@ -223,7 +223,9 @@
     .k-input-validation-icon,
     .k-input-loading-icon,
     .k-input-prefix > .k-icon,
-    .k-input-suffix > .k-icon {
+    .k-input-prefix > .k-svg-icon,
+    .k-input-suffix > .k-icon,
+    .k-input-suffix > .k-svg-icon {
         width: var( --INTERNAL--kendo-input-icon-size, min-content );
         height: var( --INTERNAL--kendo-input-icon-size, min-content );
         flex: none;
@@ -350,15 +352,19 @@
             aspect-ratio: auto;
 
             .k-button-icon {
-                margin: -1em 0;
+                margin-block: -1em;
+                margin-inline: 0;
                 min-width: auto !important; // sass-lint:disable-line no-important
                 min-height: auto !important; // sass-lint:disable-line no-important
             }
         }
-        .k-spinner-increase .k-icon {
+        .k-spinner-increase .k-icon,
+        .k-spinner-increase .k-svg-icon  {
             bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
         }
-        .k-spinner-decrease .k-icon {
+
+        .k-spinner-decrease .k-icon,
+        .k-spinner-decrease .k-svg-icon  {
            top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
         }
     }

package/scss/list/_layout.scss

@@ -123,7 +123,7 @@
         }
     }
     .k-list-optionlabel {
-        @extend .k-list-item;
+        @extend .k-list-item !optional;
     }
 
 

package/scss/list/_theme.scss

@@ -69,7 +69,8 @@
     }
 
     // Icon
-    .k-list-item .k-icon {
+    .k-list-item .k-icon,
+    .k-list-item .k-svg-icon {
         @include fill(
             $color: var( --kendo-list-item-icon-text, #{$kendo-list-item-icon-text} )
         );

package/scss/listgroup/_layout.scss

@@ -163,7 +163,8 @@
                     right: auto;
                     left: 0;
 
-                    .k-icon {
+                    .k-icon,
+                    .k-svg-icon {
                         transform: scaleX(-1);
                     }
                 }
@@ -177,7 +178,8 @@
                 border-right-width: 1px;
                 border-left-width: 0;
 
-                .k-icon {
+                .k-icon,
+                .k-svg-icon {
                     transform: scaleX(-1);
                 }
             }

package/scss/map/_layout.scss

@@ -89,7 +89,8 @@
             box-shadow: none;
             position: absolute;
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 min-width: 0;
                 min-height: 0;
             }

package/scss/menu/_theme.scss

@@ -37,7 +37,8 @@
             }
         }
 
-        .k-link > .k-icon {
+        .k-link > .k-icon,
+        .k-link > .k-svg-icon {
             color: var( --kendo-menu-icon-color, $kendo-menu-icon-color );
         }
 

package/scss/notification/_theme.scss

@@ -28,7 +28,8 @@
             --kendo-notification-bg: var( --kendo-notification-#{$theme-color}-bg, #{$_bg} );
             --kendo-notification-border: var( --kendo-notification-#{$theme-color}-border, #{$_border} );
 
-            .k-notification-wrap > .k-icon {
+            .k-notification-wrap > .k-icon,
+            .k-notification-wrap > .k-svg-icon {
                 --kendo-notification-icon-text: var( --kendo-notification-#{$theme-color}-icon-text, #{$_icon} );
             }
         }

package/scss/orgchart/_layout.scss

@@ -20,7 +20,8 @@
     }
 
     .k-orgchart-container {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: 100%;
         height: 100%;
         position: relative;
@@ -108,7 +109,8 @@
     }
 
     .k-orgchart-line-v {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: var( --kendo-orgchart-line-size, #{$kendo-orgchart-line-size} );
         height: var( --kendo-orgchart-line-v-height, #{$kendo-orgchart-line-v-height} );
     }

package/scss/pager/_layout.scss

@@ -79,7 +79,7 @@
 
     // Pager items
     .k-pager-nav {
-        @extend %base-pager-item;
+        @extend %base-pager-item !optional;
         @include border-radius( var( --kendo-pager-item-border-radius, #{$kendo-pager-item-border-radius} ) );
     }
 
@@ -127,7 +127,7 @@
 
     // Pager input
     .k-pager-input {
-        @extend %base-pager-section;
+        @extend %base-pager-section !optional;
 
         .k-textbox {
             margin-inline: 1ex;
@@ -139,7 +139,7 @@
 
     // Pager sizes
     .k-pager-sizes {
-        @extend %base-pager-section;
+        @extend %base-pager-section !optional;
 
         .k-dropdown-list,
         > select {
@@ -156,8 +156,8 @@
 
     // Pager info
     .k-pager-info {
-        @extend %base-pager-section;
-        text-align: right;
+        @extend %base-pager-section !optional;
+        text-align: end;
         justify-content: flex-end;
         flex: 1 1 0%;
         order: 9;
@@ -178,7 +178,7 @@
         // Show native select
         .k-pager-numbers-wrap {
             select.k-dropdown-list {
-                @extend %base-pager-section;
+                @extend %base-pager-section !optional;
                 @if ($kendo-pager-section-spacing) {
                     margin-left: $kendo-pager-section-spacing;
                     margin-right: $kendo-pager-section-spacing;

package/scss/panelbar/_theme.scss

@@ -47,6 +47,7 @@
                 );
 
                 .k-icon,
+                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: var( --kendo-panelbar-text, #{$kendo-panelbar-text} );
                 }
@@ -84,6 +85,7 @@
                     --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-border, #{$kendo-panelbar-header-selected-border} );
 
                     .k-icon,
+                    .k-svg-icon,
                     .k-panelbar-item-icon {
                         color: inherit;
                     }
@@ -122,6 +124,7 @@
                     --INTERNAL--kendo-panelbar-header-text: var( --kendo-disabled-text, inherit );
 
                     .k-icon,
+                    .k-svg-icon,
                     .k-panelbar-item-icon {
                         color: inherit;
                     }
@@ -137,6 +140,7 @@
                 }
 
                 .k-icon,
+                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: inherit;
                 }
@@ -158,6 +162,7 @@
                 );
 
                 .k-icon,
+                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: var( --kendo-panelbar-text, #{$kendo-panelbar-text} );
                 }
@@ -221,6 +226,7 @@
                     --INTERNAL--kendo-panelbar-item-text: var( --kendo-disabled-text, inherit );
 
                     .k-icon,
+                    .k-svg-icon,
                     .k-panelbar-item-icon {
                         color: inherit;
                     }
@@ -236,6 +242,7 @@
                 }
 
                 .k-icon,
+                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: inherit;
                 }

package/scss/pdf-viewer/_layout.scss

@@ -118,6 +118,11 @@
             > .k-icon {
                 font-size: var( --kendo-pdf-viewer-icon-size, #{$kendo-pdf-viewer-icon-size} );
             }
+
+            > .k-svg-icon {
+                width: var( --kendo-pdf-viewer-icon-size, #{$kendo-pdf-viewer-icon-size} );
+                height: var( --kendo-pdf-viewer-icon-size, #{$kendo-pdf-viewer-icon-size} );
+            }
         }
 
     }

package/scss/pdf-viewer/_theme.scss

@@ -33,7 +33,8 @@
             );
         }
 
-        .k-blank-page > .k-icon {
+        .k-blank-page > .k-icon,
+        .k-blank-page > .k-svg-icon {
             @include fill(
                 $color: var( --kendo-pdf-viewer-icon-text, #{$kendo-pdf-viewer-icon-text} )
             );

package/scss/pivotgrid/_layout.scss

@@ -14,7 +14,7 @@
         font-size: var( --kendo-pivotgrid-font-size, #{$kendo-pivotgrid-font-size} );
         font-family: var( --kendo-pivotgrid-font-family, #{$kendo-pivotgrid-font-family} );
         line-height: var( --kendo-pivotgrid-line-height, #{$kendo-pivotgrid-line-height} );
-        text-align: left;
+        text-align: start;
         vertical-align: top;
         display: grid;
         grid-template-columns: var( --kendo-pivotgrid-row-header-width, #{$kendo-pivotgrid-row-header-width} ) auto;
@@ -30,6 +30,7 @@
             border-collapse: separate;
             border-spacing: 0;
             outline: 0;
+            text-align: inherit;
             empty-cells: show;
         }
 
@@ -39,6 +40,7 @@
         tr,
         td {
             border-color: inherit;
+            text-align: inherit;
         }
     }
 
@@ -138,7 +140,8 @@
         overflow: hidden;
     }
 
-    .k-pivotgrid-cell .k-icon {
+    .k-pivotgrid-cell .k-icon,
+    .k-pivotgrid-cell .k-svg-icon {
         cursor: pointer;
         padding-inline-end: var( --kendo-pivotgrid-icon-spacing, #{$kendo-pivotgrid-icon-spacing} );
     }
@@ -185,7 +188,8 @@
         cursor: pointer;
         user-select: none;
 
-        .k-icon {
+        .k-icon,
+        .k-svg-icon {
             margin-inline-start: var( --kendo-pivotgrid-configurator-button-icon-spacing, #{$kendo-pivotgrid-configurator-button-icon-spacing} );
         }
 
@@ -197,7 +201,8 @@
             span {
                 writing-mode: vertical-rl;
             }
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 vertical-align: baseline;
             }
         }
@@ -354,7 +359,8 @@
         flex-direction: row;
         align-items: center;
 
-        .k-icon {
+        .k-icon,
+        .k-svg-icon {
             margin-inline-end: map.get( $kendo-spacing, 2 );
         }
         .k-dropdown-list {
@@ -502,6 +508,7 @@
     }
 
     .k-pivot-layout > tbody,
+    .k-pivot .k-table-td,
     .k-pivot td {
         vertical-align: top;
     }

package/scss/popover/_layout.scss

@@ -40,7 +40,7 @@
 
     // Header
     .k-popover-header {
-        @extend .k-card-title;
+        @extend .k-card-title !optional;
         border-width: 0 0 var( --kendo-popover-header-border-width, #{$kendo-popover-header-border-width} );
         border-style: var( --kendo-popover-header-border-style, #{$kendo-popover-header-border-style} );
         padding-inline: var( --kendo-popover-header-padding-x, #{$kendo-popover-header-padding-x} );

package/scss/progressbar/_layout.scss

@@ -233,7 +233,7 @@
 
     .k-circular-progressbar {
         display: inline-block;
-        text-align: left;
+        text-align: start;
         position: relative;
     }
 

package/scss/rating/_layout.scss

@@ -57,6 +57,11 @@
             font-size: var( --kendo-rating-icon-size, #{$kendo-rating-icon-size} );
         }
 
+        .k-svg-icon {
+            width: var( --kendo-rating-icon-size, #{$kendo-rating-icon-size} );
+            height: var( --kendo-rating-icon-size, #{$kendo-rating-icon-size} );
+        }
+
         svg {
             fill: currentColor;
         }

package/scss/scheduler/_layout.scss

@@ -349,7 +349,7 @@
         th {
             border-inline-width: 0 1px;
             border-block-width: 0 1px;
-            text-align: right;
+            text-align: end;
         }
 
         .k-slot-cell,
@@ -674,7 +674,7 @@
 
         .k-scheduler-table td {
             height: 80px;
-            text-align: right;
+            text-align: end;
         }
 
         .k-scheduler-body .k-scheduler-cell {

package/scss/scroller/_layout.scss

@@ -33,7 +33,7 @@
     .km-scroller-pull .km-template {
         display: inline-block;
         min-width: 200px;
-        text-align: left;
+        text-align: start;
     }
     .km-load-more .km-icon,
     .km-widget .km-scroller-pull .km-icon {

package/scss/scrollview/_layout.scss

@@ -160,6 +160,11 @@
             font-size: var( --kendo-scrollview-arrow-icon-size, #{$kendo-scrollview-arrow-icon-size} );
             font-weight: normal;
         }
+
+        .k-svg-icon {
+            width: var( --kendo-scrollview-arrow-icon-size, #{$kendo-scrollview-arrow-icon-size} );
+            height: var( --kendo-scrollview-arrow-icon-size, #{$kendo-scrollview-arrow-icon-size} );
+        }
     }
 
     .k-scrollview-prev {

package/scss/slider/_layout.scss

@@ -266,11 +266,11 @@
 
         // Slider ticks
         .k-tick {
-            text-align: right;
+            text-align: end;
             margin-left: 2px;
         }
         .k-slider-topleft .k-tick {
-            text-align: left;
+            text-align: start;
         }
 
         .k-tick { background-position: -94px center; }
@@ -298,7 +298,7 @@
 
         // Slider labels
         .k-label {
-            text-align: left;
+            text-align: start;
             inset-inline-start: 120%;
             inset-inline-end: auto;
             top: 50%;
@@ -350,7 +350,9 @@
             }
 
             .k-button-increase .k-icon,
-            .k-button-decrease .k-icon {
+            .k-button-increase .k-svg-icon,
+            .k-button-decrease .k-icon,
+            .k-button-decrease .k-svg-icon {
                 transform: scaleX(-1);
             }
         }
@@ -362,7 +364,7 @@
     [dir="rtl"] .k-slider,
     .k-slider.k-rtl,
     .k-rtl .k-slider {
-        @extend .k-slider-rtl;
+        @extend .k-slider-rtl !optional;
     }
 
 
@@ -379,14 +381,14 @@
 
 
     // Aliases
-    .k-slider .k-button { @extend .k-slider-button; }
-    .k-tick { @extend .k-slider-tick; }
-    .k-draghandle { @extend .k-slider-thumb; }
-    .k-draghandle-start { @extend .k-slider-thumb-start; }
-    .k-draghandle-end { @extend .k-slider-thumb-end; }
-    .k-slider-horizontal { @extend .k-horizontal-slider; }
-    .k-slider-vertical { @extend .k-vertical-slider; }
-    .k-tick-horizontal { @extend .k-slider-tick-vertical; }
-    .k-tick-vertical { @extend .k-slider-tick-horizontal; }
+    .k-slider .k-button { @extend .k-slider-button !optional; }
+    .k-tick { @extend .k-slider-tick !optional; }
+    .k-draghandle { @extend .k-slider-thumb !optional; }
+    .k-draghandle-start { @extend .k-slider-thumb-start !optional; }
+    .k-draghandle-end { @extend .k-slider-thumb-end !optional; }
+    .k-slider-horizontal { @extend .k-horizontal-slider !optional; }
+    .k-slider-vertical { @extend .k-vertical-slider !optional; }
+    .k-tick-horizontal { @extend .k-slider-tick-vertical !optional; }
+    .k-tick-vertical { @extend .k-slider-tick-horizontal !optional; }
 
 }

package/scss/splitter/_layout.scss

@@ -65,6 +65,11 @@
             font-size: var( --kendo-splitter-resize-icon-size, #{$kendo-splitter-resize-icon-size} );
         }
 
+        .k-svg-icon {
+            width: var( --kendo-splitter-resize-icon-size, #{$kendo-splitter-resize-icon-size} );
+            height: var( --kendo-splitter-resize-icon-size, #{$kendo-splitter-resize-icon-size} );
+        }
+
     }
 
     .k-splitbar-draggable-horizontal { cursor: col-resize; }

package/scss/spreadsheet/_layout.scss

@@ -202,7 +202,8 @@
 
     // Cell editor
     .k-spreadsheet-cell-editor {
-        padding: 0 3px;
+        padding-block: 0;
+        padding-inline: 3px;
         line-height: var( --kendo-spreadsheet-line-height, $kendo-spreadsheet-line-height );
         display: none;
         overflow: hidden;
@@ -594,7 +595,8 @@
             .k-link {
                 padding-inline-start: var( --filter-menu-padding-left, #{$kendo-filter-menu-padding-left} );
             }
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 margin-inline-start: calc(-1 * ( var( --kendo-icon-size, 1rem ) + #{$kendo-padding-md-y} ) );
                 margin-inline-end: $kendo-padding-md-y;
             }
@@ -634,7 +636,8 @@
             align-items: center;
             cursor: pointer;
 
-            > .k-icon {
+            > .k-icon,
+            > .k-svg-icon {
                 margin-inline-end: $kendo-padding-md-y;
             }
         }
@@ -762,6 +765,11 @@
             .k-icon {
                 font-size: 6em;
             }
+
+            .k-svg-icon {
+                width: 6em;
+                height: 6em;
+            }
         }
     }
 

package/scss/stepper/_layout.scss

@@ -125,7 +125,8 @@
             text-overflow: ellipsis;
             overflow: hidden;
         }
-        .k-step-label .k-icon {
+        .k-step-label .k-icon,
+        .k-step-label .k-svg-icon {
             margin-inline-start: var( --kendo-icon-spacing, .5rem );
         }
 

package/scss/stepper/_theme.scss

@@ -162,7 +162,8 @@
         .k-step-label {
             @include fill( $color: var( --kendo-stepper-label-text, #{$kendo-stepper-label-text} ) );
         }
-        .k-step-success .k-step-label .k-icon {
+        .k-step-success .k-step-label .k-icon,
+        .k-step-success .k-step-label .k-svg-icon {
             @include fill( $color: var( --kendo-stepper-label-success-text, #{$kendo-stepper-label-success-text} ) );
         }
         .k-step-error .k-step-label {