@progress/kendo-theme-bootstrap 5.4.0 → 5.4.2-dev.1

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;
     }
@@ -3765,6 +3767,7 @@ $display4-letter-spacing: null !default;
 
     // Disabled state
     .k-state-disabled,
+    .k-disabled,
     .k-widget[disabled],
     .k-disabled {
         @include disabled( $disabled-styling );
@@ -11601,6 +11604,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
+
+    // Angular specific
+    .k-input > kendo-popup,
+    .k-picker > kendo-popup {
+        position: fixed;
+    }
+
+
 }
 
 
@@ -17255,7 +17266,8 @@ $progressbar-chunk-border: $body-bg !default;
 
 
         // Selection
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             border-width: 0;
             border-style: solid;
             display: flex;
@@ -17325,7 +17337,8 @@ $progressbar-chunk-border: $body-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;
@@ -17351,7 +17364,8 @@ $progressbar-chunk-border: $body-bg !default;
         // Horizontal reverse
         &.k-progressbar-reverse {
 
-            > .k-state-selected {
+            > .k-state-selected ,
+            > .k-selected {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
             }
@@ -17375,7 +17389,8 @@ $progressbar-chunk-border: $body-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;
@@ -17404,7 +17419,8 @@ $progressbar-chunk-border: $body-bg !default;
         &.k-progressbar-reverse {
             flex-direction: column;
 
-            > .k-state-selected {
+            > .k-state-selected ,
+            > .k-selected {
                 flex-direction: column;
                 align-self: flex-start;
             }
@@ -17416,6 +17432,7 @@ $progressbar-chunk-border: $body-bg !default;
     .k-progressbar-indeterminate {
         .k-progress-status-wrap,
         .k-state-selected,
+        .k-selected,
         .k-item {
             display: none;
         }
@@ -17426,7 +17443,9 @@ $progressbar-chunk-border: $body-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;
         }
     }
@@ -17454,7 +17473,8 @@ $progressbar-chunk-border: $body-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;
         }
@@ -17463,7 +17483,8 @@ $progressbar-chunk-border: $body-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;
         }
     }
@@ -17471,11 +17492,13 @@ $progressbar-chunk-border: $body-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;
         }
     }
@@ -17497,7 +17520,8 @@ $progressbar-chunk-border: $body-bg !default;
     .k-progressbar {
         @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
 
-        .k-state-selected {
+        .k-state-selected ,
+        .k-selected {
             @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
         }
 
@@ -17866,7 +17890,8 @@ $kendo-radio-ripple-opacity: .25 !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 {
@@ -17929,7 +17954,8 @@ $kendo-radio-ripple-opacity: .25 !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,
@@ -17940,7 +17966,8 @@ $kendo-radio-ripple-opacity: .25 !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 );
     }
@@ -17971,7 +17998,8 @@ $kendo-radio-ripple-opacity: .25 !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 );
     }
@@ -18147,7 +18175,8 @@ $slider-disabled-opacity: null !default;
         }
 
 
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             .k-tick,
             .k-slider-track,
             .k-draghandle {
@@ -18593,18 +18622,21 @@ $slider-disabled-opacity: null !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;
         }
     }
@@ -19153,7 +19185,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;
@@ -19352,7 +19385,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(
@@ -19363,12 +19398,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;
@@ -19468,6 +19506,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 {
@@ -19667,7 +19706,8 @@ $time-list-focused-bg: rgba(0, 0, 0, .02) !default;
             display: block;
         }
 
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             &::before,
             &::after {
                 display: block;
@@ -19811,7 +19851,8 @@ $time-list-focused-bg: rgba(0, 0, 0, .02) !default;
             color: $time-list-title-text;
         }
 
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             .k-title {
                 color: $time-list-title-focus-text;
             }
@@ -20135,8 +20176,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;
         }
@@ -20167,6 +20211,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 {
@@ -22159,14 +22204,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;
                 }
             }
@@ -22176,17 +22223,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;
         }
@@ -23427,7 +23477,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;
         }
     }
@@ -23474,11 +23525,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;
             }
 
