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

package/scss/fab/_variables.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:math";
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 
 /// The width of the border around the FAB.

package/scss/fab/index.scss

@@ -1,12 +1,12 @@
-@use "../utils" as *;
+@use "../utils/index.scss" as *;
 
 // Module meta
 $_kendo-module-meta: (
     name: "fab",
     dependencies: (
-        "icon",
-        "button",
         "badge",
+        "button",
+        "icon",
         "popup"
     )
 );
@@ -18,7 +18,7 @@ $_kendo-module-meta: (
 @use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system/" as module;
+@use "../core/module-system/index.scss" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/filemanager/_theme.scss

@@ -1,4 +1,4 @@
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-file-manager--theme() {

package/scss/filemanager/_variables.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "../icon/_variables.scss" as *;
 

package/scss/filemanager/index.scss

@@ -1,18 +1,19 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "filemanager",
+    name: "file-manager",
     dependencies: (
+        "breadcrumb",
+        "dialog",
+        "grid",
+        "icon",
         "input",
-        "toolbar",
-        "upload",
-        "switch",
+        "listview",
         "menu",
-        "dialog",
-        "breadcrumb",
-        "treeview",
         "splitter",
-        "grid",
-        "listview"
+        "switch",
+        "toolbar",
+        "treeview",
+        "upload"
     )
 );
 
@@ -23,12 +24,12 @@ $_kendo-module-meta: (
 @use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system/" as module;
+@use "../core/module-system/index.scss" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin filemanager-styles() {
-    @include module.render( "filemanager" ) {
+@mixin file-manager-styles() {
+    @include module.render( "file-manager" ) {
         @include kendo-file-manager--layout();
         @include kendo-file-manager--theme();
     }

package/scss/filter/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/" as *;
-@use "../core/spacing" as *;
+@use "../core/_index.scss" as *;
+@use "../core/spacing/_index.scss" as *;
 
 /// The horizontal padding of the Filter.
 /// @group filter

package/scss/filter/index.scss

@@ -3,11 +3,12 @@ $_kendo-module-meta: (
     name: "filter",
     dependencies: (
         "button",
-        "input",
         "checkbox",
-        "datetimepicker",
-        "dropdownlist",
-        "numerictextbox",
+        "date-time-picker",
+        "dropdown-list",
+        "input",
+        "numeric-textbox",
+        "textbox",
         "toolbar"
     )
 );
@@ -19,7 +20,7 @@ $_kendo-module-meta: (
 @use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system/" as module;
+@use "../core/module-system/index.scss" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/floating-label/_theme.scss

@@ -1,4 +1,4 @@
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-floating-label--theme() {

package/scss/floating-label/_variables.scss

@@ -1,4 +1,4 @@
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "../input/_variables.scss" as *;
 
 /// The transformation scale of the Floating Label.

package/scss/floating-label/index.scss

@@ -12,7 +12,7 @@ $_kendo-module-meta: (
 @use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system/" as module;
+@use "../core/module-system/index.scss" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/forms/_layout.scss

@@ -1,12 +1,12 @@
 @use "sass:map";
 @use "sass:math";
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../input/_variables.scss" as *;
 @use "../window/_variables.scss" as *;
-@use "../core/spacing" as *;
+@use "../core/spacing/_index.scss" as *;
 
-@mixin kendo-forms--layout() {
+@mixin kendo-form--layout() {
 
     // Common
     .k-form,

package/scss/forms/_theme.scss

@@ -1,7 +1,7 @@
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-forms--theme() {
+@mixin kendo-form--theme() {
 
     .k-form,
     .k-form-inline {

package/scss/forms/_variables.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
-@use "../core/" as *;
-@use "../core/spacing" as *;
+@use "../core/_index.scss" as *;
+@use "../core/spacing/_index.scss" as *;
 
 /// The padding of the inline Form.
 /// @group form

package/scss/forms/index.scss

@@ -1,15 +1,12 @@
-@use "../utils" as *;
+@use "../utils/index.scss" as *;
 
 // Module meta
 $_kendo-module-meta: (
-    name: "forms",
+    name: "form",
     dependencies: (
-        "tooltip",
-        "button",
-        "input",
-        "toolbar",
         "action-buttons",
-        "window"
+        "button",
+        "validator"
     )
 );
 
@@ -20,14 +17,14 @@ $_kendo-module-meta: (
 @use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system/" as module;
+@use "../core/module-system/index.scss" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin forms-styles() {
-    @include module.render( "forms" ) {
-        @include kendo-forms--layout();
-        @include kendo-forms--theme();
+@mixin form-styles() {
+    @include module.render( "form" ) {
+        @include kendo-form--layout();
+        @include kendo-form--theme();
         @include kendo-utils--layout--display();
         @include kendo-utils--flex-grid--gap();
         @include kendo-utils--flex-grid--grid-template-columns();

package/scss/gantt/_layout.scss

@@ -1,9 +1,9 @@
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../grid/_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "./_variables.scss" as *;
-@use "../core/spacing" as *;
+@use "../core/spacing/_index.scss" as *;
 
 @mixin kendo-gantt--layout() {
 

package/scss/gantt/_theme.scss

@@ -1,4 +1,4 @@
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-gantt--theme() {

package/scss/gantt/_variables.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "sass:math";
-@use "../core/" as *;
-@use "../core/spacing" as *;
+@use "../core/_index.scss" as *;
+@use "../core/spacing/_index.scss" as *;
 
 /// The border width of the Gantt.
 /// @group gantt

package/scss/gantt/index.scss

@@ -1,21 +1,20 @@
-@use "../utils" as *;
+@use "../utils/index.scss" as *;
 
 // Module meta
 $_kendo-module-meta: (
     name: "gantt",
     dependencies: (
-        "icon",
         "button",
+        "date-time-picker",
+        "icon",
         "input",
-        "validator",
-        "datetimepicker",
-        "numerictextbox",
-        "window",
+        "numeric-textbox",
         "splitter",
-        "treelist",
-        "grid",
         "toolbar",
-        "time-marker"
+        "treelist",
+        "time-marker",
+        "validator",
+        "window"
     )
 );
 
@@ -26,7 +25,7 @@ $_kendo-module-meta: (
 @use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system/" as module;
+@use "../core/module-system/index.scss" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/grid/_layout.scss

@@ -1,13 +1,13 @@
 @use "sass:map";
 @use "sass:math";
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../chip/_variables.scss" as *;
 @use "../forms/_variables.scss" as *;
 @use "../table/_variables.scss" as *;
 @use "../tabstrip/_variables.scss" as *;
 @use "./_variables.scss" as *;
-@use "../core/spacing" as *;
+@use "../core/spacing/_index.scss" as *;
 
 @mixin kendo-grid--layout() {
 
@@ -812,7 +812,8 @@
         }
     }
 
-    .k-master-row .k-grid-content-sticky::before {
+    .k-master-row .k-grid-content-sticky::before,
+    .k-master-row.k-grid-row-sticky .k-table-td::before {
         content: "";
         width: 100%;
         height: 100%;

package/scss/grid/_theme.scss

@@ -1,4 +1,4 @@
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../list/_variables.scss" as *;
 @use "../popup/_variables.scss" as *;
@@ -292,13 +292,14 @@
             background-color: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} );
         }
 
-        .k-grid-row-sticky {
+        &.k-grid-row-sticky > .k-table-td {
             border-block-color: var( --kendo-grid-sticky-border, #{$kendo-grid-sticky-border} );
             background-color: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} );
         }
 
         &.k-table-alt-row {
             .k-grid-content-sticky,
+            &.k-grid-row-sticky > .k-table-td,
             .k-grid-row-sticky {
                 @include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
             }
@@ -306,6 +307,7 @@
 
         // Selected state
         &.k-table-row.k-selected td.k-grid-content-sticky,
+        &.k-table-row.k-selected.k-grid-row-sticky > .k-table-td,
         &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
         &.k-table-row td.k-grid-content-sticky.k-selected,
         &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
@@ -321,6 +323,7 @@
         }
 
         &.k-selected.k-table-alt-row td.k-grid-content-sticky,
+        &.k-selected.k-table-alt-row.k-grid-row-sticky > .k-table-td,
         &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
         &.k-table-alt-row td.k-grid-content-sticky.k-selected,
         &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
@@ -339,8 +342,10 @@
         // Hover
         &:hover .k-grid-content-sticky,
         &:hover .k-grid-row-sticky,
+        &:hover.k-grid-row-sticky > .k-table-td,
         &.k-hover .k-grid-content-sticky,
-        &.k-hover .k-grid-row-sticky {
+        &.k-hover .k-grid-row-sticky,
+        &.k-hover.k-grid-row-sticky > .k-table-td {
             @include fill( $bg: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} ) );
         }
 
@@ -348,8 +353,10 @@
         // Selected hover
         &.k-selected:hover td.k-grid-content-sticky,
         &.k-selected:hover .k-table-td.k-grid-row-sticky,
+        &.k-selected:hover.k-grid-row-sticky > .k-table-td,
         &.k-selected.k-hover td.k-grid-content-sticky,
         &.k-selected.k-hover .k-table-td.k-grid-row-sticky,
+        &.k-selected.k-hover.k-grid-row-sticky > .k-table-td,
         &:hover td.k-grid-content-sticky.k-selected,
         &.k-hover td.k-grid-content-sticky.k-selected,
         &:hover .k-table-td.k-grid-content-sticky.k-selected,
@@ -366,119 +373,6 @@
         }
     }
 
-    kendo-grid.k-grid {
-        .k-grid-content-sticky {
-            border-top-color: var( --kendo-grid-header-border, #{$kendo-grid-header-border} );
-            border-inline-color: var( --kendo-grid-sticky-border, #{$kendo-grid-sticky-border} );
-            background-color: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} );
-
-            &:hover,
-            &.k-hover {
-                background-color: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} );
-            }
-        }
-
-        .k-grid-row-sticky {
-            td,
-            .k-table-td {
-                border-block-color: var( --kendo-grid-sticky-border, #{$kendo-grid-sticky-border} );
-                background-color: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} );
-            }
-
-            &:hover td,
-            &.k-hover td,
-            &:hover .k-table-td,
-            &.k-hover .k-table-td {
-                background-color: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} );
-            }
-        }
-
-        .k-table-alt-row .k-grid-content-sticky,
-        .k-grid-row-sticky.k-table-alt-row td,
-        .k-grid-row-sticky.k-table-alt-row .k-table-td {
-            @include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
-        }
-
-        // Selected state
-        .k-table-row.k-selected .k-grid-content-sticky,
-        .k-selected.k-grid-row-sticky td,
-        .k-grid-row-sticky td.k-selected,
-        .k-selected.k-grid-row-sticky .k-table-td,
-        .k-grid-row-sticky .k-table-td.k-selected,
-        .k-selected.k-grid-content-sticky {
-            @if($kendo-enable-color-system) {
-                @include fill( $bg: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} ) );
-
-                &::before {
-                    @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
-                }
-            } @else {
-                @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
-            }
-        }
-
-        .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
-        .k-selected.k-table-alt-row.k-grid-row-sticky td,
-        .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
-        .k-table-alt-row .k-selected.k-grid-content-sticky {
-            @if($kendo-enable-color-system) {
-                @include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
-
-                &::before {
-                    @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
-                }
-            } @else {
-                @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
-            }
-        }
-
-        // Hover state
-        .k-table-row:hover .k-grid-content-sticky,
-        .k-table-row.k-hover .k-grid-content-sticky,
-        .k-grid-row-sticky:hover td,
-        .k-grid-row-sticky.k-hover td,
-        .k-grid-row-sticky.k-table-alt-row:hover td,
-        .k-grid-row-sticky.k-table-alt-row.k-hover td,
-        .k-grid-row-sticky:hover .k-table-td,
-        .k-grid-row-sticky.k-hover .k-table-td,
-        .k-grid-row-sticky.k-table-alt-row:hover .k-table-td,
-        .k-grid-row-sticky.k-table-alt-row.k-hover .k-table-td,
-        .k-table-alt-row:hover .k-grid-content-sticky,
-        .k-table-alt-row.k-hover .k-grid-content-sticky {
-            @include fill( $bg: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} ) );
-        }
-
-        // Selected + Hover
-        .k-table-row.k-selected:hover .k-grid-content-sticky,
-        .k-table-row.k-selected.k-hover .k-grid-content-sticky,
-        .k-selected.k-grid-row-sticky:hover td,
-        .k-selected.k-grid-row-sticky.k-hover td,
-        .k-selected.k-table-alt-row.k-grid-row-sticky:hover td,
-        .k-selected.k-table-alt-row.k-grid-row-sticky.k-hover td,
-        .k-selected.k-grid-row-sticky:hover .k-table-td,
-        .k-selected.k-grid-row-sticky.k-hover .k-table-td,
-        .k-selected.k-table-alt-row.k-grid-row-sticky:hover .k-table-td,
-        .k-selected.k-table-alt-row.k-grid-row-sticky.k-hover .k-table-td,
-        .k-table-row.k-selected.k-table-alt-row:hover .k-grid-content-sticky,
-        .k-table-row.k-selected.k-table-alt-row.k-hover .k-grid-content-sticky,
-        .k-grid-row-sticky:hover td.k-selected,
-        .k-grid-row-sticky.k-hover td.k-selected,
-        .k-grid-row-sticky:hover .k-table-td.k-selected,
-        .k-grid-row-sticky.k-hover .k-table-td.k-selected,
-        .k-table-row:hover .k-grid-content-sticky.k-selected,
-        .k-table-row.k-hover .k-grid-content-sticky.k-selected {
-            @if($kendo-enable-color-system) {
-                background-color: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} );
-
-                &::before {
-                    @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
-                }
-            } @else {
-                @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
-            }
-        }
-    }
-
     .k-grouping-row {
         .k-grid-content-sticky {
             @include fill( $bg: var( --kendo-grid-sticky-header-bg, #{$kendo-grid-sticky-header-bg} ) );

package/scss/grid/_variables.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../chip/_variables.scss" as *;
 @use "../table/_variables.scss" as *;

package/scss/grid/index.scss

@@ -1,32 +1,32 @@
-@use "../utils" as *;
+@use "../utils/index.scss" as *;
 
 // Module meta
 $_kendo-module-meta: (
     name: "grid",
     dependencies: (
-        "icon",
-        "button",
         "action-buttons",
-        "input",
-        "toolbar",
-        "textbox",
-        "checkbox",
-        "radio",
         "autocomplete",
-        "datetimepicker",
-        "dropdownlist",
-        "numerictextbox",
-        "progressbar",
-        "validator",
-        "table",
-        "tabstrip",
+        "badge",
+        "button",
+        "checkbox",
+        "chip",
+        "date-time-picker",
+        "dialog",
+        "dropdown-list",
+        "icon",
+        "input",
         "list",
         "menu",
-        "dialog",
+        "numeric-textbox",
         "pager",
-        "chip",
+        "progressbar",
+        "radio",
         "skeleton",
-        "draggable"
+        "table",
+        "tabstrip",
+        "textbox",
+        "toolbar",
+        "validator"
     )
 );
 
@@ -37,7 +37,7 @@ $_kendo-module-meta: (
 @use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system/" as module;
+@use "../core/module-system/index.scss" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/icon/_variables.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 
 /// Font sizes of the icons.
 /// @group icon

package/scss/icon/index.scss

@@ -1,4 +1,4 @@
-@use "../utils" as *;
+@use "../utils/index.scss" as *;
 
 // Module meta
 $_kendo-module-meta: (
@@ -13,7 +13,7 @@ $_kendo-module-meta: (
 @use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system/" as module;
+@use "../core/module-system/index.scss" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/imageeditor/_layout.scss

@@ -1,4 +1,4 @@
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-image-editor--layout() {

package/scss/imageeditor/_theme.scss

@@ -1,4 +1,4 @@
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-image-editor--theme() {

package/scss/imageeditor/_variables.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:math";
-@use "../core/" as *;
+@use "../core/_index.scss" as *;
 
 /// Background color of the imageeditor.
 /// @group imageeditor

package/scss/imageeditor/index.scss

@@ -1,12 +1,12 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "imageeditor",
+    name: "image-editor",
     dependencies: (
-        "toolbar",
-        "forms",
-        "dropdownlist",
-        "numerictextbox",
-        "checkbox"
+        "checkbox",
+        "dropdown-list",
+        "form",
+        "numeric-textbox",
+        "toolbar"
     )
 );
 
@@ -16,12 +16,12 @@ $_kendo-module-meta: (
 @use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system/" as module;
+@use "../core/module-system/index.scss" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin imageeditor-styles() {
-    @include module.render( "imageeditor" ) {
+@mixin image-editor-styles() {
+    @include module.render( "image-editor" ) {
         @include kendo-image-editor--layout();
         @include kendo-image-editor--theme();
     }