@progress/kendo-theme-material 5.3.2-dev.4 → 5.4.2-dev.0

package/dist/all.scss

@@ -910,13 +910,15 @@ $_kendo-imported-modules: ();
         background-color: $primary;
     }
 
-    &.k-state-focused::after {
+    &.k-state-focused::after ,
+    &.k-focus::after {
         opacity: 1;
         transform: scaleX(1);
     }
 
 
-    &.k-state-invalid::after {
+    &.k-state-invalid::after ,
+    &.k-invalid::after {
         background-color: $error;
         transition: none;
     }
@@ -2606,6 +2608,7 @@ $display4-letter-spacing: null !default;
 
     // Disabled state
     .k-state-disabled,
+    .k-disabled,
     .k-widget[disabled],
     .k-disabled {
         @include disabled( $disabled-styling );
@@ -10618,6 +10621,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
+
+    // Angular specific
+    .k-input > kendo-popup,
+    .k-picker > kendo-popup {
+        position: fixed;
+    }
+
+
 }
 
 
@@ -11305,6 +11316,7 @@ $floating-label-focus-text: $primary !default;
         .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 );
@@ -16592,7 +16604,8 @@ $progressbar-chunk-border: $component-bg !default;
 
 
         // Selection
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             border-width: 0;
             border-style: solid;
             display: flex;
@@ -16662,7 +16675,8 @@ $progressbar-chunk-border: $component-bg !default;
             flex-direction: row;
         }
 
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             width: 0;
             width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: row;
@@ -16688,7 +16702,8 @@ $progressbar-chunk-border: $component-bg !default;
         // Horizontal reverse
         &.k-progressbar-reverse {
 
-            > .k-state-selected {
+            > .k-state-selected ,
+            > .k-selected {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
             }
@@ -16712,7 +16727,8 @@ $progressbar-chunk-border: $component-bg !default;
             writing-mode: vertical-lr;
         }
 
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             height: 0;
             height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: column-reverse;
@@ -16741,7 +16757,8 @@ $progressbar-chunk-border: $component-bg !default;
         &.k-progressbar-reverse {
             flex-direction: column;
 
-            > .k-state-selected {
+            > .k-state-selected ,
+            > .k-selected {
                 flex-direction: column;
                 align-self: flex-start;
             }
@@ -16753,6 +16770,7 @@ $progressbar-chunk-border: $component-bg !default;
     .k-progressbar-indeterminate {
         .k-progress-status-wrap,
         .k-state-selected,
+        .k-selected,
         .k-item {
             display: none;
         }
@@ -16763,7 +16781,9 @@ $progressbar-chunk-border: $component-bg !default;
     .telerik-blazor.k-progressbar-horizontal {
 
         > .k-state-selected,
-        > .k-state-selected > .k-progress-status-wrap {
+        > .k-selected,
+        > .k-state-selected > .k-progress-status-wrap ,
+        > .k-selected > .k-progress-status-wrap {
             transition: width .1s ease-in-out;
         }
     }
@@ -16791,7 +16811,8 @@ $progressbar-chunk-border: $component-bg !default;
         display: -ms-inline-grid;
 
         > .k-progress-status-wrap,
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             -ms-grid-column: 1;
             -ms-grid-row: 1;
         }
@@ -16800,7 +16821,8 @@ $progressbar-chunk-border: $component-bg !default;
         -ms-grid-columns: 1fr;
         -ms-grid-rows: $progressbar-height;
 
-        &.k-progressbar-reverse > .k-state-selected {
+        &.k-progressbar-reverse > .k-state-selected ,
+        &.k-progressbar-reverse > .k-selected {
             -ms-grid-column-align: end;
         }
     }
@@ -16808,11 +16830,13 @@ $progressbar-chunk-border: $component-bg !default;
         -ms-grid-columns: $progressbar-height;
         -ms-grid-rows: 1fr;
 
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             -ms-grid-row-align: end;
         }
 
-        &.k-progressbar-reverse > .k-state-selected {
+        &.k-progressbar-reverse > .k-state-selected ,
+        &.k-progressbar-reverse > .k-selected {
             -ms-grid-row-align: start;
         }
     }
@@ -16956,7 +16980,8 @@ $progressbar-chunk-border: $component-bg !default;
             $progressbar-gradient
         );
 
-        .k-state-selected {
+        .k-state-selected ,
+        .k-selected {
             @include fill(
                 $progressbar-fill-text,
                 $progressbar-fill-bg,
@@ -17320,7 +17345,8 @@ $kendo-radio-ripple-opacity: .2 !default;
         }
 
         .k-radio:focus,
-        .k-radio.k-state-focus {
+        .k-radio.k-state-focus ,
+        .k-radio.k-focus {
             box-shadow: none !important; // sass-lint:disable-line no-important
 
             &::after {
@@ -17392,7 +17418,8 @@ $kendo-radio-ripple-opacity: .2 !default;
 
     // Hover state
     .k-radio:hover,
-    .k-radio.k-state-hover {
+    .k-radio.k-state-hover ,
+    .k-radio.k-hover {
         @include fill(
             $kendo-radio-hover-text,
             $kendo-radio-hover-bg,
@@ -17403,7 +17430,8 @@ $kendo-radio-ripple-opacity: .2 !default;
 
     // Focus state
     .k-radio:focus,
-    .k-radio.k-state-focus {
+    .k-radio.k-state-focus ,
+    .k-radio.k-focus {
         @include fill( $border: $kendo-radio-focus-border );
         @include box-shadow( $kendo-radio-focus-shadow );
     }
@@ -17434,7 +17462,8 @@ $kendo-radio-ripple-opacity: .2 !default;
         );
     }
     .k-radio:checked:focus,
-    .k-radio.k-checked.k-state-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 );
     }
@@ -17607,7 +17636,8 @@ $slider-disabled-opacity: .65 !default;
         }
 
 
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             .k-tick,
             .k-slider-track,
             .k-draghandle {
@@ -18102,18 +18132,21 @@ $slider-disabled-opacity: .65 !default;
             }
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
 
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             .k-draghandle {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
 
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             opacity: $slider-disabled-opacity;
         }
     }
@@ -18151,7 +18184,8 @@ $slider-disabled-opacity: .65 !default;
             }
         }
 
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             opacity: 1;
 
             .k-slider-track,
@@ -18700,7 +18734,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         }
 
         // // styles are applied to the k-link element inside
-        // .k-state-selected {
+        // .k-state-selected ,
+        // .k-selected {
         //     color: inherit;
         //     background: transparent;
         //     border-color: transparent;
@@ -18925,7 +18960,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             );
         }
         .k-calendar-td.k-state-selected:hover .k-link,
