npm - @progress/kendo-theme-material - Versions diffs - 5.6.1-dev.6 → 5.8.0 - Mend

@progress/kendo-theme-material 5.6.1-dev.6 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/dist/all.css +713 -908
package/dist/all.scss +294 -537
package/lib/swatches/material-aqua-dark.json +1 -1
package/lib/swatches/material-arctic.json +1 -1
package/lib/swatches/material-burnt-teal.json +1 -1
package/lib/swatches/material-dataviz-v4.json +1 -1
package/lib/swatches/material-eggplant.json +1 -1
package/lib/swatches/material-lime-dark.json +1 -1
package/lib/swatches/material-lime.json +1 -1
package/lib/swatches/material-main-dark.json +1 -1
package/lib/swatches/material-main.json +1 -1
package/lib/swatches/material-nova.json +1 -1
package/lib/swatches/material-pacific-dark.json +1 -1
package/lib/swatches/material-pacific.json +1 -1
package/lib/swatches/material-sky-dark.json +1 -1
package/lib/swatches/material-sky.json +1 -1
package/lib/swatches/material-smoke.json +1 -1
package/package.json +4 -4
package/scss/button/_layout.scss +1 -2
package/scss/calendar/_theme.scss +0 -2
package/scss/drawer/_theme.scss +2 -2
package/scss/editor/_theme.scss +2 -3
package/scss/floating-label/_theme.scss +0 -3
package/scss/forms/_variables.scss +1 -1
package/scss/grid/_theme.scss +6 -22
package/scss/input/_layout.scss +2 -4
package/scss/listview/_theme.scss +1 -2
package/scss/pdf-viewer/_index.scss +3 -1
package/scss/pdf-viewer/_variables.scss +14 -1
package/scss/pivotgrid/_theme.scss +1 -2
package/scss/scheduler/_layout.scss +0 -1
package/scss/signature/_variables.scss +23 -21
package/scss/slider/_theme.scss +0 -1
package/scss/spreadsheet/_theme.scss +0 -8
package/scss/timeline/_layout.scss +0 -2
package/scss/typography/_variables.scss +1 -1

package/dist/all.scss CHANGED Viewed

@@ -2337,7 +2337,7 @@ $line-height-xs: 1 !default;
 $line-height-sm: 1.2 !default;
 $line-height-md: $line-height !default;
 $line-height-lg: 1.5 !default;
-$line-height-em: $line-height * 1em !default;
+$line-height-em: calc( #{$line-height} * 1em ) !default;
 // Font weight
@@ -2571,7 +2571,6 @@ $display4-letter-spacing: null !default;
 @include exports( "common/disabled" ) {
     // Disabled state
-    .k-state-disabled,
     .k-disabled,
     .k-widget[disabled],
     .k-disabled {
@@ -2586,8 +2585,7 @@ $display4-letter-spacing: null !default;
         // Nested disabled
         [disabled],
-        .k-disabled,
-        .k-state-disabled {
+        .k-disabled {
             opacity: 1;
             filter: grayscale(0);
         }
@@ -5365,18 +5363,28 @@ $utils-border-radius: (
 @include exports( "common/decoration/color" ) {
     // sass-lint:disable-block no-important
+    // sass-lint:disable-block class-name-format
     // stylelint-disable block-opening-brace-space-before
     .k-text-base,
     .k-color-base {
         color: $base-text;
     }
+    .\!k-text-base,
+    .\!k-color-base {
+        color: $base-text !important;
+    }
     .k-color-inherit { color: inherit; }
+    .\!k-color-inherit { color: inherit !important; }
     @each $name, $color in $kendo-theme-colors {
         .k-text-#{$name},
         .k-color-#{$name} {
+            color: $color;
+        }
+        .\!k-text-#{$name},
+        .\!k-color-#{$name} {
             color: $color !important;
         }
     }
@@ -5387,63 +5395,19 @@ $utils-border-radius: (
 @include exports( "common/decoration/background" ) {
     // sass-lint:disable-block no-important
+    // sass-lint:disable-block class-name-format
     @each $name, $bg-color in $kendo-theme-colors {
         .k-bg-#{$name} {
+            background-color: $bg-color;
+        }
+        .\!k-bg-#{$name} {
             background-color: $bg-color !important;
         }
     }
 }
-@mixin variant( $base ) {
-    background-color: tint($base, 10);
-    color: shade($base, 6);
-    border-color: tint($base, 9);
-}
-@include exports( "common/decoration/variant" ) {
-    @each $name, $variant in $kendo-theme-colors {
-        .k-state-#{$name} {
-            @include variant( $variant );
-        }
-    }
-}
-@include exports( "common/decoration/legacy" ) {
-    .k-info-colored {
-        color: #50607f;
-        border-color: #d0d9df;
-        background-color: #f0f9ff;
-    }
-    .k-success-colored {
-        color: #507f50;
-        border-color: #d0dfd0;
-        background-color: #f0fff0;
-    }
-    .k-error-colored {
-        color: #7f5050;
-        border-color: #dfd0d0;
-        background-color: #fff0f0;
-    }
-    .k-shadow {
-        // Shadow moved to popup/_layout.scss due to variable flow
-        // box-shadow: $popup-shadow;
-    }
-    .k-inset {
-        box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .03), inset 0 4px 5px 0 rgba(0, 0, 0, .04);
-    }
-}
 // #endregion
 // #endregion
@@ -9489,8 +9453,7 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
         &:disabled,
         &[disabled],
-        &.k-disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             opacity: 1;
             filter: none;
         }
@@ -10242,8 +10205,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include disabled( $disabled-styling );
             [disabled] &,
-            .k-disabled &,
-            .k-state-disabled & {
+            .k-disabled & {
                 opacity: 1;
                 filter: grayscale(0);
             }
@@ -10264,8 +10226,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include disabled( $disabled-styling );
             [disabled] &,
-            .k-disabled &,
-            .k-state-disabled & {
+            .k-disabled & {
                 opacity: 1;
                 filter: grayscale(0);
             }
@@ -10710,8 +10671,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             pointer-events: none;
         }
-        &.k-focus::after,
-        &.k-state-focused::after {
+        &.k-focus::after {
             opacity: 1;
             transform: scaleX(1);
         }
@@ -10729,8 +10689,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             transform: none;
         }
-        &.k-focus::after,
-        &.k-state-focused::after {
+        &.k-focus::after {
             transform: none;
         }
         &:focus-within::after {
@@ -11299,7 +11258,6 @@ $floating-label-focus-text: $primary !default;
             width: auto;
         }
-        &.k-state-empty,
         &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
@@ -11310,8 +11268,6 @@ $floating-label-focus-text: $primary !default;
         }
         > .k-label,
-        // &:focus-within > .k-label,
-        &.k-state-focused > .k-label,
         &.k-focus > .k-label {
             top: $floating-label-focus-offset-y;
             left: $floating-label-focus-offset-x;
@@ -11323,7 +11279,6 @@ $floating-label-focus-text: $primary !default;
             transform: scale( $floating-label-focus-scale );
         }
-        &.k-state-empty:not(.k-state-focused) ::placeholder,
         &.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
             color: transparent;
         }
@@ -11337,7 +11292,6 @@ $floating-label-focus-text: $primary !default;
                 transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
             }
-            &.k-state-empty,
             &.k-empty {
                 > .k-label {
                     left: auto;
@@ -11346,8 +11300,6 @@ $floating-label-focus-text: $primary !default;
             }
             > .k-label,
-            // &:focus-within > .k-label,
-            &.k-state-focused > .k-label,
             &.k-focus > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
@@ -11402,8 +11354,7 @@ $floating-label-focus-text: $primary !default;
             );
         }
-        &.k-focus > .k-label,
-        &.k-state-focused > .k-label {
+        &.k-focus > .k-label {
             @include fill(
                 $color: $floating-label-focus-text,
                 $bg: $floating-label-focus-bg
@@ -11424,9 +11375,6 @@ $floating-label-focus-text: $primary !default;
         &.k-invalid + .k-label,
         .k-invalid + .k-label,
-        &.k-state-invalid + .k-label,
-        .k-state-invalid + .k-label,
-        .k-invalid + .k-label,
         .ng-invalid.ng-touched + .k-label,
         .ng-invalid.ng-dirty + .k-label {
             @include fill( $color: $error );
@@ -13837,8 +13785,11 @@ $loader-container-font-size-lg: $font-size-lg !default;
     }
     .k-loader-container-inner {
-        .k-text-secondary {
-            color: $loader-secondary-bg !important; // sass-lint:disable-line no-important
+        // sass-lint:disable-block no-important
+        // sass-lint:disable-block class-name-format
+        .k-text-secondary,
+        .\!k-text-secondary {
+            color: $loader-secondary-bg !important;
         }
     }
@@ -14811,6 +14762,12 @@ $tooltip-error-border: $tooltip-error-bg !default;
             align-items: center;
         }
+        // Template item
+        .k-toolbar-item:focus {
+            text-decoration: none;
+            outline: 0;
+        }
     }
@@ -15021,6 +14978,13 @@ $tooltip-error-border: $tooltip-error-bg !default;
         }
+        // Template item
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
+            @include box-shadow( $kendo-button-focus-shadow );
+        }
         // Button group
         .k-button-group {}
@@ -15338,7 +15302,7 @@ $form-spacer: $padding-x * 2 !default;
 $form-font-size: $font-size !default;
 $form-line-height: $line-height !default;
