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

package/scss/appbar/index.scss

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

package/scss/autocomplete/index.scss

@@ -2,11 +2,11 @@
 $_kendo-module-meta: (
     name: "autocomplete",
     dependencies: (
-        "input",
         "floating-label",
-        "popup",
+        "icon",
+        "input",
         "list",
-        "icon"
+        "popup"
     )
 );
 

package/scss/badge/index.scss

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

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

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

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

@@ -2,9 +2,11 @@
 
 // Module meta
 $_kendo-module-meta: (
-    name: "button",
+    name: "calendar",
     dependencies: (
-        "button"
+        "button",
+        "icon",
+        "list"
     )
 );
 

package/scss/captcha/index.scss

@@ -4,11 +4,11 @@
 $_kendo-module-meta: (
     name: "captcha",
     dependencies: (
-        "icon",
         "button",
+        "icon",
         "input",
-        "textbox",
-        "slider"
+        "slider",
+        "textbox"
     )
 );
 

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

@@ -6,9 +6,7 @@ $_kendo-module-meta: (
     dependencies: (
         "action-buttons",
         "button",
-        "icon",
-        "typography",
-        "avatar"
+        "typography"
     )
 );
 

package/scss/chart-wizard/_index.scss

@@ -6,11 +6,11 @@ $_kendo-module-meta: (
         "window",
         "splitter",
         "dataviz",
-        "expansion-panel",
+        "expander",
         "grid",
         "tabstrip",
         "listview",
-        "forms",
+        "form",
         "combobox"
     )
 );

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

@@ -2,9 +2,11 @@
 $_kendo-module-meta: (
     name: "chat",
     dependencies: (
-        "input",
+        "avatar",
+        "button",
         "card",
         "icon",
+        "input",
         "toolbar"
     )
 );

package/scss/checkbox/index.scss

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

package/scss/chip/index.scss

@@ -4,8 +4,8 @@
 $_kendo-module-meta: (
     name: "chip",
     dependencies: (
-        'button',
-        'icon'
+        "avatar",
+        "icon"
     )
 );
 

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

@@ -1,12 +1,12 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "coloreditor",
+    name: "color-editor",
     dependencies: (
         "button",
         "action-buttons",
-        "color-preview",
-        "colorpalette",
-        "colorgradient"
+        "color-gradient",
+        "color-palette",
+        "color-preview"
     )
 );
 
