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

package/lib/swatches/all.json

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

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "9.0.1-dev.2",
+    "version": "9.1.0-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": "9.0.1-dev.2",
+    "version": "9.1.0-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": "9.0.1-dev.2",
+  "version": "9.1.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "3.0.0",
-    "@progress/kendo-theme-core": "9.0.1-dev.2",
-    "@progress/kendo-theme-utils": "9.0.1-dev.2"
+    "@progress/kendo-theme-core": "9.1.0-dev.0",
+    "@progress/kendo-theme-utils": "9.1.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "9a112b4828a2d760609c9a134b25bfb00eedd3fd"
+  "gitHead": "58a4e9c2c83c12c468f5dc6d0350bec05b84217d"
 }

package/scss/button/_theme.scss

@@ -70,15 +70,15 @@
                 --INTERNAL--kendo-button-border: var( --kendo-button-selected-hover-border );
             }
         }
+    }
 
-        &:disabled,
-        &.k-disabled,
-        .k-disabled &,
-        :disabled & {
-            --INTERNAL--kendo-button-text: var( --kendo-button-disabled-text );
-            --INTERNAL--kendo-button-bg: var( --kendo-button-disabled-bg );
-            --INTERNAL--kendo-button-border: var( --kendo-button-disabled-border );
-        }
+    .k-button:disabled,
+    .k-button.k-disabled,
+    .k-disabled .k-button,
+    :disabled .k-button {
+        --INTERNAL--kendo-button-text: var( --kendo-button-disabled-text );
+        --INTERNAL--kendo-button-bg: var( --kendo-button-disabled-bg );
+        --INTERNAL--kendo-button-border: var( --kendo-button-disabled-border );
     }
 
     @each $fill-mode, $theme-colors in $kendo-button-theme-colors {

package/scss/calendar/_theme.scss

@@ -135,37 +135,6 @@
             );
         }
 
-
-        &[dir="rtl"],
-        .k-rtl & {
-            .k-calendar-navigation {
-                box-shadow: inset 1px 0 var( --kendo-calendar-navigation-border, #{$kendo-calendar-navigation-border} );
-            }
-
-            .k-calendar-td {
-
-                &.k-range-start:hover .k-link,
-                &.k-range-start.k-hover .k-link {
-                    --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
-
-                }
-
-                &.k-range-mid:last-child:hover .k-link,
-                &.k-range-mid:last-child.k-hover .k-link,
-                &.k-range-end:hover .k-link,
-                &.k-range-end.k-hover .k-link {
-                    --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
-                }
-
-                &.k-range-mid:first-child:hover .k-link,
-                &.k-range-mid:first-child.k-hover .k-link,
-                &.k-alt + .k-range-mid:hover .k-link,
-                &.k-alt + .k-range-mid.k-hover .k-link {
-                    --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
-                }
-            }
-        }
-
         // Invalid
         &.k-invalid,
         &.k-invalid:hover,
@@ -175,6 +144,35 @@
         }
     }
 
