@progress/kendo-theme-material 5.1.2-dev.7 → 5.2.1-dev.1

package/dist/all.css

@@ -995,15 +995,17 @@ kendo-sortable {
     text-indent: -4000px;
     text-align: center;
     position: absolute;
+    color: currentColor;
 }
 
 .k-loading-image {
     z-index: 2;
+    color: currentColor;
 }
 
 .k-loading-color {
     background-color: white;
-    opacity: .3;
+    opacity: 0.3;
 }
 
 .k-i-loading {
@@ -12218,6 +12220,18 @@ kendo-badge-container {
     flex: none;
 }
 
+.k-split-button .k-split-button-arrow.k-button-sm {
+    padding: 6px 4px;
+}
+
+.k-split-button .k-split-button-arrow.k-button-md {
+    padding: 8px 4px;
+}
+
+.k-split-button .k-split-button-arrow.k-button-lg {
+    padding: 10px 4px;
+}
+
 .k-split-button .k-split-button-arrow .k-button-icon {
     min-width: 0;
 }
@@ -13711,6 +13725,38 @@ kendo-badge-container {
     margin: 0;
 }
 
+.k-input:disabled, .k-input[disabled], .k-input.k-disabled,
+.k-picker:disabled,
+.k-picker[disabled],
+.k-picker.k-disabled {
+    outline: none;
+    cursor: default;
+    opacity: 0.6;
+    filter: grayscale(0.1);
+    pointer-events: none;
+    box-shadow: none;
+}
+
+.k-input:disabled [disabled],
+.k-input:disabled .k-disabled,
+.k-input:disabled .k-state-disabled, .k-input[disabled] [disabled],
+.k-input[disabled] .k-disabled,
+.k-input[disabled] .k-state-disabled, .k-input.k-disabled [disabled],
+.k-input.k-disabled .k-disabled,
+.k-input.k-disabled .k-state-disabled,
+.k-picker:disabled [disabled],
+.k-picker:disabled .k-disabled,
+.k-picker:disabled .k-state-disabled,
+.k-picker[disabled] [disabled],
+.k-picker[disabled] .k-disabled,
+.k-picker[disabled] .k-state-disabled,
+.k-picker.k-disabled [disabled],
+.k-picker.k-disabled .k-disabled,
+.k-picker.k-disabled .k-state-disabled {
+    opacity: 1;
+    filter: grayscale(0);
+}
+
 input.k-input {
     padding: 8px 16px;
 }
@@ -13737,7 +13783,7 @@ select.k-picker {
     position: relative;
     z-index: 1;
     overflow: hidden;
-    text-overflow: clip;
+    text-overflow: ellipsis;
     -webkit-appearance: none;
 }
 
@@ -13786,7 +13832,7 @@ textarea.k-input-inner {
 .k-input-value-text {
     flex: 1;
     overflow: hidden;
-    text-overflow: clip;
+    text-overflow: ellipsis;
 }
 
 .k-input-value-text::before {
@@ -15161,7 +15207,7 @@ textarea.k-input-inner {
 .k-chip-solid-base {
     border-color: rgba(192, 192, 192, 0.961);
     color: rgba(0, 0, 0, 0.87);
-    background-color: rgba(239, 239, 239, 0.9896);
+    background-color: rgba(235, 235, 235, 0.987);
 }
 
 .k-chip-solid-base:focus, .k-chip-solid-base.k-focus {
@@ -15352,28 +15398,83 @@ textarea.k-input-inner {
     border-color: transparent;
 }
 
+.k-chip-solid-base:hover, .k-chip-solid-base.k-hover {
+    color: rgba(0, 0, 0, 0.87);
+    background-color: rgba(0, 0, 0, 0.16);
+}
+
 .k-chip-solid-base:focus, .k-chip-solid-base.k-focus {
     box-shadow: none;
+    color: rgba(0, 0, 0, 0.87);
     background-color: rgba(0, 0, 0, 0.24);
 }
 
+.k-chip-solid-base.k-selected {
+    color: rgba(0, 0, 0, 0.87);
+    background-color: rgba(0, 0, 0, 0.24);
+}
+
+.k-chip-solid-error:hover, .k-chip-solid-error.k-hover {
+    color: #f31700;
+    background-color: rgba(243, 23, 0, 0.16);
+}
+
 .k-chip-solid-error:focus, .k-chip-solid-error.k-focus {
     box-shadow: none;
+    color: #f31700;
     background-color: rgba(243, 23, 0, 0.24);
 }
 
+.k-chip-solid-error.k-selected {
+    color: #f31700;
+    background-color: rgba(243, 23, 0, 0.24);
+}
+
+.k-chip-solid-info:hover, .k-chip-solid-info.k-hover {
+    color: #0058e9;
+    background-color: rgba(0, 88, 233, 0.16);
+}
+
 .k-chip-solid-info:focus, .k-chip-solid-info.k-focus {
     box-shadow: none;
+    color: #0058e9;
+    background-color: rgba(0, 88, 233, 0.24);
+}
+
+.k-chip-solid-info.k-selected {
+    color: #0058e9;
     background-color: rgba(0, 88, 233, 0.24);
 }
 
+.k-chip-solid-warning:hover, .k-chip-solid-warning.k-hover {
+    color: #ffc000;
+    background-color: rgba(255, 192, 0, 0.16);
+}
+
 .k-chip-solid-warning:focus, .k-chip-solid-warning.k-focus {
     box-shadow: none;
+    color: #ffc000;
     background-color: rgba(255, 192, 0, 0.24);
 }
 
+.k-chip-solid-warning.k-selected {
+    color: #ffc000;
+    background-color: rgba(255, 192, 0, 0.24);
+}
+
+.k-chip-solid-success:hover, .k-chip-solid-success.k-hover {
+    color: #37b400;
+    background-color: rgba(55, 180, 0, 0.16);
+}
+
 .k-chip-solid-success:focus, .k-chip-solid-success.k-focus {
     box-shadow: none;
+    color: #37b400;
+    background-color: rgba(55, 180, 0, 0.24);
+}
+
+.k-chip-solid-success.k-selected {
+    color: #37b400;
     background-color: rgba(55, 180, 0, 0.24);
 }
 
@@ -19843,6 +19944,10 @@ kendo-label > .k-label {
     width: 50px;
 }
 
+.k-colorgradient-inputs .k-input-inner {
+    text-overflow: clip;
+}
+
 .k-colorgradient-color-contrast > div {
     display: flex;
     flex-flow: row nowrap;
@@ -20612,7 +20717,7 @@ kendo-label > .k-label {
 }
 
 .k-popup-dropdowntree .k-check-all {
-    padding: 8px 8px;
+    padding: 8px 8px 0;
 }
 
 .k-popup-dropdowntree .k-treeview {
@@ -24423,6 +24528,11 @@ kendo-card-footer {
     width: 5em;
 }
 
+.k-pager-sizes .k-input-inner,
+.k-pager-sizes .k-input-value-text {
+    text-overflow: clip;
+}
+
 .k-rtl .k-pager-sizes .k-dropdown-list, .k-rtl .k-pager-sizes .k-dropdown,
 .k-rtl .k-pager-sizes .k-dropdownlist,
 .k-rtl .k-pager-sizes > select,
@@ -24626,6 +24736,7 @@ kendo-card-footer {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex: none;
     position: relative;
     z-index: 1;
     overflow: visible;
@@ -24656,7 +24767,7 @@ kendo-card-footer {
 }
 
 .k-stepper .k-step-label {
-    max-width: calc(min(100%, 10em));
+    max-width: clamp(100%, 10em, 100%);
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
@@ -29044,11 +29155,6 @@ thead.k-grid-header > tr:not(:only-child) > th {
     min-width: 2em;
 }
 
-.k-spreadsheet-toolbar .k-input,
-.k-spreadsheet-toolbar .k-picker {
-    width: 5em;
-}
-
 .k-spreadsheet-toolbar .k-color-picker, .k-spreadsheet-toolbar .k-colorpicker {
     width: min-content;
 }
@@ -32504,6 +32610,11 @@ td.k-editor-content {
     overflow-y: auto;
 }
 
+.k-imageeditor-action-pane .k-input-inner,
+.k-imageeditor-action-pane .k-input-value-text {
+    text-overflow: clip;
+}
+
 .k-imageeditor-crop-overlay {
     width: 100%;
     height: 100%;
@@ -33328,7 +33439,7 @@ td.k-editor-content {
 }
 
 .k-gantt-tooltip-validation::before {
-    content: '';
+    content: "";
     width: 4px;
     height: 100%;
     position: absolute;

package/dist/all.scss

@@ -2132,7 +2132,10 @@ $placeholder-bg: rgba(0, 0, 0, .1) !default;
 
 
 // Loading
-
+$loading-bg: $component-bg !default;
+$loading-text: currentColor !default;
+$loading-opacity: .3 !default;
+$zindex-loading: 100 !default;
 
 // Table
 
@@ -3589,7 +3592,7 @@ $display4-letter-spacing: null !default;
     }
 
     .k-loading-mask {
-        z-index: 100;
+        z-index: $zindex-loading;
 
         &.k-opaque {
             .k-loading-color {
@@ -3601,13 +3604,15 @@ $display4-letter-spacing: null !default;
         text-indent: -4000px;
         text-align: center;
         position: absolute;
+        color: $loading-text;
     }
     .k-loading-image {
         z-index: 2;
+        color: $loading-text;
     }
     .k-loading-color {
-        background-color: $component-bg;
-        opacity: .3;
+        background-color: $loading-bg;
+        opacity: $loading-opacity;
     }
 
     // Loading indicator
@@ -3615,7 +3620,7 @@ $display4-letter-spacing: null !default;
         position: relative;
         background-color: transparent;
         box-sizing: border-box;
-        color: currentColor;
+        color: $loading-text;
 
         &::before,
         &::after {
@@ -8952,8 +8957,19 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+/// Horizontal padding of the arrow button.
+/// @group button
 $kendo-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-button-arrow-padding-x-sm: map-get( $spacing, 1 ) !default;
+$kendo-button-arrow-padding-x-md: map-get( $spacing, 1 ) !default;
+$kendo-button-arrow-padding-x-lg: map-get( $spacing, 1 ) !default;
+
+/// Vertical padding of the arrow button.
+/// @group button
 $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
+$kendo-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
+$kendo-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
 
 /// Theme colors map for the button.
 /// @group button
@@ -9332,6 +9348,18 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
             aspect-ratio: auto;
             flex: none;
 
+            &.k-button-sm {
+                padding: $kendo-button-arrow-padding-y-sm $kendo-button-arrow-padding-x-sm;
+            }
+
+            &.k-button-md {
+                padding: $kendo-button-arrow-padding-y-md $kendo-button-arrow-padding-x-md;
+            }
+
+            &.k-button-lg {
+                padding: $kendo-button-arrow-padding-y-lg $kendo-button-arrow-padding-x-lg;
+            }
+
             .k-button-icon {
                 min-width: 0;
             }
@@ -10194,8 +10222,20 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         & > * {
             margin: 0;
         }
-    }
 
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include disabled( $disabled-styling );
+
+            [disabled],
+            .k-disabled,
+            .k-state-disabled {
+                opacity: 1;
+                filter: grayscale(0);
+            }
+        }
+    }
 
     // Input
     .k-input {}
@@ -10227,7 +10267,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         position: relative;
         z-index: 1;
         overflow: hidden;
-        text-overflow: clip;
+        text-overflow: ellipsis;
         -webkit-appearance: none;
 
         // Hide clear icon
@@ -10266,7 +10306,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     .k-input-value-text {
         flex: 1;
         overflow: hidden;
-        text-overflow: clip;
+        text-overflow: ellipsis;
     }
     .k-input-value-text::before {
         content: "\200b";
@@ -12268,7 +12308,7 @@ $kendo-chip-theme-colors: (
 
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: try-tint( $kendo-chip-base-bg, 92% ) !default;
+$kendo-chip-solid-bg: try-tint( $kendo-chip-base-bg, 90% ) !default;
 /// The base text color of solid chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-chip-base-bg !default;
@@ -12643,10 +12683,28 @@ $kendo-chip-list-sizes: (
     }
     @each $name, $color in $kendo-chip-theme-colors {
         .k-chip-solid-#{$name} {
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    $bg: rgba($color, .16 ),
+                    $color: $color
+                );
+            }
+
             &:focus,
             &.k-focus {
                 @include box-shadow( none );
-                @include fill( $bg: rgba( $color, .24 ) );
+                @include fill(
+                    $bg: rgba($color, .24),
+                    $color: $color
+                );
+            }
+
+            &.k-selected {
+                @include fill(
+                    $bg: rgba( $color, .24 ),
+                    $color: $color
+                );
             }
         }
     }
@@ -19548,6 +19606,10 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
         .k-numerictextbox {
             width: $colorgradient-input-width;
         }
+
+        .k-input-inner {
+            text-overflow: clip;
+        }
     }
 
     // Contrast
@@ -21314,7 +21376,7 @@ $dropdowntree-popup-padding-y: map-get( $spacing, 2 ) !default;
         padding: 0;
 
         .k-check-all {
-            padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x;
+            padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x 0;
         }
 
         .k-treeview {
@@ -26750,6 +26812,11 @@ $pager-dropdown-width: 5em !default;
             width: $pager-dropdown-width;
         }
 
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
+
         .k-rtl &,
         [dir="rtl"] & {
             .k-dropdown-list,
@@ -27210,6 +27277,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
             display: flex;
             align-items: center;
             justify-content: center;
+            flex: none;
             position: relative;
             z-index: 1;
             overflow: visible;
@@ -27243,7 +27311,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
 
         // Step label
         .k-step-label {
-            max-width: calc(min(100%, 10em));
+            max-width: clamp(100%, 10em, 100%);
             display: inline-flex;
             flex-wrap: wrap;
             align-items: center;
@@ -33110,10 +33178,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             min-width: $form-line-height * 1em;
         }
 
-        .k-input,
-        .k-picker {
-            width: 5em;
-        }
         .k-color-picker {
             width: min-content;
         }
@@ -37873,6 +37937,11 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
         box-sizing: border-box;
         flex: none;
         overflow-y: auto;
+
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
     }
 
 
@@ -38885,7 +38954,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         display: block;
 
         &::before {
-            content: '';
+            content: "";
             width: 4px;
             height: 100%;
             position: absolute;