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

package/scss/index.scss

@@ -1,322 +1,322 @@
 // Forward component modules
-@forward "core";
+@forward "./core";
 
 
 // Typography and utils
-@forward "typography";
-@forward "utils";
-@forward "draggable";
+@forward "./typography";
+@forward "./utils";
+@forward "./draggable";
 
 
 // Generic content
-@forward "icon";
-@forward "messagebox";
+@forward "./icon";
+@forward "./messagebox";
 
 
 // Primitive components
-@forward "action-buttons";
-@forward "list";
-@forward "listgroup";
-@forward "overlay";
-@forward "popup";
-@forward "ripple";
-@forward "table";
-@forward "virtual-scroller";
+@forward "./action-buttons";
+@forward "./list";
+@forward "./listgroup";
+@forward "./overlay";
+@forward "./popup";
+@forward "./ripple";
+@forward "./table";
+@forward "./virtual-scroller";
 
 
 // Native forms
-@forward "button";
-@forward "split-button";
-@forward "menu-button";
-@forward "input";
-@forward "textbox";
-@forward "textarea";
-@forward "checkbox";
-@forward "listbox";
-@forward "progressbar";
-@forward "radio";
-@forward "slider";
+@forward "./button";
+@forward "./split-button";
+@forward "./menu-button";
+@forward "./input";
+@forward "./textbox";
+@forward "./textarea";
+@forward "./checkbox";
+@forward "./listbox";
+@forward "./progressbar";
+@forward "./radio";
+@forward "./slider";
 
 
 // Popups and modals
-@forward "action-sheet";
-@forward "window";
-@forward "dialog";
-@forward "drawer";
-@forward "notification";
-@forward "popover";
-@forward "responsivepanel";
+@forward "./action-sheet";
+@forward "./window";
+@forward "./dialog";
+@forward "./drawer";
+@forward "./notification";
+@forward "./popover";
+@forward "./responsivepanel";
 
 
 // Indicators
-@forward "avatar";
-@forward "badge";
-@forward "chip";
-@forward "color-preview";
-@forward "loader";
-@forward "skeleton";
-@forward "tooltip";
+@forward "./avatar";
+@forward "./badge";
+@forward "./chip";
+@forward "./color-preview";
+@forward "./loader";
+@forward "./skeleton";
+@forward "./tooltip";
 
 
 // Form helpers
-@forward "forms";
-@forward "validator";
-@forward "floating-label";
+@forward "./forms";
+@forward "./validator";
+@forward "./floating-label";
 
 
 // Form requirements
-@forward "calendar";
-@forward "timeselector";
+@forward "./calendar";
+@forward "./timeselector";
 
 
 // Augmented forms
-@forward "autocomplete";
-@forward "captcha";
-@forward "colorpalette";
-@forward "colorgradient";
-@forward "coloreditor";
-@forward "colorpicker";
-@forward "combobox";
-@forward "dateinput";
-@forward "datepicker";
-@forward "timepicker";
-@forward "datetimepicker";
-@forward "daterangepicker";
-@forward "dropdowngrid";
-@forward "dropdownlist";
-@forward "dropdowntree";
-@forward "maskedtextbox";
-@forward "multiselect";
-@forward "numerictextbox";
-@forward "rating";
-@forward "searchbox";
-@forward "switch";
-@forward "upload";
-@forward "dropzone";
+@forward "./autocomplete";
+@forward "./captcha";
+@forward "./colorpalette";
+@forward "./colorgradient";
+@forward "./coloreditor";
+@forward "./colorpicker";
+@forward "./combobox";
+@forward "./dateinput";
+@forward "./datepicker";
+@forward "./timepicker";
+@forward "./datetimepicker";
+@forward "./daterangepicker";
+@forward "./dropdowngrid";
+@forward "./dropdownlist";
+@forward "./dropdowntree";
+@forward "./maskedtextbox";
+@forward "./multiselect";
+@forward "./numerictextbox";
+@forward "./rating";
+@forward "./searchbox";
+@forward "./switch";
+@forward "./upload";
+@forward "./dropzone";
 
 
 // Command interfaces
-@forward "appbar";
-@forward "fab";
-@forward "menu";
-@forward "toolbar";
+@forward "./appbar";
+@forward "./fab";
+@forward "./menu";
+@forward "./toolbar";
 
 
 // Navigation
-@forward "bottom-navigation";
-@forward "breadcrumb";
-@forward "pager";
-@forward "stepper";
-@forward "tabstrip";
-@forward "treeview";
-@forward "wizard";
+@forward "./bottom-navigation";
+@forward "./breadcrumb";
+@forward "./pager";
+@forward "./stepper";
+@forward "./tabstrip";
+@forward "./treeview";
+@forward "./wizard";
 
 
 // Layout & containers
