@progress/kendo-theme-fluent 9.0.1-dev.1 → 9.0.1-dev.3

package/scss/responsivepanel/_theme.scss

@@ -1,4 +1,4 @@
-@mixin kendo-responsivepanel--theme() {
+@mixin kendo-responsive-panel--theme() {
 
     .k-rpanel {}
 

package/scss/responsivepanel/index.scss

@@ -1,6 +1,6 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "responsivepanel",
+    name: "responsive-panel",
     dependencies: (
         "icon"
     )
@@ -17,9 +17,9 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin responsivepanel-styles() {
-    @include module.render( "responsivepanel" ) {
-        @include kendo-responsivepanel--layout();
-        @include kendo-responsivepanel--theme();
+@mixin responsive-panel-styles() {
+    @include module.render( "responsive-panel" ) {
+        @include kendo-responsive-panel--layout();
+        @include kendo-responsive-panel--theme();
     }
 }

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/scheduler/index.scss

@@ -4,17 +4,24 @@
 $_kendo-module-meta: (
     name: "scheduler",
     dependencies: (
-        "icon",
-        "forms",
+        "action-buttons",
         "adaptive",
         "button",
-        "datetimepicker",
-        "dropdownlist",
-        "dialog",
-        "tooltip",
         "calendar",
+        "checkbox",
+        "date-time-picker",
+        "dialog",
+        "dropdown-list",
+        "form",
+        "icon",
+        "numeric-textbox",
+        "radio",
+        "textarea",
+        "textbox",
         "toolbar",
-        "time-marker"
+        "tooltip",
+        "time-marker",
+        "window"
     )
 );
 

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/scroller/index.scss

@@ -1,7 +1,9 @@
 // Module meta
 $_kendo-module-meta: (
     name: "scroller",
-    dependencies: ()
+    dependencies: (
+        "icon"
+    )
 );
 
 

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/searchbox/index.scss

@@ -2,8 +2,9 @@
 $_kendo-module-meta: (
     name: "searchbox",
     dependencies: (
-        "icon",
         "button",
+        "floating-label",
+        "icon",
         "input"
     )
 );

package/scss/signature/index.scss

@@ -3,7 +3,10 @@ $_kendo-module-meta: (
     name: "signature",
     dependencies: (
         "button",
-        "input"
+        "color-picker",
+        "icon",
+        "input",
+        "split-button"
     )
 );
 

package/scss/slider/_theme.scss

@@ -3,9 +3,6 @@
 
 @mixin kendo-slider--theme() {
 
-    $kendo-slider-tick-h-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
-    $kendo-slider-tick-v-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
-
     // Slider
     .k-slider {
         --INTERNAL--kendo-slider-text: var( --kendo-slider-text, #{$kendo-slider-text} );

package/scss/slider/_variables.scss

@@ -149,3 +149,10 @@ $kendo-slider-thumb-transition-speed: .4s !default;
 /// The transition function of the Slider thumb.
 /// @group slider
 $kendo-slider-thumb-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
+
+/// The background image of the horizontal Slider tick.
+/// @group slider
+$kendo-slider-tick-h-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
+/// The background image of the vertical Slider tick.
+/// @group slider
+$kendo-slider-tick-v-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;

package/scss/slider/index.scss

@@ -2,8 +2,8 @@
 $_kendo-module-meta: (
     name: "slider",
     dependencies: (
-        "icon",
         "button",
+        "icon",
         "tooltip"
     )
 );

package/scss/split-button/index.scss

@@ -3,6 +3,7 @@ $_kendo-module-meta: (
     name: "split-button",
     dependencies: (
         "button",
+        "icon",
         "menu"
     )
 );

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/splitter/index.scss

@@ -2,6 +2,7 @@
 $_kendo-module-meta: (
     name: "splitter",
     dependencies: (
+        "draggable",
         "icon"
     )
 );

package/scss/spreadsheet/index.scss

@@ -4,23 +4,24 @@
 $_kendo-module-meta: (
     name: "spreadsheet",
     dependencies: (
+        "action-buttons",
         "button",
         "checkbox",
-        "radio",
-        "colorpicker",
+        "color-picker",
         "combobox",
-        "datetimepicker",
-        "dropdownlist",
-        "toolbar",
-        "upload",
-        "menu",
-        "forms",
+        "date-time-picker",
+        "dropdown-list",
+        "form",
+        "icon",
         "input",
-        "window",
+        "list",
+        "menu",
+        "radio",
         "tabstrip",
+        "toolbar",
         "treeview",
-        "icon",
-        "list"
+        "upload",
+        "window"
     )
 );
 

package/scss/table/index.scss

@@ -1,14 +1,7 @@
 // Module meta
 $_kendo-module-meta: (
     name: "table",
-    dependencies: (
-        "input",
-        "list",
-        "popup",
-        "combobox",
-        "toolbar",
-        "menu"
-    )
+    dependencies: ()
 );
 
 

package/scss/tabstrip/index.scss

@@ -4,9 +4,10 @@
 $_kendo-module-meta: (
     name: "tabstrip",
     dependencies: (
-        "icon",
         "button",
-        "list"
+        "icon",
+        "list",
+        "menu-button"
     )
 );
 

package/scss/taskboard/_layout.scss

@@ -1,7 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-taskboard--layout() {
+@mixin kendo-task-board--layout() {
 
     // TaskBoard
     .k-taskboard {

package/scss/taskboard/_theme.scss

@@ -1,7 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-taskboard--theme() {
+@mixin kendo-task-board--theme() {
 
     // TaskBoard
     .k-taskboard {

package/scss/taskboard/index.scss

@@ -2,15 +2,22 @@
 
 // Module meta
 $_kendo-module-meta: (
-    name: "taskboard",
+    name: "task-board",
     dependencies: (
+        "action-buttons",
+        "badge",
+        "button",
+        "card",
+        "dialog",
+        "form",
         "icon",
         "input",
-        "forms",
-        "textbox",
+        "menu",
+        "menu-button",
         "searchbox",
+        "textbox",
         "toolbar",
-        "card"
+        "window"
     )
 );
 
@@ -25,10 +32,10 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin taskboard-styles() {
-    @include module.render( "taskboard" ) {
-        @include kendo-taskboard--layout();
-        @include kendo-taskboard--theme();
+@mixin task-board-styles() {
+    @include module.render( "task-board" ) {
+        @include kendo-task-board--layout();
+        @include kendo-task-board--theme();
         @include kendo-utils--typography--text-overflow();
     }
 }

package/scss/textarea/index.scss

@@ -4,8 +4,10 @@
 $_kendo-module-meta: (
     name: "textarea",
     dependencies: (
-        "input",
+        "button",
         "floating-label",
+        "icon",
+        "input"
     )
 );
 

package/scss/textbox/index.scss

@@ -2,8 +2,10 @@
 $_kendo-module-meta: (
     name: "textbox",
     dependencies: (
-        "input",
+        "button",
         "floating-label",
+        "icon",
+        "input"
     )
 );
 

package/scss/tilelayout/index.scss

@@ -2,9 +2,11 @@
 
 // Module meta
 $_kendo-module-meta: (
-    name: "tilelayout",
+    name: "tile-layout",
     dependencies: (
-        "card"
+        "button",
+        "card",
+        "icon"
     )
 );
 
@@ -19,8 +21,8 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin tilelayout-styles() {
-    @include module.render( "tilelayout" ) {
+@mixin tile-layout-styles() {
+    @include module.render( "tile-layout" ) {
         @include kendo-tile-layout--layout();
         @include kendo-tile-layout--theme();
         @include kendo-utils--interactivity--resize();

package/scss/timedurationpicker/_layout.scss

@@ -1,4 +1,4 @@
-@mixin kendo-timedurationpicker--layout() {
+@mixin kendo-time-duration-picker--layout() {
 
     // Time picker
     .k-timedurationpicker {}

package/scss/timedurationpicker/_theme.scss

@@ -1,4 +1,4 @@
-@mixin kendo-timedurationpicker--theme() {
+@mixin kendo-time-duration-picker--theme() {
 
     // Time picker
     .k-timedurationpicker {}

package/scss/timedurationpicker/index.scss

@@ -1,13 +1,14 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "timedurationpicker",
+    name: "time-duration-picker",
     dependencies: (
+        "action-buttons",
         "button",
         "icon",
         "input",
-        "popup",
         "list",
-        "timeselector"
+        "popup",
+        "time-selector"
     )
 );
 
@@ -21,9 +22,9 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin timedurationpicker-styles() {
-    @include module.render( "timedurationpicker" ) {
-        @include kendo-timedurationpicker--layout();
-        @include kendo-timedurationpicker--theme();
+@mixin time-duration-picker-styles() {
+    @include module.render( "time-duration-picker" ) {
+        @include kendo-time-duration-picker--layout();
+        @include kendo-time-duration-picker--theme();
     }
 }

package/scss/timeline/index.scss

@@ -2,9 +2,9 @@
 $_kendo-module-meta: (
     name: "timeline",
     dependencies: (
-        'button',
-        'icon',
-        'card'
+        "button",
+        "card",
+        "icon"
     )
 );
 

package/scss/timepicker/_layout.scss

@@ -1,4 +1,4 @@
-@mixin kendo-timepicker--layout() {
+@mixin kendo-time-picker--layout() {
 
     // Time picker
     .k-timepicker {}

package/scss/timepicker/_theme.scss

@@ -1,4 +1,4 @@
-@mixin kendo-timepicker--theme() {
+@mixin kendo-time-picker--theme() {
 
        // Time picker
        .k-timepicker {}

package/scss/timepicker/index.scss

@@ -1,13 +1,14 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "timepicker",
+    name: "time-picker",
     dependencies: (
+        "action-buttons",
         "button",
         "icon",
         "input",
-        "popup",
         "list",
-        "timeselector"
+        "popup",
+        "time-selector"
     )
 );
 
@@ -21,9 +22,9 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin timepicker-styles() {
-    @include module.render( "timepicker" ) {
-        @include kendo-timepicker--layout();
-        @include kendo-timepicker--theme();
+@mixin time-picker-styles() {
+    @include module.render( "time-picker" ) {
+        @include kendo-time-picker--layout();
+        @include kendo-time-picker--theme();
     }
 }

package/scss/timeselector/_layout.scss

@@ -3,7 +3,7 @@
 @use "../button/_variables.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-timeselector--layout() {
+@mixin kendo-time-selector--layout() {
 
     .k-timeselector {
         border-width: var( --kendo-time-selector-border-width, $kendo-time-selector-border-width );
@@ -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/timeselector/_theme.scss

@@ -1,7 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-timeselector--theme() {
+@mixin kendo-time-selector--theme() {
     // Time selector
     .k-timeselector {
         @include fill(

package/scss/timeselector/index.scss

@@ -1,10 +1,11 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "timeselector",
+    name: "time-selector",
     dependencies: (
-        "list",
         "action-buttons",
-        "button"
+        "button",
+        "icon",
+        "list"
     )
 );
 
@@ -19,9 +20,9 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin timeselector-styles() {
-    @include module.render( "timeselector" ) {
-        @include kendo-timeselector--layout();
-        @include kendo-timeselector--theme();
+@mixin time-selector-styles() {
+    @include module.render( "time-selector" ) {
+        @include kendo-time-selector--layout();
+        @include kendo-time-selector--theme();
     }
 }

package/scss/toolbar/index.scss

@@ -5,9 +5,11 @@ $_kendo-module-meta: (
     name: "toolbar",
     dependencies: (
         "button",
-        "popup",
+        "icon",
         "menu",
-        "icon"
+        "menu-button",
+        "popup",
+        "split-button"
     )
 );
 

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 {

package/scss/upload/index.scss

@@ -2,11 +2,10 @@
 $_kendo-module-meta: (
     name: "upload",
     dependencies: (
-        "icon",
-        "button",
         "action-buttons",
+        "button",
         "dropzone",
-        "toolbar"
+        "icon"
     )
 );
 

package/scss/window/index.scss

@@ -2,11 +2,11 @@
 $_kendo-module-meta: (
     name: "window",
     dependencies: (
-        "overlay",
-        "forms",
-        "button",
         "action-buttons",
-        "icon"
+        "button",
+        "form",
+        "icon",
+        "overlay"
     )
 );