@progress/kendo-theme-material 5.2.1-dev.4 → 5.3.0

package/dist/all.css

@@ -1416,6 +1416,22 @@ kendo-sortable {
     background-color: white;
 }
 
+.k-aspect-ratio-auto {
+    aspect-ratio: auto;
+}
+
+.\!k-aspect-ratio-auto {
+    aspect-ratio: auto !important;
+}
+
+.k-aspect-ratio-1 {
+    aspect-ratio: 1;
+}
+
+.\!k-aspect-ratio-1 {
+    aspect-ratio: 1 !important;
+}
+
 .k-border {
     border-width: 1px !important;
 }
@@ -6095,6 +6111,10 @@ kendo-sortable {
 }
 
 .k-text-nowrap {
+    white-space: nowrap;
+}
+
+.\!k-text-nowrap {
     white-space: nowrap !important;
 }
 
@@ -6104,51 +6124,147 @@ kendo-sortable {
     text-overflow: ellipsis;
 }
 
+.k-white-space-normal {
+    white-space: normal;
+}
+
+.\!k-white-space-normal {
+    white-space: normal !important;
+}
+
+.k-white-space-nowrap {
+    white-space: nowrap;
+}
+
+.\!k-white-space-nowrap {
+    white-space: nowrap !important;
+}
+
+.k-white-space-pre {
+    white-space: pre;
+}
+
+.\!k-white-space-pre {
+    white-space: pre !important;
+}
+
+.k-white-space-pre-wrap {
+    white-space: pre-wrap;
+}
+
+.\!k-white-space-pre-wrap {
+    white-space: pre-wrap !important;
+}
+
+.k-white-space-pre-line {
+    white-space: pre-line;
+}
+
+.\!k-white-space-pre-line {
+    white-space: pre-line !important;
+}
+
+.k-white-space-break-spaces {
+    white-space: break-spaces;
+}
+
+.\!k-white-space-break-spaces {
+    white-space: break-spaces !important;
+}
+
 .k-text-left {
+    text-align: left;
+}
+
+.\!k-text-left {
     text-align: left !important;
 }
 
 .k-text-right {
+    text-align: right;
+}
+
+.\!k-text-right {
     text-align: right !important;
 }
 
 .k-text-center {
+    text-align: center;
+}
+
+.\!k-text-center {
     text-align: center !important;
 }
 
 .k-text-justify {
+    text-align: justify;
+}
+
+.\!k-text-justify {
     text-align: justify !important;
 }
 
 .k-text-lowercase {
+    text-transform: lowercase;
+}
+
+.\!k-text-lowercase {
     text-transform: lowercase !important;
 }
 
 .k-text-uppercase {
+    text-transform: uppercase;
+}
+
+.\!k-text-uppercase {
     text-transform: uppercase !important;
 }
 
 .k-text-capitalize {
+    text-transform: capitalize;
+}
+
+.\!k-text-capitalize {
     text-transform: capitalize !important;
 }
 
 .k-fs-xs {
+    font-size: 10px;
+}
+
+.\!k-fs-xs {
     font-size: 10px !important;
 }
 
 .k-fs-sm {
+    font-size: 12px;
+}
+
+.\!k-fs-sm {
     font-size: 12px !important;
 }
 
 .k-fs-md {
+    font-size: 14px;
+}
+
+.\!k-fs-md {
     font-size: 14px !important;
 }
 
 .k-fs-lg {
+    font-size: 16px;
+}
+
+.\!k-fs-lg {
     font-size: 16px !important;
 }
 
 .k-fs-xl {
+    font-size: 20px;
+}
+
+.\!k-fs-xl {
     font-size: 20px !important;
 }
 
@@ -12062,7 +12178,6 @@ kendo-badge-container {
 }
 
 .k-icon-button {
-    aspect-ratio: 1;
     gap: 0;
 }
 