-$form-line-height-em: $form-line-height * 1em !default;
+$form-line-height-em: calc( #{$form-line-height} * 1em ) !default;
 $form-line-height-sm: $line-height-sm !default;
 $form-line-height-lg: $line-height-lg !default;
@@ -16728,7 +16692,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         // Selection
-        > .k-state-selected,
         > .k-selected {
             border-width: 0;
             border-style: solid;
@@ -16799,7 +16762,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
             flex-direction: row;
         }
-        > .k-state-selected,
         > .k-selected {
             width: 0;
             width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -16826,7 +16788,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         // Horizontal reverse
         &.k-progressbar-reverse {
-            > .k-state-selected,
             > .k-selected {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
@@ -16851,7 +16812,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
             writing-mode: vertical-lr;
         }
-        > .k-state-selected,
         > .k-selected {
             height: 0;
             height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -16881,7 +16841,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         &.k-progressbar-reverse {
             flex-direction: column;
-            > .k-state-selected,
             > .k-selected {
                 flex-direction: column;
                 align-self: flex-start;
@@ -16893,7 +16852,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
     // Indeterminate
     .k-progressbar-indeterminate {
         .k-progress-status-wrap,
-        .k-state-selected,
         .k-selected,
         .k-item {
             display: none;
@@ -16904,9 +16862,7 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
     // Blazor specific
     .telerik-blazor.k-progressbar-horizontal {
-        > .k-state-selected,
         > .k-selected,
-        > .k-state-selected > .k-progress-status-wrap,
         > .k-selected > .k-progress-status-wrap {
             transition: width .1s ease-in-out;
         }
@@ -16935,7 +16891,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         display: -ms-inline-grid;
         > .k-progress-status-wrap,
-        > .k-state-selected,
         > .k-selected {
             -ms-grid-column: 1;
             -ms-grid-row: 1;
@@ -16945,7 +16900,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         -ms-grid-columns: 1fr;
         -ms-grid-rows: $progressbar-height;
-        &.k-progressbar-reverse > .k-state-selected,
         &.k-progressbar-reverse > .k-selected {
             -ms-grid-column-align: end;
         }
@@ -16954,12 +16908,10 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         -ms-grid-columns: $progressbar-height;
         -ms-grid-rows: 1fr;
-        > .k-state-selected,
         > .k-selected {
             -ms-grid-row-align: end;
         }
-        &.k-progressbar-reverse > .k-state-selected,
         &.k-progressbar-reverse > .k-selected {
             -ms-grid-row-align: start;
         }
@@ -17098,7 +17050,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
     .k-progressbar {
         @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
-        .k-state-selected,
         .k-selected {
             @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
         }
@@ -17537,7 +17488,6 @@ $kendo-radio-ripple-opacity: .2 !default;
         }
         .k-radio:focus,
-        .k-radio.k-state-focus,
         .k-radio.k-focus {
             box-shadow: none !important; // sass-lint:disable-line no-important
@@ -17610,7 +17560,6 @@ $kendo-radio-ripple-opacity: .2 !default;
     // Hover state
     .k-radio:hover,
-    .k-radio.k-state-hover,
     .k-radio.k-hover {
         @include fill(
             $kendo-radio-hover-text,
@@ -17622,7 +17571,6 @@ $kendo-radio-ripple-opacity: .2 !default;
     // Focus state
     .k-radio:focus,
-    .k-radio.k-state-focus,
     .k-radio.k-focus {
         @include fill( $border: $kendo-radio-focus-border );
         @include box-shadow( $kendo-radio-focus-shadow );
@@ -17631,13 +17579,11 @@ $kendo-radio-ripple-opacity: .2 !default;
     // Invalid state
     .k-radio.k-invalid,
-    .k-radio.k-state-invalid,
     .k-radio.ng-invalid.ng-touched,
     .k-radio.ng-invalid.ng-dirty {
         @include fill( $border: $kendo-radio-invalid-border );
     }
     .k-radio.k-invalid + .k-radio-label,
-    .k-radio.k-state-invalid + .k-radio-label,
     .k-radio.ng-invalid.ng-touched + .k-radio-label,
     .k-radio.ng-invalid.ng-dirty + .k-radio-label {
         @include fill( $color: $kendo-radio-invalid-text );
@@ -17654,7 +17600,6 @@ $kendo-radio-ripple-opacity: .2 !default;
         );
     }
     .k-radio:checked:focus,
-    .k-radio.k-checked.k-state-focus,
     .k-radio.k-checked.k-focus {
         @include fill( $border: $kendo-radio-focus-checked-border );
         @include box-shadow( $kendo-radio-focus-checked-shadow );
@@ -17828,7 +17773,6 @@ $slider-disabled-opacity: .65 !default;
         }
-        &.k-state-disabled,
         &.k-disabled {
             .k-tick,
             .k-slider-track,
@@ -18122,8 +18066,8 @@ $slider-disabled-opacity: .65 !default;
                 left: auto;
             }
-            .k-button .k-i-arrow-e,
-            .k-button .k-i-arrow-w {
+            .k-button-increase .k-icon,
+            .k-button-decrease .k-icon {
                 transform: scaleX(-1);
             }
         }
@@ -18334,20 +18278,17 @@ $slider-disabled-opacity: .65 !default;
             }
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
-        &.k-state-focused,
         &.k-focus {
             .k-draghandle {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
-        &.k-state-disabled,
         &.k-disabled {
             opacity: $slider-disabled-opacity;
         }
@@ -18386,7 +18327,6 @@ $slider-disabled-opacity: .65 !default;
             }
         }
-        &.k-state-disabled,
         &.k-disabled {
             opacity: 1;
@@ -19038,7 +18978,6 @@ $kendo-calendar-sizes: (
         }
         // // styles are applied to the k-link element inside
-        // .k-state-selected,
         // .k-selected {
         //     color: inherit;
         //     background: transparent;
@@ -19193,10 +19132,8 @@ $kendo-calendar-sizes: (
             &:hover,
             &.k-hover,
-            &.k-state-hover,
             &:focus,
-            &.k-focus,
-            &.k-state-focus {
+            &.k-focus {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -19217,8 +19154,7 @@ $kendo-calendar-sizes: (
                 .k-calendar-cell-inner {
                     box-shadow: inset 0 0 0 1px $calendar-today-color;
                 }
-                &.k-focus .k-calendar-cell-inner,
-                &.k-state-focused .k-calendar-cell-inner {
+                &.k-focus .k-calendar-cell-inner {
                     box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
                 }
             } @else if $calendar-today-style == color {
@@ -19252,8 +19188,7 @@ $kendo-calendar-sizes: (
         // Interactive states
         .k-calendar-td:hover .k-calendar-cell-inner,
-        .k-calendar-td.k-hover .k-calendar-cell-inner,
-        .k-calendar-td.k-state-hover .k-calendar-cell-inner {
+        .k-calendar-td.k-hover .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-hover-text,
                 $calendar-cell-hover-bg,
@@ -19261,8 +19196,7 @@ $kendo-calendar-sizes: (
                 $calendar-cell-hover-gradient
             );
         }
-        .k-calendar-td.k-selected .k-calendar-cell-inner,
-        .k-calendar-td.k-state-selected .k-calendar-cell-inner {
+        .k-calendar-td.k-selected .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-selected-text,
                 $calendar-cell-selected-bg,
@@ -19271,8 +19205,7 @@ $kendo-calendar-sizes: (
             );
         }
         .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
-        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
-        .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
+        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-selected-hover-text,
                 $calendar-cell-selected-hover-bg,
@@ -19281,14 +19214,11 @@ $kendo-calendar-sizes: (
             );
         }
         .k-calendar-td:focus .k-calendar-cell-inner,
-        .k-calendar-td.k-focus .k-calendar-cell-inner,
-        .k-calendar-td.k-state-focus .k-calendar-cell-inner,
-        .k-calendar-td.k-state-focused .k-calendar-cell-inner {
+        .k-calendar-td.k-focus .k-calendar-cell-inner {
             box-shadow: $calendar-cell-focused-shadow;
         }
         .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
-        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
-        .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
+        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
             box-shadow: $calendar-cell-selected-focus-shadow;
         }
@@ -19302,8 +19232,7 @@ $kendo-calendar-sizes: (
             box-shadow: inset -1px 0 $calendar-navigation-border;
             li:hover,
-            li.k-hover,
-            li.k-state-hover {
+            li.k-hover {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -19326,7 +19255,6 @@ $kendo-calendar-sizes: (
         // Invalid
         &.k-invalid,
         &.k-invalid:hover,
-        &.k-state-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
             border-color: $invalid-border;
@@ -19374,9 +19302,7 @@ $kendo-calendar-sizes: (
         }
         .k-range-start.k-active,
-        .k-range-start.k-state-active,
-        .k-range-end.k-active,
-        .k-range-end.k-state-active {
+        .k-range-end.k-active {
             .k-calendar-cell-inner {
                 box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
             }
@@ -19417,7 +19343,6 @@ $kendo-calendar-sizes: (
     .k-calendar {
-        .k-state-focused .k-link,
         .k-focus .k-link {
             @include fill(
                 $calendar-cell-hover-text,
@@ -19425,7 +19350,6 @@ $kendo-calendar-sizes: (
                 $calendar-cell-hover-border
             );
         }
-        .k-state-selected.k-state-focused .k-link,
         .k-selected.k-focus .k-link {
             @include fill(
                 $calendar-cell-selected-text,
@@ -19636,7 +19560,6 @@ $kendo-time-selector-sizes: (
             display: block;
         }
-        &.k-state-focused,
         &.k-focus {
             &::before,
             &::after {
@@ -19811,7 +19734,6 @@ $kendo-time-selector-sizes: (
             color: $time-list-title-text;
         }
-        &.k-state-focused,
         &.k-focus {
             .k-title {
                 color: $time-list-title-focus-text;
@@ -20147,18 +20069,14 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
         -ms-high-contrast-adjust: none;
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             position: relative;
             z-index: 101;
         }
         &:focus,
-        &.k-state-focus,
         &.k-focus,
-        &.k-state-selected,
         &.k-selected,
-        &.k-state-selected:hover,
         &.k-selected:hover {
             position: relative;
             z-index: 100;
@@ -20178,20 +20096,15 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
     .k-colorpalette-tile {
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             @include box-shadow( $colorpalette-tile-focus-shadow );
         }
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include box-shadow( $colorpalette-tile-hover-shadow );
         }
-        &.k-state-selected,
-        &.k-selected,
-        &.k-state-selected:hover,
         &.k-selected,
         &.k-selected:hover {
             @include box-shadow( $colorpalette-tile-selected-shadow );
@@ -20524,7 +20437,7 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
             }
             // Needed for the double check icons
-            .k-i-check + .k-i-check {
+            .k-icon + .k-icon {
                 margin-left: -13px;
             }
         }
@@ -20570,7 +20483,6 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
     }
     .k-colorgradient:focus,
-    .k-colorgradient.k-state-focus,
     .k-colorgradient.k-focus {
         @include fill( $border: $colorgradient-focus-border );
         @include box-shadow( $colorgradient-focus-shadow );
@@ -20591,16 +20503,15 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
         @include box-shadow( $colorgradient-draghandle-shadow );
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             @include fill( $bg: transparent, $border: $white );
             @include box-shadow( $colorgradient-draghandle-focus-shadow );
         }
-        &:active,
         &:hover,
-        &.k-state-hover,
-        &.k-hover {
+        &.k-hover,
+        &.k-active,
+        &:active {
             @include fill( $bg: transparent, $border: $white );
             @include box-shadow( $colorgradient-draghandle-hover-shadow );
         }
@@ -20795,7 +20706,6 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
     }
     .k-coloreditor:focus,
-    .k-coloreditor.k-state-focus,
     .k-coloreditor.k-focus {
         @include fill( $border: $coloreditor-focus-border );
         @include box-shadow( $coloreditor-focus-shadow );
@@ -22142,7 +22052,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
             box-sizing: border-box;
         }
-        &.k-state-readonly {
+        &.k-readonly {
             pointer-events: none;
         }
     }
@@ -22222,7 +22132,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
         color: $component-text;
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             .k-rating-item {
@@ -22230,7 +22139,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
                     text-shadow: $rating-icon-focused-shadow;
                 }
-                &.k-state-selected > .k-icon,
                 &.k-selected > .k-icon {
                     text-shadow: $rating-icon-focused-selected-shadow;
                 }
@@ -22241,19 +22149,16 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
     .k-rating-item {
         color: $rating-icon-text;
-        &.k-state-selected,
         &.k-selected {
             color: $rating-icon-selected-text;
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 color: $rating-icon-focused-text;
             }
         }
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             color: $rating-icon-hover-text;
             cursor: pointer;
@@ -22261,7 +22166,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
     }
 }
 // #endregion
 // #endregion
@@ -23547,7 +23451,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
             z-index: 1;
         }
         input[disabled],
-        input.k-state-disabled,
         input.k-disabled {
             visibility: hidden;
         }
@@ -23595,12 +23498,10 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
         .k-file {
-            &.k-state-focused,
             &.k-focus {
                 box-shadow: inset $upload-focused-shadow;
             }
-            .k-upload-action.k-state-focused,
             .k-upload-action.k-focus {
                 box-shadow: $upload-focused-shadow;
             }
@@ -23692,7 +23593,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
         }
         // Invalid,
-        &.k-state-invalid,
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
@@ -24742,7 +24642,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
         // Hover state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $actionsheet-item-hover-text,
@@ -24756,7 +24655,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
         // Focus state
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             @include fill(
                 $actionsheet-item-focus-text,
@@ -24770,7 +24668,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
         // Disabed state
         &:disabled,
-        &.k-state-disabled,
         &.k-disabled {
             @include fill(
                 $actionsheet-item-disabled-text,
@@ -25024,7 +24921,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
     .k-window {
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include box-shadow( $window-focused-shadow );
         }
@@ -25560,33 +25456,28 @@ $drawer-selected-hover-text: $secondary !default;
     .k-drawer-item {
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             color: $drawer-hovered-text;
             background-color: $drawer-hovered-bg;
         }
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             background-color: $drawer-focused-bg;
             box-shadow: $drawer-focused-shadow;
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 color: $drawer-hovered-text;
                 background-color: $drawer-hovered-bg;
             }
         }
-        &.k-state-selected,
         &.k-selected {
             color: $drawer-selected-text;
             background-color: $drawer-selected-bg;
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 color: $drawer-selected-hover-text;
                 background-color: $drawer-selected-hover-bg;
@@ -25602,18 +25493,18 @@ $drawer-selected-hover-text: $secondary !default;
 // #endregion
 @include exports( "drawer/theme/material" ) {
     .k-drawer-item {
-        &.k-state-selected,
         &.k-selected {
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 background-color: $drawer-focused-bg;
                 box-shadow: $drawer-focused-shadow;
             }
         }
     }
 }
 // #endregion
@@ -25732,7 +25623,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
             flex: none;
         }
-        > .k-i-close {
+        > .k-i-close,
+        > .k-i-x {
             margin-right: 0;
             margin-left: $notification-icon-spacing;
             flex: none;
@@ -25755,7 +25647,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
                 margin-left: $notification-icon-spacing;
             }
-            > .k-i-close {
+            > .k-i-close,
+            > .k-i-x {
                 margin-left: 0;
                 margin-right: $notification-icon-spacing;
             }
@@ -25780,7 +25673,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
         );
     }
     .k-notification-wrap {
-        > .k-i-close {
+        > .k-i-close,
+        > .k-i-x {
             color: inherit;
         }
     }
@@ -26341,8 +26235,7 @@ $card-callout-height: 20px !default;
         }
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include fill(
                 $card-focus-text,
                 $card-focus-bg,
@@ -26351,8 +26244,7 @@ $card-callout-height: 20px !default;
             @include box-shadow( $card-focus-shadow );
         }
-        &.k-selected,
-        &.k-state-selected {
+        &.k-selected {
             @include box-shadow( $card-focus-shadow );
         }
     }
@@ -26404,10 +26296,8 @@ $card-callout-height: 20px !default;
     .k-card-wrap {
-        &.k-state-focused,
-        &.k-focus,
         &:focus,
-        &.k-state-selected,
+        &.k-focus,
         &.k-selected {
             > .k-card {
                 @include box-shadow( $card-focus-shadow );
@@ -26841,7 +26731,6 @@ $bottom-nav-flat-border: $component-border !default;
             outline: 0;
         }
     }
-    .k-bottom-nav-item.k-state-disabled,
     .k-bottom-nav-item.k-disabled {
         background-color: initial;
     }
@@ -26888,15 +26777,11 @@ $bottom-nav-flat-border: $component-border !default;
                 $bg: $color
             );
-            .k-bottom-nav-item.k-state-focus,
-            .k-bottom-nav-item.k-focus,
-            .k-bottom-nav-item.k-state-focused,
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
                 @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
             }
-            .k-bottom-nav-item.k-state-selected,
             .k-bottom-nav-item.k-selected {
                 @include fill( $color: contrast-wcag( $color ) );
             }
@@ -26911,16 +26796,12 @@ $bottom-nav-flat-border: $component-border !default;
             $bottom-nav-flat-border
         );
-        .k-bottom-nav-item.k-state-focus,
-        .k-bottom-nav-item.k-focus,
-        .k-bottom-nav-item.k-state-focused,
         .k-bottom-nav-item.k-focus,
         .k-bottom-nav-item:focus {
             @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
         }
         @each $name, $color in $kendo-theme-colors {
-            &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected,
             &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
                 @if $name == "secondary" or $name == "light" {
                     @include fill( $color: try-shade($color, 3) );
@@ -27181,7 +27062,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         );
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include box-shadow( $breadcrumb-focused-shadow );
         }
@@ -27198,7 +27078,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         // Hovered state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $breadcrumb-link-hovered-text,
@@ -27209,7 +27088,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         // Focused state
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include fill(
                 $breadcrumb-link-focused-text,
@@ -27231,7 +27109,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         // Hovered state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $breadcrumb-root-link-hovered-text,
@@ -27242,7 +27119,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         // Focused state
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include fill(
                 $breadcrumb-root-link-focused-text,
@@ -27392,7 +27268,6 @@ $pager-dropdown-width: 5em !default;
             // Focused state
             &:focus,
-            &.k-state-focus,
             &.k-focus {
                 z-index: 3;
             }
@@ -27401,6 +27276,10 @@ $pager-dropdown-width: 5em !default;
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
+            .k-i-caret-alt-to-left,
+            .k-i-caret-alt-to-right,
+            .k-i-caret-alt-left,
+            .k-i-caret-alt-right,
             .k-i-arrow-end-left,
             .k-i-arrow-60-left,
             .k-i-arrow-60-right,
@@ -27442,7 +27321,6 @@ $pager-dropdown-width: 5em !default;
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled,
         &.k-disabled {
             color: inherit;
         }
@@ -27492,7 +27370,6 @@ $pager-dropdown-width: 5em !default;
         }
         // Selected state
-        .k-state-selected,
         .k-selected {
             cursor: inherit;
             z-index: 2;
@@ -27658,9 +27535,6 @@ $pager-dropdown-width: 5em !default;
         );
         &:focus,
-        &.k-focus,
-        &.k-state-focus,
-        &.k-state-focused,
         &.k-focus {
             @include fill( $bg: $pager-focus-bg );
             @include box-shadow( $pager-focus-shadow );
@@ -27676,7 +27550,6 @@ $pager-dropdown-width: 5em !default;
         );
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $pager-item-hover-text,
@@ -27685,7 +27558,6 @@ $pager-dropdown-width: 5em !default;
             );
         }
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $pager-item-selected-text,
@@ -27695,7 +27567,6 @@ $pager-dropdown-width: 5em !default;
         }
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             background-color: $pager-item-focus-bg;
             @include box-shadow( $pager-item-focus-shadow );
@@ -27719,7 +27590,6 @@ $pager-dropdown-width: 5em !default;
             );
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $pager-number-hover-text,
@@ -27729,13 +27599,11 @@ $pager-dropdown-width: 5em !default;
             }
             &:focus,
-            &.k-state-focus,
             &.k-focus {
                 background-color: $pager-number-focus-bg;
                 @include box-shadow( $pager-number-focus-shadow );
             }
-            &.k-state-selected,
             &.k-selected {
                 @include fill(
                     $pager-number-selected-text,
@@ -27768,7 +27636,6 @@ $pager-dropdown-width: 5em !default;
                 );
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
@@ -27778,7 +27645,7 @@ $pager-dropdown-width: 5em !default;
                 }
             }
-            &.k-state-expanded {
+            &.k-expanded {
                 @include fill(
                     $popup-text,
                     $popup-bg,
@@ -27789,7 +27656,6 @@ $pager-dropdown-width: 5em !default;
                 .k-link {
                     &:hover,
-                    &.k-state-hover,
                     &.k-hover {
                         @include fill(
                             $kendo-list-item-hover-text,
@@ -27797,7 +27663,6 @@ $pager-dropdown-width: 5em !default;
                         );
                     }
-                    &.k-state-selected,
                     &.k-selected {
                         @include fill(
                             $kendo-list-item-selected-text,
@@ -28431,7 +28296,6 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
                 $bg: $stepper-progressbar-bg
             );
-            .k-state-selected,
             .k-selected {
                 @include fill(
                     $color: $stepper-progressbar-fill-text,
@@ -28682,13 +28546,11 @@ $tabstrip-content-border-focused: $component-text !default;
         position: relative;
         z-index: 1;
-        &.k-state-active,
         &.k-active {
             display: block;
         }
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             outline-width: 1px;
             outline-style: dotted;
@@ -28777,7 +28639,6 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-left: $tabstrip-item-gap;
             }
-            .k-item.k-state-active,
             .k-item.k-active {
                 border-bottom-color: transparent;
             }
@@ -28807,7 +28668,6 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-left: $tabstrip-item-gap;
             }
-            .k-item.k-state-active,
             .k-item.k-active {
                 border-top-color: transparent;
             }
@@ -28841,7 +28701,6 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-top: $tabstrip-item-gap;
             }
-            .k-item.k-state-active,
             .k-item.k-active {
                 border-right-color: transparent;
             }
@@ -28877,7 +28736,6 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-top: $tabstrip-item-gap;
             }
-            .k-item.k-state-active,
             .k-item.k-active {
                 border-left-color: transparent;
             }
@@ -28923,7 +28781,6 @@ $tabstrip-content-border-focused: $component-text !default;
                     border-left-width: $tabstrip-indicator-size;
                 }
             }
-            .k-item.k-state-active::after,
             .k-item.k-active::after {
                 display: block;
             }
@@ -29018,7 +28875,6 @@ $tabstrip-content-border-focused: $component-text !default;
             );
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $tabstrip-item-hovered-text,
@@ -29029,9 +28885,7 @@ $tabstrip-content-border-focused: $component-text !default;
             }
             &:active,
-            &.k-state-active,
             &.k-active,
-            &.k-state-selected,
             &.k-selected {
                 @include fill(
                     $tabstrip-item-selected-text,
@@ -29042,7 +28896,6 @@ $tabstrip-content-border-focused: $component-text !default;
             }
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
@@ -29065,7 +28918,6 @@ $tabstrip-content-border-focused: $component-text !default;
         );
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
@@ -29076,7 +28928,6 @@ $tabstrip-content-border-focused: $component-text !default;
     @if ($tabstrip-indicator-size) {
         .k-tabstrip-items-wrapper {
-            .k-item.k-state-active::after,
             .k-item.k-active::after {
                 border-color: $tabstrip-indicator-color;
             }
@@ -29182,7 +29033,6 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
             justify-content: space-between;
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 outline-width: 1px;
                 outline-style: dotted;
@@ -29277,20 +29127,20 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 // #region @import "_theme.scss"; -> packages/material/scss/wizard/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/wizard/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/wizard/_theme.scss
 @include exports("wizard/theme") {
     .k-wizard-step {
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             outline-color: $wizard-step-border-focused;
         }
         .k-ie &:focus,
-        .k-ie &.k-state-focused,
         .k-ie &.k-focus {
             @include box-shadow($wizard-focused-shadow);
             outline: none;
         }
     }
 }
 // #endregion
@@ -29456,7 +29306,6 @@ $expander-content-padding-y: $padding-y * 6 !default;
             $expander-border
         );
-        &.k-state-focus,
         &.k-focus {
             box-shadow: $expander-focus-shadow;
         }
@@ -29471,13 +29320,10 @@ $expander-content-padding-y: $padding-y * 6 !default;
         outline: none;
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             background-color: $expander-header-hover-bg;
         }
-        // Should be removed
-        &.k-state-focused,
         &.k-focus {
             background-color: $expander-header-focused-bg;
             box-shadow: $expander-header-focused-shadow;
@@ -29724,6 +29570,10 @@ $panelbar-header-expanded-gradient: null !default;
             }
         }
+        // Panelbar item
+        .k-panelbar-item {
+            outline-style: none;
+        }
         // Panelbar content
         .k-panelbar-content {
@@ -29825,7 +29675,6 @@ $panelbar-header-expanded-gradient: null !default;
         > .k-item,
         > .k-panelbar-header {
-            &.k-state-expanded.k-level-0 > .k-link,
             &.k-expanded.k-level-0 > .k-link  {
                 @include fill(
                     $panelbar-header-expanded-text,
@@ -29852,7 +29701,6 @@ $panelbar-header-expanded-gradient: null !default;
             // Hover
             > .k-link:hover,
-            > .k-link.k-state-hover,
             > .k-link.k-hover {
                 @include fill(
                     $panelbar-header-hovered-text,
@@ -29864,9 +29712,6 @@ $panelbar-header-expanded-gradient: null !default;
             // Focus
             > .k-link:focus,
-            > .k-link.k-state-focus,
-            > .k-link.k-focus,
-            > .k-link.k-state-focused,
             > .k-link.k-focus {
                 @include fill(
                     $panelbar-header-focused-text,
@@ -29879,7 +29724,6 @@ $panelbar-header-expanded-gradient: null !default;
             // Focus & Hover
             > .k-link:focus:hover,
-            > .k-link.k-state-focus.k-state-hover,
             > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-header-hovered-focused-text,
@@ -29890,7 +29734,6 @@ $panelbar-header-expanded-gradient: null !default;
             }
             // Selected
-            > .k-link.k-state-selected,
             > .k-link.k-selected {
                 @include fill(
                     $panelbar-header-selected-text,
@@ -29906,9 +29749,7 @@ $panelbar-header-expanded-gradient: null !default;
             }
             // Selected Hover
-            > .k-link.k-state-selected:hover,
             > .k-link.k-selected:hover,
-            > .k-link.k-state-selected.k-state-hover,
             > .k-link.k-selected.k-hover {
                 @include fill(
                     $panelbar-header-selected-hovered-text,
@@ -29919,12 +29760,8 @@ $panelbar-header-expanded-gradient: null !default;
             }
             // Selected Focus
-            > .k-link.k-state-selected:focus,
             > .k-link.k-selected:focus,
-            > .k-link.k-state-selected.k-state-focus,
-            > .k-link.k-selected.k-focus,
-            > .k-link.k-state-selected.k-state-focused,
-            > .k-link.k-selected.k-focused {
+            > .k-link.k-selected.k-focus {
                 @include fill(
                     $panelbar-header-selected-focused-text,
                     $panelbar-header-selected-focused-bg,
@@ -29934,12 +29771,8 @@ $panelbar-header-expanded-gradient: null !default;
             }
             // Selected Focus & Hover
-            > .k-link.k-state-selected:hover:focus,
             > .k-link.k-selected:hover:focus,
-            > .k-link.k-state-selected.k-state-hover.k-state-focus,
-            > .k-link.k-selected.k-hover.k-state-focus,
-            > .k-link.k-state-selected.k-state-hover.k-state-focused,
-            > .k-link.k-selected.k-hover.k-state-focused {
+            > .k-link.k-selected.k-hover.k-focus {
                 @include fill(
                     $panelbar-header-selected-hovered-focused-text,
                     $panelbar-header-selected-hovered-focused-bg,
@@ -29956,10 +29789,8 @@ $panelbar-header-expanded-gradient: null !default;
             // Hover
             > .k-item > .k-link:hover,
-            > .k-item > .k-link.k-state-hover,
             > .k-item > .k-link.k-hover,
             > .k-panelbar-item > .k-link:hover,
-            > .k-panelbar-item > .k-link.k-state-hover,
             > .k-panelbar-item > .k-link.k-hover {
                 @include fill(
                     $panelbar-item-hovered-text,
@@ -29971,14 +29802,8 @@ $panelbar-header-expanded-gradient: null !default;
             // Focus
             > .k-item > .k-link:focus,
-            > .k-item > .k-link.k-state-focus,
-            > .k-item > .k-link.k-focus,
-            > .k-item > .k-link.k-state-focused,
             > .k-item > .k-link.k-focus,
             > .k-panelbar-item > .k-link:focus,
-            > .k-panelbar-item > .k-link.k-state-focus,
-            > .k-panelbar-item > .k-link.k-focus,
-            > .k-panelbar-item > .k-link.k-state-focused,
             > .k-panelbar-item > .k-link.k-focus {
                 @include fill(
                     $panelbar-item-focused-text,
@@ -29991,10 +29816,8 @@ $panelbar-header-expanded-gradient: null !default;
             // Focus & Hover
             > .k-item > .k-link:focus:hover,
-            > .k-item > .k-link.k-state-focus.k-state-hover,
             > .k-item > .k-link.k-focus.k-hover,
             > .k-panelbar-item > .k-link:focus:hover,
-            > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
             > .k-panelbar-item > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-item-hovered-focused-text,
@@ -30005,9 +29828,7 @@ $panelbar-header-expanded-gradient: null !default;
             }
             // Selected
-            > .k-item > .k-link.k-state-selected,
             > .k-item > .k-link.k-selected,
-            > .k-panelbar-item > .k-link.k-state-selected,
             > .k-panelbar-item > .k-link.k-selected {
                 @include fill(
                     $panelbar-item-selected-text,
@@ -30018,13 +29839,9 @@ $panelbar-header-expanded-gradient: null !default;
             }
             // Selected Hover
-            > .k-item > .k-link.k-state-selected:hover,
             > .k-item > .k-link.k-selected:hover,
-            > .k-item > .k-link.k-state-selected.k-state-hover,
             > .k-item > .k-link.k-selected.k-hover,
-            > .k-panelbar-item > .k-link.k-state-selected:hover,
             > .k-panelbar-item > .k-link.k-selected:hover,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
             > .k-panelbar-item > .k-link.k-selected.k-hover {
                 @include fill(
                     $panelbar-item-selected-hovered-text,
@@ -30035,18 +29852,10 @@ $panelbar-header-expanded-gradient: null !default;
             }
             // Selected Focus
-            > .k-item > .k-link.k-state-selected:focus,
             > .k-item > .k-link.k-selected:focus,
-            > .k-item > .k-link.k-state-selected.k-state-focus,
             > .k-item > .k-link.k-selected.k-focus,
-            > .k-item > .k-link.k-state-selected.k-state-focused,
-            > .k-item > .k-link.k-selected.k-focused,
-            > .k-panelbar-item > .k-link.k-state-selected:focus,
             > .k-panelbar-item > .k-link.k-selected:focus,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
-            > .k-panelbar-item > .k-link.k-selected.k-focus,
-            > .k-item > .k-link.k-state-selected.k-state-focused,
-            > .k-item > .k-link.k-selected.k-focused {
+            > .k-panelbar-item > .k-link.k-selected.k-focus {
                 @include fill(
                     $panelbar-item-selected-focused-text,
                     $panelbar-item-selected-focused-bg,
@@ -30056,18 +29865,10 @@ $panelbar-header-expanded-gradient: null !default;
             }
             // Selected Focus & Hover
-            > .k-item > .k-link.k-state-selected:focus:hover,
             > .k-item > .k-link.k-selected:focus:hover,
-            > .k-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
-            > .k-item > .k-link.k-selected.k-focus.k-state-hover,
-            > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
-            > .k-item > .k-link.k-selected.k-focused.k-state-hover,
-            > .k-panelbar-item > .k-link.k-state-selected:focus:hover,
+            > .k-item > .k-link.k-selected.k-focus.k-hover,
             > .k-panelbar-item > .k-link.k-selected:focus:hover,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
-            > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
-            > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
-            > .k-item > .k-link.k-selected.k-focused.k-state-hover {
+            > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
                 @include fill(
                     $panelbar-item-selected-hovered-focused-text,
                     $panelbar-item-selected-hovered-focused-bg,
@@ -30305,7 +30106,7 @@ $splitbar-selected-text: $primary-contrast !default;
         .k-pane,
         .k-pane-flex {
-            &.k-state-hidden,
+            &.k-hidden,
             &[hidden] {
                 // sass-lint:disable-block no-important
                 // hidden panes need to be zero-width to allow pane animation
@@ -30354,7 +30155,6 @@ $splitbar-selected-text: $primary-contrast !default;
         background-color: $splitbar-bg;
     }
     .k-splitbar:hover,
-    .k-splitbar.k-state-hover,
     .k-splitbar.k-hover,
     .k-splitbar-horizontal-hover,
     .k-splitbar-vertical-hover {
@@ -30362,9 +30162,6 @@ $splitbar-selected-text: $primary-contrast !default;
         background-color: $splitbar-hover-bg;
     }
     .k-splitbar:focus,
-    .k-splitbar.k-state-focus,
-    .k-splitbar.k-focus,
-    .k-splitbar.k-state-focused,
     .k-splitbar.k-focus {
         color: $splitbar-selected-text;
         background: $splitbar-selected-bg;
@@ -30475,9 +30272,6 @@ $tilelayout-hint-border: $component-border !default;
     }
     .k-tilelayout-item:focus,
-    .k-tilelayout-item.k-focus,
-    .k-tilelayout-item.k-state-focus,
-    .k-tilelayout-item.k-state-focused,
     .k-tilelayout-item.k-focus {
         @include box-shadow($tilelayout-card-focus-shadow);
     }
@@ -30891,7 +30685,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 border-radius: 50%;
             }
-            .k-i-reload {
+            .k-i-reload,
+            .k-i-arrow-rotate-cw {
                 font-size: 1em;
                 margin-right: .5em;
             }
@@ -31154,12 +30949,10 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         .k-column-menu {
-            .k-listgroup-item.k-state-selected,
             .k-listgroup-item.k-selected {
                 color: $adaptive-grid-sort-text;
                 background: none;
             }
-            .k-listgroup-item.k-state-selected .k-link,
             .k-listgroup-item.k-selected .k-link {
                 color: inherit;
             }
@@ -31919,7 +31712,9 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         .k-cell-inner > .k-link > .k-icon {
             &.k-i-sort-desc-sm,
-            &.k-i-sort-asc-sm {
+            &.k-i-sort-asc-sm,
+            &.k-i-sort-asc-small,
+            &.k-i-sort-desc-small {
                 vertical-align: text-top;
                 margin-inline-start: $grid-sorted-icon-spacing;
             }
@@ -32916,33 +32711,28 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
         // Hover state
-        tbody>tr:not(.k-detail-row):hover,
-        tbody>tr:not(.k-detail-row).k-state-hover,
-        tbody>tr:not(.k-detail-row).k-hover {
+        tbody > tr:not(.k-detail-row):hover,
+        tbody > tr:not(.k-detail-row).k-hover {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
         // Selected state
-        td.k-state-selected,
         td.k-selected,
-        tr.k-state-selected > td,
         tr.k-selected > td {
             color: $grid-selected-text;
             background-color: $grid-selected-bg;
         }
         // Focused state
-        td.k-state-focused,
+        td:focus,
         td.k-focus,
-        th.k-state-focused,
-        th.k-focus,
         th:focus,
+        th.k-focus,
         .k-master-row > td:focus,
         .k-grouping-row > td:focus,
         .k-detail-row > td:focus,
         .k-group-footer > td:focus,
-        .k-grid-pager.k-state-focused,
         .k-grid-pager.k-focus {
             box-shadow: $grid-focused-shadow;
         }
@@ -32986,20 +32776,16 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
             // Selected state
-            .k-state-selected td,
             .k-selected td {
                 @include fill( $bg: $grid-sticky-selected-bg );
             }
-            .k-state-selected.k-alt td,
             .k-selected.k-alt td {
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
             // Selected hover
-            .k-state-selected:hover td,
             .k-selected:hover td,
-            .k-state-selected.k-state-hover td,
             .k-selected.k-hover td {
                 @include fill( $bg: $grid-sticky-selected-hovered-bg );
             }
@@ -33028,6 +32814,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         .k-i-sort-asc-sm,
         .k-i-sort-desc-sm,
+        .k-i-sort-asc-small,
+        .k-i-sort-desc-small,
         .k-sort-order {
             color: $grid-sorting-indicator-text;
         }
@@ -33041,12 +32829,9 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                 background-color: $kendo-button-hover-bg;
             }
             &:focus,
-            &.k-state-focus,
-            &.k-focus,
-            &.k-state-border-down {
+            &.k-focus {
                 box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
             }
-            &.k-state-active,
             &.k-active {
                 color: $selected-text;
                 background-color: $selected-bg;
@@ -33102,20 +32887,14 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
         // Selected state
-        &.k-state-selected .k-grid-content-sticky,
         &.k-selected .k-grid-content-sticky,
-        &.k-state-selected .k-grid-row-sticky,
         &.k-selected .k-grid-row-sticky,
-        td.k-grid-content-sticky.k-state-selected,
         td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
-        &.k-state-selected.k-alt .k-grid-content-sticky,
         &.k-selected.k-alt .k-grid-content-sticky,
-        &.k-state-selected.k-alt .k-grid-row-sticky,
         &.k-selected.k-alt .k-grid-row-sticky,
-        &.k-alt td.k-grid-content-sticky.k-state-selected,
         &.k-alt td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
@@ -33124,26 +32903,18 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         // Hovered state
         &:hover .k-grid-content-sticky,
         &:hover .k-grid-row-sticky,
-        &.k-state-hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-row-sticky,
         &.k-hover .k-grid-row-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
         // Selected hover
-        &.k-state-selected:hover .k-grid-content-sticky,
         &.k-selected:hover .k-grid-content-sticky,
-        &.k-state-selected:hover .k-grid-row-sticky,
         &.k-selected:hover .k-grid-row-sticky,
-        &.k-state-selected.k-state-hover .k-grid-content-sticky,
         &.k-selected.k-hover .k-grid-content-sticky,
-        &.k-state-selected.k-state-hover .k-grid-row-sticky,
         &.k-selected.k-hover .k-grid-row-sticky,
-        &:hover td.k-grid-content-sticky.k-state-selected,
         &:hover td.k-grid-content-sticky.k-selected,
-        &.k-state-hover td.k-grid-content-sticky.k-state-selected,
         &.k-hover td.k-grid-content-sticky.k-selected {
             background-color: $grid-sticky-selected-hovered-bg;
         }
@@ -33157,7 +32928,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             background-color: $grid-sticky-bg;
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -33171,7 +32941,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
             &:hover td,
-            &.k-state-hover td,
             &.k-hover td {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -33183,66 +32952,43 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
         // Selected state
-        tr.k-state-selected .k-grid-content-sticky,
         tr.k-selected .k-grid-content-sticky,
-        .k-state-selected.k-grid-row-sticky td,
         .k-selected.k-grid-row-sticky td,
-        .k-grid-row-sticky td.k-state-selected,
         .k-grid-row-sticky td.k-selected,
-        .k-state-selected.k-grid-content-sticky,
         .k-selected.k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
-        tr.k-state-selected.k-alt .k-grid-content-sticky,
         tr.k-selected.k-alt .k-grid-content-sticky,
-        .k-state-selected.k-alt.k-grid-row-sticky td,
         .k-selected.k-alt.k-grid-row-sticky td,
-        .k-alt .k-state-selected.k-grid-content-sticky,
         .k-alt .k-selected.k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
         // Hover state
         tr:hover .k-grid-content-sticky,
-        tr.k-state-hover .k-grid-content-sticky,
         tr.k-hover .k-grid-content-sticky,
         .k-grid-row-sticky:hover td,
-        .k-grid-row-sticky.k-state-hover td,
         .k-grid-row-sticky.k-hover td,
         .k-grid-row-sticky.k-alt:hover td,
-        .k-grid-row-sticky.k-alt.k-state-hover td,
         .k-grid-row-sticky.k-alt.k-hover td,
         .k-alt:hover .k-grid-content-sticky,
-        .k-alt.k-state-hover .k-grid-content-sticky,
         .k-alt.k-hover .k-grid-content-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
         // Selected + Hover
-        tr.k-state-selected:hover .k-grid-content-sticky,
         tr.k-selected:hover .k-grid-content-sticky,
-        tr.k-state-selected.k-state-hover .k-grid-content-sticky,
         tr.k-selected.k-hover .k-grid-content-sticky,
-        .k-state-selected.k-grid-row-sticky:hover td,
         .k-selected.k-grid-row-sticky:hover td,
-        .k-state-selected.k-grid-row-sticky.k-state-hover td,
         .k-selected.k-grid-row-sticky.k-hover td,
-        .k-state-selected.k-alt.k-grid-row-sticky:hover td,
         .k-selected.k-alt.k-grid-row-sticky:hover td,
-        .k-state-selected.k-alt.k-grid-row-sticky.k-state-hover td,
         .k-selected.k-alt.k-grid-row-sticky.k-hover td,
-        tr.k-state-selected.k-alt:hover .k-grid-content-sticky,
         tr.k-selected.k-alt:hover .k-grid-content-sticky,
-        tr.k-state-selected.k-alt.k-state-hover .k-grid-content-sticky,
         tr.k-selected.k-alt.k-hover .k-grid-content-sticky,
-        .k-grid-row-sticky:hover td.k-state-selected,
         .k-grid-row-sticky:hover td.k-selected,
-        .k-grid-row-sticky.k-state-hover td.k-state-selected,
         .k-grid-row-sticky.k-hover td.k-selected,
-        tr:hover .k-grid-content-sticky.k-state-selected,
         tr:hover .k-grid-content-sticky.k-selected,
-        tr.k-state-hover .k-grid-content-sticky.k-state-selected,
         tr.k-hover .k-grid-content-sticky.k-selected {
             background-color: $grid-sticky-selected-hovered-bg;
         }
@@ -33254,7 +33000,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
         &:hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-hovered-bg );
         }
@@ -33268,13 +33013,11 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         );
     }
     .k-columnmenu-item:focus,
-    .k-columnmenu-item.k-state-focus,
     .k-columnmenu-item.k-focus {
         @include box-shadow( $kendo-list-item-focus-shadow );
     }
     .k-columnmenu-item {
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -33300,7 +33043,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                 );
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
@@ -33308,7 +33050,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                     );
                 }
-                &.k-state-selected,
                 &.k-selected {
                     @include fill(
                         $kendo-list-item-selected-text,
@@ -33317,7 +33058,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                 }
                 &:focus,
-                &.k-state-focused,
                 &.k-focus {
                     @include box-shadow( $kendo-list-item-focus-shadow );
                 }
@@ -33352,14 +33092,11 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
     .k-grid {
         // Selected state
-        td.k-state-selected,
         td.k-selected,
-        tr.k-state-selected,
         tr.k-selected {
             color: $grid-selected-text;
             background-color: $grid-selected-bg;
         }
-        tr.k-state-selected > td,
         tr.k-selected > td {
             color: inherit;
             background-color: transparent;
@@ -33367,14 +33104,12 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         // Hover, Focused state
         table {
-            >tr:not(.k-detail-row):hover,
-            >tr:not(.k-detail-row).k-state-hover,
-            >tr:not(.k-detail-row).k-hover,
-            td.k-state-focused,
+            > tr:not(.k-detail-row):hover,
+            > tr:not(.k-detail-row).k-hover,
+            td:focus,
             td.k-focus,
-            th.k-state-focused,
-            th.k-focus,
             th:focus,
+            th.k-focus,
             .k-master-row > td:focus,
             .k-grouping-row > td:focus,
             .k-detail-row > td:focus,
@@ -33384,7 +33119,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
             tr:hover,
-            tr.k-state-hover,
             tr.k-hover {
                 .k-grid-header-sticky,
                 .k-grid-footer-sticky {
@@ -33393,9 +33127,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                 }
             }
-            td.k-state-focused,
+            td:focus,
             td.k-focus,
-            th.k-state-focused,
             th.k-focus,
             th:focus,
             .k-master-row > td:focus,
@@ -33412,7 +33145,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
         .k-grid-pager:focus,
-        .k-grid-pager.k-state-focused,
         .k-grid-pager.k-focus {
             color: inherit;
         }
@@ -33466,7 +33198,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             .k-group-footer {
                 &:hover td,
-                &.k-state-hover td,
                 &.k-hover td {
                     color: inherit;
                     @include fill( $bg: $grid-sticky-footer-hovered-bg );
@@ -33517,15 +33248,12 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
             &:focus,
-            &.k-state-focus,
-            &.k-focus,
-            &.k-state-border-down {
+            &.k-focus {
                 color: $grid-text;
                 background-color: $grid-filter-button-focus;
                 box-shadow: none;
             }
-            &.k-state-active,
             &.k-active {
                 color: $primary-contrast;
                 background-color: $primary;
@@ -33566,7 +33294,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
         &:hover td,
-        &.k-state-hover td,
         &.k-hover td {
             @include fill( $bg: $grid-sticky-footer-hovered-bg );
         }
@@ -33599,7 +33326,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
     }
     .k-columnmenu-item {
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -33608,7 +33334,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
     }
     .k-columnmenu-item:focus,
-    .k-columnmenu-item.k-state-focus,
     .k-columnmenu-item.k-focus {
         background: $kendo-list-item-hover-bg;
     }
@@ -33617,7 +33342,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         .k-item {
             // Selected state
-            &.k-state-selected,
             &.k-selected {
                 background: $kendo-list-item-hover-bg;
             }
@@ -33838,7 +33562,6 @@ $listview-item-focus-shadow: null !default;
     // Listview content
     .k-listview-content {
-        > .k-state-focused,
         > .k-focus {
             @include fill(
                 $listview-item-focus-text,
@@ -33848,7 +33571,6 @@ $listview-item-focus-shadow: null !default;
             @include box-shadow( $listview-item-focus-shadow );
         }
-        > .k-state-selected,
         > .k-selected {
             @include fill(
                 $listview-item-selected-text,
@@ -33871,8 +33593,7 @@ $listview-item-focus-shadow: null !default;
     // Listview content
     .k-listview-content {}
-    .k-listview-content > .k-state-selected.k-state-focused,
-    .k-listview-content > .k-selected.k-focused {
+    .k-listview-content > .k-selected.k-focus {
         background-color: rgba( contrast-wcag( $listview-bg ), .12 );
     }
@@ -34075,7 +33796,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         [data-tool="merge"],
         [data-tool="freeze"] {
             width: auto;
-            min-width: $form-line-height * 1em;
+            min-width: calc( #{$form-line-height} * 1em );
         }
         .k-color-picker {
@@ -34244,7 +33965,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         overflow: hidden;
         // disabled cells in the Spreadsheet should allow navigation if link is used
-        .k-state-disabled,
         .k-disabled {
             pointer-events: auto;
         }
@@ -34806,7 +34526,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             background-position: 50% 50%;
             &:hover div,
-            &.k-state-hovered div,
             &.k-hover div {
                 margin: 0;
                 align-self: center;
@@ -34872,7 +34591,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         .k-spreadsheet-insert-image-dialog {
             .k-spreadsheet-has-image {
                 &:hover,
-                &.k-state-hovered,
                 &.k-hover {
                     border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
                 }
@@ -34993,7 +34711,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         .k-tabstrip-items .k-item {
             color: inherit;
         }
-        .k-tabstrip-items .k-item.k-state-active::after,
         .k-tabstrip-items .k-item.k-active::after {
             border-color: $primary-contrast;
         }
@@ -35016,7 +34733,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             $toolbar-gradient
         );
-        .k-tabstrip-items .k-item.k-state-active,
         .k-tabstrip-items .k-item.k-active {
             border-color: $secondary;
         }
@@ -35138,7 +34854,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         );
         box-shadow: inset 0 0 0 1px $kendo-button-border;
-        &.k-state-active,
         &.k-active {
             @include fill(
                 $kendo-button-active-text,
@@ -35184,13 +34899,11 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         .k-spreadsheet-has-image {
             &:hover,
-            &.k-state-hovered,
             &.k-hover {
                 box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
             }
             &:hover div,
-            &.k-state-hovered div,
             &.k-hover div {
                 color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
             }
@@ -35225,7 +34938,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         .k-button {}
         .k-button:hover,
-        .k-button.k-state-hover,
         .k-button.k-hover {
             @include fill(
                 $kendo-list-item-hover-text,
@@ -35233,9 +34945,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             );
         }
         .k-button:active,
-        .k-button.k-state-active,
         .k-button.k-active,
-        .k-button.k-state-selected,
         .k-button.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -35491,6 +35201,10 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
         border-right-width: $pivotgrid-cell-border-width;
         border-bottom-style: solid;
         border-bottom-width: $pivotgrid-cell-border-width;
+        &:focus {
+            outline: none;
+        }
     }
@@ -35561,6 +35275,10 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
         white-space: nowrap;
         vertical-align: top;
         overflow: hidden;
+        &:focus {
+            outline: none;
+        }
     }
     .k-pivotgrid-cell .k-icon {
@@ -36194,15 +35912,12 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
     // Hover state
-    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-state-hover,
-    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
     .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover,
-    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-state-hover,
-    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
+    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
     .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-state-hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row:hover {
+    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
+    .k-pivotgrid-values tbody > .k-pivotgrid-row:hover,
+    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover {
         @include fill (
             $pivotgrid-hover-text,
             $pivotgrid-hover-bg,
@@ -36211,9 +35926,10 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
     }
     // Focus state
-    .k-pivotgrid-cell.k-state-focus,
-    .k-pivotgrid-cell.k-focus,
     .k-pivotgrid-cell:focus,
+    .k-pivotgrid-cell.k-focus,
+    .k-pivotgrid-empty-cell:focus,
+    .k-pivotgrid-empty-cell.k-focus,
     .k-master-row > .k-pivotgrid-cell:focus,
     .k-grouping-row > .k-pivotgrid-cell:focus,
     .k-detail-row > .k-pivotgrid-cell:focus,
@@ -36222,9 +35938,7 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
     }
     // Selected state
-    .k-pivotgrid-cell.k-state-selected,
     .k-pivotgrid-cell.k-selected,
-    .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
     .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
         @include fill (
             $pivotgrid-selected-text,
@@ -36402,9 +36116,8 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
 @include exports("pivotgrid/theme/material") {
     // Hover and Focus state have the same bg color
-    .k-pivotgrid-cell.k-state-focus,
-    .k-pivotgrid-cell.k-focus,
     .k-pivotgrid-cell:focus,
+    .k-pivotgrid-cell.k-focus,
     .k-master-row > .k-pivotgrid-cell:focus,
     .k-grouping-row > .k-pivotgrid-cell:focus,
     .k-detail-row > .k-pivotgrid-cell:focus,
@@ -36471,7 +36184,6 @@ $treelist-footer-row-border-width: 1px !default;
         }
         .k-treelist-dragging,
-        .k-treelist-dragging .k-state-hover,
         .k-treelist-dragging .k-hover {
             cursor: default;
         }
@@ -37247,7 +36959,6 @@ $filemanager-preview-icon-border: null !default;
                 );
             }
-            &.k-state-selected .k-file-icon,
             &.k-selected .k-file-icon {
                 @include fill(
                     inherit,
@@ -37617,10 +37328,8 @@ $taskboard-drag-placeholder-border: $component-border !default;
             &:focus,
             &.k-focus,
-            &.k-state-focus,
             &:hover,
-            &.k-hover,
-            &.k-state-hover {
+            &.k-hover {
                 text-decoration: underline;
             }
         }
@@ -37712,7 +37421,6 @@ $taskboard-drag-placeholder-border: $component-border !default;
         );
     }
     .k-taskboard-column:focus,
-    .k-taskboard-column.k-state-focus,
     .k-taskboard-column.k-focus {
         @include fill(
             $taskboard-column-focus-text,
@@ -37751,39 +37459,33 @@ $taskboard-drag-placeholder-border: $component-border !default;
             @include fill( $color: $taskboard-card-header-text );
             &:focus,
-            &.k-focus,
-            &.k-state-focus {
+            &.k-focus {
                 @include fill( $color: $taskboard-card-header-focus-text );
             }
             &:hover,
-            &.k-hover,
-            &.k-state-hover {
+            &.k-hover {
                 @include fill( $color: $taskboard-card-header-hover-text );
             }
         }
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include fill( $border: $taskboard-card-focus-border );
             @include box-shadow( $taskboard-card-focus-shadow );
         }
         &:hover,
-        &.k-hover,
-        &.k-state-hover {
+        &.k-hover {
             @include fill( $border: $taskboard-card-hover-border );
         }
-        &.k-selected,
-        &.k-state-selected {
+        &.k-selected {
             @include fill( $border: $taskboard-card-selected-border );
             @include box-shadow( $taskboard-card-selected-shadow );
         }
-        &.k-disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             @include disabled( $disabled-styling );
         }
     }
@@ -37915,7 +37617,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
                 pointer-events: auto;
             }
-            .k-editor-content.k-state-focused,
             .k-editor-content.k-focus {
                 outline-width: 1px;
                 outline-style: dashed;
@@ -38171,7 +37872,8 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
         border-bottom-color: inherit;
         cursor: se-resize;
-        .k-i-arrow-45-down-right {
+        .k-i-arrow-45-down-right,
+        .k-i-caret-br {
             display: none;
         }
     }
@@ -38369,7 +38071,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             display: block;
             margin: auto;
-            &.k-state-selected,
             &.k-selected {
                 color: inherit;
                 border-width: 0;
@@ -38678,9 +38379,9 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             }
         }
-        // Hover & Actve state
+        // Hover & Active state
         &:hover,
-        &.k-state-active,
+        &.k-hover
         &.k-active {
             border-color: $panel-border;
         }
@@ -38698,7 +38399,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
     // Insert table
     .k-ct-popup {
-        .k-state-selected,
         .k-selected {
             @include fill( $selected-text, $selected-bg, $selected-border, none );
         }
@@ -39209,7 +38909,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         }
         &.k-gantt-planned .k-grid-content tr {
-            height: calc( #{$line-height-em * 1.7} + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
+            height: calc( #{$line-height-em} * 1.7 + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
         }
         // Layout
@@ -39254,7 +38954,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                 }
             }
-            tr.k-state-selected > td:last-child,
             tr.k-selected > td:last-child {
                 background: transparent;
             }
@@ -39433,7 +39132,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
             padding: 0 !important; // sass-lint:disable-line no-important
         }
         .k-grid-header tr {
-            height: calc( #{$line-height-em * 2} + #{$grid-header-padding-y * 4} + 2px );
+            height: calc( #{$line-height-em} * 2 + #{$grid-header-padding-y * 4} + 2px );
             vertical-align: bottom;
         }
         .k-grid-content {
@@ -39524,7 +39223,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         border-color: currentColor;
         position: absolute;
     }
-    .k-gantt-line.k-state-selected,
     .k-gantt-line.k-selected {
         z-index: 3;
     }
@@ -39598,7 +39296,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         transform: translate(-50%, -50%);
     }
     .k-task-dot:hover::before,
-    .k-task-dot.k-state-hover::before,
     .k-task-dot.k-hover::before {
         border-width: 1px;
     }
@@ -40086,7 +39783,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                     $border: $gantt-milestone-border
                 );
             }
-            .k-task-milestone.k-state-selected .k-task-milestone-content,
             .k-task-milestone.k-selected .k-task-milestone-content {
                 @include fill(
                     $bg: $gantt-milestone-selected-bg,
@@ -40101,7 +39797,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                 stroke: $gantt-line-fill;
             }
-            polyline.k-state-selected,
             polyline.k-selected {
                 stroke: $gantt-line-selected-fill;
             }
@@ -40155,7 +39850,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         );
     }
     .k-task-dot:hover::before,
-    .k-task-dot.k-state-hover::before,
     .k-task-dot.k-hover::before {
         @include fill(
             $bg: $gantt-dot-hover-bg,
@@ -40181,7 +39875,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
             );
         }
     }
-    .k-task-milestone.k-state-selected,
     .k-task-milestone.k-selected {
         background-image: none;
         @include fill(
@@ -40212,7 +39905,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
     .k-task-advanced .k-task-summary-complete {
         color: $gantt-advanced-bg;
     }
-    .k-task-summary.k-state-selected,
     .k-task-summary.k-selected {
         color: $gantt-summary-selected-bg;
@@ -40256,7 +39948,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
             $bg: $gantt-advanced-bg
         );
     }
-    .k-task-single.k-state-selected,
     .k-task-single.k-selected {
         @include fill(
             $gantt-task-selected-text,
@@ -40273,7 +39964,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
     .k-gantt-line {
         color: $gantt-line-fill;
     }
-    .k-gantt-line.k-state-selected,
     .k-gantt-line.k-selected {
         color: $gantt-line-selected-fill;
     }
@@ -40954,7 +40644,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             }
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 .k-event-delete {
                     opacity: 1;
@@ -41020,7 +40709,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         // Hover
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             .k-event-actions .k-event-delete,
             .k-resize-handle {
@@ -41278,11 +40966,9 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             opacity: .5;
             visibility: hidden;
         }
-        .k-state-hover .k-task > .k-event-delete,
         .k-hover .k-task > .k-event-delete,
         .k-scheduler-content tr:hover .k-event-delete,
         .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
-        .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
         .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
             visibility: visible;
         }
@@ -41356,7 +41042,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
                 position: relative;
             }
-            td.k-state-selected,
             td.k-selected {
                 background-color: inherit;
             }
@@ -41565,6 +41250,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         .k-scheduler,
         &.k-scheduler {
+            .k-i-caret-alt-left,
+            .k-i-caret-alt-right,
             .k-i-arrow-60-left,
             .k-i-arrow-60-right,
             .k-current-time-arrow-right {
@@ -41654,7 +41341,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
     kendo-scheduler .k-event,
     .k-event {
-        &.k-state-selected,
         &.k-selected {
             &::before {
                 display: block;
@@ -41870,9 +41556,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         );
     }
-    .k-scheduler-layout td.k-state-selected,
     .k-scheduler-layout td.k-selected,
-    .k-scheduler-layout .k-scheduler-cell.k-state-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
         background-color: rgba($selected-bg, .25);
     }
@@ -41895,7 +41579,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         );
         @include box-shadow( $scheduler-event-shadow );
-        &.k-state-hover,
+        &:hover,
         &.k-hover {
             @include fill(
                 $scheduler-event-hover-text,
@@ -41906,7 +41590,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             @include box-shadow( $scheduler-event-hover-shadow );
         }
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $scheduler-event-selected-text,
@@ -41973,10 +41656,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         // Hover
         .k-scheduler-content tr:hover,
-        .k-scheduler-content tr.k-state-hover,
         .k-scheduler-content tr.k-hover,
         .k-scheduler-content .k-scheduler-row:hover,
-        .k-scheduler-content .k-scheduler-row.k-state-hover,
         .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
                 $hovered-text,
@@ -41988,9 +41669,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         .k-scheduler-content tr:hover .k-scheduler-datecolumn,
         .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
-        .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
             @include fill(
                 $scheduler-text,
@@ -42000,13 +41679,10 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         }
         // Selected
-        .k-scheduler-content tr.k-state-selected,
         .k-scheduler-content tr.k-selected {
             background-color: rgba($selected-bg, .25);
         }
-        .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
             background-color: $scheduler-bg;
         }
@@ -42024,7 +41700,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             @include fill( $bg: $scheduler-yearview-indicator-bg );
         }
-        .k-state-selected .k-day-indicator,
         .k-selected .k-day-indicator {
             @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
         }
@@ -42362,7 +42037,6 @@ $chat-quick-reply-hover-border: $primary !default;
         // Message states
-        .k-message.k-state-selected,
         .k-message.k-selected {
             margin-bottom: $chat-item-spacing-y;
             border: 0;
@@ -42491,7 +42165,6 @@ $chat-quick-reply-hover-border: $primary !default;
         align-items: center;
         &:focus,
-        &.k-state-focus,
         &.k-focus,
         &:focus-within {
             outline: 0;
@@ -42572,7 +42245,6 @@ $chat-quick-reply-hover-border: $primary !default;
             flex: 0 0 auto;
         }
-        &.k-state-selected,
         &.k-selected {
             background: none;
         }
@@ -42809,7 +42481,6 @@ $chat-quick-reply-hover-border: $primary !default;
         .k-bubble:hover {
             @include box-shadow( $chat-bubble-hover-shadow );
         }
-        .k-state-selected .k-bubble,
         .k-selected .k-bubble {
             @include box-shadow( $chat-bubble-selected-shadow );
         }
@@ -42825,7 +42496,6 @@ $chat-quick-reply-hover-border: $primary !default;
         .k-alt .k-bubble:hover {
             @include box-shadow( $chat-alt-bubble-hover-shadow );
         }
-        .k-alt .k-state-selected .k-bubble,
         .k-alt .k-selected .k-bubble {
             @include box-shadow( $chat-alt-bubble-selected-shadow );
         }
@@ -43588,12 +43258,10 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
     }
     .k-timeline-track-item:hover .k-timeline-circle::before,
-    .k-timeline-track-item.k-state-hover .k-timeline-circle::before,
     .k-timeline-track-item.k-hover .k-timeline-circle::before {
         opacity: $kendo-flat-button-hover-opacity;
     }
-    .k-timeline-track-item.k-state-focus .k-timeline-circle::before,
     .k-timeline-track-item.k-focus .k-timeline-circle::before {
         opacity: $kendo-flat-button-focus-opacity;
     }
@@ -43645,7 +43313,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
             color: $body-text;
         }
-        .k-timeline-arrow.k-state-disabled,
         .k-timeline-arrow.k-disabled {
             opacity: 1; // The arrow button in disabled mode should have a solid background
             color: $timeline-track-arrow-disabled-text;
@@ -43666,7 +43333,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
         background-color: $timeline-flag-bg;
     }
-    .k-timeline-track-item.k-state-focus .k-timeline-circle,
     .k-timeline-track-item.k-focus .k-timeline-circle {
         @include box-shadow( $timeline-track-item-focus-shadow );
     }
@@ -43688,6 +43354,9 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
 // #region @import "../common/_index.scss"; -> packages/material/scss/common/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../button/_variables.scss"; -> packages/material/scss/button/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
 // #region @import "../combobox/_index.scss"; -> packages/material/scss/combobox/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
@@ -43703,7 +43372,12 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
 // #region @import "../icons/_index.scss"; -> packages/material/scss/icons/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../dropzone/_index.scss"; -> packages/material/scss/dropzone/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../window/_index.scss"; -> packages/material/scss/window/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/pdf-viewer/_variables.scss
@@ -43733,12 +43407,25 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
-$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-panel-border-width: 1px !default;
+$pdf-viewer-search-panel-border-radius: map-get( $spacing, 1 ) !default;
+$pdf-viewer-search-panel-bg: $component-bg !default;
+$pdf-viewer-search-panel-text: $component-text !default;
+$pdf-viewer-search-panel-border: $component-border !default;
+$pdf-viewer-search-panel-shadow: $window-shadow !default;
+$pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;
+$pdf-viewer-search-dialog-padding-x: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-padding-y: calc( #{$toolbar-padding-x} * 2 ) !default;
 $pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 $pdf-viewer-selection-line-height: $line-height-sm !default;
 $pdf-viewer-search-highlight-bg: $body-text !default;
+$pdf-viewer-search-highlight-mark-bg: yellow !default;
+$pdf-viewer-icon-text: $dropzone-icon-text !default;
+$pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/pdf-viewer/_layout.scss
@@ -43749,6 +43436,7 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
         border-width: $pdf-viewer-border-width;
         border-style: solid;
         box-sizing: border-box;
+        position: relative;
         outline: 0;
         font-family: $pdf-viewer-font-family;
         font-size: $pdf-viewer-font-size;
@@ -43779,11 +43467,14 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
         // Canvas
-        .k-list-scroller {
+        .k-canvas {
+            display: flex;
+            flex-direction: column;
             flex: 1 1 auto;
             outline: none;
-            .k-enable-text-select {
+            .k-enable-text-select,
+            &.k-enable-text-select {
                 -webkit-user-select: text;
                 -moz-user-select: text;
                 -ms-user-select: text;
@@ -43791,16 +43482,22 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
                 cursor: text;
             }
-            .k-enable-panning {
+            .k-enable-panning,
+            &.k-enable-panning {
                 cursor: grab;
             }
-            .k-enable-panning span::selection {
+            .k-enable-panning span::selection,
+            &.k-enable-panning span::selection {
                 background-color: transparent;
             }
         }
-        // Page
+        // Pages
+        .k-pdf-viewer-pages {
+            flex: 1 1 auto;
+        }
         .k-page {
             position: relative;
             margin: $pdf-viewer-page-spacing auto;
@@ -43826,46 +43523,88 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
                 mark {
                     color: transparent;
                 }
+                .k-search-highlight-mark {
+                    color: transparent;
+                }
             }
         }
+        .k-blank-page {
+            margin: 0;
+            display: flex;
+            flex-flow: column nowrap;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            background-color: inherit !important; // sass-lint:disable-line no-important
+            .k-upload,
+            .k-dropzone,
+            .k-dropzone-inner {
+                border: 0;
+                background: none;
+            }
+            > .k-icon {
+                font-size: $pdf-viewer-icon-size;
+            }
+        }
     }
     // Search
     .k-pdf-viewer-search-dialog {
-        padding: $pdf-viewer-search-dialog-padding;
+        padding: 0 !important; // sass-lint:disable-line no-important
+    }
-        .k-search-container {
-            display: flex;
-            gap: $pdf-viewer-search-dialog-spacing;
-            flex-flow: row nowrap;
-            flex: 0 0 auto;
-            justify-content: flex-start;
-            align-items: center;
+    .k-search-panel {
+        padding: $pdf-viewer-search-dialog-padding-y $pdf-viewer-search-dialog-padding-x;
+        display: flex;
+        gap: $pdf-viewer-search-dialog-spacing;
+        flex-flow: row nowrap;
+        flex: 0 0 auto;
+        justify-content: flex-start;
+        align-items: center;
-            .k-search-dialog-draghandle {
-                cursor: move;
-                margin-left: 0;
-            }
+        .k-search-dialog-draghandle {
+            cursor: move;
+            margin-left: 0;
+        }
-            .k-textbox {
-                width: 10em;
-                flex: none;
+        .k-textbox {
+            width: 10em;
+            flex: none;
-                .k-button {
-                    border-width: 0;
-                }
+            .k-button {
+                border-width: 0;
             }
+        }
-            .k-search-matches {
-                flex: 1 1 auto;
-            }
+        .k-search-matches {
+            display: inline-flex;
+            gap: $pdf-viewer-search-panel-matches-spacing;
         }
     }
+    .k-pdf-viewer-canvas > .k-search-panel {
+        width: max-content;
+        margin-top: calc( (#{$kendo-button-calc-size} + ( 2 * #{$pdf-viewer-search-panel-border-width} ) + ( 2 * #{$pdf-viewer-search-dialog-padding-y} )) * -1 );
+        border-width: $pdf-viewer-search-panel-border-width;
+        border-style: solid;
+        border-radius: $pdf-viewer-search-panel-border-radius;
+        z-index: 10;
+    }
+    // Alias
+    .k-search-container {
+        @extend .k-search-panel !optional;
+    }
     // IE
     .k-ie .k-pdf-viewer-search-dialog {
         .k-search-container > * + * {
             margin-left: $pdf-viewer-search-dialog-spacing;
         }
@@ -43920,12 +43659,33 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
             @include box-shadow( $pdf-viewer-page-shadow );
         }
+        .k-blank-page > .k-icon {
+            @include fill( $color: $pdf-viewer-icon-text );
+        }
         // Search
         .k-search-highlight {
             background-color: $pdf-viewer-search-highlight-bg;
         }
+        .k-search-highlight-mark {
+            @include fill( $bg: $pdf-viewer-search-highlight-mark-bg );
+        }
+    }
+    .k-pdf-viewer-canvas > .k-search-panel {
+        @include fill(
+            $pdf-viewer-search-panel-text,
+            $pdf-viewer-search-panel-bg,
+            $pdf-viewer-search-panel-border,
+        );
+        @include box-shadow( $pdf-viewer-search-panel-shadow );
+    }
+    .k-search-container {
+        @extend .k-search-panel !optional;
     }
 }
@@ -44379,7 +44139,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
         -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -44390,7 +44149,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
         }
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -44410,14 +44168,12 @@ $scrollview-transition-timing-function: ease-in-out !default;
         }
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             box-shadow: $scrollview-pagebutton-shadow;
         }
     }
     .k-scrollview-nav > .k-link:hover,
-    .k-scrollview-nav > .k-link.k-state-hover,
     .k-scrollview-nav > .k-link.k-hover {
         box-shadow: $scrollview-pagebutton-shadow;
     }
@@ -45236,7 +44992,7 @@ $treemap-line-height: $line-height !default;
         .k-leaf.k-inverse {
             color: $component-text;
         }
-        .k-leaf.k-state-hover,
+        .k-leaf:hover,
         .k-leaf.k-hover {
             box-shadow: inset 0 0 0 3px $component-border;
         }
@@ -45718,8 +45474,7 @@ $orgchart-line-v-height: 25px !default;
         }
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include box-shadow( $orgchart-card-focus-shadow );
         }
     }
@@ -45733,9 +45488,6 @@ $orgchart-line-v-height: 25px !default;
         );
     }
     .k-orgchart-node-group-container:focus,
-    .k-orgchart-node-group-container.k-focus,
-    .k-orgchart-node-group-container.k-state-focus,
-    .k-orgchart-node-group-container.k-state-focused,
     .k-orgchart-node-group-container.k-focus {
         @include box-shadow( $orgchart-node-group-focus-shadow );
         @include fill ( $border: $orgchart-node-group-focus-border );
@@ -45779,40 +45531,42 @@ $kendo-signature-height: 108px !default;
 $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
-$kendo-signature-padding: map-get( $spacing, 2 ) !default;
-$kendo-signature-padding-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-signature-padding-md: $kendo-signature-padding !default;
-$kendo-signature-padding-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-signature-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-x-sm: map-get( $spacing, thin ) !default;
+$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
+$kendo-signature-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-signature-padding-y: $kendo-signature-padding-x !default;
+$kendo-signature-padding-y-sm: $kendo-signature-padding-x-sm !default;
+$kendo-signature-padding-y-md: $kendo-signature-padding-y !default;
+$kendo-signature-padding-y-lg: $kendo-signature-padding-x-lg !default;
 $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
 $kendo-signature-line-color: rgba( $info, .24 ) !default;
-$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
-$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
-$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
-$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
+$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
+$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
+$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-x-md} ) !default;
+$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-x-lg} ) !default;
-$kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
-$kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
-$kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
-$kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
+$kendo-signature-line-bottom-offset: 33% !default;
 $kendo-signature-sizes: (
     sm: (
-        padding: $kendo-signature-padding-sm,
-        line-size: $kendo-signature-line-size-sm,
-        line-offset: $kendo-signature-line-bottom-offset-sm
+        padding-x: $kendo-signature-padding-x-sm,
+        padding-y: $kendo-signature-padding-y-sm,
+        line-size: $kendo-signature-line-size-sm
     ),
     md: (
-        padding: $kendo-signature-padding-md,
-        line-size: $kendo-signature-line-size-md,
-        line-offset: $kendo-signature-line-bottom-offset-md
+        padding-x: $kendo-signature-padding-x-md,
+        padding-y: $kendo-signature-padding-y-md,
+        line-size: $kendo-signature-line-size-md
     ),
     lg: (
-        padding: $kendo-signature-padding-lg,
-        line-size: $kendo-signature-line-size-lg,
-        line-offset: $kendo-signature-line-bottom-offset-lg
+        padding-x: $kendo-signature-padding-x-lg,
+        padding-y: $kendo-signature-padding-y-lg,
+        line-size: $kendo-signature-line-size-lg
     )
 ) !default;
@@ -45826,7 +45580,7 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
     .k-signature {
         width: $kendo-signature-width;
-        height: $kendo-signature-height;
+        min-height: $kendo-signature-height;
         position: relative;
         box-sizing: border-box;
         display: flex;
@@ -45863,27 +45617,30 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
     .k-signature-line {
         position: absolute;
-        z-index: 0;
+        bottom: $kendo-signature-line-bottom-offset;
+        z-index: 2;
+        pointer-events: none;
         border-bottom-width: $kendo-signature-line-width;
         border-bottom-style: $kendo-signature-line-style;
     }
     // Sizes
     @each $size, $size-props in $kendo-signature-sizes {
-        $_padding: map-get($size-props, padding);
+        $_padding-x: map-get($size-props, padding-x);
+        $_padding-y: map-get($size-props, padding-y);
         $_line-size: map-get($size-props, line-size);
         $_line-offset: map-get($size-props, line-offset);
         .k-signature-#{$size} {
-            padding: $_padding;
+            padding-inline: $_padding-x;
+            padding-block: $_padding-y;
             .k-signature-line {
                 width: $_line-size;
-                bottom: $_line-offset;
             }
         }
     }
 }
 // #endregion