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

package/scss/daterangepicker/_theme.scss

@@ -1,7 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "../input/_variables.scss" as *;
 
-@mixin kendo-daterangepicker--theme() {
+@mixin kendo-date-range-picker--theme() {
 
     .k-daterange-picker {
 

package/scss/daterangepicker/index.scss

@@ -1,12 +1,14 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "daterangepicker",
+    name: "date-range-picker",
     dependencies: (
-        "button",
-        "input",
+        "calendar",
+        "date-input",
+        "date-picker",
         "floating-label",
-        "popup",
-        "icon"
+        "icon",
+        "input",
+        "popup"
     )
 );
 
@@ -20,9 +22,9 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin daterangepicker-styles() {
-    @include module.render( "daterangepicker" ) {
-        @include kendo-daterangepicker--layout();
-        @include kendo-daterangepicker--theme();
+@mixin date-range-picker-styles() {
+    @include module.render( "date-range-picker" ) {
+        @include kendo-date-range-picker--layout();
+        @include kendo-date-range-picker--theme();
     }
 }

package/scss/datetimepicker/_layout.scss

@@ -2,7 +2,7 @@
 @use "./_variables.scss" as *;
 @use "../action-buttons/_variables.scss" as *;
 
-@mixin kendo-datetimepicker--layout() {
+@mixin kendo-date-time-picker--layout() {
 
     // Datetime container
     .k-datetime-container {}
@@ -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/datetimepicker/_theme.scss

@@ -1,4 +1,4 @@
-@mixin kendo-datetimepicker--theme() {
+@mixin kendo-date-time-picker--theme() {
 
     .k-datetimepicker {}
 }

package/scss/datetimepicker/index.scss

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

package/scss/dialog/index.scss

@@ -2,6 +2,9 @@
 $_kendo-module-meta: (
     name: "dialog",
     dependencies: (
+        "action-buttons",
+        "button",
+        "icon",
         "window"
     )
 );

package/scss/dock-manager/_index.scss

@@ -3,8 +3,8 @@ $_kendo-module-meta: (
     name: "dock-manager",
     dependencies: (
         "splitter",
-        "toolbar",
-        "tabstrip"
+        "tabstrip",
+        "toolbar"
     )
 );
 

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

@@ -2,8 +2,9 @@
 $_kendo-module-meta: (
     name: "drawer",
     dependencies: (
-        "overlay",
-        "icon"
+        "icon",
+        "list",
+        "overlay"
     )
 );
 

package/scss/dropdowngrid/_layout.scss

@@ -1,9 +1,9 @@
-@mixin kendo-dropdowngrid--layout() {
+@mixin kendo-dropdown-grid--layout() {
 
     // DropdownGrid
     .k-dropdown-grid {}
 
-    // DropdowGrid Popup
+    // DropdownGrid Popup
     .k-dropdowngrid-popup {
         overflow: hidden;
     }

package/scss/dropdowngrid/_theme.scss

@@ -1,4 +1,4 @@
-@mixin kendo-dropdowngrid--theme() {
+@mixin kendo-dropdown-grid--theme() {
 
     // Dropdown grid
     .k-dropdown-grid {}

package/scss/dropdowngrid/index.scss

@@ -1,16 +1,14 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "dropdowngrid",
+    name: "dropdown-grid",
     dependencies: (
         "button",
-        "table",
-        "input",
         "floating-label",
-        "combobox",
+        "grid",
+        "icon",
+        "input",
         "popup",
-        "toolbar",
-        "menu",
-        "grid"
+        "table"
     )
 );
 
@@ -24,10 +22,9 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin dropdowngrid-styles() {
-    @include module.render( "dropdowngrid" ) {
-        @include kendo-dropdowngrid--layout();
-        @include kendo-dropdowngrid--theme();
+@mixin dropdown-grid-styles() {
+    @include module.render( "dropdown-grid" ) {
+        @include kendo-dropdown-grid--layout();
+        @include kendo-dropdown-grid--theme();
     }
 }
-

package/scss/dropdownlist/_layout.scss

@@ -1,4 +1,4 @@
-@mixin kendo-dropdownlist--layout() {
+@mixin kendo-dropdown-list--layout() {
 
     // Dropdown list
     .k-dropdown-list {}

package/scss/dropdownlist/_theme.scss

@@ -1,4 +1,4 @@
-@mixin kendo-dropdownlist--theme() {
+@mixin kendo-dropdown-list--theme() {
 
     // Dropdown list
     .k-dropdown-list {}

package/scss/dropdownlist/index.scss

@@ -1,12 +1,13 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "dropdownlist",
+    name: "dropdown-list",
     dependencies: (
-        "input",
+        "button",
         "floating-label",
-        "popup",
-        "list"
-
+        "icon",
+        "input",
+        "list",
+        "popup"
     )
 );
 
@@ -20,10 +21,9 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin dropdownlist-styles() {
-    @include module.render( "dropdownlist" ) {
-        @include kendo-dropdownlist--layout();
-        @include kendo-dropdownlist--theme();
+@mixin dropdown-list-styles() {
+    @include module.render( "dropdown-list" ) {
+        @include kendo-dropdown-list--layout();
+        @include kendo-dropdown-list--theme();
     }
 }
-

package/scss/dropdowntree/_layout.scss

@@ -1,7 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-dropdowntree--layout() {
+@mixin kendo-dropdown-tree--layout() {
 
     // Dropdown tree
     .k-dropdown-tree {}

package/scss/dropdowntree/_theme.scss

@@ -1,4 +1,4 @@
-@mixin kendo-dropdowntree--theme() {
+@mixin kendo-dropdown-tree--theme() {
 
     // Dropdown tree
     .k-dropdown-tree {}

package/scss/dropdowntree/index.scss

@@ -2,13 +2,14 @@
 
 // Module meta
 $_kendo-module-meta: (
-    name: "dropdowntree",
+    name: "dropdown-tree",
     dependencies: (
+        "button",
         "floating-label",
-        "dropdownlist",
-        "multiselect",
-        "treeview",
-        "popup"
+        "icon",
+        "input",
+        "popup",
+        "treeview"
     )
 );
 
@@ -22,10 +23,10 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin dropdowntree-styles() {
-    @include module.render( "dropdowntree" ) {
-        @include kendo-dropdowntree--layout();
-        @include kendo-dropdowntree--theme();
+@mixin dropdown-tree-styles() {
+    @include module.render( "dropdown-tree" ) {
+        @include kendo-dropdown-tree--layout();
+        @include kendo-dropdown-tree--theme();
         @include kendo-utils--typography--text-align();
     }
 }

package/scss/dropzone/_variables.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
-@use "../icon/_variables.scss" as *;
 
 /// The horizontal padding of the DropZone.
 /// @group dropzone

package/scss/dropzone/index.scss

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

package/scss/editor/index.scss

@@ -4,9 +4,11 @@ $_kendo-module-meta: (
     dependencies: (
         "button",
         "checkbox",
-        "colorpicker",
+        "color-picker",
         "combobox",
-        "dropdownlist",
+        "dropdown-list",
+        "file-manager",
+        "icon",
         "toolbar",
         "upload",
         "window"

package/scss/expansion-panel/_layout.scss

@@ -1,7 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-expansion-panel--layout() {
+@mixin kendo-expander--layout() {
 
     // Base
     .k-expander {

package/scss/expansion-panel/_theme.scss

@@ -1,7 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-expansion-panel--theme() {
+@mixin kendo-expander--theme() {
 
     .k-expander {
         @include fill(

package/scss/expansion-panel/index.scss

@@ -2,9 +2,10 @@
 
 // Module meta
 $_kendo-module-meta: (
-    name: "expansion-panel",
+    name: "expander",
     dependencies: (
-        "icon"
+        "icon",
+        "list"
     )
 );
 
@@ -18,10 +19,10 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin expansion-panel-styles() {
-    @include module.render( "expansion-panel" ) {
-        @include kendo-expansion-panel--layout();
-        @include kendo-expansion-panel--theme();
+@mixin expander-styles() {
+    @include module.render( "expander" ) {
+        @include kendo-expander--layout();
+        @include kendo-expander--theme();
         @include kendo-utils--layout--display();
     }
 }

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

@@ -4,9 +4,9 @@
 $_kendo-module-meta: (
     name: "fab",
     dependencies: (
-        "icon",
-        "button",
         "badge",
+        "button",
+        "icon",
         "popup"
     )
 );

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"
     )
 );
 
@@ -27,8 +28,8 @@ $_kendo-module-meta: (
 @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/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"
     )
 );

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/forms/_layout.scss

@@ -6,7 +6,7 @@
 @use "../window/_variables.scss" 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/_index.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-forms--theme() {
+@mixin kendo-form--theme() {
 
     .k-form,
     .k-form-inline {

package/scss/forms/index.scss

@@ -2,14 +2,11 @@
 
 // Module meta
 $_kendo-module-meta: (
-    name: "forms",
+    name: "form",
     dependencies: (
-        "tooltip",
-        "button",
-        "input",
-        "toolbar",
         "action-buttons",
-        "window"
+        "button",
+        "validator"
     )
 );
 
@@ -24,10 +21,10 @@ $_kendo-module-meta: (
 @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/index.scss

@@ -4,18 +4,17 @@
 $_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"
     )
 );