@@ -14434,6 +14549,7 @@ textarea.k-input-inner {
     text-overflow: ellipsis;
     position: absolute;
     top: 29px;
+    left: 17px;
     overflow: hidden;
     cursor: text;
     transform-origin: left center;
@@ -14445,20 +14561,24 @@ textarea.k-input-inner {
     width: auto;
 }
 
-.k-floating-label-container.k-state-empty > .k-label {
+.k-floating-label-container.k-state-empty > .k-label, .k-floating-label-container.k-empty > .k-label {
     top: 29px;
+    left: 17px;
     transform: scale(1);
     pointer-events: none;
 }
 
 .k-floating-label-container > .k-label,
-.k-floating-label-container.k-state-focused > .k-label {
+.k-floating-label-container.k-state-focused > .k-label,
+.k-floating-label-container.k-focus > .k-label {
     top: 0px;
+    left: 0px;
     transform: scale(0.75);
 }
 
 .k-floating-label-container:focus-within > .k-label {
     top: 0px;
+    left: 0px;
     transform: scale(0.75);
 }
 
@@ -14473,24 +14593,32 @@ textarea.k-input-inner {
 [dir="rtl"] .k-floating-label-container > .k-label,
 .k-rtl .k-floating-label-container > .k-label, .k-floating-label-container[dir="rtl"] > .k-label {
     transform-origin: right center;
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), right 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-[dir="rtl"] .k-floating-label-container.k-state-empty > .k-label,
-.k-rtl .k-floating-label-container.k-state-empty > .k-label, .k-floating-label-container[dir="rtl"].k-state-empty > .k-label {
+[dir="rtl"] .k-floating-label-container.k-state-empty > .k-label, [dir="rtl"] .k-floating-label-container.k-empty > .k-label,
+.k-rtl .k-floating-label-container.k-state-empty > .k-label,
+.k-rtl .k-floating-label-container.k-empty > .k-label, .k-floating-label-container[dir="rtl"].k-state-empty > .k-label, .k-floating-label-container[dir="rtl"].k-empty > .k-label {
     left: auto;
+    right: 17px;
 }
 
 [dir="rtl"] .k-floating-label-container > .k-label,
 [dir="rtl"] .k-floating-label-container.k-state-focused > .k-label,
+[dir="rtl"] .k-floating-label-container.k-focus > .k-label,
 .k-rtl .k-floating-label-container > .k-label,
-.k-rtl .k-floating-label-container.k-state-focused > .k-label, .k-floating-label-container[dir="rtl"] > .k-label,
-.k-floating-label-container[dir="rtl"].k-state-focused > .k-label {
+.k-rtl .k-floating-label-container.k-state-focused > .k-label,
+.k-rtl .k-floating-label-container.k-focus > .k-label, .k-floating-label-container[dir="rtl"] > .k-label,
+.k-floating-label-container[dir="rtl"].k-state-focused > .k-label,
+.k-floating-label-container[dir="rtl"].k-focus > .k-label {
     left: auto;
+    right: 0px;
 }
 
-[dir="rtl"] .k-floating-label-container:focus-within,
-.k-rtl .k-floating-label-container:focus-within, .k-floating-label-container[dir="rtl"]:focus-within {
+[dir="rtl"] .k-floating-label-container:focus-within > .k-label,
+.k-rtl .k-floating-label-container:focus-within > .k-label, .k-floating-label-container[dir="rtl"]:focus-within > .k-label {
     left: auto;
+    right: 0px;
 }
 
 .k-floating-label-container > .k-label {
@@ -19847,7 +19975,7 @@ kendo-label > .k-label {
     box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
 }
 
-.k-colorpalette-tile.k-state-selected, .k-colorpalette-tile.k-state-selected:hover {
+.k-colorpalette-tile.k-state-selected, .k-colorpalette-tile.k-state-selected:hover, .k-colorpalette-tile.k-selected, .k-colorpalette-tile.k-selected:hover {
     box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white;
 }
 
@@ -20077,7 +20205,7 @@ kendo-label > .k-label {
 }
 
 .k-colorgradient-input-label {
-    color: rgba(0, 0, 0, 0.38);
+    color: rgba(0, 0, 0, 0.54);
 }
 
 .k-rtl .k-colorgradient .k-hue-slider.k-slider-horizontal .k-slider-track,
@@ -20958,7 +21086,7 @@ kendo-label > .k-label {
 }
 
 .k-dropzone-inner .k-dropzone-note {
-    color: rgba(97, 97, 97, 0.9116);
+    color: rgba(0, 0, 0, 0.54);
 }
 
 .k-external-dropzone-hover .k-icon,
@@ -22278,7 +22406,6 @@ kendo-label > .k-label {
 
 .k-actionsheet-item-description {
     font-size: 0.875em;
-    opacity: 0.75;
 }
 
 .k-actionsheet > .k-hr {
@@ -22341,6 +22468,10 @@ kendo-label > .k-label {
     box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
 }
 
+.k-actionsheet-item-description {
+    color: rgba(0, 0, 0, 0.54);
+}
+
 .k-actionsheet-action:hover, .k-actionsheet-action.k-state-hover {
     background-color: rgba(0, 0, 0, 0.04);
 }
@@ -24135,6 +24266,7 @@ kendo-card-footer {
     font-family: Roboto, "Helvetica Neue", sans-serif;
     font-size: 14px;
     line-height: 2;
+    white-space: nowrap;
     display: flex;
     align-items: center;
     position: relative;
@@ -25391,7 +25523,7 @@ kendo-card-footer {
 }
 
 .k-expander-sub-title {
-    opacity: 0.62;
+    color: rgba(0, 0, 0, 0.54);
 }
 
 .k-panelbar {
@@ -27047,7 +27179,7 @@ kendo-card-footer {
     padding: 0;
     width: auto;
     height: auto;
-    opacity: .5;
+    opacity: 0.5;
 }
 
 .k-group-indicator .k-button-flat::before, .k-group-indicator .k-button-flat::after {
@@ -27468,8 +27600,7 @@ div.k-grid-footer {
 }
 
 .k-grid-content,
-.k-grid-content-locked,
-.k-pager-wrap {
+.k-grid-content-locked {
     white-space: normal;
 }
 
@@ -31522,7 +31653,7 @@ thead.k-grid-header > tr:not(:only-child) > th {
 }
 
 .k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-state-hover {
-    color: #37458e;
+    color: #303f9f;
 }
 
 .k-taskboard-card:focus, .k-taskboard-card.k-state-focus {
@@ -32627,8 +32758,7 @@ td.k-editor-content {
 
 .k-gantt .k-treelist-scrollable .k-task-summary {
     height: 15px;
-    -webkit-clip-path: polygon(-20px 0, calc(100% + 20px) 0, calc(100% + 20px) 100%, 100% 100%, calc(100% - 8px) calc(100% - 5px), 8px calc(100% - 5px), 0 100%, -20px 100%);
-            clip-path: polygon(-20px 0, calc(100% + 20px) 0, calc(100% + 20px) 100%, 100% 100%, calc(100% - 8px) calc(100% - 5px), 8px calc(100% - 5px), 0 100%, -20px 100%);
+    clip-path: polygon(-20px 0, calc(100% + 20px) 0, calc(100% + 20px) 100%, 100% 100%, calc(100% - 8px) calc(100% - 5px), 8px calc(100% - 5px), 0 100%, -20px 100%);
 }
 
 .k-gantt .k-treelist-scrollable .k-task-summary-complete {
@@ -34781,6 +34911,10 @@ kendo-scheduler .k-event .k-event-actions,
     color: black;
 }
 
+.k-event-ongoing {
+    box-shadow: inset 0px 0px 0px 1px #ff0000;
+}
+
 .k-scheduler-marquee::before,
 .k-scheduler-marquee::after {
     border-color: #3f51b5;
@@ -34993,6 +35127,7 @@ kendo-scheduler .k-event .k-event-actions,
     border-style: solid;
     line-height: 1.25;
     word-wrap: break-word;
+    white-space: pre-wrap;
 }
 
 .k-chat .k-bubble a {

package/dist/all.scss

@@ -4152,6 +4152,39 @@ $display4-letter-spacing: null !default;
 
 
 // Component
+// #region @import "_aspect-ratio.scss"; -> packages/material/scss/utils/_aspect-ratio.scss
+// #region @import "~@progress/kendo-theme-default/scss/utils/_aspect-ratio.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/utils/_aspect-ratio.scss
+@include exports( "utils/aspect-ratio" ) {
+
+    // Aspect-ratio documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.
+
+    // @name k-aspect-ratio-auto
+    // @description This is equivalent to `aspect-ratio: auto;`. Replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.
+    // @group aspect-ratio
+
+    // @name k-aspect-ratio-1
+    // @description This is equivalent to `aspect-ratio: 1;`. The box's preferred aspect ratio is the specified ratio of 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
+    // @group aspect-ratio
+
+    $utils-aspect-ratio: (
+        auto,
+        1
+    ) !default;
+
+    @if $utils-aspect-ratio {
+        @each $aspect-ratio in $utils-aspect-ratio {
+            .k-aspect-ratio-#{$aspect-ratio} { aspect-ratio: $aspect-ratio; }
+
+            // sass-lint:disable-block no-important
+            .\!k-aspect-ratio-#{$aspect-ratio} { aspect-ratio: $aspect-ratio !important; }
+        }
+    }
+
+}
+
+// #endregion
+
+// #endregion
 // #region @import "_border.scss"; -> packages/material/scss/utils/_border.scss
 $utils-border-radius: (
     default: $kendo-border-radius-md,
@@ -5228,6 +5261,7 @@ $utils-border-radius: (
 @include exports( "utils/text" ) {
 
     // stylelint-disable block-opening-brace-space-before
+    // sass-lint:disable class-name-format
 
     // White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.
     // Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
@@ -5235,6 +5269,7 @@ $utils-border-radius: (
 
     $text-align: ( left, right, center, justify ) !default;
     $text-transform: ( lowercase, uppercase, capitalize ) !default;
+    $white-space: ( normal, nowrap, pre, pre-wrap, pre-line, break-spaces ) !default;
 
     $kendo-font-sizes: (
         xs: $font-size-xs,
@@ -5249,12 +5284,42 @@ $utils-border-radius: (
     /// @name k-text-nowrap
     /// @description This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
     /// @group text
-    .k-text-nowrap                  { white-space: nowrap !important; } // sass-lint:disable-line no-important
+    .k-text-nowrap                  { white-space: nowrap; }
+    .\!k-text-nowrap                { white-space: nowrap !important; } // sass-lint:disable-line no-important
     /// @name k-text-ellipsis
     /// @description This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
     /// @group text
     .k-text-ellipsis                { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line
 
+    /// @name k-white-space-normal
+    /// @description This is equivalent to `white-space: normal;`. Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
+    /// @group text
+
+    /// @name k-white-space-nowrap
+    /// @description This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
+    /// @group text
+
+    /// @name k-white-space-pre
+    /// @description This is equivalent to `white-space: pre;`. Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
+    /// @group text
+
+    /// @name k-white-space-pre-wrap
+    /// @description This is equivalent to `white-space: pre-wrap;`. Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
+    /// @group text
+
+    /// @name k-white-space-pre-line
+    /// @description This is equivalent to `white-space: pre-line;`. Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
+    /// @group text
+
+    /// @name k-white-space-break-spaces
+    /// @description This is equivalent to `white-space: break-spaces;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
+    /// @group text
+
+    @each $wrap in $white-space {
+        .k-white-space-#{$wrap}    { white-space: $wrap; }
+        .\!k-white-space-#{$wrap}  { white-space: $wrap !important; } // sass-lint:disable-line no-important
+    }
+
 
     // Align
 
@@ -5275,7 +5340,8 @@ $utils-border-radius: (
     /// @group text
 
     @each $align in $text-align {
-        .k-text-#{$align}           { text-align: $align !important; } // sass-lint:disable-line no-important
+        .k-text-#{$align}           { text-align: $align; }
+        .\!k-text-#{$align}         { text-align: $align !important; } // sass-lint:disable-line no-important
     }
 
 
@@ -5294,12 +5360,14 @@ $utils-border-radius: (
     /// @group text
 
     @each $transform in $text-transform {
-        .k-text-#{$transform}       { text-transform: $transform !important; } // sass-lint:disable-line no-important
+        .k-text-#{$transform}       { text-transform: $transform; }
+        .\!k-text-#{$transform}     { text-transform: $transform !important; } // sass-lint:disable-line no-important
     }
 
     // Font Size
     @each $name, $size in $kendo-font-sizes {
-        .k-fs-#{$name}       { font-size: $size !important; } // sass-lint:disable-line no-important
+        .k-fs-#{$name}              { font-size: $size; }
+        .\!k-fs-#{$name}            { font-size: $size !important; } // sass-lint:disable-line no-important
     }
 
     // Named font-weight
@@ -9074,7 +9142,7 @@ $kendo-button-disabled-shadow: none !default;
 
 // Solid button
 $kendo-solid-button-gradient: null !default;
-$kendo-solid-button-shade-function: "try-shade";
+$kendo-solid-button-shade-function: "try-shade" !default;
 $kendo-solid-button-shade-text-amount: null !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
 $kendo-solid-button-shade-border-amount: 0 !default;
@@ -9177,7 +9245,6 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
 
     // Icon Button
     .k-icon-button {
-        aspect-ratio: 1;
         gap: 0;
 
         .k-icon {
@@ -10865,11 +10932,11 @@ $floating-label-scale: 1 !default;
 $floating-label-font-size: $kendo-input-font-size !default;
 $floating-label-line-height: $kendo-input-line-height !default;
 $floating-label-height: calc( #{$floating-label-line-height} * #{$floating-label-font-size} ) !default;
-$floating-label-offset-x: null !default;
+$floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;
 $floating-label-offset-y: calc( #{$floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;
 
 $floating-label-focus-scale: .75 !default;
-$floating-label-focus-offset-x: null !default;
+$floating-label-focus-offset-x: 0px !default;
 $floating-label-focus-offset-y: 0px !default;
 
 $floating-label-transition: .15s cubic-bezier( .4, 0, .2, 1 ) !default;
@@ -10922,7 +10989,8 @@ $floating-label-focus-text: $primary !default;
             width: auto;
         }
 
-        &.k-state-empty {
+        &.k-state-empty,
+        &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
                 left: $floating-label-offset-x;
@@ -10933,7 +11001,8 @@ $floating-label-focus-text: $primary !default;
 
         > .k-label,
         // &:focus-within > .k-label,
-        &.k-state-focused > .k-label {
+        &.k-state-focused > .k-label,
+        &.k-focus > .k-label {
             top: $floating-label-focus-offset-y;
             left: $floating-label-focus-offset-x;
             transform: scale( $floating-label-focus-scale );
@@ -10954,9 +11023,11 @@ $floating-label-focus-text: $primary !default;
 
             > .k-label {
                 transform-origin: right center;
+                transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
             }
 
-            &.k-state-empty {
+            &.k-state-empty,
+            &.k-empty {
                 > .k-label {
                     left: auto;
                     right: $floating-label-offset-x;
@@ -10965,11 +11036,12 @@ $floating-label-focus-text: $primary !default;
 
             > .k-label,
             // &:focus-within > .k-label,
-            &.k-state-focused > .k-label {
+            &.k-state-focused > .k-label,
+            &.k-focus > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
             }
-            &:focus-within {
+            &:focus-within > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
             }
@@ -19333,7 +19405,9 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
         }
 
         &.k-state-selected,
-        &.k-state-selected:hover {
+        &.k-state-selected:hover,
+        &.k-selected,
+        &.k-selected:hover {
             @include box-shadow( $colorpalette-tile-selected-shadow );
         }
 
@@ -19484,7 +19558,7 @@ $colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width /
 $colorgradient-input-width: 50px !default;
 $colorgradient-input-gap: map-get( $spacing, 2 ) !default;
 $colorgradient-input-label-gap: map-get( $spacing, 1 ) !default;
-$colorgradient-input-label-text: $disabled-text !default;
+$colorgradient-input-label-text: $subtle-text !default;
 
 $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
 $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
@@ -22090,7 +22164,7 @@ $dropzone-hint-text: null !default;
 
 $dropzone-note-font-size: $font-size-sm !default;
 $dropzone-note-spacing: null !default;
-$dropzone-note-text: try-tint( $dropzone-text, 4 ) !default;
+$dropzone-note-text: $subtle-text !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/dropzone/_layout.scss
@@ -23567,8 +23641,9 @@ $actionsheet-item-icon-size: null !default;
 
 $actionsheet-item-title-font-weight: null !default;
 $actionsheet-item-title-text-transform: null !default;
+
 $actionsheet-item-description-font-size: .875em !default;
-$actionsheet-item-description-opacity: .75 !default;
+$actionsheet-item-description-text: $subtle-text !default;
 
 $actionsheet-item-hover-bg: rgba( black, .04 ) !default;
 $actionsheet-item-hover-text: null !default;
@@ -23687,7 +23762,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
     }
     .k-actionsheet-item-description {
         font-size: $actionsheet-item-description-font-size;
-        opacity: $actionsheet-item-description-opacity;
     }
 
 
@@ -23782,6 +23856,12 @@ $actionsheet-item-disabled-opacity: .42 !default;
     .k-actionsheet-item {}
 
 
+    // Actionsheet item description
+    .k-actionsheet-item-description {
+        @include fill( $color: $actionsheet-item-description-text );
+    }
+
+
     // Actionsheet action
     .k-actionsheet-action {
 
@@ -26385,6 +26465,7 @@ $pager-dropdown-width: 5em !default;
         font-family: $pager-font-family;
         font-size: $pager-font-size;
         line-height: $pager-line-height;
+        white-space: nowrap;
         display: flex;
         align-items: center;
         position: relative;
@@ -28329,7 +28410,7 @@ $expander-header-focused-shadow: none !default;
 
 $expander-title-text: $secondary !default;
 
-$expander-header-sub-title-opacity: .62 !default;
+$expander-header-sub-title-text: $subtle-text !default;
 
 $expander-content-padding-x: $padding-x * 1.5 !default;
 $expander-content-padding-y: $padding-y * 6 !default;
@@ -28456,7 +28537,7 @@ $expander-content-padding-y: $padding-y * 6 !default;
     }
 
     .k-expander-sub-title {
-        opacity: $expander-header-sub-title-opacity;
+        color: $expander-header-sub-title-text;
     }
 }
 
@@ -30188,6 +30269,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
     $grid-group-indicator-border-radius: $kendo-border-radius-md !default;
     $grid-group-indicator-gap: $table-cell-padding-y !default;
+    $grid-group-indicator-button-opacity: $kendo-input-clear-value-opacity !default;
+    $grid-group-indicator-button-hover-opacity: $kendo-input-clear-value-hover-opacity !default;
 
     $grid-grouping-row-border-top: 1px !default;
     $grid-group-footer-border-y: 1px !default;
@@ -30656,7 +30739,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             padding: 0;
             width: auto;
             height: auto;
-            opacity: .5;
+            opacity: $grid-group-indicator-button-opacity;
 
             &::before,
             &::after {
@@ -30664,7 +30747,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
 
             &:hover {
-                opacity: 1;
+                opacity: $grid-group-indicator-button-hover-opacity;
             }
         }
     }
@@ -31088,8 +31171,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
     }
 
     .k-grid-content,
-    .k-grid-content-locked,
-    .k-pager-wrap {
+    .k-grid-content-locked {
         white-space: normal;
     }
 
@@ -36246,7 +36328,7 @@ $taskboard-card-selected-shadow: none !default;
 
 $taskboard-card-header-text: $primary !default;
 $taskboard-card-header-focus-text: $primary-darker !default;
-$taskboard-card-header-hover-text: try-darken( $primary-lighter, 25% ) !default;
+$taskboard-card-header-hover-text: $primary-darker !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;
@@ -39250,6 +39332,8 @@ $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: $box-shadow-depth-3 !default;
 
+$scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
+
 $scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
 $scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
 $scheduler-cell-height: $line-height * 1rem !default;
@@ -40703,6 +40787,9 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
     .k-event-inverse {
         color: contrast-wcag( $scheduler-event-text );
     }
+    .k-event-ongoing {
+        @include box-shadow( $scheduler-event-ongoing-shadow );
+    }
 
 
     // Drag hint
@@ -41124,6 +41211,7 @@ $chat-quick-reply-hover-border: $primary !default;
             border-style: solid;
             line-height: $chat-bubble-line-height;
             word-wrap: break-word;
+            white-space: pre-wrap;
 
             a {
                 color: inherit;

package/lib/swatches/material-aqua-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Aqua Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-arctic.json

@@ -3,7 +3,7 @@
     "name": "Material Arctic",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-burnt-teal.json

@@ -3,7 +3,7 @@
     "name": "Material Burnt Teal",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Material Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#3f51b5",
         "#2196f3",

package/lib/swatches/material-eggplant.json

@@ -3,7 +3,7 @@
     "name": "Material Eggplant",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-lime-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Lime Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-lime.json

@@ -3,7 +3,7 @@
     "name": "Material Lime",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-main.json

@@ -3,7 +3,7 @@
     "name": "Material Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-nova.json

@@ -3,7 +3,7 @@
     "name": "Material Nova",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-pacific-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-pacific.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Light",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "5.2.1-dev.4",
+  "version": "5.3.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,7 +50,7 @@
     "postpublish": "echo 'no postpublish for material theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.2.1-dev.4"
+    "@progress/kendo-theme-default": "^5.3.0"
   },
-  "gitHead": "9045b47fb4e1bcf58c8d4c400e28293bd0563b20"
+  "gitHead": "867f14d5246e147b66555ac808c5790ba8881d12"
 }

package/scss/action-sheet/_variables.scss

@@ -44,8 +44,9 @@ $actionsheet-item-icon-size: null !default;
 
 $actionsheet-item-title-font-weight: null !default;
 $actionsheet-item-title-text-transform: null !default;
+
 $actionsheet-item-description-font-size: .875em !default;
-$actionsheet-item-description-opacity: .75 !default;
+$actionsheet-item-description-text: $subtle-text !default;
 
 $actionsheet-item-hover-bg: rgba( black, .04 ) !default;
 $actionsheet-item-hover-text: null !default;

package/scss/button/_variables.scss

@@ -167,7 +167,7 @@ $kendo-button-disabled-shadow: none !default;
 
 // Solid button
 $kendo-solid-button-gradient: null !default;
-$kendo-solid-button-shade-function: "try-shade";
+$kendo-solid-button-shade-function: "try-shade" !default;
 $kendo-solid-button-shade-text-amount: null !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
 $kendo-solid-button-shade-border-amount: 0 !default;

package/scss/colorgradient/_variables.scss

@@ -45,7 +45,7 @@ $colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width /
 $colorgradient-input-width: 50px !default;
 $colorgradient-input-gap: map-get( $spacing, 2 ) !default;
 $colorgradient-input-label-gap: map-get( $spacing, 1 ) !default;
-$colorgradient-input-label-text: $disabled-text !default;
+$colorgradient-input-label-text: $subtle-text !default;
 
 $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
 $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;

package/scss/dropzone/_variables.scss

@@ -23,4 +23,4 @@ $dropzone-hint-text: null !default;
 
 $dropzone-note-font-size: $font-size-sm !default;
 $dropzone-note-spacing: null !default;
-$dropzone-note-text: try-tint( $dropzone-text, 4 ) !default;
+$dropzone-note-text: $subtle-text !default;

package/scss/expansion-panel/_variables.scss

@@ -27,7 +27,7 @@ $expander-header-focused-shadow: none !default;
 
 $expander-title-text: $secondary !default;
 
-$expander-header-sub-title-opacity: .62 !default;
+$expander-header-sub-title-text: $subtle-text !default;
 
 $expander-content-padding-x: $padding-x * 1.5 !default;
 $expander-content-padding-y: $padding-y * 6 !default;

package/scss/floating-label/_variables.scss

@@ -3,11 +3,11 @@ $floating-label-scale: 1 !default;
 $floating-label-font-size: $kendo-input-font-size !default;
 $floating-label-line-height: $kendo-input-line-height !default;
 $floating-label-height: calc( #{$floating-label-line-height} * #{$floating-label-font-size} ) !default;
-$floating-label-offset-x: null !default;
+$floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;
 $floating-label-offset-y: calc( #{$floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;
 
 $floating-label-focus-scale: .75 !default;
-$floating-label-focus-offset-x: null !default;
+$floating-label-focus-offset-x: 0px !default;
 $floating-label-focus-offset-y: 0px !default;
 
 $floating-label-transition: .15s cubic-bezier( .4, 0, .2, 1 ) !default;

package/scss/scheduler/_variables.scss

@@ -40,6 +40,8 @@ $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: $box-shadow-depth-3 !default;
 
+$scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
+
 $scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
 $scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
 $scheduler-cell-height: $line-height * 1rem !default;

package/scss/taskboard/_variables.scss

@@ -86,7 +86,7 @@ $taskboard-card-selected-shadow: none !default;
 
 $taskboard-card-header-text: $primary !default;
 $taskboard-card-header-focus-text: $primary-darker !default;
-$taskboard-card-header-hover-text: try-darken( $primary-lighter, 25% ) !default;
+$taskboard-card-header-hover-text: $primary-darker !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;

package/scss/utils/_aspect-ratio.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/utils/_aspect-ratio.scss";

package/scss/utils/_index.scss

@@ -6,6 +6,7 @@
 
 
 // Component
+@import "_aspect-ratio.scss";
 @import "_border.scss";
 @import "_display.scss";
 @import "_flex.scss";