@@ -23570,6 +23623,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;
@@ -24538,7 +24592,8 @@ $actionsheet-item-disabled-shadow: null !default;
 
         // Hover state
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             @include fill(
                 $actionsheet-item-hover-text,
                 $actionsheet-item-hover-bg,
@@ -24551,7 +24606,8 @@ $actionsheet-item-disabled-shadow: null !default;
 
         // Focus state
         &:focus,
-        &.k-state-focus {
+        &.k-state-focus ,
+        &.k-focus {
             @include fill(
                 $actionsheet-item-focus-text,
                 $actionsheet-item-focus-bg,
@@ -24564,7 +24620,8 @@ $actionsheet-item-disabled-shadow: null !default;
 
         // Disabed state
         &:disabled,
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             @include fill(
                 $actionsheet-item-disabled-text,
                 $actionsheet-item-disabled-bg,
@@ -24808,7 +24865,8 @@ $actionsheet-item-disabled-shadow: null !default;
 
     .k-window {
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             @include box-shadow( $window-focused-shadow );
         }
     }
@@ -25311,29 +25369,34 @@ $drawer-selected-hover-text: $selected-text !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;
             }
@@ -26589,7 +26652,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;
     }
 
@@ -26636,12 +26700,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 ) );
             }
         }
@@ -26656,13 +26723,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 {
@@ -26917,7 +26987,8 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         text-decoration: $link-decoration;
 
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             text-decoration: $link-hover-decoration;
         }
     }
@@ -26937,7 +27008,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 );
         }
     }
@@ -26953,7 +27025,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,
@@ -26963,7 +27036,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,
@@ -26984,7 +27058,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,
@@ -26994,7 +27069,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,
@@ -27017,7 +27093,8 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
             color: $breadcrumb-active-color;
         }
 
-        .k-state-disabled {
+        .k-state-disabled ,
+        .k-disabled {
             opacity: 1;
             filter: none;
         }
@@ -27159,7 +27236,8 @@ $pager-dropdown-width: 5em !default;
 
             // Focused state
             &:focus,
-            &.k-state-focus {
+            &.k-state-focus ,
+            &.k-focus {
                 z-index: 3;
             }
         }
@@ -27208,7 +27286,8 @@ $pager-dropdown-width: 5em !default;
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             color: inherit;
         }
     }
@@ -27257,7 +27336,8 @@ $pager-dropdown-width: 5em !default;
         }
 
         // Selected state
-        .k-state-selected {
+        .k-state-selected ,
+        .k-selected {
             cursor: inherit;
             z-index: 2;
         }
@@ -27429,7 +27509,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 );
         }
@@ -27444,7 +27525,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,
@@ -27452,7 +27534,8 @@ $pager-dropdown-width: 5em !default;
             );
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             @include fill(
                 $pager-item-selected-text,
                 $pager-item-selected-bg,
@@ -27461,7 +27544,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 );
         }
@@ -27484,7 +27568,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,
@@ -27493,12 +27578,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,
@@ -27530,7 +27617,8 @@ $pager-dropdown-width: 5em !default;
                 );
 
                 &:hover,
-                &.k-state-hover {
+                &.k-state-hover ,
+                &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
                         $dropdownlist-hovered-bg,
@@ -27550,14 +27638,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
@@ -27596,7 +27686,8 @@ $pager-dropdown-width: 5em !default;
                 );
 
                 &:hover,
-                &.k-state-hover {
+                &.k-state-hover ,
+                &.k-hover {
                     @include fill(
                         $pager-text,
                         $pager-item-hover-bg,
@@ -27862,7 +27953,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;
         }
 
@@ -28179,7 +28271,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
@@ -28429,12 +28522,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;
@@ -28522,7 +28617,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;
             }
         }
@@ -28551,7 +28647,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;
             }
         }
@@ -28584,7 +28681,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;
             }
         }
@@ -28619,7 +28717,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;
             }
         }
@@ -28664,7 +28763,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;
             }
 
@@ -28737,7 +28837,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,
@@ -28748,7 +28849,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,
@@ -28758,7 +28861,8 @@ $tabstrip-content-border-focused: $component-text !default;
             }
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
 
@@ -28780,7 +28884,8 @@ $tabstrip-content-border-focused: $component-text !default;
         );
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
     }
@@ -28790,7 +28895,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;
             }
         }