-@forward "card";
-@forward "expansion-panel";
-@forward "panelbar";
-@forward "splitter";
-@forward "tilelayout";
+@forward "./card";
+@forward "./expansion-panel";
+@forward "./panelbar";
+@forward "./splitter";
+@forward "./tilelayout";
 
 
 // Editors
-@forward "editor";
-@forward "imageeditor";
+@forward "./editor";
+@forward "./imageeditor";
 
 
 // Data management
-@forward "grid";
-@forward "listview";
-@forward "spreadsheet";
-@forward "pivotgrid";
-@forward "treelist";
-@forward "filter";
-@forward "filemanager";
-@forward "taskboard";
+@forward "./grid";
+@forward "./listview";
+@forward "./spreadsheet";
+@forward "./pivotgrid";
+@forward "./treelist";
+@forward "./filter";
+@forward "./filemanager";
+@forward "./taskboard";
 
 
 // Scheduling
-@forward "gantt";
-@forward "scheduler";
+@forward "./gantt";
+@forward "./scheduler";
 
 
 // Misc
-@forward "adaptive";
-@forward "chat";
-@forward "mediaplayer";
-@forward "timeline";
-@forward "pdf-viewer";
-@forward "scroller";
-@forward "scrollview";
+@forward "./adaptive";
+@forward "./chat";
+@forward "./mediaplayer";
+@forward "./timeline";
+@forward "./pdf-viewer";
+@forward "./scroller";
+@forward "./scrollview";
 
 
 // Dataviz
-@forward "dataviz";
-@forward "map";
-@forward "orgchart";
-@forward "signature";
+@forward "./dataviz";
+@forward "./map";
+@forward "./orgchart";
+@forward "./signature";
 
 
 // Use component modules
-@use "core" as *;
+@use "./core" as *;
 
 
 // Typography and utils
-@use "typography" as *;
-@use "utils" as *;
-@use "draggable" as *;
+@use "./typography" as *;
+@use "./utils" as *;
+@use "./draggable" as *;
 
 
 // Generic content
-@use "icon" as *;
-@use "messagebox" as *;
+@use "./icon" as *;
+@use "./messagebox" as *;
 
 
 // Primitive components
-@use "action-buttons" as *;
-@use "list" as *;
-@use "listgroup" as *;
-@use "overlay" as *;
-@use "popup" as *;
-@use "ripple" as *;
-@use "table" as *;
-@use "virtual-scroller" as *;
+@use "./action-buttons" as *;
+@use "./list" as *;
+@use "./listgroup" as *;
+@use "./overlay" as *;
+@use "./popup" as *;
+@use "./ripple" as *;
+@use "./table" as *;
+@use "./virtual-scroller" as *;
 
 
 // Indicators
-@use "avatar" as *;
-@use "badge" as *;
-@use "chip" as *;
-@use "color-preview" as *;
-@use "loader" as *;
-@use "skeleton" as *;
-@use "tooltip" as *;
+@use "./avatar" as *;
+@use "./badge" as *;
+@use "./chip" as *;
+@use "./color-preview" as *;
+@use "./loader" as *;
+@use "./skeleton" as *;
+@use "./tooltip" as *;
 
 
 // Form helpers
-@use "forms" as *;
-@use "validator" as *;
-@use "floating-label" as *;
+@use "./forms" as *;
+@use "./validator" as *;
+@use "./floating-label" as *;
 
 
 // Native forms
-@use "button" as *;
-@use "split-button" as *;
-@use "menu-button" as *;
-@use "input" as *;
-@use "textbox" as *;
-@use "textarea" as *;
-@use "checkbox" as *;
-@use "listbox" as *;
-@use "progressbar" as *;
-@use "radio" as *;
-@use "slider" as *;
+@use "./button" as *;
+@use "./split-button" as *;
+@use "./menu-button" as *;
+@use "./input" as *;
+@use "./textbox" as *;
+@use "./textarea" as *;
+@use "./checkbox" as *;
+@use "./listbox" as *;
+@use "./progressbar" as *;
+@use "./radio" as *;
+@use "./slider" as *;
 
 
 // Form requirements
-@use "calendar" as *;
-@use "timeselector" as *;
+@use "./calendar" as *;
+@use "./timeselector" as *;
 
 
 // Augmented forms
