@progress/kendo-theme-classic 5.4.0 → 5.4.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;
     }
@@ -1754,6 +1756,7 @@ $display4-letter-spacing: null !default;
 
     // Disabled state
     .k-state-disabled,
+    .k-disabled,
     .k-widget[disabled],
     .k-disabled {
         @include disabled( $disabled-styling );
@@ -9555,6 +9558,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
+
+    // Angular specific
+    .k-input > kendo-popup,
+    .k-picker > kendo-popup {
+        position: fixed;
+    }
+
+
 }
 
 
@@ -15121,7 +15132,8 @@ $progressbar-chunk-border: $body-bg !default;
 
 
         // Selection
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             border-width: 0;
             border-style: solid;
             display: flex;
@@ -15191,7 +15203,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;
@@ -15217,7 +15230,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;
             }
@@ -15241,7 +15255,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;
@@ -15270,7 +15285,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;
             }
@@ -15282,6 +15298,7 @@ $progressbar-chunk-border: $body-bg !default;
     .k-progressbar-indeterminate {
         .k-progress-status-wrap,
         .k-state-selected,
+        .k-selected,
         .k-item {
             display: none;
         }
@@ -15292,7 +15309,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;
         }
     }
@@ -15320,7 +15339,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;
         }
@@ -15329,7 +15349,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;
         }
     }
@@ -15337,11 +15358,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;
         }
     }
@@ -15363,7 +15386,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 );
         }
 
@@ -15732,7 +15756,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 {
@@ -15795,7 +15820,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,
@@ -15806,7 +15832,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 );
     }
@@ -15837,7 +15864,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 );
     }
@@ -16007,7 +16035,8 @@ $slider-disabled-opacity: null !default;
         }
 
 
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             .k-tick,
             .k-slider-track,
             .k-draghandle {
@@ -16453,18 +16482,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;
         }
     }
@@ -17013,7 +17045,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;
@@ -17212,7 +17245,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(
@@ -17223,12 +17258,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;
@@ -17328,6 +17366,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 {
@@ -17527,7 +17566,8 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
             display: block;
         }
 
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             &::before,
             &::after {
                 display: block;
@@ -17671,7 +17711,8 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
             color: $time-list-title-text;
         }
 
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             .k-title {
                 color: $time-list-title-focus-text;
             }
@@ -17996,8 +18037,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;
         }
@@ -18028,6 +18072,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 {
@@ -20006,14 +20051,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;
                 }
             }
@@ -20023,17 +20070,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;
         }
@@ -21263,7 +21313,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;
         }
     }
@@ -21310,11 +21361,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;
             }
 
@@ -21406,6 +21459,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;
@@ -22375,7 +22429,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,
@@ -22388,7 +22443,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,
@@ -22401,7 +22457,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,
@@ -22645,7 +22702,8 @@ $actionsheet-item-disabled-shadow: null !default;
 
     .k-window {
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             @include box-shadow( $window-focused-shadow );
         }
     }
@@ -23115,29 +23173,34 @@ $drawer-selected-hover-text: $selected-hover-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;
             }
@@ -24395,7 +24458,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;
     }
 
@@ -24442,12 +24506,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 ) );
             }
         }
@@ -24462,13 +24529,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 {
@@ -24728,7 +24798,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 );
         }
     }
@@ -24744,7 +24815,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,
@@ -24754,7 +24826,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,
@@ -24775,7 +24848,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,
@@ -24785,7 +24859,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,
@@ -24933,7 +25008,8 @@ $pager-dropdown-width: 5em !default;
 
             // Focused state
             &:focus,
-            &.k-state-focus {
+            &.k-state-focus ,
+            &.k-focus {
                 z-index: 3;
             }
         }
@@ -24982,7 +25058,8 @@ $pager-dropdown-width: 5em !default;
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             color: inherit;
         }
     }
@@ -25031,7 +25108,8 @@ $pager-dropdown-width: 5em !default;
         }
 
         // Selected state
-        .k-state-selected {
+        .k-state-selected ,
+        .k-selected {
             cursor: inherit;
             z-index: 2;
         }
@@ -25179,7 +25257,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 );
         }
@@ -25194,7 +25273,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,
@@ -25202,7 +25282,8 @@ $pager-dropdown-width: 5em !default;
             );
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             @include fill(
                 $pager-item-selected-text,
                 $pager-item-selected-bg,
@@ -25211,7 +25292,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 );
         }
@@ -25234,7 +25316,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,
@@ -25243,12 +25326,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,
@@ -25280,7 +25365,8 @@ $pager-dropdown-width: 5em !default;
                 );
 
                 &:hover,
-                &.k-state-hover {
+                &.k-state-hover ,
+                &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
                         $dropdownlist-hovered-bg,
@@ -25300,14 +25386,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
@@ -25577,7 +25665,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;
         }
 
@@ -25894,7 +25983,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
@@ -26144,12 +26234,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;
@@ -26237,7 +26329,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;
             }
         }
@@ -26266,7 +26359,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;
             }
         }
@@ -26299,7 +26393,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;
             }
         }
@@ -26334,7 +26429,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;
             }
         }
@@ -26379,7 +26475,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;
             }
 
@@ -26452,7 +26549,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,
@@ -26463,7 +26561,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,
@@ -26473,7 +26573,8 @@ $tabstrip-content-border-focused: $component-text !default;
             }
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
 
@@ -26495,7 +26596,8 @@ $tabstrip-content-border-focused: $component-text !default;
         );
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
     }
@@ -26505,7 +26607,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;
             }
         }
@@ -26598,7 +26701,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;
@@ -26694,12 +26798,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;
         }