+        .k-calendar-td.k-selected:hover .k-link,
         .k-calendar-td.k-state-selected.k-state-hover .k-link,
+        .k-calendar-td.k-selected.k-hover .k-link,
         .k-calendar-td.k-selected:hover .k-link,
         .k-calendar-td.k-selected.k-hover .k-link {
             @include fill(
@@ -18936,12 +18973,15 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             );
         }
         .k-calendar-td.k-state-focused .k-link,
+        .k-calendar-td.k-focus .k-link,
         .k-calendar-td.k-state-focus .k-link,
         .k-calendar-td.k-focus .k-link {
             box-shadow: $calendar-cell-focused-shadow;
         }
         .k-calendar-td.k-state-selected.k-state-focused .k-link,
+        .k-calendar-td.k-selected.k-focused .k-link,
         .k-calendar-td.k-state-selected.k-state-focus .k-link,
+        .k-calendar-td.k-selected.k-focus .k-link,
         .k-calendar-td.k-selected:focus .k-link,
         .k-calendar-td.k-selected.k-focus .k-link {
             box-shadow: $calendar-cell-selected-focus-shadow;
@@ -19041,6 +19081,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         }
 
         .k-range-start.k-state-active,
+        .k-range-start.k-active,
         .k-range-end.k-state-active,
         .k-range-end.k-active {
             .k-link {
@@ -19083,14 +19124,16 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
     .k-calendar {
 
-        .k-state-focused .k-link {
+        .k-state-focused .k-link ,
+        .k-focus .k-link {
             @include fill(
                 $calendar-cell-hover-text,
                 $calendar-cell-hover-bg,
                 $calendar-cell-hover-border
             );
         }
-        .k-state-selected.k-state-focused .k-link {
+        .k-state-selected.k-state-focused .k-link ,
+        .k-selected.k-focused .k-link {
             @include fill(
                 $calendar-cell-selected-text,
                 try-tint($calendar-cell-selected-bg),
@@ -19262,7 +19305,8 @@ $time-list-focused-bg: null !default;
             display: block;
         }
 
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             &::before,
             &::after {
                 display: block;
@@ -19406,7 +19450,8 @@ $time-list-focused-bg: null !default;
             color: $time-list-title-text;
         }
 
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             .k-title {
                 color: $time-list-title-focus-text;
             }
@@ -19749,8 +19794,11 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
 
         &:focus,
         &.k-state-focus,
+        &.k-focus,
         &.k-state-selected,
-        &.k-state-selected:hover {
+        &.k-selected,
+        &.k-state-selected:hover ,
+        &.k-selected:hover {
             position: relative;
             z-index: 100;
         }
@@ -19781,6 +19829,7 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
         }
 
         &.k-state-selected,
+        &.k-selected,
         &.k-state-selected:hover,
         &.k-selected,
         &.k-selected:hover {
@@ -21809,14 +21858,16 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
         color: $component-text;
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
 
             .k-rating-item {
                 > .k-icon {
                     text-shadow: $rating-icon-focused-shadow;
                 }
 
-                &.k-state-selected > .k-icon {
+                &.k-state-selected > .k-icon ,
+                &.k-selected > .k-icon {
                     text-shadow: $rating-icon-focused-selected-shadow;
                 }
             }
@@ -21826,17 +21877,20 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
     .k-rating-item {
         color: $rating-icon-text;
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             color: $rating-icon-selected-text;
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 color: $rating-icon-focused-text;
             }
         }
 
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             color: $rating-icon-hover-text;
             cursor: pointer;
         }
@@ -23128,7 +23182,8 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
             z-index: 1;
         }
         input[disabled],
-        input.k-state-disabled {
+        input.k-state-disabled ,
+        input.k-disabled {
             visibility: hidden;
         }
     }
@@ -23175,11 +23230,13 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
         .k-file {
 
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 box-shadow: inset $upload-focused-shadow;
             }
 
-            .k-upload-action.k-state-focused {
+            .k-upload-action.k-state-focused ,
+            .k-upload-action.k-focus {
                 box-shadow: $upload-focused-shadow;
             }
 
@@ -23271,6 +23328,7 @@ $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 {
             border-color: $invalid-border;
@@ -24255,7 +24313,8 @@ $actionsheet-item-disabled-opacity: .42 !default;
 
         // Hover state
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             @include fill(
                 $actionsheet-item-hover-text,
                 $actionsheet-item-hover-bg,
@@ -24268,7 +24327,8 @@ $actionsheet-item-disabled-opacity: .42 !default;
 
         // Focus state
         &:focus,
-        &.k-state-focus {
+        &.k-state-focus ,
+        &.k-focus {
             @include fill(
                 $actionsheet-item-focus-text,
                 $actionsheet-item-focus-bg,
@@ -24281,7 +24341,8 @@ $actionsheet-item-disabled-opacity: .42 !default;
 
         // Disabed state
         &:disabled,
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             @include fill(
                 $actionsheet-item-disabled-text,
                 $actionsheet-item-disabled-bg,
@@ -24534,7 +24595,8 @@ $actionsheet-item-disabled-opacity: .42 !default;
 
     .k-window {
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             @include box-shadow( $window-focused-shadow );
         }
     }
@@ -25055,29 +25117,34 @@ $drawer-selected-hover-text: $secondary !default;
     .k-drawer-item {
 
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             color: $drawer-hovered-text;
             background-color: $drawer-hovered-bg;
         }
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             background-color: $drawer-focused-bg;
             box-shadow: $drawer-focused-shadow;
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 color: $drawer-hovered-text;
                 background-color: $drawer-hovered-bg;
             }
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             color: $drawer-selected-text;
             background-color: $drawer-selected-bg;
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 color: $drawer-selected-hover-text;
                 background-color: $drawer-selected-hover-bg;
             }
@@ -25093,10 +25160,12 @@ $drawer-selected-hover-text: $secondary !default;
 
 @include exports( "drawer/theme/material" ) {
     .k-drawer-item {
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 background-color: $drawer-focused-bg;
                 box-shadow: $drawer-focused-shadow;
             }
@@ -26348,7 +26417,8 @@ $bottom-nav-flat-border: $component-border !default;
             outline: 0;
         }
     }
-    .k-bottom-nav-item.k-state-disabled {
+    .k-bottom-nav-item.k-state-disabled ,
+    .k-bottom-nav-item.k-disabled {
         background-color: initial;
     }
 
@@ -26395,12 +26465,15 @@ $bottom-nav-flat-border: $component-border !default;
             );
 
             .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-state-selected ,
+            .k-bottom-nav-item.k-selected {
                 @include fill( $color: contrast-wcag( $color ) );
             }
         }
@@ -26415,13 +26488,16 @@ $bottom-nav-flat-border: $component-border !default;
         );
 
         .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-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) );
                 } @else {
@@ -26681,7 +26757,8 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         );
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             @include box-shadow( $breadcrumb-focused-shadow );
         }
     }
@@ -26697,7 +26774,8 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 
         // Hovered state
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             @include fill(
                 $breadcrumb-link-hovered-text,
                 $breadcrumb-link-hovered-bg,
@@ -26707,7 +26785,8 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 
         // Focused state
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             @include fill(
                 $breadcrumb-link-focused-text,
                 $breadcrumb-link-focused-bg,
@@ -26728,7 +26807,8 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 
         // Hovered state
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             @include fill(
                 $breadcrumb-root-link-hovered-text,
                 $breadcrumb-root-link-hovered-bg,
@@ -26738,7 +26818,8 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 
         // Focused state
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             @include fill(
                 $breadcrumb-root-link-focused-text,
                 $breadcrumb-root-link-focused-bg,
@@ -26886,7 +26967,8 @@ $pager-dropdown-width: 5em !default;
 
             // Focused state
             &:focus,
-            &.k-state-focus {
+            &.k-state-focus ,
+            &.k-focus {
                 z-index: 3;
             }
         }
@@ -26935,7 +27017,8 @@ $pager-dropdown-width: 5em !default;
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             color: inherit;
         }
     }
@@ -26984,7 +27067,8 @@ $pager-dropdown-width: 5em !default;
         }
 
         // Selected state
-        .k-state-selected {
+        .k-state-selected ,
+        .k-selected {
             cursor: inherit;
             z-index: 2;
         }
@@ -27150,7 +27234,8 @@ $pager-dropdown-width: 5em !default;
         &:focus,
         &.k-focus,
         &.k-state-focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             @include fill( $bg: $pager-focus-bg );
             @include box-shadow( $pager-focus-shadow );
         }
@@ -27165,7 +27250,8 @@ $pager-dropdown-width: 5em !default;
         );
 
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             @include fill(
                 $pager-item-hover-text,
                 $pager-item-hover-bg,
@@ -27173,7 +27259,8 @@ $pager-dropdown-width: 5em !default;
             );
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             @include fill(
                 $pager-item-selected-text,
                 $pager-item-selected-bg,
@@ -27182,7 +27269,8 @@ $pager-dropdown-width: 5em !default;
         }
 
         &:focus,
-        &.k-state-focus {
+        &.k-state-focus ,
+        &.k-focus {
             background-color: $pager-item-focus-bg;
             @include box-shadow( $pager-item-focus-shadow );
         }
@@ -27205,7 +27293,8 @@ $pager-dropdown-width: 5em !default;
             );
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 @include fill(
                     $pager-number-hover-text,
                     $pager-number-hover-bg,
@@ -27214,12 +27303,14 @@ $pager-dropdown-width: 5em !default;
             }
 
             &:focus,
-            &.k-state-focus {
+            &.k-state-focus ,
+            &.k-focus {
                 background-color: $pager-number-focus-bg;
                 @include box-shadow( $pager-number-focus-shadow );
             }
 
-            &.k-state-selected {
+            &.k-state-selected ,
+            &.k-selected {
                 @include fill(
                     $pager-number-selected-text,
                     $pager-number-selected-bg,
@@ -27251,7 +27342,8 @@ $pager-dropdown-width: 5em !default;
                 );
 
                 &:hover,
-                &.k-state-hover {
+                &.k-state-hover ,
+                &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
                         $dropdownlist-hovered-bg,
@@ -27271,14 +27363,16 @@ $pager-dropdown-width: 5em !default;
                 .k-link {
 
                     &:hover,
-                    &.k-state-hover {
+                    &.k-state-hover ,
+                    &.k-hover {
                         @include fill(
                             $kendo-list-item-hover-text,
                             $kendo-list-item-hover-bg
                         );
                     }
 
-                    &.k-state-selected {
+                    &.k-state-selected ,
+                    &.k-selected {
                         @include fill(
                             $kendo-list-item-selected-text,
                             $kendo-list-item-selected-bg
@@ -27564,7 +27658,8 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
             opacity: $stepper-optional-label-opacity;
         }
         .k-step-disabled .k-step-label-optional,
-        &.k-state-disabled .k-step-label-optional {
+        &.k-state-disabled .k-step-label-optional ,
+        &.k-disabled .k-step-label-optional {
             color: inherit;
         }
 
@@ -27896,7 +27991,8 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
                 $bg: $stepper-progressbar-bg
             );
 
-            .k-state-selected {
+            .k-state-selected ,
+            .k-selected {
                 @include fill(
                     $color: $stepper-progressbar-fill-text,
                     $bg: $stepper-progressbar-fill-bg
@@ -28146,12 +28242,14 @@ $tabstrip-content-border-focused: $component-text !default;
         position: relative;
         z-index: 1;
 
-        &.k-state-active {
+        &.k-state-active ,
+        &.k-active {
             display: block;
         }
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             outline-width: 1px;
             outline-style: dotted;
             outline-offset: -1px;
@@ -28239,7 +28337,8 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-left: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active {
+            .k-item.k-state-active ,
+            .k-item.k-active {
                 border-bottom-color: transparent;
             }
         }
@@ -28268,7 +28367,8 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-left: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active {
+            .k-item.k-state-active ,
+            .k-item.k-active {
                 border-top-color: transparent;
             }
         }
@@ -28301,7 +28401,8 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-top: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active {
+            .k-item.k-state-active ,
+            .k-item.k-active {
                 border-right-color: transparent;
             }
         }
@@ -28336,7 +28437,8 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-top: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active {
+            .k-item.k-state-active ,
+            .k-item.k-active {
                 border-left-color: transparent;
             }
         }
@@ -28381,7 +28483,8 @@ $tabstrip-content-border-focused: $component-text !default;
                     border-left-width: $tabstrip-indicator-size;
                 }
             }
-            .k-item.k-state-active::after {
+            .k-item.k-state-active::after ,
+            .k-item.k-active::after {
                 display: block;
             }
 
@@ -28475,7 +28578,8 @@ $tabstrip-content-border-focused: $component-text !default;
             );
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 @include fill(
                     $tabstrip-item-hovered-text,
                     $tabstrip-item-hovered-bg,
@@ -28486,7 +28590,9 @@ $tabstrip-content-border-focused: $component-text !default;
 
             &:active,
             &.k-state-active,
-            &.k-state-selected {
+            &.k-active,
+            &.k-state-selected ,
+            &.k-selected {
                 @include fill(
                     $tabstrip-item-selected-text,
                     $tabstrip-item-selected-bg,
@@ -28496,7 +28602,8 @@ $tabstrip-content-border-focused: $component-text !default;
             }
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
 
@@ -28518,7 +28625,8 @@ $tabstrip-content-border-focused: $component-text !default;
         );
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
     }
@@ -28528,7 +28636,8 @@ $tabstrip-content-border-focused: $component-text !default;
     @if ($tabstrip-indicator-size) {
 
         .k-tabstrip-items-wrapper {
-            .k-item.k-state-active::after {
+            .k-item.k-state-active::after ,
+            .k-item.k-active::after {
                 border-color: $tabstrip-indicator-color;
             }
         }
@@ -28633,7 +28742,8 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
             justify-content: space-between;
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 outline-width: 1px;
                 outline-style: dotted;
                 outline-offset: -1px;
@@ -28729,12 +28839,14 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 @include exports("wizard/theme") {
     .k-wizard-step {
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             outline-color: $wizard-step-border-focused;
         }
 
         .k-ie &:focus,
-        .k-ie &.k-state-focused {
+        .k-ie &.k-state-focused ,
+        .k-ie &.k-focus {
             @include box-shadow($wizard-focused-shadow);
             outline: none;
         }
@@ -28904,7 +29016,8 @@ $expander-content-padding-y: $padding-y * 6 !default;
             $expander-border
         );
 
-        &.k-state-focus {
+        &.k-state-focus ,
+        &.k-focus {
             box-shadow: $expander-focus-shadow;
         }
     }
@@ -28918,12 +29031,14 @@ $expander-content-padding-y: $padding-y * 6 !default;
         outline: none;
 
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             background-color: $expander-header-hover-bg;
         }
 
         // Should be removed
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             background-color: $expander-header-focused-bg;
             box-shadow: $expander-header-focused-shadow;
         }
@@ -29295,7 +29410,8 @@ $panelbar-header-expanded-gradient: null !default;
 
             // Hover
             > .k-link:hover,
-            > .k-link.k-state-hover {
+            > .k-link.k-state-hover ,
+            > .k-link.k-hover {
                 @include fill(
                     $panelbar-header-hovered-text,
                     $panelbar-header-hovered-bg,
@@ -29307,7 +29423,9 @@ $panelbar-header-expanded-gradient: null !default;
             // Focus
             > .k-link:focus,
             > .k-link.k-state-focus,
-            > .k-link.k-state-focused {
+            > .k-link.k-focus,
+            > .k-link.k-state-focused ,
+            > .k-link.k-focus {
                 @include fill(
                     $panelbar-header-focused-text,
                     $panelbar-header-focused-bg,
@@ -29319,7 +29437,8 @@ $panelbar-header-expanded-gradient: null !default;
 
             // Focus & Hover
             > .k-link:focus:hover,
-            > .k-link.k-state-focus.k-state-hover {
+            > .k-link.k-state-focus.k-state-hover ,
+            > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-header-hovered-focused-text,
                     $panelbar-header-hovered-focused-bg,
@@ -29329,7 +29448,8 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected
-            > .k-link.k-state-selected {
+            > .k-link.k-state-selected ,
+            > .k-link.k-selected {
                 @include fill(
                     $panelbar-header-selected-text,
                     $panelbar-header-selected-bg,
@@ -29345,7 +29465,9 @@ $panelbar-header-expanded-gradient: null !default;
 
             // Selected Hover
             > .k-link.k-state-selected:hover,
-            > .k-link.k-state-selected.k-state-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,
                     $panelbar-header-selected-hovered-bg,
@@ -29356,8 +29478,11 @@ $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-state-selected.k-state-focused {
+            > .k-link.k-selected.k-focus,
+            > .k-link.k-state-selected.k-state-focused ,
+            > .k-link.k-selected.k-focused {
                 @include fill(
                     $panelbar-header-selected-focused-text,
                     $panelbar-header-selected-focused-bg,
@@ -29368,8 +29493,11 @@ $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-state-selected.k-state-hover.k-state-focused {
+            > .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 {
                 @include fill(
                     $panelbar-header-selected-hovered-focused-text,
                     $panelbar-header-selected-hovered-focused-bg,
@@ -29387,8 +29515,10 @@ $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-state-hover ,
+            > .k-panelbar-item > .k-link.k-hover {
                 @include fill(
                     $panelbar-item-hovered-text,
                     $panelbar-item-hovered-bg,
@@ -29400,10 +29530,14 @@ $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-state-focused {
+            > .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,
                     $panelbar-item-focused-bg,
@@ -29416,8 +29550,10 @@ $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-state-focus.k-state-hover ,
+            > .k-panelbar-item > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-item-hovered-focused-text,
                     $panelbar-item-hovered-focused-bg,
@@ -29428,7 +29564,9 @@ $panelbar-header-expanded-gradient: null !default;
 
             // Selected
             > .k-item > .k-link.k-state-selected,
-            > .k-panelbar-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,
                     $panelbar-item-selected-bg,
@@ -29439,9 +29577,13 @@ $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-state-selected.k-state-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,
                     $panelbar-item-selected-hovered-bg,
@@ -29452,11 +29594,17 @@ $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-item > .k-link.k-state-selected.k-state-focused {
+            > .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 {
                 @include fill(
                     $panelbar-item-selected-focused-text,
                     $panelbar-item-selected-focused-bg,
@@ -29467,11 +29615,17 @@ $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-panelbar-item > .k-link.k-selected:focus:hover,
             > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
-            > .k-item > .k-link.k-state-selected.k-state-focused.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 {
                 @include fill(
                     $panelbar-item-selected-hovered-focused-text,
                     $panelbar-item-selected-hovered-focused-bg,
@@ -29755,6 +29909,7 @@ $splitbar-selected-text: $primary-contrast !default;
     }
     .k-splitbar:hover,
     .k-splitbar.k-state-hover,
+    .k-splitbar.k-hover,
     .k-splitbar-horizontal-hover,
     .k-splitbar-vertical-hover {
         color: $splitbar-hover-text;
@@ -29762,7 +29917,9 @@ $splitbar-selected-text: $primary-contrast !default;
     }
     .k-splitbar:focus,
     .k-splitbar.k-state-focus,
-    .k-splitbar.k-state-focused {
+    .k-splitbar.k-focus,
+    .k-splitbar.k-state-focused ,
+    .k-splitbar.k-focus {
         color: $splitbar-selected-text;
         background: $splitbar-selected-bg;
     }
@@ -29874,7 +30031,8 @@ $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-state-focused ,
+    .k-tilelayout-item.k-focus {
         @include box-shadow($tilelayout-card-focus-shadow);
     }
 
@@ -30549,11 +30707,13 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
         .k-column-menu {
 
-            .k-listgroup-item.k-state-selected {
+            .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-state-selected .k-link ,
+            .k-listgroup-item.k-selected .k-link {
                 color: inherit;
             }
         }
@@ -32323,27 +32483,33 @@ $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-state-hover ,
+        tbody tr:not(.k-detail-row).k-hover {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
 
         // Selected state
         td.k-state-selected,
-        tr.k-state-selected > td {
+        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.k-focus,
         th.k-state-focused,
+        th.k-focus,
         th: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-state-focused ,
+        .k-grid-pager.k-focus {
             box-shadow: $grid-focused-shadow;
         }
 
@@ -32385,17 +32551,21 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
 
             // Selected state
-            .k-state-selected td {
+            .k-state-selected td ,
+            .k-selected td {
                 @include fill( $bg: $grid-sticky-selected-bg );
             }
 
-            .k-state-selected.k-alt td {
+            .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-state-selected.k-state-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 );
             }
         }
@@ -32436,10 +32606,12 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
             &:focus,
             &.k-state-focus,
+            &.k-focus,
             &.k-state-border-down {
                 box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
             }
-            &.k-state-active {
+            &.k-state-active ,
+            &.k-active {
                 color: $selected-text;
                 background-color: $selected-bg;
             }
@@ -32495,14 +32667,20 @@ $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,
-        td.k-grid-content-sticky.k-state-selected {
+        &.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-alt td.k-grid-content-sticky.k-state-selected {
+        &.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 );
         }
 
@@ -32511,18 +32689,26 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         &:hover .k-grid-content-sticky,
         &:hover .k-grid-row-sticky,
         &.k-state-hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-row-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,
-        &.k-state-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;
         }
     }
@@ -32535,7 +32721,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             background-color: $grid-sticky-bg;
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 background-color: $grid-sticky-hovered-bg;
             }
         }
@@ -32548,7 +32735,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
 
             &:hover td,
-            &.k-state-hover td {
+            &.k-state-hover td ,
+            &.k-hover td {
                 background-color: $grid-sticky-hovered-bg;
             }
         }
@@ -32560,43 +32748,66 @@ $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-state-selected.k-grid-content-sticky {
+        .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-alt .k-state-selected.k-grid-content-sticky {
+        .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-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.k-state-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;
         }
     }
@@ -32607,7 +32818,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
 
         &:hover .k-grid-content-sticky,
-        &.k-state-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 );
         }
     }
@@ -32620,12 +32832,14 @@ $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-state-focus ,
+    .k-columnmenu-item.k-focus {
         @include box-shadow( $kendo-list-item-focus-shadow );
     }
 
     .k-columnmenu-item {
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
                 $kendo-list-item-selected-bg
@@ -32650,14 +32864,16 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                 );
 
                 &:hover,
-                &.k-state-hover {
+                &.k-state-hover ,
+                &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
                         $kendo-list-item-hover-bg
                     );
                 }
 
-                &.k-state-selected {
+                &.k-state-selected ,
+                &.k-selected {
                     @include fill(
                         $kendo-list-item-selected-text,
                         $kendo-list-item-selected-bg
@@ -32665,7 +32881,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                 }
 
                 &:focus,
-                &.k-state-focused {
+                &.k-state-focused ,
+                &.k-focus {
                     @include box-shadow( $kendo-list-item-focus-shadow );
                 }
             }
@@ -32700,11 +32917,14 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
         // Selected state
         td.k-state-selected,
-        tr.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-state-selected > td ,
+        tr.k-selected > td {
             color: inherit;
             background-color: transparent;
         }
@@ -32713,8 +32933,11 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         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,
+            td.k-focus,
             th.k-state-focused,
+            th.k-focus,
             th:focus,
             .k-master-row > td:focus,
             .k-grouping-row > td:focus,
@@ -32725,7 +32948,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
 
             tr:hover,
-            tr.k-state-hover {
+            tr.k-state-hover ,
+            tr.k-hover {
                 .k-grid-header-sticky,
                 .k-grid-footer-sticky {
                     color: inherit;
@@ -32734,7 +32958,9 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
 
             td.k-state-focused,
+            td.k-focus,
             th.k-state-focused,
+            th.k-focus,
             th:focus,
             .k-master-row > td:focus,
             .k-grouping-row > td:focus,
@@ -32750,7 +32976,8 @@ $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-state-focused ,
+        .k-grid-pager.k-focus {
             color: inherit;
         }
 
@@ -32803,7 +33030,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
             .k-group-footer {
                 &:hover td,
-                &.k-state-hover td {
+                &.k-state-hover td ,
+                &.k-hover td {
                     color: inherit;
                     @include fill( $bg: $grid-sticky-footer-hovered-bg );
                 }
@@ -32853,13 +33081,15 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
             &:focus,
             &.k-state-focus,
+            &.k-focus,
             &.k-state-border-down {
                 color: $grid-text;
                 background-color: $grid-filter-button-focus;
                 box-shadow: none;
             }
 
-            &.k-state-active {
+            &.k-state-active ,
+            &.k-active {
                 color: $primary-contrast;
                 background-color: $primary;
             }
@@ -32899,7 +33129,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
 
         &:hover td,
-        &.k-state-hover td {
+        &.k-state-hover td ,
+        &.k-hover td {
             @include fill( $bg: $grid-sticky-footer-hovered-bg );
         }
     }
@@ -32931,7 +33162,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
     }
 
     .k-columnmenu-item {
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
                 $kendo-list-item-selected-bg
@@ -32939,7 +33171,8 @@ $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-state-focus ,
+    .k-columnmenu-item.k-focus {
         background: $kendo-list-item-hover-bg;
     }
 
@@ -32947,7 +33180,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
         .k-item {
             // Selected state
-            &.k-state-selected {
+            &.k-state-selected ,
+            &.k-selected {
                 background: $kendo-list-item-hover-bg;
             }
         }
@@ -33167,7 +33401,8 @@ $listview-item-focus-shadow: null !default;
     // Listview content
     .k-listview-content {
 
-        > .k-state-focused {
+        > .k-state-focused ,
+        > .k-focus {
             @include fill(
                 $listview-item-focus-text,
                 $listview-item-focus-bg,
@@ -33176,7 +33411,8 @@ $listview-item-focus-shadow: null !default;
             @include box-shadow( $listview-item-focus-shadow );
         }
 
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             @include fill(
                 $listview-item-selected-text,
                 $listview-item-selected-bg,
@@ -33198,7 +33434,8 @@ $listview-item-focus-shadow: null !default;
 
     // Listview content
     .k-listview-content {}
-    .k-listview-content > .k-state-selected.k-state-focused {
+    .k-listview-content > .k-state-selected.k-state-focused ,
+    .k-listview-content > .k-selected.k-focused {
         background-color: rgba( contrast-wcag( $listview-bg ), .12 );
     }
 
@@ -33570,7 +33807,8 @@ $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-state-disabled ,
+        .k-disabled {
             pointer-events: auto;
         }
     }
@@ -34131,7 +34369,8 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             background-position: 50% 50%;
 
             &:hover div,
-            &.k-state-hovered div {
+            &.k-state-hovered div ,
+            &.k-hover div {
                 margin: 0;
                 align-self: center;
                 opacity: 1;
@@ -34196,7 +34435,8 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         .k-spreadsheet-insert-image-dialog {
             .k-spreadsheet-has-image {
                 &:hover,
-                &.k-state-hovered {
+                &.k-state-hovered ,
+                &.k-hover {
                     border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
                 }
             }
@@ -34316,7 +34556,8 @@ $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-state-active::after ,
+        .k-tabstrip-items .k-item.k-active::after {
             border-color: $primary-contrast;
         }
     }
@@ -34338,7 +34579,8 @@ $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-state-active ,
+        .k-tabstrip-items .k-item.k-active {
             border-color: $secondary;
         }
     }
@@ -34459,7 +34701,8 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         );
         box-shadow: inset 0 0 0 1px $kendo-button-border;
 
-        &.k-state-active {
+        &.k-state-active ,
+        &.k-active {
             @include fill(
                 $kendo-button-active-text,
                 $kendo-button-active-bg,
@@ -34504,12 +34747,14 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
 
         .k-spreadsheet-has-image {
             &:hover,
-            &.k-state-hovered {
+            &.k-state-hovered ,
+            &.k-hover {
                 box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
             }
 
             &:hover div,
-            &.k-state-hovered div {
+            &.k-state-hovered div ,
+            &.k-hover div {
                 color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
             }
         }
@@ -34543,7 +34788,8 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         .k-button {}
 
         .k-button:hover,
-        .k-button.k-state-hover {
+        .k-button.k-state-hover ,
+        .k-button.k-hover {
             @include fill(
                 $kendo-list-item-hover-text,
                 $kendo-list-item-hover-bg
@@ -34551,7 +34797,9 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         }
         .k-button:active,
         .k-button.k-state-active,
-        .k-button.k-state-selected {
+        .k-button.k-active,
+        .k-button.k-state-selected ,
+        .k-button.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
                 $kendo-list-item-selected-bg
@@ -35510,10 +35758,13 @@ $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-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 {
         @include fill (
             $pivotgrid-hover-text,
@@ -35524,6 +35775,7 @@ $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-master-row > .k-pivotgrid-cell:focus,
     .k-grouping-row > .k-pivotgrid-cell:focus,
@@ -35534,7 +35786,9 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
 
     // Selected state
     .k-pivotgrid-cell.k-state-selected,
-    .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell {
+    .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,
             $pivotgrid-selected-bg,
@@ -35712,6 +35966,7 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
 
     // 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-master-row > .k-pivotgrid-cell:focus,
     .k-grouping-row > .k-pivotgrid-cell:focus,
@@ -35779,7 +36034,8 @@ $treelist-footer-row-border-width: 1px !default;
         }
 
         .k-treelist-dragging,
-        .k-treelist-dragging .k-state-hover {
+        .k-treelist-dragging .k-state-hover ,
+        .k-treelist-dragging .k-hover {
             cursor: default;
         }
 
@@ -36554,7 +36810,8 @@ $filemanager-preview-icon-border: null !default;
                 );
             }
 
-            &.k-state-selected .k-file-icon {
+            &.k-state-selected .k-file-icon ,
+            &.k-selected .k-file-icon {
                 @include fill(
                     inherit,
                     transparent,
@@ -37018,7 +37275,8 @@ $taskboard-drag-placeholder-border: $component-border !default;
         );
     }
     .k-taskboard-column:focus,
-    .k-taskboard-column.k-state-focus {
+    .k-taskboard-column.k-state-focus ,
+    .k-taskboard-column.k-focus {
         @include fill(
             $taskboard-column-focus-text,
             $taskboard-column-focus-bg,
@@ -37220,7 +37478,8 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
                 pointer-events: auto;
             }
 
-            .k-editor-content.k-state-focused {
+            .k-editor-content.k-state-focused ,
+            .k-editor-content.k-focus {
                 outline-width: 1px;
                 outline-style: dashed;
             }
@@ -37673,7 +37932,8 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             display: block;
             margin: auto;
 
-            &.k-state-selected {
+            &.k-state-selected ,
+            &.k-selected {
                 color: inherit;
                 border-width: 0;
                 background-image: none;
@@ -37983,7 +38243,8 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
 
         // Hover & Actve state
         &:hover,
-        &.k-state-active {
+        &.k-state-active ,
+        &.k-active {
             border-color: $panel-border;
         }
     }
@@ -38000,7 +38261,8 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
 
     // Insert table
     .k-ct-popup {
-        .k-state-selected {
+        .k-state-selected ,
+        .k-selected {
             @include fill( $selected-text, $selected-bg, $selected-border, none );
         }
     }
@@ -38555,7 +38817,8 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                 }
             }
 
-            tr.k-state-selected > td:last-child {
+            tr.k-state-selected > td:last-child ,
+            tr.k-selected > td:last-child {
                 background: transparent;
             }
 
@@ -38824,7 +39087,8 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         border-color: currentColor;
         position: absolute;
     }
-    .k-gantt-line.k-state-selected {
+    .k-gantt-line.k-state-selected ,
+    .k-gantt-line.k-selected {
         z-index: 3;
     }
 
@@ -38897,7 +39161,8 @@ $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-state-hover::before ,
+    .k-task-dot.k-hover::before {
         border-width: 1px;
     }
     .k-task-start { left: 0; }
@@ -39384,7 +39649,8 @@ $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-state-selected .k-task-milestone-content ,
+            .k-task-milestone.k-selected .k-task-milestone-content {
                 @include fill(
                     $bg: $gantt-milestone-selected-bg,
                     $border: $gantt-milestone-selected-border
@@ -39398,7 +39664,8 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                 stroke: $gantt-line-fill;
             }
 
-            polyline.k-state-selected {
+            polyline.k-state-selected ,
+            polyline.k-selected {
                 stroke: $gantt-line-selected-fill;
             }
         }
@@ -39451,7 +39718,8 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         );
     }
     .k-task-dot:hover::before,
-    .k-task-dot.k-state-hover::before {
+    .k-task-dot.k-state-hover::before ,
+    .k-task-dot.k-hover::before {
         @include fill(
             $bg: $gantt-dot-hover-bg,
             $border: $gantt-dot-hover-border
@@ -39476,7 +39744,8 @@ $gantt-validation-tooltip-invalid-border: $error !default;
             );
         }
     }
-    .k-task-milestone.k-state-selected {
+    .k-task-milestone.k-state-selected ,
+    .k-task-milestone.k-selected {
         background-image: none;
         @include fill(
             $bg: $gantt-milestone-selected-bg,
@@ -39506,7 +39775,8 @@ $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-state-selected ,
+    .k-task-summary.k-selected {
         color: $gantt-summary-selected-bg;
 
         .k-task-summary-complete {
@@ -39549,7 +39819,8 @@ $gantt-validation-tooltip-invalid-border: $error !default;
             $bg: $gantt-advanced-bg
         );
     }
-    .k-task-single.k-state-selected {
+    .k-task-single.k-state-selected ,
+    .k-task-single.k-selected {
         @include fill(
             $gantt-task-selected-text,
             $gantt-task-selected-bg,
@@ -39565,7 +39836,8 @@ $gantt-validation-tooltip-invalid-border: $error !default;
     .k-gantt-line {
         color: $gantt-line-fill;
     }
-    .k-gantt-line.k-state-selected {
+    .k-gantt-line.k-state-selected ,
+    .k-gantt-line.k-selected {
         color: $gantt-line-selected-fill;
     }
 
@@ -40245,7 +40517,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             }
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 .k-event-delete {
                     opacity: 1;
                 }
@@ -40310,7 +40583,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
 
         // Hover
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             .k-event-actions .k-event-delete,
             .k-resize-handle {
                 visibility: visible;
@@ -40568,9 +40842,11 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             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-state-hover .k-event-delete ,
+        .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
             visibility: visible;
         }
     }
@@ -40643,7 +40919,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
                 position: relative;
             }
 
-            td.k-state-selected {
+            td.k-state-selected ,
+            td.k-selected {
                 background-color: inherit;
             }
         }
@@ -40940,7 +41217,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
     kendo-scheduler .k-event,
     .k-event {
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             &::before {
                 display: block;
             }
@@ -41156,7 +41434,9 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
     }
 
     .k-scheduler-layout td.k-state-selected,
-    .k-scheduler-layout .k-scheduler-cell.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);
     }
 
@@ -41178,7 +41458,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         );
         @include box-shadow( $scheduler-event-shadow );
 
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             @include fill(
                 $scheduler-event-hover-text,
                 $scheduler-event-hover-bg,
@@ -41188,7 +41469,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             @include box-shadow( $scheduler-event-hover-shadow );
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             @include fill(
                 $scheduler-event-selected-text,
                 $scheduler-event-selected-bg,
@@ -41255,8 +41537,10 @@ $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-state-hover ,
+        .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
                 $hovered-text,
                 $hovered-bg,
@@ -41268,7 +41552,9 @@ $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-state-hover .k-scheduler-groupcolumn {
+        .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,
                 $scheduler-bg,
@@ -41277,11 +41563,14 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         }
 
         // Selected
-        .k-scheduler-content tr.k-state-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-state-selected .k-scheduler-groupcolumn {
+        .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;
         }
     }
@@ -41298,7 +41587,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             @include fill( $bg: $scheduler-yearview-indicator-bg );
         }
 
-        .k-state-selected .k-day-indicator {
+        .k-state-selected .k-day-indicator ,
+        .k-selected .k-day-indicator {
             @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
         }
     }
@@ -41635,7 +41925,8 @@ $chat-quick-reply-hover-border: $primary !default;
 
 
         // Message states
-        .k-message.k-state-selected {
+        .k-message.k-state-selected ,
+        .k-message.k-selected {
             margin-bottom: $chat-item-spacing-y;
             border: 0;
             color: inherit;
@@ -41764,6 +42055,7 @@ $chat-quick-reply-hover-border: $primary !default;
 
         &:focus,
         &.k-state-focus,
+        &.k-focus,
         &:focus-within {
             outline: 0;
             box-shadow: none;
@@ -41843,7 +42135,8 @@ $chat-quick-reply-hover-border: $primary !default;
             flex: 0 0 auto;
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             background: none;
         }
     }
@@ -42079,7 +42372,8 @@ $chat-quick-reply-hover-border: $primary !default;
         .k-bubble:hover {
             @include box-shadow( $chat-bubble-hover-shadow );
         }
-        .k-state-selected .k-bubble {
+        .k-state-selected .k-bubble ,
+        .k-selected .k-bubble {
             @include box-shadow( $chat-bubble-selected-shadow );
         }
 
@@ -42094,7 +42388,8 @@ $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-state-selected .k-bubble ,
+        .k-alt .k-selected .k-bubble {
             @include box-shadow( $chat-alt-bubble-selected-shadow );
         }
 
@@ -42856,11 +43151,13 @@ $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-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-state-focus .k-timeline-circle::before ,
+    .k-timeline-track-item.k-focus .k-timeline-circle::before {
         opacity: $kendo-flat-button-focus-opacity;
     }
 }
@@ -42911,7 +43208,8 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
             color: $body-text;
         }
 
-        .k-timeline-arrow.k-state-disabled {
+        .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;
             background-color: $timeline-track-arrow-disabled-bg;
@@ -42931,7 +43229,8 @@ $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-state-focus .k-timeline-circle ,
+    .k-timeline-track-item.k-focus .k-timeline-circle {
         @include box-shadow( $timeline-track-item-focus-shadow );
     }
 }
@@ -43642,7 +43941,8 @@ $scrollview-transition-timing-function: ease-in-out !default;
         -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
 
         &:focus,
-        &.k-state-focus {
+        &.k-state-focus ,
+        &.k-focus {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
 
@@ -43652,7 +43952,8 @@ $scrollview-transition-timing-function: ease-in-out !default;
         }
 
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
 
@@ -43671,13 +43972,15 @@ $scrollview-transition-timing-function: ease-in-out !default;
         }
 
         &:focus,
-        &.k-state-focused {
+        &.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-state-hover ,
+    .k-scrollview-nav > .k-link.k-hover {
         box-shadow: $scrollview-pagebutton-shadow;
     }
 
@@ -44497,7 +44800,8 @@ $treemap-line-height: $line-height !default;
         .k-leaf.k-inverse {
             color: $component-text;
         }
-        .k-leaf.k-state-hover {
+        .k-leaf.k-state-hover ,
+        .k-leaf.k-hover {
             box-shadow: inset 0 0 0 3px $component-border;
         }
     }
@@ -44995,7 +45299,8 @@ $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-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 );
     }