-@use "autocomplete" as *;
-@use "captcha" as *;
-@use "colorpalette" as *;
-@use "colorgradient" as *;
-@use "coloreditor" as *;
-@use "colorpicker" as *;
-@use "combobox" as *;
-@use "dateinput" as *;
-@use "datepicker" as *;
-@use "timepicker" as *;
-@use "timedurationpicker" as *;
-@use "datetimepicker" as *;
-@use "daterangepicker" as *;
-@use "dropdowngrid" as *;
-@use "dropdownlist" as *;
-@use "dropdowntree" as *;
-@use "maskedtextbox" as *;
-@use "multiselect" as *;
-@use "numerictextbox" as *;
-@use "rating" as *;
-@use "searchbox" as *;
-@use "switch" as *;
-@use "upload" as *;
-@use "dropzone" as *;
+@use "./autocomplete" as *;
+@use "./captcha" as *;
+@use "./colorpalette" as *;
+@use "./colorgradient" as *;
+@use "./coloreditor" as *;
+@use "./colorpicker" as *;
+@use "./combobox" as *;
+@use "./dateinput" as *;
+@use "./datepicker" as *;
+@use "./timepicker" as *;
+@use "./timedurationpicker" as *;
+@use "./datetimepicker" as *;
+@use "./daterangepicker" as *;
+@use "./dropdowngrid" as *;
+@use "./dropdownlist" as *;
+@use "./dropdowntree" as *;
+@use "./maskedtextbox" as *;
+@use "./multiselect" as *;
+@use "./numerictextbox" as *;
+@use "./rating" as *;
+@use "./searchbox" as *;
+@use "./switch" as *;
+@use "./upload" as *;
+@use "./dropzone" as *;
 
 
 // Command interfaces
-@use "appbar" as *;
-@use "fab" as *;
-@use "menu" as *;
-@use "toolbar" as *;
+@use "./appbar" as *;
+@use "./fab" as *;
+@use "./menu" as *;
+@use "./toolbar" as *;
 
 
 // Popups and modals
-@use "action-sheet" as *;
-@use "dialog" as *;
-@use "drawer" as *;
-@use "notification" as *;
-@use "popover" as *;
-@use "responsivepanel" as *;
-@use "window" as *;
+@use "./action-sheet" as *;
+@use "./dialog" as *;
+@use "./drawer" as *;
+@use "./notification" as *;
+@use "./popover" as *;
+@use "./responsivepanel" as *;
+@use "./window" as *;
 
 
 // Navigation
-@use "bottom-navigation" as *;
-@use "breadcrumb" as *;
-@use "pager" as *;
-@use "stepper" as *;
-@use "tabstrip" as *;
-@use "treeview" as *;
-@use "wizard" as *;
+@use "./bottom-navigation" as *;
+@use "./breadcrumb" as *;
+@use "./pager" as *;
+@use "./stepper" as *;
+@use "./tabstrip" as *;
+@use "./treeview" as *;
+@use "./wizard" as *;
 
 
 // Layout & containers
-@use "card" as *;
-@use "expansion-panel" as *;
-@use "panelbar" as *;
-@use "splitter" as *;
-@use "tilelayout" as *;
+@use "./card" as *;
+@use "./expansion-panel" as *;
+@use "./panelbar" as *;
+@use "./splitter" as *;
+@use "./tilelayout" as *;
 
 
 // Data management
-@use "grid" as *;
-@use "listview" as *;
-@use "spreadsheet" as *;
-@use "pivotgrid" as *;
-@use "treelist" as *;
-@use "filter" as *;
-@use "filemanager" as *;
-@use "taskboard" as *;
+@use "./grid" as *;
+@use "./listview" as *;
+@use "./spreadsheet" as *;
+@use "./pivotgrid" as *;
+@use "./treelist" as *;
+@use "./filter" as *;
+@use "./filemanager" as *;
+@use "./taskboard" as *;
 
 
 // Editors
-@use "editor" as *;
-@use "imageeditor" as *;
+@use "./editor" as *;
+@use "./imageeditor" as *;
 
 
 // Scheduling
-@use "gantt" as *;
-@use "scheduler" as *;
+@use "./gantt" as *;
+@use "./scheduler" as *;
 
 
 // Misc
-@use "adaptive" as *;
-@use "chat" as *;
-@use "mediaplayer" as *;
-@use "timeline" as *;
-@use "pdf-viewer" as *;
-@use "scroller" as *;
-@use "scrollview" as *;
+@use "./adaptive" as *;
+@use "./chat" as *;
+@use "./mediaplayer" as *;
+@use "./timeline" as *;
+@use "./pdf-viewer" as *;
+@use "./scroller" as *;
+@use "./scrollview" as *;
 
 
 // Dataviz
-@use "dataviz" as *;
-@use "map" as *;
-@use "orgchart" as *;
-@use "signature" as *;
+@use "./dataviz" as *;
+@use "./map" as *;
+@use "./orgchart" as *;
+@use "./signature" as *;
 
 
 // Configuration

package/scss/input/_layout.scss