@@ -26869,7 +26975,8 @@ $expander-content-padding-y: $padding-y * 4 !default;
             $expander-border
         );
 
-        &.k-state-focus {
+        &.k-state-focus ,
+        &.k-focus {
             box-shadow: $expander-focus-shadow;
         }
     }
@@ -26883,12 +26990,14 @@ $expander-content-padding-y: $padding-y * 4 !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;
         }
@@ -27260,7 +27369,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,
@@ -27272,7 +27382,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,
@@ -27284,7 +27396,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,
@@ -27294,7 +27407,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,
@@ -27310,7 +27424,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,
@@ -27321,8 +27437,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,
@@ -27333,8 +27452,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,
@@ -27352,8 +27474,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,
@@ -27365,10 +27489,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,
@@ -27381,8 +27509,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,
@@ -27393,7 +27523,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,
@@ -27404,9 +27536,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,
@@ -27417,11 +27553,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,
@@ -27432,11 +27574,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,
@@ -27720,6 +27868,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;
@@ -27727,7 +27876,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;
     }
@@ -27839,7 +27990,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);
     }
 
@@ -28516,11 +28668,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;
             }
         }
@@ -30160,27 +30314,33 @@ $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
         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;
         }
 
@@ -30222,17 +30382,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 );
             }
         }
@@ -30273,10 +30437,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
             &: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;
             }
@@ -30332,14 +30498,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 );
         }
 
@@ -30348,18 +30520,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;
         }
     }
@@ -30372,7 +30552,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;
             }
         }
@@ -30385,7 +30566,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
 
             &:hover td,
-            &.k-state-hover td {
+            &.k-state-hover td ,
+            &.k-hover td {
                 background-color: $grid-sticky-hovered-bg;
             }
         }
@@ -30397,43 +30579,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;
         }
     }
@@ -30444,7 +30649,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 );
         }
     }
@@ -30457,12 +30663,14 @@ $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 );
     }
 
     .k-columnmenu-item {
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
                 $kendo-list-item-selected-bg
@@ -30487,14 +30695,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
@@ -30502,7 +30712,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 );
                 }
             }
@@ -30743,7 +30954,8 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
     // Listview content
     .k-listview-content {
 
-        > .k-state-focused {
+        > .k-state-focused ,
+        > .k-focus {
             @include fill(
                 $listview-item-focus-text,
                 $listview-item-focus-bg,
@@ -30752,7 +30964,8 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !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,
@@ -31132,7 +31345,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;
         }
     }
@@ -31693,7 +31907,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;
@@ -31758,7 +31973,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;
                 }
             }
@@ -31937,7 +32153,8 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             );
         }
 
-        &.k-state-active {
+        &.k-state-active ,
+        &.k-active {
             @include fill(
                 $kendo-button-active-text,
                 $kendo-button-active-bg,
@@ -31954,7 +32171,8 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         > .k-menu,
         > .k-menu:not(.k-context-menu) {
 
-            .k-item.k-state-hover {
+            .k-item.k-state-hover ,
+            .k-item.k-hover {
                 @include fill(
                     $kendo-list-item-hover-text,
                     $kendo-list-item-hover-bg
@@ -31984,7 +32202,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
@@ -31992,7 +32211,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
@@ -32013,12 +32234,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;
             }
         }
@@ -32979,10 +33202,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,
@@ -32993,6 +33219,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,
@@ -33003,7 +33230,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,
@@ -33234,7 +33463,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;
         }
 
@@ -33964,7 +34194,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,
@@ -34427,7 +34658,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,
@@ -34629,7 +34861,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;
             }
@@ -35082,7 +35315,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;
@@ -35304,7 +35538,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;
             }
         }
@@ -35341,7 +35576,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;
         }
     }
@@ -35358,7 +35594,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 );
         }
     }
@@ -35915,7 +36152,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;
             }
 
@@ -36184,7 +36422,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;
     }
 
@@ -36257,7 +36496,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; }
@@ -36730,7 +36970,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
@@ -36744,7 +36985,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;
             }
         }
@@ -36797,7 +37039,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
@@ -36822,7 +37065,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,
@@ -36852,7 +37096,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 {
@@ -36895,7 +37140,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,
@@ -36911,7 +37157,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;
     }
 
@@ -37569,7 +37816,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             }
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 .k-event-delete {
                     opacity: 1;
                 }
@@ -37634,7 +37882,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;
@@ -37892,9 +38141,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;
         }
     }
@@ -37967,7 +38218,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;
             }
         }
@@ -38315,7 +38567,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);
     }
 
@@ -38337,7 +38591,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,
@@ -38347,7 +38602,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,
@@ -38414,8 +38670,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,
@@ -38427,7 +38685,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,
@@ -38436,11 +38696,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;
         }
     }
@@ -38457,7 +38720,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 );
         }
     }
@@ -38760,7 +39024,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;
@@ -38889,6 +39154,7 @@ $chat-quick-reply-hover-border: $primary !default;
 
         &:focus,
         &.k-state-focus,
+        &.k-focus,
         &:focus-within {
             outline: 0;
             box-shadow: none;
@@ -38968,7 +39234,8 @@ $chat-quick-reply-hover-border: $primary !default;
             flex: 0 0 auto;
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             background: none;
         }
     }
@@ -39204,7 +39471,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 );
         }
 
@@ -39219,7 +39487,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 );
         }
 
@@ -40017,7 +40286,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;
@@ -40037,7 +40307,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 );
     }
 }
@@ -40747,7 +41018,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;
 
@@ -40757,7 +41029,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;
 
@@ -40776,13 +41049,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;
     }
 
@@ -41602,7 +41877,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;
         }
     }
@@ -42100,7 +42376,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 );
     }