+    .k-calendar[dir="rtl"],
+    .k-rtl .k-calendar {
+        .k-calendar-navigation {
+            box-shadow: inset 1px 0 var( --kendo-calendar-navigation-border, #{$kendo-calendar-navigation-border} );
+        }
+
+        .k-calendar-td {
+
+            &.k-range-start:hover .k-link,
+            &.k-range-start.k-hover .k-link {
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
+
+            }
+
+            &.k-range-mid:last-child:hover .k-link,
+            &.k-range-mid:last-child.k-hover .k-link,
+            &.k-range-end:hover .k-link,
+            &.k-range-end.k-hover .k-link {
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
+            }
+
+            &.k-range-mid:first-child:hover .k-link,
+            &.k-range-mid:first-child.k-hover .k-link,
+            &.k-alt + .k-range-mid:hover .k-link,
+            &.k-alt + .k-range-mid.k-hover .k-link {
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
+            }
+        }
+    }
 
     // Scheduler integration
     .k-scheduler .k-calendar .k-other-month {

package/scss/card/_layout.scss

@@ -75,12 +75,11 @@
         line-height: var( --kendo-card-subtitle-line-height, #{$kendo-card-subtitle-line-height} );
         font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
         margin-block-end: var( --kendo-card-subtitle-margin-bottom, #{$kendo-card-subtitle-margin-bottom} );
-
-        @at-root .k-card-title + & {
-            margin-block-start: calc( var( --kendo-card-title-margin-bottom, #{$kendo-card-title-margin-bottom} ) * -1 );
-        }
     }
 
+    @at-root .k-card-title + .k-card-subtitle {
+        margin-block-start: calc( var( --kendo-card-title-margin-bottom, #{$kendo-card-title-margin-bottom} ) * -1 );
+    }
 
     // Header
     .k-card-header {
@@ -144,11 +143,11 @@
         max-width: 100%;
         flex-shrink: 0;
         overflow: hidden;
+    }
 
-        .k-card-horizontal & {
-            max-width: var( --kendo-card-img-max-width, #{$kendo-card-img-max-width} );
-            object-fit: cover;
-        }
+    .k-card-horizontal .k-card-media {
+        max-width: var( --kendo-card-img-max-width, #{$kendo-card-img-max-width} );
+        object-fit: cover;
     }
 
     // Separator

package/scss/chat/_layout.scss

@@ -316,9 +316,13 @@
                 fill: currentColor;
                 display: inline-block;
             }
+        }
+    }
 
-            .k-rtl &,
-            [dir="rtl"] & {
+    .k-rtl,
+    [dir="rtl"] {
+        .k-message-box {
+            .k-button {
                 transform: scaleX(-1);
             }
         }

package/scss/color-preview/_theme.scss

@@ -20,9 +20,9 @@
     }
 
     // Mask
-    .k-color-preview-mask::before {
-        [disabled] &,
-        .k-disabled & {
+    [disabled],
+    .k-disabled {
+        .k-color-preview-mask::before {
             @include fill(
                 $bg: var( --kendo-disabled-bg )
             );

package/scss/datetimepicker/_layout.scss

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

package/scss/drawer/_layout.scss

@@ -160,16 +160,6 @@
             opacity: 0;
             transition: opacity .3s;
             pointer-events: none;
-
-            .k-drawer-start &,
-            .k-drawer-left & {
-                inset-inline-start: 0;
-            }
-
-            .k-drawer-end &,
-            .k-drawer-right & {
-                inset-inline-end: 0;
-            }
         }
 
         > .k-drawer-link {
@@ -226,6 +216,13 @@
         }
     }
 
+    :is(.k-drawer-start, .k-drawer-left) .k-drawer-item::before {
+        inset-inline-start: 0;
+    }
+
+    :is(.k-drawer-end, .k-drawer-right) .k-drawer-item::before {
+        inset-inline-end: 0;
+    }
 
     // Separator
     .k-drawer-separator {

package/scss/fab/_layout.scss

@@ -57,14 +57,13 @@
         padding-inline: var( --kendo-fab-icon-padding-x, #{$kendo-fab-icon-padding-x} );
         padding-block: var( --kendo-fab-icon-padding-y, #{$kendo-fab-icon-padding-y} );
         box-sizing: content-box;
-
-        .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 );
-        }
     }
 
+    .k-icon-wrapper-host:not(:only-child) .k-fab-icon,
+    .k-fab-icon: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 );
+    }
 
     // Sizes
     @each $size, $size-props in $kendo-fab-sizes {

package/scss/floating-label/_layout.scss

@@ -57,34 +57,34 @@
             color: transparent;
         }
 
-        [dir="rtl"] &,
-        .k-rtl &,
-        &[dir="rtl"] {
+        &:disabled,
+        &[disabled],
+        &.k-disabled  {
+            background: none;
+        }
+    }
 
-            > .k-floating-label {
-                transform-origin: right center;
-                transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), right var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} );
-            }
+    [dir="rtl"] .k-floating-label-container,
+    .k-rtl .k-floating-label-container,
+    .k-floating-label-container[dir="rtl"] {
 
-            &.k-empty {
-                > .k-floating-label {
-                    left: auto;
-                    right: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
-                }
-            }
+        > .k-floating-label {
+            transform-origin: right center;
+            transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), right var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} );
+        }
 
-            > .k-floating-label,
-            &:focus-within > .k-floating-label,
-            &.k-focus > .k-floating-label {
+        &.k-empty {
+            > .k-floating-label {
                 left: auto;
-                right: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
+                right: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
             }
         }
 
-        &:disabled,
-        &[disabled],
-        &.k-disabled  {
-            background: none;
+        > .k-floating-label,
+        &:focus-within > .k-floating-label,
+        &.k-focus > .k-floating-label {
+            left: auto;
+            right: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
         }
     }
 }

package/scss/map/_layout.scss

@@ -76,9 +76,6 @@
         border-radius: 50%;
         position: relative;
 
-        .k-pdf-export & { display: none; }
-
-
         // Buttons
         .k-button {
             padding: 0;
@@ -126,8 +123,13 @@
         border: 0;
         background: none;
         display: flex;
+    }
 
-        .k-pdf-export & { display: none; }
+    .k-pdf-export {
+        .k-navigator,
+        .k-zoom-control {
+            display: none;
+        }
     }
 
 }

package/scss/pivotgrid/_layout.scss

@@ -190,26 +190,26 @@
         .k-icon {
             margin-inline-start: var( --kendo-pivotgrid-configurator-button-icon-spacing, #{$kendo-pivotgrid-configurator-button-icon-spacing} );
         }
+    }
 
-        .k-flex-row &,
-        .k-flex-row-reverse & {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            writing-mode: vertical-rl;
+    .k-flex-row .k-pivotgrid-configurator-button,
+    .k-flex-row-reverse .k-pivotgrid-configurator-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        writing-mode: vertical-rl;
 
-            .k-icon {
-                vertical-align: baseline;
-            }
-        }
-        .k-flex-row-reverse & > span {
-            transform: rotate(-180deg);
+        .k-icon {
+            vertical-align: baseline;
         }
+    }
+    .k-flex-row-reverse .k-pivotgrid-configurator-button > span {
+        transform: rotate(-180deg);
+    }
 
-        .k-flex-col &,
-        .k-flex-col-reverse & {
-            text-align: center;
-        }
+    .k-flex-col .k-pivotgrid-configurator-button,
+    .k-flex-col-reverse .k-pivotgrid-configurator-button {
+        text-align: center;
     }
 
 
@@ -218,17 +218,24 @@
         position: absolute;
         overflow: hidden;
         z-index: 2;
+    }
 
