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

package/dist/all.scss

@@ -906,13 +906,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;
     }
@@ -1779,6 +1781,7 @@ $display4-letter-spacing: null !default;
 
     // Disabled state
     .k-state-disabled,
+    .k-disabled,
     .k-widget[disabled],
     .k-disabled {
         @include disabled( $disabled-styling );
@@ -9425,6 +9428,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
+
+    // Angular specific
+    .k-input > kendo-popup,
+    .k-picker > kendo-popup {
+        position: fixed;
+    }
+
+
 }
 
 
@@ -14864,7 +14875,8 @@ $progressbar-chunk-border: $body-bg !default;
 
 
         // Selection
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             border-width: 0;
             border-style: solid;
             display: flex;
@@ -14934,7 +14946,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;
@@ -14960,7 +14973,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;
             }
@@ -14984,7 +14998,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;
@@ -15013,7 +15028,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;
             }
@@ -15025,6 +15041,7 @@ $progressbar-chunk-border: $body-bg !default;
     .k-progressbar-indeterminate {
         .k-progress-status-wrap,
         .k-state-selected,
+        .k-selected,
         .k-item {
             display: none;
         }
@@ -15035,7 +15052,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;
         }
     }
@@ -15063,7 +15082,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;
         }
@@ -15072,7 +15092,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;
         }
     }
@@ -15080,11 +15101,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;
         }
     }
@@ -15103,7 +15126,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 );
         }
 
@@ -15469,7 +15493,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 {
@@ -15529,7 +15554,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,
@@ -15540,7 +15566,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 );
     }
@@ -15571,7 +15598,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 );
     }
@@ -15738,7 +15766,8 @@ $slider-disabled-opacity: null !default;
         }
 
 
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             .k-tick,
             .k-slider-track,
             .k-draghandle {
@@ -16181,18 +16210,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;
         }
     }
@@ -16738,7 +16770,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;
@@ -16934,7 +16967,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(
@@ -16945,12 +16980,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;
@@ -17050,6 +17088,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 {
@@ -17246,7 +17285,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;
@@ -17387,7 +17427,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;
             }
@@ -17697,8 +17738,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;
         }
@@ -17726,6 +17770,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 {
@@ -19606,14 +19651,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;
                 }
             }
@@ -19623,17 +19670,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;
         }
@@ -20842,7 +20892,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;
         }
     }
@@ -20886,11 +20937,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;
             }
 
@@ -20982,6 +21035,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;
@@ -21933,7 +21987,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,
@@ -21946,7 +22001,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,
@@ -21959,7 +22015,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,
@@ -22197,7 +22254,8 @@ $actionsheet-item-disabled-shadow: null !default;
 
     .k-window {
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             @include box-shadow( $window-focused-shadow );
         }
     }
@@ -22655,29 +22713,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;
             }
@@ -23910,7 +23973,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;
     }
 
@@ -23954,12 +24018,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 ) );
             }
         }
@@ -23974,13 +24041,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 {
@@ -24234,7 +24304,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 );
         }
     }
@@ -24250,7 +24321,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,
@@ -24260,7 +24332,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,
@@ -24281,7 +24354,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,
@@ -24291,7 +24365,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,
@@ -24436,7 +24511,8 @@ $pager-dropdown-width: 5em !default;
 
             // Focused state
             &:focus,
-            &.k-state-focus {
+            &.k-state-focus ,
+            &.k-focus {
                 z-index: 3;
             }
         }
@@ -24485,7 +24561,8 @@ $pager-dropdown-width: 5em !default;
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             color: inherit;
         }
     }
@@ -24534,7 +24611,8 @@ $pager-dropdown-width: 5em !default;
         }
 
         // Selected state
-        .k-state-selected {
+        .k-state-selected ,
+        .k-selected {
             cursor: inherit;
             z-index: 2;
         }
@@ -24679,7 +24757,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 );
         }
@@ -24694,7 +24773,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,
@@ -24702,7 +24782,8 @@ $pager-dropdown-width: 5em !default;
             );
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             @include fill(
                 $pager-item-selected-text,
                 $pager-item-selected-bg,
@@ -24711,7 +24792,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 );
         }
@@ -24734,7 +24816,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,
@@ -24743,12 +24826,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,
@@ -24780,7 +24865,8 @@ $pager-dropdown-width: 5em !default;
                 );
 
                 &:hover,
-                &.k-state-hover {
+                &.k-state-hover ,
+                &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
                         $dropdownlist-hovered-bg,
@@ -24800,14 +24886,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
@@ -25074,7 +25162,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;
         }
 
@@ -25388,7 +25477,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
@@ -25635,12 +25725,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;
@@ -25728,7 +25820,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;
             }
         }
@@ -25757,7 +25850,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;
             }
         }
@@ -25790,7 +25884,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;
             }
         }
@@ -25825,7 +25920,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;
             }
         }
@@ -25870,7 +25966,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;
             }
 
