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

package/dist/all.css

@@ -1412,6 +1412,22 @@ kendo-sortable {
     background-color: #f0f0f0;
 }
 
+.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;
 }
@@ -6091,6 +6107,10 @@ kendo-sortable {
 }
 
 .k-text-nowrap {
+    white-space: nowrap;
+}
+
+.\!k-text-nowrap {
     white-space: nowrap !important;
 }
 
@@ -6100,51 +6120,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;
 }
 
@@ -12046,7 +12162,6 @@ kendo-badge-container {
 }
 
 .k-icon-button {
-    aspect-ratio: 1;
     gap: 0;
 }
 
@@ -13995,7 +14110,7 @@ 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: 25.0000000004px;
     left: 9px;
     transform: scale(1);
@@ -14003,7 +14118,8 @@ textarea.k-input-inner {
 }
 
 .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: 0;
     left: 0;
     transform: scale(1);
@@ -14026,25 +14142,30 @@ 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.2s ease-out, color 0.2s ease-out, top 0.2s ease-out, right 0.2s ease-out;
 }
 
-[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: 9px;
 }
 
 [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: 0;
 }
 
-[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: 0;
 }
@@ -18902,7 +19023,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;
 }
 
@@ -19131,7 +19252,7 @@ kendo-label > .k-label {
 }
 
 .k-colorgradient-input-label {
-    color: #8d8d8d;
+    color: #646464;
 }
 
 .k-rtl .k-colorgradient .k-hue-slider.k-slider-horizontal .k-slider-track,
@@ -20007,7 +20128,7 @@ kendo-label > .k-label {
 }
 
 .k-dropzone-inner .k-dropzone-note {
-    color: #7d7d7d;
+    color: #646464;
 }
 
 .k-external-dropzone-hover .k-icon,