-        .k-flex-row & {
+    .k-flex-row {
+        .k-pivotgrid-configurator-overlay {
             inset-inline-end: var( --kendo-pivotgrid-configurator-button-size, #{$kendo-pivotgrid-configurator-button-size} );
         }
-        .k-flex-row-reverse & {
+
+        &-reverse .k-pivotgrid-configurator-overlay {
             inset-inline-start: var( --kendo-pivotgrid-configurator-button-size, #{$kendo-pivotgrid-configurator-button-size} );
         }
-        .k-flex-col & {
+    }
+
+    .k-flex-col {
+        .k-pivotgrid-configurator-overlay {
             inset-block-end: var( --kendo-pivotgrid-configurator-button-size, #{$kendo-pivotgrid-configurator-button-size} );
         }
-        .k-flex-col-reverse & {
+
+        &-reverse .k-pivotgrid-configurator-overlay {
             inset-block-start: var( --kendo-pivotgrid-configurator-button-size, #{$kendo-pivotgrid-configurator-button-size} );
         }
     }
@@ -374,12 +381,9 @@
         min-width: var( --kendo-pivotgrid-configurator-vertical-width, #{$kendo-pivotgrid-configurator-vertical-width} );
     }
 
-    .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
-        .k-flex-row &,
-        .k-flex-row-reverse & {
-            border-right-width: 0;
-            border-left-width: 0;
-        }
+    :is(.k-flex-row, .k-flex-row-reverse) .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
+        border-right-width: 0;
+        border-left-width: 0;
     }
 
 
@@ -429,16 +433,15 @@
                 overflow-y: auto;
             }
         }
+    }
 
-        &.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
-            .k-flex-col &,
-            .k-flex-col-reverse & {
-                border-top-width: 0;
-                border-bottom-width: 0;
-            }
+    .k-flex-col,
+    .k-flex-col-reverse {
+        .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
+            border-top-width: 0;
+            border-bottom-width: 0;
         }
     }
-
 }
 
 @mixin kendo-pivotgrid-export--layout() {

package/scss/rating/_layout.scss

@@ -84,11 +84,10 @@
 
     .k-rating-precision-complement {
         direction: rtl;
+    }
 
-        .k-rtl &,
-        [dir="rtl"] & {
-            direction: ltr;
-        }
+    :is(.k-rtl, [dir="rtl"]) .k-rating-precision-complement {
+        direction: ltr;
     }
 
 }

package/scss/ripple/_layout.scss

@@ -26,10 +26,10 @@
         transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1);
         opacity: .1;
         background-color: currentColor;
+    }
 