@@ -28807,28 +28913,36 @@ $tabstrip-content-border-focused: $component-text !default;
     .k-tabstrip-top {
 
         > .k-tabstrip-items .k-item.k-state-hover,
-        > .k-tabstrip-items .k-item.k-state-active {
+        > .k-tabstrip-items .k-item.k-hover,
+        > .k-tabstrip-items .k-item.k-state-active ,
+        > .k-tabstrip-items .k-item.k-active {
             border-bottom-color: transparent;
         }
     }
     .k-tabstrip-bottom {
 
         > .k-tabstrip-items .k-item.k-state-hover,
-        > .k-tabstrip-items .k-item.k-state-active {
+        > .k-tabstrip-items .k-item.k-hover,
+        > .k-tabstrip-items .k-item.k-state-active ,
+        > .k-tabstrip-items .k-item.k-active {
             border-top-color: transparent;
         }
     }
     .k-tabstrip-left {
 
         > .k-tabstrip-items .k-item.k-state-hover,
-        > .k-tabstrip-items .k-item.k-state-active {
+        > .k-tabstrip-items .k-item.k-hover,
+        > .k-tabstrip-items .k-item.k-state-active ,
+        > .k-tabstrip-items .k-item.k-active {
             border-right-color: transparent;
         }
     }
     .k-tabstrip-right {
 
         > .k-tabstrip-items .k-item.k-state-hover,
-        > .k-tabstrip-items .k-item.k-state-active {
+        > .k-tabstrip-items .k-item.k-hover,
+        > .k-tabstrip-items .k-item.k-state-active ,
+        > .k-tabstrip-items .k-item.k-active {
             border-left-color: transparent;
         }
     }
@@ -28918,7 +29032,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;
@@ -29014,12 +29129,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;
         }
@@ -29189,7 +29306,8 @@ $expander-content-padding-y: $expander-content-padding-x !default;
             $expander-border
         );
 
-        &.k-state-focus {
+        &.k-state-focus ,
+        &.k-focus {
             box-shadow: $expander-focus-shadow;
         }
     }
@@ -29203,12 +29321,14 @@ $expander-content-padding-y: $expander-content-padding-x !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;
         }
@@ -29579,7 +29699,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,
@@ -29591,7 +29712,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,
@@ -29603,7 +29726,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,
@@ -29613,7 +29737,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,
@@ -29629,7 +29754,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,
@@ -29640,8 +29767,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,
@@ -29652,8 +29782,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,
@@ -29671,8 +29804,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,
@@ -29684,10 +29819,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,
@@ -29700,8 +29839,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,
@@ -29712,7 +29853,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,
@@ -29723,9 +29866,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,
@@ -29736,11 +29883,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,
@@ -29751,11 +29904,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,
@@ -30039,6 +30198,7 @@ $splitbar-selected-text: $selected-text !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;
@@ -30046,7 +30206,9 @@ $splitbar-selected-text: $selected-text !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;
     }
@@ -30158,7 +30320,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);
     }
 
@@ -30833,11 +30996,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;
             }
         }
@@ -32429,28 +32594,35 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
         // 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
         th.k-state-selected,
+        th.k-selected,
         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-focus,
         .k-grid-pager:focus {
             box-shadow: $grid-focused-shadow;
         }
@@ -32484,17 +32656,21 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
 
             // 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 );
             }
         }
@@ -32549,10 +32725,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         .k-hierarchy-cell .k-icon {
             &: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;
             }
@@ -32606,14 +32784,20 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
         // 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 );
         }
 
@@ -32622,18 +32806,26 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         &: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;
         }
     }
@@ -32646,7 +32838,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             background-color: $grid-sticky-bg;
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 background-color: $grid-sticky-hovered-bg;
             }
         }
@@ -32657,7 +32850,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             background-color: $grid-sticky-bg;
 
             &:hover td,
-            &.k-state-hover td {
+            &.k-state-hover td ,
+            &.k-hover td {
                 background-color: $grid-sticky-hovered-bg;
             }
         }
@@ -32669,43 +32863,66 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
         // 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;
         }
     }
@@ -32716,7 +32933,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
 
         &: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 );
         }
     }
@@ -32728,7 +32946,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
 
         &:hover .k-grid-footer-sticky,
-        &.k-state-hover .k-grid-footer-sticky {
+        &.k-state-hover .k-grid-footer-sticky ,
+        &.k-hover .k-grid-footer-sticky {
             @include fill( $bg: $grid-sticky-footer-hovered-bg );
         }
     }
@@ -32770,7 +32989,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         );
     }
     .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 );
     }
 
