@progress/kendo-theme-default 6.1.1-dev.8 → 6.2.1-dev.0

package/scss/icons/_index.scss

@@ -1,4 +1,12 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "icon",
+    dependencies: ()
+);
 
 
 // Dependencies

package/scss/icons/_layout.scss

@@ -59,10 +59,10 @@ $ki-icon-size: $kendo-icon-size;
     // RTL icons
     .k-rtl .k-i-indent-increase,
     .k-rtl .k-i-indent-decrease,
-    .k-rtl .k-i-expand,
-    .k-rtl .k-i-collapse,
-    [dir="rtl"] .k-i-expand,
-    [dir="rtl"] .k-i-collapse {
+    .k-rtl .k-i-caret-alt-right,
+    .k-rtl .k-i-caret-alt-left,
+    [dir="rtl"] .k-i-caret-alt-right,
+    [dir="rtl"] .k-i-caret-alt-left {
         transform: scaleX(-1);
     }
 

package/scss/imageeditor/_index.scss

@@ -1,4 +1,18 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "image-editor",
+    dependencies: (
+        "checkbox",
+        "dropdown-list",
+        "form",
+        "numeric-textbox",
+        "toolbar",
+    )
+);
 
 
 // Dependencies

package/scss/imageeditor/_layout.scss