@@ -21,8 +21,8 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin coloreditor-styles() {
-    @include module.render( "coloreditor" ) {
+@mixin color-editor-styles() {
+    @include module.render( "color-editor" ) {
         @include kendo-color-editor--layout();
         @include kendo-color-editor--theme();
     }

package/scss/colorgradient/index.scss

@@ -2,13 +2,13 @@
 
 // Module meta
 $_kendo-module-meta: (
-    name: "colorgradient",
+    name: "color-gradient",
     dependencies: (
-        "icon",
         "button",
+        "icon",
+        "numeric-textbox",
         "slider",
-        "textbox",
-        "numerictextbox"
+        "textbox"
     )
 );
 
@@ -23,8 +23,8 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin colorgradient-styles() {
-    @include module.render( "colorgradient" ) {
+@mixin color-gradient-styles() {
+    @include module.render( "color-gradient" ) {
         @include kendo-color-gradient--layout();
         @include kendo-color-gradient--theme();
         @include kendo-utils--flex-grid--flex();

package/scss/colorpalette/index.scss

@@ -1,6 +1,6 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "colorpalette",
+    name: "color-palette",
     dependencies: ()
 );
 
@@ -15,8 +15,8 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin colorpalette-styles() {
-    @include module.render( "colorpalette" ) {
+@mixin color-palette-styles() {
+    @include module.render( "color-palette" ) {
         @include kendo-color-palette--layout();
         @include kendo-color-palette--theme();
     }

package/scss/colorpicker/_layout.scss

@@ -1,6 +1,6 @@
 @use "./_variables.scss" as *;
 
-@mixin kendo-colorpicker--layout() {
+@mixin kendo-color-picker--layout() {
 
     // Color picker
     .k-color-picker {

package/scss/colorpicker/_theme.scss

@@ -1,5 +1,5 @@
 @use "./_variables.scss" as *;
 
-@mixin kendo-colorpicker--theme() {
+@mixin kendo-color-picker--theme() {
     .k-colorpicker { }
 }

package/scss/colorpicker/index.scss

@@ -1,12 +1,12 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "colorpicker",
+    name: "color-picker",
     dependencies: (
-        "input",
         "button",
-        "popup",
+        "color-editor",
         "icon",
-        "coloreditor"
+        "input",
+        "popup",
     )
 );
 
@@ -21,9 +21,9 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin colorpicker-styles() {
-    @include module.render( "colorpicker" ) {
-        @include kendo-colorpicker--layout();
-        @include kendo-colorpicker--theme();
+@mixin color-picker-styles() {
+    @include module.render( "color-picker" ) {
+        @include kendo-color-picker--layout();
+        @include kendo-color-picker--theme();
     }
 }

package/scss/combobox/index.scss

@@ -2,11 +2,12 @@
 $_kendo-module-meta: (
     name: "combobox",
     dependencies: (
-        "input",
+        "button",
         "floating-label",
         "icon",
-        "popup",
-        "list"
+        "input",
+        "list",
+        "popup"
     )
 );
 

package/scss/core/module-system/_components.scss

@@ -24,7 +24,7 @@ $components: (
     "badge",
     "color-preview",
     "loader",
-    "color-preview",
+    "loading",
     "skeleton",
     "tooltip",
     "time-marker",
@@ -42,35 +42,35 @@ $components: (
     "slider",
 
     // Form helpers
-    "forms",
+    "form",
     "validator",
     "floating-label",
 
     // Form requirements
     "calendar",
     "popup",
-    "timeselector",
+    "time-selector",
 
     // Augmented inputs
     "autocomplete",
     "captcha",
-    "colorpalette",
-    "colorgradient",
-    "coloreditor",
-    "colorpicker",
+    "color-palette",
+    "color-gradient",
+    "color-editor",
+    "color-picker",
     "combobox",
-    "dateinput",
-    "datepicker",
-    "timepicker",
-    "timedurationpicker",
-    "datetimepicker",
-    "daterangepicker",
-    "dropdowngrid",
-    "dropdownlist",
-    "dropdowntree",
-    "maskedtextbox",
+    "date-input",
+    "date-picker",
+    "time-picker",
+    "time-duration-picker",
+    "date-time-picker",
+    "date-range-picker",
+    "dropdown-grid",
+    "dropdown-list",
+    "dropdown-tree",
+    "masked-textbox",
     "multiselect",
-    "numerictextbox",
+    "numeric-textbox",
     "rating",
     "searchbox",
     "switch",
@@ -90,7 +90,7 @@ $components: (
     "drawer",
     "notification",
     "popover",
-    "responsivepanel",
+    "responsive-panel",
     "window",
 
     // Navigation
@@ -104,11 +104,10 @@ $components: (
 
     // Layout & containers
     "card",
-    "expansion-panel",
-    "panel",
+    "expander",
     "panelbar",
     "splitter",
-    "tilelayout",
+    "tile-layout",
     "dock-manager",
     "chart-wizard",
 
@@ -119,12 +118,12 @@ $components: (
     "pivotgrid",
     "treelist",
     "filter",
-    "filemanager",
-    "taskboard",
+    "file-manager",
+    "task-board",
 
     // Editors
     "editor",
-    "imageeditor",
+    "image-editor",
 
     // Scheduling
     "gantt",
@@ -133,7 +132,7 @@ $components: (
     // Misc
     "adaptive",
     "chat",
-    "mediaplayer",
+    "media-player",
     "timeline",
     "pdf-viewer",
     "scroller",

package/scss/dataviz/index.scss

@@ -2,7 +2,7 @@
 $_kendo-module-meta: (
     name: "dataviz",
     dependencies: (
-        "button",
+        "icon",
         "popup",
         "tooltip"
     )

package/scss/dateinput/_layout.scss

@@ -1,4 +1,4 @@
-@mixin kendo-dateinput--layout() {
+@mixin kendo-date-input--layout() {
 
     .k-dateinput {}
 }

package/scss/dateinput/_theme.scss

@@ -1,4 +1,4 @@
-@mixin kendo-dateinput--theme() {
+@mixin kendo-date-input--theme() {
 
     .k-dateinput {}
 }

package/scss/dateinput/index.scss

@@ -1,7 +1,9 @@
 // Module meta
 $_kendo-module-meta: (
-    name: "dateinput",
+    name: "date-input",
     dependencies: (
+        "floating-label",
+        "icon",
         "input"
     )
 );
@@ -16,9 +18,9 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin dateinput-styles() {
-    @include module.render( "dateinput" ) {
-        @include kendo-dateinput--layout();
-        @include kendo-dateinput--theme();
+@mixin date-input-styles() {
+    @include module.render( "date-input" ) {
+        @include kendo-date-input--layout();
+        @include kendo-date-input--theme();
     }
 }

package/scss/datepicker/_layout.scss

@@ -1,4 +1,4 @@
-@mixin kendo-datepicker--layout() {
+@mixin kendo-date-picker--layout() {
 
     .k-datepicker {}
 }

package/scss/datepicker/_theme.scss

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

package/scss/datepicker/index.scss

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

package/scss/daterangepicker/_layout.scss

@@ -3,7 +3,7 @@
 @use "../input/_variables.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-daterangepicker--layout() {
+@mixin kendo-date-range-picker--layout() {
 
     // Daterange picker
     .k-daterange-picker {