@@ -1,5 +1,6 @@
-@use "_variables.scss" as *;
+@use "sass:map";
 @use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-input--layout() {
 
@@ -175,10 +176,17 @@
 
     // Input multiple values
     .k-input-values {
+        min-width: 0px;
         width: 100%;
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
         gap: calc( var( --INTERNAL--kendo-input-padding-y, 0 ) / 2 );
         cursor: text;
     }
+    .k-input-values .k-chip-list {
+        display: contents;
+    }
 
 
     // Icon picker
@@ -307,10 +315,10 @@
             }
         }
         .k-spinner-increase .k-icon {
-            bottom: if( $use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
+            bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
         }
         .k-spinner-decrease .k-icon {
-           top: if( $use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
+           top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
         }
     }
 
@@ -377,14 +385,14 @@
 
     // Sizing
     @each $size, $size-props in $kendo-input-sizes {
-        $_padding-x: map-get( $size-props, padding-x );
-        $_padding-y: map-get( $size-props, padding-y );
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
-        $_icon-size: map-get( $size-props, icon-size );
-        $_button-padding-x: map-get( $size-props, button-padding-x );
-        $_button-padding-y: map-get( $size-props, button-padding-y );
-        $_button-width: map-get( $size-props, button-width );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_icon-size: map.get( $size-props, icon-size );
+        $_button-padding-x: map.get( $size-props, button-padding-x );
+        $_button-padding-y: map.get( $size-props, button-padding-y );
+        $_button-width: map.get( $size-props, button-width );
 
         .k-input-#{$size},
         .k-picker-#{$size} {
@@ -397,11 +405,11 @@
             --INTERNAL--kendo-input-icon-size: #{$_icon-size};
 
             .k-input-button {
-                width: if( $use-input-button-width, var( --kendo-input-button-width, #{$_button-width} ), auto );
+                width: if( $kendo-use-input-button-width, var( --kendo-input-button-width, #{$_button-width} ), auto );
             }
 
             .k-input-spinner {
-                width: if( $use-input-spinner-width, var( --kendo-input-spinner-width, #{$_button-width} ), auto );
+                width: if( $kendo-use-input-spinner-width, var( --kendo-input-spinner-width, #{$_button-width} ), auto );
             }
 
             &.k-icon-picker .k-input-inner {

package/scss/input/_theme.scss

@@ -1,4 +1,5 @@
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "./_variables.scss" as *;
 
 @mixin kendo-input--theme() {
 
@@ -149,25 +150,25 @@
     @each $component, $fill-modes in $kendo-input-theme-colors {
         @each $fill-mode, $color-props in $fill-modes {
 
-            $_text-color: map-get( $color-props, text );
-            $_background-color: map-get( $color-props, bg );
-            $_border-color: map-get( $color-props, border );
+            $_text-color: map.get( $color-props, text );
+            $_background-color: map.get( $color-props, bg );
+            $_border-color: map.get( $color-props, border );
 
-            $_hover-text: map-get( $color-props, hover-text );
-            $_hover-bg: map-get( $color-props, hover-bg );
-            $_hover-border: map-get( $color-props, hover-border );
+            $_hover-text: map.get( $color-props, hover-text );
+            $_hover-bg: map.get( $color-props, hover-bg );
+            $_hover-border: map.get( $color-props, hover-border );
 
-            $_focus-text: map-get( $color-props, focus-text );
-            $_focus-bg: map-get( $color-props, focus-bg );
-            $_focus-border: map-get( $color-props, focus-border );
+            $_focus-text: map.get( $color-props, focus-text );
+            $_focus-bg: map.get( $color-props, focus-bg );
+            $_focus-border: map.get( $color-props, focus-border );
 
-            $_hover-focus-text: map-get( $color-props, hover-focus-text );
-            $_hover-focus-bg: map-get( $color-props, hover-focus-bg );
-            $_hover-focus-border: map-get( $color-props, hover-focus-border );
+            $_hover-focus-text: map.get( $color-props, hover-focus-text );
+            $_hover-focus-bg: map.get( $color-props, hover-focus-bg );
+            $_hover-focus-border: map.get( $color-props, hover-focus-border );
 
-            $_disabled-text: map-get( $color-props, disabled-text );
-            $_disabled-bg: map-get( $color-props, disabled-bg );
-            $_disabled-border: map-get( $color-props, disabled-border );
+            $_disabled-text: map.get( $color-props, disabled-text );
+            $_disabled-bg: map.get( $color-props, disabled-bg );
+            $_disabled-border: map.get( $color-props, disabled-border );
 
             .k-#{$component}-#{$fill-mode} {
                 --kendo-#{$component}-text: var( --kendo-#{$component}-#{$fill-mode}-text, #{$_text-color} );