@@ -32779,7 +32999,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
     }
 
     .k-columnmenu-item {
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
                 $kendo-list-item-selected-bg
@@ -32804,14 +33025,16 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 );
 
                 &: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
@@ -32819,7 +33042,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 }
 
                 &:focus,
-                &.k-state-focused {
+                &.k-state-focused ,
+                &.k-focus {
                     @include box-shadow( $kendo-list-item-focus-shadow );
                 }
             }
@@ -33057,7 +33281,8 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
     // Listview content
     .k-listview-content {
 
-        > .k-state-focused {
+        > .k-state-focused ,
+        > .k-focus {
             @include fill(
                 $listview-item-focus-text,
                 $listview-item-focus-bg,
@@ -33066,7 +33291,8 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
             @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,
@@ -33446,7 +33672,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;
         }
     }
@@ -34007,7 +34234,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;
@@ -34072,7 +34300,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;
                 }
             }
@@ -34248,7 +34477,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,
@@ -34274,7 +34504,8 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         > .k-menu,
         > .k-menu:not(.k-context-menu) {
             .k-item {
-                &.k-state-hover {
+                &.k-state-hover ,
+                &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
                         $kendo-list-item-hover-bg
@@ -34304,12 +34535,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;
             }
         }
@@ -34343,7 +34576,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
@@ -34351,7 +34585,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
@@ -35298,10 +35534,13 @@ $pivotgrid-remove-text: null !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,
@@ -35312,6 +35551,7 @@ $pivotgrid-remove-text: null !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,
@@ -35322,7 +35562,9 @@ $pivotgrid-remove-text: null !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,
@@ -35553,7 +35795,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;
         }
 
@@ -36318,7 +36561,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,
@@ -36781,7 +37025,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,
@@ -36983,7 +37228,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;
             }
@@ -37436,7 +37682,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;
@@ -37658,7 +37905,8 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
 
     kendo-editor {
         &.k-readonly {
-            .k-editor-content.k-state-focused {
+            .k-editor-content.k-state-focused ,
+            .k-editor-content.k-focus {
                 outline-color: $body-text;
             }
         }
@@ -37695,7 +37943,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;
         }
     }
@@ -37712,7 +37961,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 );
         }
     }
@@ -38269,7 +38519,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;
             }
 
@@ -38538,7 +38789,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;
     }
 
@@ -38611,7 +38863,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; }
@@ -39084,7 +39337,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
@@ -39098,7 +39352,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;
             }
         }
@@ -39151,7 +39406,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
@@ -39176,7 +39432,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,
@@ -39206,7 +39463,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 {
@@ -39249,7 +39507,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,
@@ -39265,7 +39524,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;
     }
 
@@ -39923,7 +40183,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             }
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 .k-event-delete {
                     opacity: 1;
                 }
@@ -39988,7 +40249,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;
@@ -40246,9 +40508,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;
         }
     }
@@ -40321,7 +40585,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;
             }
         }
@@ -40702,7 +40967,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);
     }
 
@@ -40724,7 +40991,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,
@@ -40734,7 +41002,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,
@@ -40801,8 +41070,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,
@@ -40814,7 +41085,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,
@@ -40823,11 +41096,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;
         }
     }
@@ -40844,7 +41120,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 );
         }
     }
@@ -41147,7 +41424,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;
@@ -41276,6 +41554,7 @@ $chat-quick-reply-hover-border: $primary !default;
 
         &:focus,
         &.k-state-focus,
+        &.k-focus,
         &:focus-within {
             outline: 0;
             box-shadow: none;
@@ -41355,7 +41634,8 @@ $chat-quick-reply-hover-border: $primary !default;
             flex: 0 0 auto;
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             background: none;
         }
     }
@@ -41591,7 +41871,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 );
         }
 
@@ -41606,7 +41887,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 );
         }
 
@@ -42410,7 +42692,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;
@@ -42430,7 +42713,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 );
     }
 }
@@ -43135,7 +43419,8 @@ $scrollview-transition-timing-function: ease-in-out !default;
         outline-width: 0;
 
         &:focus,
-        &.k-state-focus {
+        &.k-state-focus ,
+        &.k-focus {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
             .k-icon::before {
@@ -43145,7 +43430,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;
 
@@ -43166,13 +43452,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;
     }
 
@@ -43990,7 +44278,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;
         }
     }
@@ -44488,7 +44777,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 );
     }