-        .k-primary & {
-            opacity: .2;
-        }
+    .k-primary .k-ripple-blob {
+        opacity: .2;
     }
 
     .k-ripple-focus::after {

package/scss/scroller/_layout.scss

@@ -64,11 +64,10 @@
         opacity: 0;
         transform-origin: 0 0;
         transition: opacity .3s linear;
-
-        .k-map &,
-        .k-diagram & {
-            display: none;
-        }
+    }
+    .k-map .km-touch-scrollbar,
+    .k-diagram .km-touch-scrollbar {
+        display: none;
     }
     .km-vertical-scrollbar {
         height: 100%;

package/scss/scrollview/_layout.scss

@@ -47,17 +47,16 @@
         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) );
         }
     }
 
+    :is([dir="rtl"], .k-rtl) .k-scrollview-wrap.k-scrollview-animate {
+        transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
+    }
+
     .k-scrollview-nav-wrap {
         padding: 0;
         margin: 0;

package/scss/splitter/_layout.scss

@@ -29,13 +29,6 @@
         .k-splitter-resizing {
             overflow: hidden;
         }
-
-        // Nested
-        .k-pane > & {
-            border-width: 0;
-            overflow: hidden;
-        }
-
         // Loading
         .k-pane-loading {
             position: static;
@@ -135,9 +128,16 @@
         z-index: 1;
     }
 
-    .k-pane > .k-splitter-overlay {
-        opacity: 0;
-        position: absolute;
+    .k-pane > {
+        .k-splitter {
+            border-width: 0;
+            overflow: hidden;
+        }
+
+        .k-splitter-overlay {
+            opacity: 0;
+            position: absolute;
+        }
     }
 
     // flexbox-based splitter

package/scss/timeselector/_layout.scss

@@ -20,10 +20,10 @@
         user-select: none;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+    }
 
-        .k-popup > & {
-            border-width: 0;
-        }
+    .k-popup > .k-timeselector {
+        border-width: 0;
     }
 
 

package/scss/treeview/_theme.scss

@@ -55,18 +55,15 @@
             --INTERNAL--kendo-treeview-item-bg: var( --kendo-treeview-item-selected-bg, #{$kendo-treeview-item-selected-bg} );
             --INTERNAL--kendo-treeview-item-border: var( --kendo-treeview-item-selected-border, #{$kendo-treeview-item-selected-border} );
         }
-
-        // Disabled state
-        &:disabled,
-        &.k-disabled,
-        .k-treeview-item:disabled &,
-        .k-treeview-item.k-disabled & {
-            --INTERNAL--kendo-treeview-item-text: var( --kendo-treeview-item-disabled-text, #{$kendo-treeview-item-disabled-text} );
-            --INTERNAL--kendo-treeview-item-bg: var( --kendo-treeview-item-disabled-bg, #{$kendo-treeview-item-disabled-bg} );
-            --INTERNAL--kendo-treeview-item-border: var( --kendo-treeview-item-disabled-border, #{$kendo-treeview-item-disabled-border} );
-        }
     }
 
+    // Disabled state
+    .k-treeview-leaf:is(:disabled, .k-disabled),
+    :is(.k-treeview-item:disabled, .k-treeview-item.k-disabled) .k-treeview-leaf {
+        --INTERNAL--kendo-treeview-item-text: var( --kendo-treeview-item-disabled-text, #{$kendo-treeview-item-disabled-text} );
+        --INTERNAL--kendo-treeview-item-bg: var( --kendo-treeview-item-disabled-bg, #{$kendo-treeview-item-disabled-bg} );
+        --INTERNAL--kendo-treeview-item-border: var( --kendo-treeview-item-disabled-border, #{$kendo-treeview-item-disabled-border} );
+    }
 
     // Treeview load more button
     .k-treeview .k-treeview-load-more-button {