@@ -21330,7 +21451,6 @@ kendo-label > .k-label {
 
 .k-actionsheet-item-description {
     font-size: 0.875em;
-    opacity: 0.75;
 }
 
 .k-actionsheet > .k-hr {
@@ -21393,6 +21513,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: #646464;
+}
+
 .k-actionsheet-action:hover, .k-actionsheet-action.k-state-hover {
     background-color: #dddddd;
 }
@@ -23153,6 +23277,7 @@ kendo-card-footer {
     font-family: inherit;
     font-size: 14px;
     line-height: 1.4285714286;
+    white-space: nowrap;
     display: flex;
     align-items: center;
     position: relative;
@@ -24323,7 +24448,7 @@ kendo-card-footer {
 }
 
 .k-expander-sub-title {
-    opacity: 0.5;
+    color: #646464;
 }
 
 .k-panelbar {
@@ -25918,7 +26043,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 {
@@ -26338,8 +26463,7 @@ div.k-grid-footer {
 }
 
 .k-grid-content,
-.k-grid-content-locked,
-.k-pager-wrap {
+.k-grid-content-locked {
     white-space: normal;
 }
 
@@ -29965,7 +30089,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-state-hover {
-    color: #f57329;
+    color: #cc4a00;
 }
 
 .k-taskboard-card:focus, .k-taskboard-card.k-state-focus {
@@ -31028,8 +31152,7 @@ kendo-editor.k-readonly .k-editor-content.k-state-focused {
 
 .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 {
@@ -33051,6 +33174,10 @@ kendo-scheduler .k-recurrence-editor {
     color: black;
 }
 
+.k-event-ongoing {
+    box-shadow: inset 0px 0px 0px 1px #ff0000;
+}
+
 .k-scheduler-marquee::before,
 .k-scheduler-marquee::after {
     border-color: #f35800;
@@ -33251,6 +33378,7 @@ kendo-scheduler .k-recurrence-editor {
     border-style: solid;
     line-height: 18px;
     word-wrap: break-word;
+    white-space: pre-wrap;
 }
 
 .k-chat .k-bubble a {

package/dist/all.scss

@@ -3300,6 +3300,39 @@ $display4-letter-spacing: null !default;
 
 
 // Component
+// #region @import "_aspect-ratio.scss"; -> packages/classic/scss/utils/_aspect-ratio.scss
+// #region @import "~@progress/kendo-theme-default/scss/utils/_aspect-ratio.scss"; -> packages/classic/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/classic/scss/utils/_border.scss
 $utils-border-radius: (
     default: $kendo-border-radius-md,
@@ -4376,6 +4409,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.
@@ -4383,6 +4417,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,
@@ -4397,12 +4432,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
 
@@ -4423,7 +4488,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
     }
 
 
@@ -4442,12 +4508,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
@@ -8204,7 +8272,7 @@ $kendo-button-disabled-shadow: null !default;
 
 // Solid button
 $kendo-solid-button-gradient: $base-gradient !default;
-$kendo-solid-button-shade-function: "try-shade";
+$kendo-solid-button-shade-function: "try-shade" !default;
 $kendo-solid-button-shade-text-amount: 0 !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
 $kendo-solid-button-shade-border-amount: 2 !default;
@@ -8307,7 +8375,6 @@ $kendo-button-transition: color .2s ease-in-out !default;
 
     // Icon Button
     .k-icon-button {
-        aspect-ratio: 1;
         gap: 0;
 
         .k-icon {
@@ -9790,7 +9857,8 @@ $floating-label-focus-text: null !default;
             width: auto;
         }
 
-        &.k-state-empty {
+        &.k-state-empty,
+        &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
                 left: $floating-label-offset-x;
@@ -9801,7 +9869,8 @@ $floating-label-focus-text: null !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 );
@@ -9822,9 +9891,11 @@ $floating-label-focus-text: null !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;
@@ -9833,11 +9904,12 @@ $floating-label-focus-text: null !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;
             }
@@ -17586,7 +17658,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 );
         }
 
@@ -17738,7 +17812,7 @@ $colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width /
 $colorgradient-input-width: 46px !default;
 $colorgradient-input-gap: ( $colorgradient-spacer / 1.5 ) !default;
 $colorgradient-input-label-gap: ( $colorgradient-spacer / 3 ) !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: ( $colorgradient-spacer / 1.5 ) !default;
@@ -20231,7 +20305,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, 5 ) !default;
+$dropzone-note-text: $subtle-text !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/classic/scss/dropzone/_layout.scss
@@ -21698,8 +21772,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: $hovered-bg !default;
 $actionsheet-item-hover-text: null !default;
@@ -21813,7 +21888,6 @@ $actionsheet-item-disabled-shadow: null !default;
     }
     .k-actionsheet-item-description {
         font-size: $actionsheet-item-description-font-size;
-        opacity: $actionsheet-item-description-opacity;
     }
 
 
@@ -21908,6 +21982,12 @@ $actionsheet-item-disabled-shadow: null !default;
     .k-actionsheet-item {}
 
 
+    // Actionsheet item description
+    .k-actionsheet-item-description {
+        @include fill( $color: $actionsheet-item-description-text );
+    }
+
+
     // Actionsheet action
     .k-actionsheet-action {
 
@@ -24438,6 +24518,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;
@@ -26300,7 +26381,7 @@ $expander-header-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $expander-title-text: $primary !default;
 
-$expander-header-sub-title-opacity: .5 !default;
+$expander-header-sub-title-text: $subtle-text !default;
 
 $expander-content-padding-x: $padding-x * 2 !default;
 $expander-content-padding-y: $padding-y * 4 !default;
@@ -26427,7 +26508,7 @@ $expander-content-padding-y: $padding-y * 4 !default;
     }
 
     .k-expander-sub-title {
-        opacity: $expander-header-sub-title-opacity;
+        color: $expander-header-sub-title-text;
     }
 }
 
@@ -28147,6 +28228,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
     $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;
@@ -28615,7 +28698,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             padding: 0;
             width: auto;
             height: auto;
-            opacity: .5;
+            opacity: $grid-group-indicator-button-opacity;
 
             &::before,
             &::after {
@@ -28623,7 +28706,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
 
             &:hover {
-                opacity: 1;
+                opacity: $grid-group-indicator-button-hover-opacity;
             }
         }
     }
@@ -29047,8 +29130,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
     }
 
     .k-grid-content,
-    .k-grid-content-locked,
-    .k-pager-wrap {
+    .k-grid-content-locked {
         white-space: normal;
     }
 
@@ -33661,7 +33743,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: $primary-lighter !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;
@@ -36580,6 +36662,8 @@ $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !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-em !default;
@@ -37868,6 +37952,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
@@ -38255,6 +38342,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/classic-green-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Green Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#000000",
         "#131413",

package/lib/swatches/classic-green.json

@@ -3,7 +3,7 @@
     "name": "Classic Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#f3f4f3",

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

@@ -3,7 +3,7 @@
     "name": "Classic Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#000000",
         "#101010",

package/lib/swatches/classic-main.json

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

package/lib/swatches/classic-opal-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#000000",
         "#1e242d",

package/lib/swatches/classic-opal.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#def4fd",

package/lib/swatches/classic-silver-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#000000",
         "#131314",

package/lib/swatches/classic-silver.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.2.1-dev.4",
+    "version": "5.3.0",
     "previewColors": [
         "#ffffff",
         "#f3f3f4",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "5.2.1-dev.4",
+  "version": "5.3.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,7 +49,7 @@
     "postpublish": "echo 'no postpublish for classic 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: $hovered-bg !default;
 $actionsheet-item-hover-text: null !default;

package/scss/button/_variables.scss

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

package/scss/colorgradient/_variables.scss

@@ -46,7 +46,7 @@ $colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width /
 $colorgradient-input-width: 46px !default;
 $colorgradient-input-gap: ( $colorgradient-spacer / 1.5 ) !default;
 $colorgradient-input-label-gap: ( $colorgradient-spacer / 3 ) !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: ( $colorgradient-spacer / 1.5 ) !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, 5 ) !default;
+$dropzone-note-text: $subtle-text !default;

package/scss/expansion-panel/_variables.scss

@@ -27,7 +27,7 @@ $expander-header-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $expander-title-text: $primary !default;
 
-$expander-header-sub-title-opacity: .5 !default;
+$expander-header-sub-title-text: $subtle-text !default;
 
 $expander-content-padding-x: $padding-x * 2 !default;
 $expander-content-padding-y: $padding-y * 4 !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: inset 0 0 0 2px rgba(0, 0, 0, .13) !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-em !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: $primary-lighter !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";