@@ -25940,7 +26037,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,
@@ -25951,7 +26049,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,
@@ -25961,7 +26061,8 @@ $tabstrip-content-border-focused: $component-text !default;
             }
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
 
@@ -25983,7 +26084,8 @@ $tabstrip-content-border-focused: $component-text !default;
         );
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
     }
@@ -25993,7 +26095,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;
             }
         }
@@ -26083,7 +26186,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;
@@ -26176,12 +26280,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;
         }
@@ -26345,7 +26451,8 @@ $expander-content-padding-y: $padding-y * 4 !default;
             $expander-border
         );
 
-        &.k-state-focus {
+        &.k-state-focus ,
+        &.k-focus {
             box-shadow: $expander-focus-shadow;
         }
     }
@@ -26359,12 +26466,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;
         }
@@ -26729,7 +26838,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,
@@ -26741,7 +26851,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,
@@ -26753,7 +26865,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,
@@ -26763,7 +26876,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,
@@ -26779,7 +26893,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,
@@ -26790,8 +26906,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,
@@ -26802,8 +26921,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,
@@ -26821,8 +26943,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,
@@ -26834,10 +26958,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,
@@ -26850,8 +26978,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,
@@ -26862,7 +26992,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,
@@ -26873,9 +27005,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,
@@ -26886,11 +27022,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,
@@ -26901,11 +27043,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,
@@ -27183,6 +27331,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;
@@ -27190,7 +27339,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;
     }
@@ -27296,7 +27447,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);
     }
 
@@ -27967,11 +28119,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;
             }
         }
@@ -29605,27 +29759,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;
         }
 
@@ -29667,17 +29827,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 );
             }
         }
@@ -29718,10 +29882,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;
             }
@@ -29777,14 +29943,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 );
         }
 
@@ -29793,18 +29965,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;
         }
     }
@@ -29817,7 +29997,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;
             }
         }
@@ -29830,7 +30011,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;
             }
         }
@@ -29842,43 +30024,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;
         }
     }
@@ -29889,7 +30094,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 );
         }
     }
@@ -29902,12 +30108,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
@@ -29932,14 +30140,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
@@ -29947,7 +30157,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 );
                 }
             }
@@ -30182,7 +30393,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,
@@ -30191,7 +30403,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,
@@ -30568,7 +30781,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;
         }
     }
@@ -31129,7 +31343,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;
@@ -31194,7 +31409,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;
                 }
             }
@@ -31370,7 +31586,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,
@@ -31387,7 +31604,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
@@ -31417,7 +31635,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
@@ -31425,7 +31644,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
@@ -31446,12 +31667,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;
             }
         }
@@ -32405,10 +32628,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,
@@ -32419,6 +32645,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,
@@ -32429,7 +32656,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,
@@ -32657,7 +32886,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;
         }
 
@@ -33372,7 +33602,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,
@@ -33830,7 +34061,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,
@@ -34029,7 +34261,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;
             }
@@ -34482,7 +34715,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;
@@ -34701,7 +34935,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;
             }
         }
@@ -34738,7 +34973,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;
         }
     }
@@ -34755,7 +34991,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 );
         }
     }
@@ -35303,7 +35540,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;
             }
 
@@ -35572,7 +35810,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;
     }
 
@@ -35645,7 +35884,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; }
@@ -36115,7 +36355,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
@@ -36129,7 +36370,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;
             }
         }
@@ -36182,7 +36424,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
@@ -36207,7 +36450,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,
@@ -36237,7 +36481,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 {
@@ -36280,7 +36525,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,
@@ -36296,7 +36542,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;
     }
 
@@ -36951,7 +37198,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             }
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 .k-event-delete {
                     opacity: 1;
                 }
@@ -37016,7 +37264,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;
@@ -37274,9 +37523,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;
         }
     }
@@ -37349,7 +37600,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;
             }
         }
@@ -37694,7 +37946,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);
     }
 
@@ -37716,7 +37970,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,
@@ -37726,7 +37981,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,
@@ -37793,8 +38049,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,
@@ -37806,7 +38064,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,
@@ -37815,11 +38075,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;
         }
     }
@@ -37836,7 +38099,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 );
         }
     }
@@ -38136,7 +38400,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;
@@ -38265,6 +38530,7 @@ $chat-quick-reply-hover-border: $primary !default;
 
         &:focus,
         &.k-state-focus,
+        &.k-focus,
         &:focus-within {
             outline: 0;
             box-shadow: none;
@@ -38344,7 +38610,8 @@ $chat-quick-reply-hover-border: $primary !default;
             flex: 0 0 auto;
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             background: none;
         }
     }
@@ -38577,7 +38844,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 );
         }
 
@@ -38592,7 +38860,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 );
         }
 
@@ -39378,7 +39647,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;
@@ -39398,7 +39668,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 );
     }
 }
@@ -40090,7 +40361,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;
 
@@ -40100,7 +40372,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;
 
@@ -40119,13 +40392,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;
     }
 
@@ -40939,7 +41214,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;
         }
     }
@@ -41425,7 +41701,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 );
     }