@@ -2,8 +2,10 @@
 
     // Image Editor
     .k-imageeditor {
-        margin: $kendo-image-editor-margin-y $kendo-image-editor-margin-x;
-        padding: $kendo-image-editor-padding-y $kendo-image-editor-padding-x;
+        margin-block: $kendo-image-editor-margin-y;
+        margin-inline: $kendo-image-editor-margin-x;
+        padding-block: $kendo-image-editor-padding-y;
+        padding-inline: $kendo-image-editor-padding-x;
         border-width: $kendo-image-editor-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -56,7 +58,8 @@
 
     // Action Pane
     .k-imageeditor-action-pane {
-        padding: $kendo-image-editor-action-pane-padding-y $kendo-image-editor-action-pane-padding-x;
+        padding-block: $kendo-image-editor-action-pane-padding-y;
+        padding-inline: $kendo-image-editor-action-pane-padding-x;
         width: $kendo-image-editor-action-pane-width;
         border-width: 0;
         border-left-width: $kendo-image-editor-content-border-width;
@@ -91,7 +94,8 @@
         position: absolute;
 
         .k-resize-handle {
-            margin: $kendo-image-editor-resize-handle-margin-y $kendo-image-editor-resize-handle-margin-x;
+            margin-block: $kendo-image-editor-resize-handle-margin-y;
+            margin-inline: $kendo-image-editor-resize-handle-margin-x;
             border-style: solid;
             border-width: $kendo-image-editor-resize-handle-border-width;
         }

package/scss/input/_index.scss

@@ -1,4 +1,15 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "input",
+    dependencies: (
+        "button",
+        "icon",
+    )
+);
 
 
 // Dependencies

package/scss/input/_layout.scss

@@ -59,7 +59,8 @@
     .k-input {}
     input.k-input,
     textarea.k-textarea {
-        padding: $kendo-input-padding-y $kendo-input-padding-x;
+        padding-block: $kendo-input-padding-y;
+        padding-inline: $kendo-input-padding-x;
 
         &:disabled,
         &[disabled] {
@@ -82,7 +83,8 @@
         cursor: pointer;
     }
     select.k-picker {
-        padding: $kendo-input-padding-y $kendo-input-padding-x;
+        padding-block: $kendo-input-padding-y;
+        padding-inline: $kendo-input-padding-x;
         appearance: auto;
 
         &:disabled,
@@ -100,7 +102,8 @@
 
     // Input inner
     .k-input-inner {
-        padding: $kendo-input-padding-y $kendo-input-padding-x;
+        padding-block: $kendo-input-padding-y;
+        padding-inline: $kendo-input-padding-x;
         width: 100%;
         border: 0;
         outline: 0;
@@ -214,7 +217,9 @@
     .k-input-validation-icon,
     .k-input-loading-icon,
     .k-input-prefix > .k-icon,
-    .k-input-suffix > .k-icon {
+    .k-input-prefix > .k-svg-icon,
+    .k-input-suffix > .k-icon,
+    .k-input-suffix > .k-svg-icon {
         flex: none;
         align-self: center;
         display: inline-flex;
@@ -330,15 +335,18 @@
             aspect-ratio: auto;
 
             .k-button-icon {
-                margin: -1em 0;
+                margin-block: -1em;
+                margin-inline: 0;
                 min-width: auto !important; // sass-lint:disable-line no-important
                 min-height: auto !important; // sass-lint:disable-line no-important
             }
         }
-        .k-spinner-increase .k-icon {
+        .k-spinner-increase .k-icon,
+        .k-spinner-increase .k-svg-icon {
             bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
-        .k-spinner-decrease .k-icon {
+        .k-spinner-decrease .k-icon,
+        .k-spinner-decrease .k-svg-icon {
             top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
     }
@@ -409,13 +417,15 @@
             }
 
             .k-input-inner {
-                padding: $_padding-y $_padding-x;
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
             }
 
             .k-input-button,
             .k-spinner-increase,
             .k-spinner-decrease {
-                padding: $_button-padding-y $_button-padding-x;
+                padding-block: $_button-padding-y;
+                padding-inline: $_button-padding-x;
             }
 
             .k-input-icon,
@@ -423,7 +433,9 @@
             .k-input-loading-icon,
             .k-clear-value,
             .k-input-prefix > .k-icon,
-            .k-input-suffix > .k-icon {
+            .k-input-prefix > .k-svg-icon,
+            .k-input-suffix > .k-icon,
+            .k-input-suffix > .k-svg-icon {
                 width: $_icon-size;
                 height: $_icon-size;
             }
@@ -441,7 +453,8 @@
             }
         }
         select.k-picker-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
         }
     }
 

package/scss/input/_variables.scss

@@ -23,7 +23,7 @@ $kendo-input-sm-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-input-md-padding-x: $kendo-input-padding-x !default;
 /// Horizontal padding of large input components.
 /// @group input
-$kendo-input-lg-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-input-lg-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of input components.
 /// @group input
@@ -98,138 +98,334 @@ $kendo-input-sizes: (
     )
 ) !default;
 
+/// The background color of input components.
+/// @group input
 $kendo-input-bg: $kendo-component-bg !default;
+/// The text color of input components.
+/// @group input
 $kendo-input-text: $kendo-component-text !default;
+/// The border color of input components.
+/// @group input
 $kendo-input-border: $kendo-component-border !default;
+/// The shadow of input components.
+/// @group input
 $kendo-input-shadow: null !default;
 
+/// The background color of hovered input components.
+/// @group input
 $kendo-input-hover-bg: null !default;
+/// The text color of hovered input components.
+/// @group input
 $kendo-input-hover-text: null !default;
+/// The border color of hovered input components.
+/// @group input
 $kendo-input-hover-border: rgba( $kendo-input-border, .16 ) !default;
+/// The shadow of hovered input components.
+/// @group input
 $kendo-input-hover-shadow: null !default;
 
+/// The background color of focused input components.
+/// @group input
 $kendo-input-focus-bg: null !default;
+/// The text color of focused input components.
+/// @group input
 $kendo-input-focus-text: null !default;
+/// The border color of focused input components.
+/// @group input
 $kendo-input-focus-border: $kendo-input-hover-border !default;
+/// The shadow of focused input components.
+/// @group input
 $kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
 
+/// The background color of selected input components.
+/// @group input
+$kendo-input-selected-bg: null !default;
+/// The text color of selected input components.
+/// @group input
+$kendo-input-selected-text: null !default;
+
+/// The background color of disabled input components.
+/// @group input
 $kendo-input-disabled-bg: null !default;
+/// The text color of disabled input components.
+/// @group input
 $kendo-input-disabled-text: null !default;
+/// The border color of disabled input components.
+/// @group input
 $kendo-input-disabled-border: null !default;
+/// The gradient of disabled input components.
+/// @group input
 $kendo-input-disabled-gradient: null !default;
+/// The shadow of disabled input components.
+/// @group input
 $kendo-input-disabled-shadow: null !default;
 
+/// The background color of outline input components.
+/// @group input
 $kendo-input-outline-bg: null !default;
+/// The text color of outline input components.
+/// @group input
 $kendo-input-outline-text: $kendo-input-text !default;
+/// The border color of outline input components.
+/// @group input
 $kendo-input-outline-border: rgba( $kendo-button-text, .5) !default;
 
+/// The background color of outline hovered input components.
+/// @group input
 $kendo-input-outline-hover-bg: null !default;
+/// The text color of outline hovered input components.
+/// @group input
 $kendo-input-outline-hover-text: null !default;
+/// The border color of outline hovered input components.
+/// @group input
 $kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
 
+/// The background color of outline focused input components.
+/// @group input
 $kendo-input-outline-focus-bg: null !default;
+/// The text color of outline focused input components.
+/// @group input
 $kendo-input-outline-focus-text: null !default;
+/// The border color of outline focused input components.
+/// @group input
 $kendo-input-outline-focus-border: null !default;
+/// The shadow of outline focused input components.
+/// @group input
 $kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
 
+/// The background color of flat input components.
+/// @group input
 $kendo-input-flat-bg: null !default;
+/// The text color of flat input components.
+/// @group input
 $kendo-input-flat-text: $kendo-input-text !default;
+/// The border color of flat input components.
+/// @group input
 $kendo-input-flat-border: $kendo-input-border !default;
 
+/// The background color of flat hovered input components.
+/// @group input
 $kendo-input-flat-hover-bg: null !default;
+/// The text color of flat hovered input components.
+/// @group input
 $kendo-input-flat-hover-text: null !default;
+/// The border color of flat hovered input components.
+/// @group input
 $kendo-input-flat-hover-border: $kendo-input-hover-border !default;
 
+/// The background color of flat focused input components.
+/// @group input
 $kendo-input-flat-focus-bg: null !default;
+/// The text color of flat focused input components.
+/// @group input
 $kendo-input-flat-focus-text: null !default;
+/// The border color of flat focused input components.
+/// @group input
 $kendo-input-flat-focus-border: null !default;
+/// The shadow of flat focused input components.
+/// @group input
 $kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
+/// The text color of the input placeholder.
+/// @group input
+$kendo-input-placeholder-text: $kendo-subtle-text !default;
+/// The opacity of the input placeholder.
+/// @group input
+$kendo-input-placeholder-opacity: 1 !default;
+
+/// The color of the input clear value icon.
+/// @group input
+$kendo-input-clear-value-text: null !default;
+/// The opacity of the input clear value icon.
+/// @group input
+$kendo-input-clear-value-opacity: .5 !default;
+/// The color of the hovered input clear value icon.
+/// @group input
+$kendo-input-clear-value-hover-text: null !default;
+/// The opacity of the hovered input clear value icon.
+/// @group input
+$kendo-input-clear-value-hover-opacity: 1 !default;
+
+/// The vertical margin of the clear value icon.
+/// @group input
+$kendo-input-values-margin-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// The horizontal margin of the clear value icon.
+/// @group input
+$kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
+
+/// Width of the input button.
+/// @group input
+$kendo-input-button-width: $kendo-button-inner-calc-size !default;
+/// Border width of the input button.
+/// @group input
+$kendo-input-button-border-width: 1px !default;
+/// Width of the input spinner button.
+/// @group input
+$kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
+/// Icon offset of the input spinner button.
+/// @group input
+$kendo-input-spinner-icon-offset: null !default;
+
+/// Color of the input separator.
+/// @group input
+$kendo-input-separator-color: $kendo-input-text !default;
+/// Opacity of the input separator.
+/// @group input
+$kendo-input-separator-opacity: .5 !default;
+
+/// Border color of the invalid input components.
+/// @group input
+$kendo-input-invalid-border: $kendo-invalid-border !default;
+/// Shadow of the invalid input components.
+/// @group input
+$kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
+
+/// The background color of picker components.
+/// @group picker
 $kendo-picker-bg: $kendo-button-bg !default;
+/// The text color of picker components.
+/// @group picker
 $kendo-picker-text: $kendo-button-text !default;
+/// The border color of picker components.
+/// @group picker
 $kendo-picker-border: $kendo-button-border !default;
+/// The gradient of picker components.
+/// @group picker
 $kendo-picker-gradient: $kendo-button-gradient !default;
+/// The shadow of picker components.
+/// @group picker
 $kendo-picker-shadow: $kendo-button-shadow !default;
 
+/// The background color of hovered picker components.
+/// @group picker
 $kendo-picker-hover-bg: $kendo-button-hover-bg !default;
+/// The text color of hovered picker components.
+/// @group picker
 $kendo-picker-hover-text: $kendo-button-hover-text !default;
+/// The border color of hovered picker components.
+/// @group picker
 $kendo-picker-hover-border: $kendo-button-hover-border !default;
+/// The gradient of hovered picker components.
+/// @group picker
 $kendo-picker-hover-gradient: $kendo-button-hover-gradient !default;
+/// The shadow of hovered picker components.
+/// @group picker
 $kendo-picker-hover-shadow: $kendo-button-hover-shadow !default;
 
+/// The background color of focused picker components.
+/// @group picker
 $kendo-picker-focus-bg: $kendo-button-focus-bg !default;
+/// The text color of focused picker components.
+/// @group picker
 $kendo-picker-focus-text: $kendo-button-focus-text !default;
+/// The border color of focused picker components.
+/// @group picker
 $kendo-picker-focus-border: $kendo-button-focus-border !default;
+/// The gradient of focused picker components.
+/// @group picker
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
+/// The shadow of focused picker components.
+/// @group picker
 $kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
 
+/// The background color of disabled picker components.
+/// @group picker
 $kendo-picker-disabled-bg: null !default;
+/// The text color of disabled picker components.
+/// @group picker
 $kendo-picker-disabled-text: null !default;
+/// The border color of disabled picker components.
+/// @group picker
 $kendo-picker-disabled-border: null !default;
+/// The gradient of disabled picker components.
+/// @group picker
 $kendo-picker-disabled-gradient: null !default;
+/// The shadow of disabled picker components.
+/// @group picker
 $kendo-picker-disabled-shadow: null !default;
 
+/// The background color of outline picker components.
+/// @group picker
 $kendo-picker-outline-bg: null !default;
+/// The text color of outline picker components.
+/// @group picker
 $kendo-picker-outline-text: $kendo-button-text !default;
+/// The border color of outline picker components.
+/// @group picker
 $kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
 
+/// The background color of outline hovered picker components.
+/// @group picker
 $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
+/// The text color of outline hovered picker components.
+/// @group picker
 $kendo-picker-outline-hover-text: k-contrast-legacy( $kendo-picker-outline-hover-bg ) !default;
+/// The border color of outline hovered picker components.
+/// @group picker
 $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
 
+/// The background color of outline focused picker components.
+/// @group picker
 $kendo-picker-outline-focus-bg: null !default;
+/// The text color of outline focused picker components.
+/// @group picker
 $kendo-picker-outline-focus-text: null !default;
+/// The border color of outline focused picker components.
+/// @group picker
 $kendo-picker-outline-focus-border: null !default;
+/// The shadow of outline focused picker components.
+/// @group picker
 $kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
 
+/// The background color of outline hovered and focused picker components.
+/// @group picker
 $kendo-picker-outline-hover-focus-bg: null !default;
+/// The text color of outline hovered and focused picker components.
+/// @group picker
 $kendo-picker-outline-hover-focus-text: null !default;
+/// The border color of outline hovered and focused picker components.
+/// @group picker
 $kendo-picker-outline-hover-focus-border: null !default;
 
+/// The background color of flat picker components.
+/// @group picker
 $kendo-picker-flat-bg: null !default;
+/// The text color of flat picker components.
+/// @group picker
 $kendo-picker-flat-text: $kendo-button-text !default;
+/// The border color of flat picker components.
+/// @group picker
 $kendo-picker-flat-border: $kendo-button-border !default;
 
+/// The background color of flat hovered picker components.
+/// @group picker
 $kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .04 ) !default;
+/// The text color of flat hovered picker components.
+/// @group picker
 $kendo-picker-flat-hover-text: null !default;
+/// The border color of flat hovered picker components.
+/// @group picker
 $kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
 
+/// The background color of flat focused picker components.
+/// @group picker
 $kendo-picker-flat-focus-bg: null !default;
+/// The text color of flat focused picker components.
+/// @group picker
 $kendo-picker-flat-focus-text: null !default;
+/// The border color of flat focused picker components.
+/// @group picker
 $kendo-picker-flat-focus-border: null !default;
+/// The shadow of flat focused picker components.
+/// @group picker
 $kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;
 
+/// The background color of flat hovered and focused picker components.
+/// @group picker
 $kendo-picker-flat-hover-focus-bg: null !default;
+/// The text color of flat hovered and focused picker components.
+/// @group picker
 $kendo-picker-flat-hover-focus-text: null !default;
+/// The border color of flat hovered and focused picker components.
+/// @group picker
 $kendo-picker-flat-hover-focus-border: null !default;
-
-$kendo-input-placeholder-text: $kendo-subtle-text !default;
-$kendo-input-placeholder-opacity: 1 !default;
-
-$kendo-input-selected-bg: null !default;
-$kendo-input-selected-text: null !default;
-
-$kendo-input-clear-value-text: null !default;
-$kendo-input-clear-value-opacity: .5 !default;
-$kendo-input-clear-value-hover-text: null !default;
-$kendo-input-clear-value-hover-opacity: 1 !default;
-
-$kendo-input-values-margin-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
-
-
-// Input actions
-$kendo-input-button-width: $kendo-button-inner-calc-size !default;
-$kendo-input-button-border-width: 1px !default;
-$kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
-$kendo-input-spinner-icon-offset: null !default;
-
-
-// Input separator
-$kendo-input-separator-color: $kendo-input-text !default;
-$kendo-input-separator-opacity: .5 !default;
-
-
-// Invalid
-$kendo-input-invalid-border: $kendo-invalid-border !default;
-$kendo-input-invalid-shadow: $kendo-invalid-shadow !default;

package/scss/list/_index.scss

@@ -1,4 +1,15 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "list",
+    dependencies: (
+        "checkbox",
+        "icon",
+    )
+);
 
 
 // Dependencies

package/scss/list/_layout.scss

@@ -42,7 +42,8 @@
     // List header
     // .k-list-header,
     .k-list-group-sticky-header {
-        padding: $kendo-list-header-padding-y $kendo-list-header-padding-x;
+        padding-block: $kendo-list-header-padding-y;
+        padding-inline: $kendo-list-header-padding-x;
         border-width: 0;
         border-width: $kendo-list-header-border-width; // sass-lint:disable-line no-duplicate-properties
         border-style: solid;
@@ -83,7 +84,8 @@
 
     // List item
     .k-list-item {
-        padding: $kendo-list-item-padding-y $kendo-list-item-padding-x;
+        padding-block: $kendo-list-item-padding-y;
+        padding-inline: $kendo-list-item-padding-x;
         border: 0;
         font-size: $kendo-list-item-font-size;
         line-height: $kendo-list-item-line-height;
@@ -118,13 +120,14 @@
         }
     }
     .k-list-optionlabel {
-        @extend .k-list-item;
+        @extend .k-list-item !optional;
     }
 
 
     // List group item
     .k-list-group-item {
-        padding: $kendo-list-group-item-padding-y $kendo-list-group-item-padding-x;
+        padding-block: $kendo-list-group-item-padding-y;
+        padding-inline: $kendo-list-group-item-padding-x;
         border-width: 0;
         border-width: $kendo-list-group-item-border-width; // sass-lint:disable-line no-duplicate-properties
         border-style: solid;
@@ -143,7 +146,8 @@
 
     // List item group label
     .k-list-item-group-label {
-        padding: 0 .5em;
+        padding-block: 0;
+        padding-inline: .5em;
         font-size: .75em;
         position: absolute;
         top: 0;
@@ -210,19 +214,22 @@
 
             // .k-list-header,
             .k-list-group-sticky-header {
-                padding: $_header-padding-y $_header-padding-x;
+                padding-block: $_header-padding-y;
+                padding-inline: $_header-padding-x;
                 font-size: $_header-font-size;
                 line-height: $_header-line-height;
             }
 
             .k-list-item {
-                padding: $_item-padding-y $_item-padding-x;
+                padding-block: $_item-padding-y;
+                padding-inline: $_item-padding-x;
                 font-size: $_item-font-size;
                 line-height: $_item-line-height;
             }
 
             .k-list-group-item {
-                padding: $_group-item-padding-y $_group-item-padding-x;
+                padding-block: $_group-item-padding-y;
+                padding-inline: $_group-item-padding-x;
                 font-size: $_group-item-font-size;
                 line-height: $_group-item-line-height;
             }

package/scss/list/_variables.scss

@@ -55,7 +55,7 @@ $kendo-list-header-font-weight: null !default;
 $kendo-list-item-padding-x: null !default;
 $kendo-list-sm-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-list-md-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-list-lg-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of list items, when no size is set.
 /// @group list