@progress/kendo-theme-classic 4.43.1-dev.5 → 4.44.0

package/dist/all.scss

@@ -2711,27 +2711,24 @@ $display4-letter-spacing: null !default;
 // #region @import "~@progress/kendo-theme-default/scss/common/_loading.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/common/_loading.scss
 @include exports( "common/loading" ) {
 
-    // Loading indicator
-    .k-loading {
-        width: 64px;
-        height: 64px;
-        display: block;
-
-        .animate {
-            animation: loading 2s infinite linear;
-        }
-    }
-
-
     // Loading mask
     .k-loading-mask,
     .k-loading-image,
     .k-loading-color {
         width: 100%;
         height: 100%;
+        box-sizing: border-box;
         position: absolute;
         top: 0;
         left: 0;
+
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-loading-mask {
@@ -2762,6 +2759,11 @@ $display4-letter-spacing: null !default;
         background-color: transparent;
         box-sizing: border-box;
         color: currentColor;
+
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-i-loading::before,
@@ -2811,7 +2813,7 @@ $display4-letter-spacing: null !default;
         content: "";
         // See https://github.com/telerik/kendo-themes/issues/1925
         border-width: 1px; // TODO: Remove once we drop IE support
-        border-width: #{"max( 1px, .015em )"}; // sass-lint:disable-line no-duplicate-properties
+        border-width: clamp( .015em, 1px, 1px ); // sass-lint:disable-line no-duplicate-properties
         font-size: 4em;
     }
 }
@@ -6095,7 +6097,7 @@ $list-no-data-text: $subtle-text !default;
 // Checkbox
 
 $checkbox-size: map-get( $spacing, 4 ) !default;
-$checkbox-radius: map-get( $spacing, thin ) !default;
+$checkbox-radius: map-get( $spacing, 1 ) !default;
 /// Border width of checkbox.
 /// @group checkbox
 $checkbox-border-width: 1px !default;
@@ -6641,7 +6643,7 @@ $checkbox-ripple-opacity: .25 !default;
         display: flex;
         align-items: center;
         align-content: center;
-        gap: map-get( $spacing, 1 );
+        gap: $icon-spacing;
         cursor: default;
         position: relative;
         transition-property: color, background-color, outline-color, box-shadow;
@@ -6695,21 +6697,6 @@ $checkbox-ripple-opacity: .25 !default;
         }
     }
 
-    .k-dropdown-button .k-popup {
-        .k-item {
-            cursor: pointer;
-        }
-    }
-
-    // SplitButton
-    // TODO: Wait for final design + revise
-    .k-split-button,
-    .k-dropdown-button {
-        .k-list .k-item:focus {
-            outline: none;
-        }
-    }
-
     .k-virtual-content {
         overflow-y: scroll;
         -webkit-overflow-scrolling: touch;
@@ -6732,18 +6719,15 @@ $checkbox-ripple-opacity: .25 !default;
 
 
     // No data
-    .k-list-container {
-        .k-no-data {
-            min-height: 138px;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-transform: uppercase;
-            font-weight: lighter;
-            text-align: center;
-            white-space: normal;
-        }
+    .k-no-data {
+        min-height: 140px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        text-align: center;
+        white-space: normal;
     }
 
 
@@ -6855,12 +6839,12 @@ $checkbox-ripple-opacity: .25 !default;
             background: transparent;
         }
 
+    }
 
-        // No data
-        .k-no-data {
-            color: $list-no-data-text;
-        }
 
+    // No data
+    .k-no-data {
+        color: $list-no-data-text;
     }
 
 }
@@ -7429,30 +7413,72 @@ $popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !d
 // #region @import "../button/_variables.scss"; -> packages/classic/scss/button/_variables.scss
 // Button
 
-/// Width of border around buttons
+/// Width of the border around the button.
 /// @group button
 $button-border-width: 1px !default;
-/// Border radius of buttons
+
+/// Border radius of the button.
 /// @group button
 $button-border-radius: $border-radius !default;
 
-/// Horizontal padding of buttons
+/// Horizontal padding of the button.
 /// @group button
-$button-padding-x: $padding-x !default;
-/// Vertical padding of buttons
+$button-padding-x: map-get( $spacing, 2 ) !default;
+$button-padding-x-sm: null !default;
+$button-padding-x-md: null !default;
+$button-padding-x-lg: null !default;
+
+/// Vertical padding of the button.
+/// @group button
+$button-padding-y: map-get( $spacing, 1 ) !default;
+$button-padding-y-sm: null !default;
+$button-padding-y-md: null !default;
+$button-padding-y-lg: null !default;
+
+/// Font family of the button.
 /// @group button
-$button-padding-y: $padding-y !default;
 $button-font-family: $font-family !default;
+
+/// Font size of the button.
+/// @group button
 $button-font-size: $font-size !default;
-$button-line-height: $line-height !default;
+$button-font-size-sm: null !default;
+$button-font-size-md: null !default;
+$button-font-size-lg: null !default;
 
-$button-padding-x-sm: $button-padding-x / 2 !default;
-$button-padding-y-sm: $button-padding-y / 2 !default;
-$button-line-height-sm: $line-height-sm !default;
+/// Line height used along with $font-size.
+/// @group button
+$button-line-height: $line-height !default;
+$button-line-height-sm: null !default;
+$button-line-height-md: null !default;
+$button-line-height-lg: null !default;
 
+/// Calculated height of the button.
+/// @group button
 $button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
+
+/// Calculated inner height of the button. Without the border width.
+/// @group button
 $button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
 
+$button-arrow-padding-x: $button-padding-y !default;
+$button-arrow-padding-y: $button-padding-y !default;
+
+/// Theme colors map for the button.
+/// @group button
+$button-theme-colors: (
+    "primary": map-get( $theme-colors, primary ),
+    "secondary": map-get( $theme-colors, secondary ),
+    "tertiary": map-get( $theme-colors, tertiary ),
+    "info": map-get( $theme-colors, info ),
+    "success": map-get( $theme-colors, success ),
+    "warning": map-get( $theme-colors, warning ),
+    "error": map-get( $theme-colors, error ),
+    "dark": map-get( $theme-colors, dark ),
+    "light": map-get( $theme-colors, light ),
+    "inverse": map-get( $theme-colors, inverse )
+) !default;
+
 /// The background of the buttons.
 /// @group button
 $button-bg: $base-bg !default;
@@ -7475,7 +7501,7 @@ $button-hovered-bg: try-shade( $button-bg, 1 ) !default;
 $button-hovered-text: null !default;
 /// The border color of hovered buttons.
 /// @group button
-$button-hovered-border: try-shade( $button-hovered-bg, 2 ) !default;
+$button-hovered-border: try-shade( $button-bg, 3 ) !default;
 /// The background gradient of hovered buttons.
 /// @group button
 $button-hovered-gradient: null !default;
@@ -7489,7 +7515,7 @@ $button-active-bg: try-shade( $button-bg, 2 ) !default;
 $button-active-text: null !default;
 /// The border color of active buttons.
 /// @group button
-$button-active-border: try-shade( $button-active-bg, 2 ) !default;
+$button-active-border: try-shade( $button-bg, 4 ) !default;
 /// The background gradient of active buttons.
 /// @group button
 $button-active-gradient: null !default;
@@ -7497,13 +7523,13 @@ $button-active-shadow: null !default;
 
 /// The background color of selected buttons.
 /// @group button
-$button-selected-bg: $button-active-bg !default;
+$button-selected-bg: $primary !default;
 /// The text color of selected buttons.
 /// @group button
-$button-selected-text: $button-active-text !default;
+$button-selected-text: contrast-wcag( $button-selected-bg ) !default;
 /// The border color of selected buttons.
 /// @group button
-$button-selected-border: $button-active-border !default;
+$button-selected-border: $button-selected-bg !default;
 /// The background gradient of selected buttons.
 /// @group button
 $button-selected-gradient: null !default;
@@ -7531,13 +7557,13 @@ $primary-button-shadow: null !default;
 
 $primary-button-hovered-bg: try-shade( $primary-button-bg, 1 ) !default;
 $primary-button-hovered-text: null !default;
-$primary-button-hovered-border: try-shade( $primary-button-hovered-bg, 2 ) !default;
+$primary-button-hovered-border: try-shade( $primary-button-bg, 3 ) !default;
 $primary-button-hovered-gradient: null !default;
 $primary-button-hovered-shadow: null !default;
 
 $primary-button-active-bg: try-shade( $primary-button-bg, 2 ) !default;
 $primary-button-active-text: null !default;
-$primary-button-active-border: try-shade( $primary-button-active-bg, 2 ) !default;
+$primary-button-active-border: try-shade( $primary-button-bg, 4 ) !default;
 $primary-button-active-gradient: null !default;
 $primary-button-active-shadow: null !default;
 
@@ -7549,7 +7575,31 @@ $primary-button-selected-shadow: null !default;
 
 $primary-button-focused-shadow: 0 0 4px 0 rgba( $primary-button-border, .75 ) !default;
 
-$button-group-focus-shadow: null !default;
+$solid-button-gradient: $base-gradient !default;
+$solid-button-shade-function: "try-shade";
+$solid-button-shade-text-amount: 0 !default;
+$solid-button-shade-bg-amount: 0 !default;
+$solid-button-shade-border-amount: 2 !default;
+$solid-button-hover-shade-text-amount: null !default;
+$solid-button-hover-shade-bg-amount: 1 !default;
+$solid-button-hover-shade-border-amount: 3 !default;
+$solid-button-active-shade-text-amount: null !default;
+$solid-button-active-shade-bg-amount: 2 !default;
+$solid-button-active-shade-border-amount: 4 !default;
+$solid-button-shadow: true !default;
+$solid-button-shadow-blur: 4px !default;
+$solid-button-shadow-spread: 0px !default;
+$solid-button-shadow-opacity: .75 !default;
+
+$outline-button-shadow: true !default;
+$outline-button-shadow-blur: 4px !default;
+$outline-button-shadow-spread: 0px !default;
+$outline-button-shadow-opacity: .75 !default;
+
+$link-button-shadow: true !default;
+$link-button-shadow-blur: 4px !default;
+$link-button-shadow-spread: 0px !default;
+$link-button-shadow-opacity: .75 !default;
 
 $flat-button-hover-opacity: .08 !default;
 $flat-button-focus-opacity: .12 !default;
@@ -7969,12 +8019,19 @@ $floating-label-focus-text: null !default;
     .k-floating-label-container {
         padding-top: $floating-label-height;
         width: $input-default-width;
+        box-sizing: border-box;
         display: inline-flex;
         vertical-align: middle;
         position: relative;
         flex-direction: column;
         justify-content: stretch;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         > .k-label {
             max-width: 90%;
             font-size: $floating-label-font-size;
@@ -8144,6 +8201,12 @@ $floating-label-focus-text: null !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -8163,7 +8226,6 @@ $floating-label-focus-text: null !default;
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             flex-flow: row nowrap;
@@ -9161,6 +9223,12 @@ $avatar-theme-colors: $theme-colors !default;
         justify-content: center;
         vertical-align: middle;
         overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -9335,6 +9403,12 @@ $badge-dot-size-lg: 12px !default;
         vertical-align: middle;
         overflow: hidden;
         text-overflow: ellipsis;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
     .k-badge > * {
         color: inherit;
@@ -9771,6 +9845,12 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
         cursor: pointer;
         user-select: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-selected-icon-wrapper {
             display: none !important; // sass-lint:disable-line no-important
         }
@@ -10363,6 +10443,12 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
         flex-wrap: nowrap;
         position: relative;
         overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -11292,6 +11378,12 @@ $tooltip-error-border: $tooltip-error-bg !default;
         -webkit-appearance: none;
         position: relative;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         &:disabled,
         &.k-state-disabled {
             @include disabled( $disabled-styling );
@@ -11332,6 +11424,21 @@ $tooltip-error-border: $tooltip-error-bg !default;
     .k-button .k-button-text {}
 
 
+    // Button arrow
+    .k-button-arrow {
+        padding-left: $button-arrow-padding-x;
+        padding-right: $button-arrow-padding-x;
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .k-button > .k-button-arrow {
+        margin-inline-start: -$button-arrow-padding-x;
+        margin-inline-end: -$button-padding-x;
+    }
+
+
     // Text button
     .k-text-button {
 
@@ -11359,6 +11466,10 @@ $tooltip-error-border: $tooltip-error-bg !default;
             min-height: calc( #{$button-font-size} * #{$button-line-height} );
         }
     }
+    .k-icon-button > .k-button-arrow {
+        margin-inline-start: 0;
+        margin-inline-end: -$button-padding-y;
+    }
     // TODO: REMOVE
     .k-button.k-button-icon {
         padding: $button-padding-y;
@@ -11398,50 +11509,51 @@ $tooltip-error-border: $tooltip-error-bg !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        .k-button {
-            @include border-radius( 0 );
-        }
-        .k-button ~ .k-button {
+        > .k-button + .k-button {
             margin-inline-start: if( $button-border-width == 0, null, -$button-border-width );
         }
 
-        .k-button:hover,
-        .k-button.k-state-hover,
-        .k-button:active,
-        .k-button.k-state-active,
-        .k-button.k-state-selected,
-        .k-button:focus,
-        .k-button.k-state-focus {
+        > .k-button:hover,
+        > .k-button.k-state-hover,
+        > .k-button:focus,
+        > .k-button.k-state-focus,
+        > .k-button:active,
+        > .k-button.k-state-active,
+        > .k-button.k-state-selected {
             z-index: 2;
         }
 
-        .k-group-start,
-        .k-button:first-child {
-            @include border-left-radius( $button-border-radius );
+        .k-button:not(:first-child):not(:last-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
         }
-        .k-group-end,
-        .k-button:last-child {
-            @include border-right-radius( $button-border-radius );
+        > .k-button:first-child:not(:only-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
         }
-        .k-group-start.k-group-end,
-        .k-button:first-child:last-child {
-            @include border-radius( $button-border-radius );
+        > .k-button:last-child:not(:only-child) {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled,
+        &.k-state-disabled {
+            opacity: 1;
+            filter: none;
         }
 
     }
 
     .k-button-group-stretched {
-        display: flex;
+        width: 100%;
 
-        .k-button {
-            display: inline-block;
+        > * {
             flex: 1 0 0%;
             overflow: hidden;
-            text-overflow: ellipsis;
-
-            > .k-icon {
-                vertical-align: text-bottom;
-            }
         }
     }
 
@@ -11455,32 +11567,13 @@ $tooltip-error-border: $tooltip-error-bg !default;
         flex-flow: row nowrap;
         vertical-align: middle;
 
-        .k-button {
-            @include border-radius( 0 );
-        }
-
-        // .k-button
-        > .k-button:first-child {
-            @include border-left-radius( $button-border-radius );
-        }
-        > .k-split-button-arrow,
-        > .k-button:last-child {
-            @include border-right-radius( $button-border-radius );
-            margin-inline-start: if( $button-border-width == 0, null, -$button-border-width );
-            padding: $button-padding-y;
+        .k-split-button-arrow {
+            padding: $button-arrow-padding-y $button-arrow-padding-x;
             width: auto;
             flex: none;
-        }
 
-        &[dir="rtl"] {
-            // k-button
-            > .k-button:first-child {
-                @include border-left-radius( 0 );
-                @include border-right-radius( $button-border-radius );
-            }
-            > .k-button:last-child {
-                @include border-right-radius( 0 );
-                @include border-left-radius( $button-border-radius );
+            .k-button-icon {
+                min-width: 0;
             }
         }
     }
@@ -11524,13 +11617,29 @@ $tooltip-error-border: $tooltip-error-bg !default;
     .k-button-outline {
         @include box-shadow( none );
         color: inherit;
-        background: none;
+        background-color: transparent;
+        background-image: none !important; // sass-lint:disable-line no-important
     }
     .k-button.k-outline {
         @extend .k-button-outline;
     }
 
 
+    // Link button
+    .k-button-link {
+        @include box-shadow( none );
+        border-color: transparent !important; // sass-lint:disable-line no-important
+        color: inherit;
+        background-color: transparent !important; // sass-lint:disable-line no-important
+        background-image: none !important; // sass-lint:disable-line no-important
+        text-decoration: none;
+    }
+    .k-button-link:hover,
+    .k-button-link.k-state-hover {
+        text-decoration: underline;
+    }
+
+
     // Clear button
     .k-button-clear {
         border-color: transparent !important; // sass-lint:disable-line no-important
@@ -11540,46 +11649,11 @@ $tooltip-error-border: $tooltip-error-bg !default;
     }
 
 
-    // RTL
-    .k-rtl {
-
-        // Button group
-        .k-button-group {
-
-            .k-button {
-                @include border-radius( 0 );
-            }
-
-            .k-group-start,
-            .k-button:first-child {
-                @include border-right-radius( $button-border-radius );
-            }
-            .k-group-end,
-            .k-button:last-child {
-                @include border-left-radius( $button-border-radius );
-            }
-            .k-group-start.k-group-end,
-            .k-button:first-child:last-child {
-                @include border-radius( $button-border-radius );
-            }
-
-        }
-
-        // Split button
-        .k-split-button {
-
-            .k-button {
-                @include border-radius( 0 );
-            }
-
-            // k-button
-            > .k-button:first-child {
-                @include border-right-radius( $button-border-radius );
-            }
-            > .k-split-button-arrow,
-            > .k-button:last-child {
-                @include border-left-radius( $button-border-radius );
-            }
+    // IE
+    .k-ie .k-button-group,
+    .k-ie .k-split-button {
+        .k-button {
+            @include border-radius( 0 );
         }
     }
 
@@ -11718,9 +11792,8 @@ $tooltip-error-border: $tooltip-error-bg !default;
 // #region @import "~@progress/kendo-theme-default/scss/button/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/button/_theme.scss
 @include exports( "button/theme" ) {
 
-    // Default button
-    .k-button,
-    .k-button-secondary {
+    // Solid button
+    .k-button {
         @include fill(
             $button-text,
             $button-bg,
@@ -11784,75 +11857,70 @@ $tooltip-error-border: $tooltip-error-bg !default;
         }
 
     }
+    .k-button.k-primary {
+        @extend .k-button-solid-primary !optional;
+    }
 
+    $_shade-fn: get-function( $solid-button-shade-function );
 
-    // Primary button
-    .k-button-primary {
-        @include fill(
-            $primary-button-text,
-            $primary-button-bg,
-            $primary-button-border,
-            $primary-button-gradient
-        );
-        @include box-shadow( $primary-button-shadow );
+    @each $name, $color in $button-theme-colors {
+        $_button-text: contrast-wcag( $color );
+        $_button-bg: if( $solid-button-shade-bg-amount, call( $_shade-fn, $color, $solid-button-shade-bg-amount ), null );
+        $_button-border: if( $solid-button-shade-border-amount, call( $_shade-fn, $color, $solid-button-shade-border-amount ), null );
 
-        // Hovoer state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $primary-button-hovered-text,
-                $primary-button-hovered-bg,
-                $primary-button-hovered-border,
-                $primary-button-hovered-gradient
-            );
-            @include box-shadow( $primary-button-hovered-shadow );
-        }
+        $_button-hover-text: null;
+        $_button-hover-bg: if( $solid-button-hover-shade-bg-amount, call( $_shade-fn, $color, $solid-button-hover-shade-bg-amount ), null );
+        $_button-hover-border: if( $solid-button-hover-shade-border-amount, call( $_shade-fn, $color, $solid-button-hover-shade-border-amount ), null );
 
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            @include box-shadow( $primary-button-focused-shadow );
-        }
+        $_button-active-text: null;
+        $_button-active-bg: if( $solid-button-active-shade-bg-amount, call( $_shade-fn, $color, $solid-button-active-shade-bg-amount ), null );
+        $_button-active-border: if( $solid-button-active-shade-border-amount, call( $_shade-fn, $color, $solid-button-active-shade-border-amount ), null );
 
-        // Active state
-        &:active,
-        &.k-state-active {
+        .k-button-solid.k-button-solid-#{$name} {
             @include fill(
-                $primary-button-active-text,
-                $primary-button-active-bg,
-                $primary-button-active-border,
-                $primary-button-active-gradient
+                $_button-text,
+                $_button-bg,
+                $_button-border,
+                $solid-button-gradient
             );
-            @include box-shadow( $primary-button-active-shadow );
-        }
 
-        // Selected state
-        &.k-state-selected {
-            @include fill(
-                $primary-button-selected-text,
-                $primary-button-selected-bg,
-                $primary-button-selected-border,
-                $primary-button-selected-gradient
-            );
-            @include box-shadow( $primary-button-selected-shadow );
-        }
+            // Hover state
+            &:hover,
+            &.k-state-hover {
+                @include fill(
+                    $_button-hover-text,
+                    $_button-hover-bg,
+                    $_button-hover-border
+                );
+            }
 
-        // Disabled state
-        &:disabled,
-        &.k-state-disabled {
-            @include fill(
-                $button-disabled-text,
-                $button-disabled-bg,
-                $button-disabled-border,
-                $button-disabled-gradient
-            );
-            @include box-shadow( $button-disabled-shadow );
-        }
+            // Focus state
+            &:focus,
+            &.k-state-focus {
+                @if ( $solid-button-shadow ) {
+                    box-shadow: 0 0 $solid-button-shadow-blur $solid-button-shadow-spread rgba( $_button-border, $solid-button-shadow-opacity );
+                }
+            }
 
-    }
-    .k-button.k-primary {
-        @extend .k-button-primary;
+            // Active state
+            &:active,
+            &.k-state-active {
+                @include fill(
+                    $_button-active-text,
+                    $_button-active-bg,
+                    $_button-active-border
+                );
+            }
+
+            // Selected
+            &.k-state-selected {
+                @include fill(
+                    $_button-active-text,
+                    $_button-active-bg,
+                    $_button-active-border
+                );
+            }
+        }
     }
 
 
@@ -11861,18 +11929,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
 
     // Button group
-    .k-button-group {
-
-        .k-button:focus,
-        .k-button.k-state-focus,
-        .k-button.k-state-focused,
-        .k-button-outline:focus,
-        .k-button-outline.k-state-focus,
-        .k-button-outline.k-state-focused {
-            @include box-shadow( $button-group-focus-shadow );
-        }
-
-    }
+    .k-button-group {}
 
 
     // Split button
@@ -11894,62 +11951,96 @@ $tooltip-error-border: $tooltip-error-bg !default;
         @include box-shadow( none );
         border-color: currentColor;
         color: $button-text;
-        background: none;
+        background-color: transparent;
 
         // Hover state
         &:hover,
         &.k-state-hover {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
 
         // Focused state
         &:focus,
         &.k-state-focus,
         &.k-state-focused {
-            box-shadow: $button-focused-shadow;
+            @if ($outline-button-shadow) {
+                box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $button-text, $outline-button-shadow-opacity );
+            }
         }
 
         // Active state
         &:active,
         &.k-state-active {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
 
         // Selected state
         &.k-state-selected {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
     }
     .k-button-outline.k-primary {
-        border-color: currentColor;
-        color: $primary-button-bg;
-        background: none;
-        box-shadow: none;
+        @extend .k-button-outline-primary !optional;
+    }
 
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
-        }
+    @each $name, $color in $button-theme-colors {
+        .k-button-outline.k-button-outline-#{$name} {
+            @include box-shadow( none );
+            border-color: currentColor;
+            color: $color;
+            background-color: transparent;
 
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            box-shadow: $primary-button-focused-shadow;
-        }
+            // Hover state
+            &:hover,
+            &.k-state-hover {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+            }
 
-        // Actove state
-        &:active,
-        &.k-state-active {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
-            box-shadow: none;
-        }
+            // Focused state
+            &:focus,
+            &.k-state-focus,
+            &.k-state-focused {
+                @if ($outline-button-shadow) {
+                    box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $color, $outline-button-shadow-opacity );
+                }
+            }
 
-        // Selected state
-        &.k-state-selected {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
-            box-shadow: none;
+            // Active state
+            &:active,
+            &.k-state-active {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+                box-shadow: none;
+            }
+
+            // Selected state
+            &.k-state-selected {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+                box-shadow: none;
+            }
         }
     }
 
@@ -11972,17 +12063,65 @@ $tooltip-error-border: $tooltip-error-bg !default;
         &.k-state-focus {
             color: inherit;
         }
+
+        // Disabled state
+        &:disabled,
+        &.k-state-disabled {
+            color: $button-disabled-text;
+        }
     }
     .k-button-flat.k-primary {
+        @extend .k-button-flat-primary !optional;
+    }
 
-        &,
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focus {
-            color: $primary;
+    @each $name, $color in $button-theme-colors {
+        .k-button-flat.k-button-flat-#{$name} {
+
+            &,
+            &:hover,
+            &.k-state-hover,
+            &:active,
+            &.k-state-active,
+            &:focus,
+            &.k-state-focus {
+                color: $color;
+            }
+
+            // Disabled state
+            &:disabled,
+            &.k-state-disabled {
+                color: $button-disabled-text;
+            }
+        }
+    }
+
+}
+
+
+
+
+@include exports( "link-button/theme" ) {
+
+    @each $name, $color in map-merge( $button-theme-colors, ( "base": $base-text ) ) {
+        .k-button-link.k-button-link-#{$name} {
+            @include box-shadow( none );
+            color: $color;
+
+            &:hover,
+            &.k-state-hover {
+                color: try-shade( $color, 2 );
+            }
+            &:focus,
+            &.k-state-focus {
+                @if ($link-button-shadow) {
+                    box-shadow: 0 0 $link-button-shadow-blur $link-button-shadow-spread rgba( $color, $link-button-shadow-opacity );
+                }
+            }
+            &:active,
+            &.k-state-active,
+            &.k-state-selected {
+                color: try-shade( $color, 2 );
+            }
         }
     }
 
@@ -12029,6 +12168,504 @@ $tooltip-error-border: $tooltip-error-bg !default;
 // #endregion
 // #region @import "../popup/_index.scss"; -> packages/classic/scss/popup/_index.scss
 // File already imported_once. Skipping output.
+// #endregion
+// #region @import "../menu/_index.scss"; -> packages/classic/scss/menu/_index.scss
+// #region @import "../core/_index.scss"; -> packages/classic/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../popup/_index.scss"; -> packages/classic/scss/popup/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../icons/_index.scss"; -> packages/classic/scss/icons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../list/_index.scss"; -> packages/classic/scss/list/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/classic/scss/menu/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "_layout.scss"; -> packages/classic/scss/menu/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/menu/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/menu/_layout.scss
+@include exports("menu/layout") {
+
+    // Base
+    .k-menu {
+        border-width: $menu-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $menu-font-family;
+        font-size: $menu-font-size;
+        line-height: $menu-line-height;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
+        position: relative;
+        cursor: default;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+    }
+
+
+    // Menu item
+    .k-menu-item {
+        box-sizing: border-box;
+        border-width: 0;
+        outline: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        flex: none;
+        position: relative;
+        user-select: none;
+    }
+
+
+    // Menu link
+    .k-menu-link {
+        padding: $menu-item-padding-y $menu-item-padding-x;
+        outline: 0;
+        color: inherit;
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1 1 auto;
+        align-items: center;
+        position: relative;
+        white-space: nowrap;
+        cursor: pointer;
+
+        > .k-icon:not(.k-menu-expand-arrow),
+        > .k-image,
+        > .k-sprite {
+            margin-right: $menu-item-icon-spacing;
+        }
+    }
+
+
+    // Menu item text
+    .k-menu-link-text {
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+
+    // Expand arrow
+    .k-menu-expand-arrow {
+        margin-left: $icon-spacing;
+        margin-right: -$icon-spacing;
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
+        position: relative;
+    }
+    .k-menu-expand-arrow.k-i-arrow-60-left,
+    .k-menu-expand-arrow.k-i-arrow-60-right {
+        margin: 0;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    .k-menu-expand-arrow.k-i-arrow-60-right {
+        right: $icon-spacing;
+    }
+    .k-menu-expand-arrow.k-i-arrow-60-left {
+        left: $icon-spacing;
+    }
+
+
+    // Orientation -- horizontal
+    .k-menu-horizontal {
+        flex-direction: row;
+
+        > .k-menu-item + .k-menu-item {
+            margin-left: $menu-item-spacing;
+        }
+
+        > .k-separator {
+            margin: 0 $menu-separator-spacing;
+            width: 0;
+            height: auto;
+            border-width: 0 0 0 1px;
+            border-style: solid;
+        }
+    }
+
+
+    // Orientation -- vertical
+    .k-menu-vertical {
+        flex-direction: column;
+
+        > .k-menu-item + .k-menu-item {
+            margin-top: $menu-item-spacing;
+        }
+
+        > .k-menu-item > .k-menu-link {
+            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
+            padding-right: $menu-popup-item-padding-end;
+
+            .k-menu-expand-arrow {
+                margin: 0;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: $icon-spacing;
+            }
+        }
+
+        > .k-separator {
+            margin: $menu-separator-spacing 0;
+            height: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            border-color: $panel-border;
+            display: block;
+        }
+    }
+
+
+    // Menu popup
+    .k-menu-popup {
+        border-width: $menu-popup-border-width;
+        border-style: solid;
+        overflow: auto;
+        max-height: 80vh;
+    }
+
+
+    // Sub menu
+    .k-menu-group {
+        margin: 0;
+        padding: 0;
+        // padding: $menu-popup-padding-y $menu-popup-padding-x;
+        font-size: $menu-popup-font-size;
+        line-height: $menu-popup-line-height;
+        list-style: none;
+        display: none;
+        position: absolute;
+
+        .k-menu-popup & {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+        }
+
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $menu-popup-font-size;
+            line-height: $menu-popup-line-height;
+        }
+
+        .k-menu-item + .k-menu-item {
+            margin-top: $menu-popup-item-spacing;
+        }
+
+        .k-menu-link {
+            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
+            padding-right: $menu-popup-item-padding-end;
+
+            .k-menu-expand-arrow {
+                margin: 0;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: $icon-spacing;
+            }
+        }
+
+        .k-separator {
+            margin: $menu-separator-spacing 0;
+            height: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            border-color: $component-border;
+            display: block;
+        }
+    }
+
+
+    // Context menu
+    .k-popups-wrapper {
+        position: relative;
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
+    .k-context-menu {
+        margin: 0;
+        padding: 0;
+        // padding: $menu-popup-padding-y $menu-popup-padding-x;
+        border-width: $menu-popup-border-width;
+        border-style: solid;
+    }
+    .k-animation-container .k-context-menu.k-menu-horizontal {
+        // kendo-jquery adds `display: block` via js and we need to override it.
+        display: flex !important; // sass-lint:disable-line no-important
+        flex-wrap: nowrap;
+    }
+    .k-context-menu-popup {
+        z-index: 12000;
+
+        .k-context-menu {
+            border-width: 0;
+        }
+    }
+    .k-popup .k-context-menu,
+    .k-context-menu-popup .k-context-menu {
+        border-width: 0;
+    }
+
+
+    // Scrolling
+    .k-menu-scroll-wrapper {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        position: relative;
+
+        .k-menu {
+            overflow: hidden;
+            flex-wrap: nowrap;
+        }
+    }
+    .k-menu-scroll-button {
+        @include border-radius( 0 );
+        padding: 0;
+        border-width: 0;
+        border-color: inherit;
+        color: inherit;
+        background: inherit;
+        position: absolute;
+
+        &.k-scroll-left {
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 16px;
+            border-right-width: 1px;
+        }
+        &.k-scroll-right {
+            top: 0;
+            right: 0;
+            height: 100%;
+            width: 16px;
+            border-left-width: 1px;
+        }
+        &.k-scroll-up {
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 16px;
+            border-bottom-width: 1px;
+        }
+        &.k-scroll-down {
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 16px;
+            border-top-width: 1px;
+        }
+    }
+
+
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+
+        .k-menu-link {
+            > .k-icon:not(.k-menu-expand-arrow),
+            > .k-image,
+            > .k-sprite {
+                margin-left: $menu-item-icon-spacing;
+                margin-right: 0;
+            }
+        }
+
+        .k-menu-expand-arrow.k-i-arrow-60-down {
+            margin-left: -$icon-spacing;
+            margin-right: $icon-spacing;
+        }
+
+
+        // Orientation -- horizontal
+        .k-menu-horizontal {
+
+            > .k-menu-item + .k-menu-item {
+                margin-right: $menu-item-spacing;
+                margin-left: 0;
+            }
+        }
+
+
+        // Orientation -- vertical
+        .k-menu-vertical {
+
+            > .k-menu-item > .k-menu-link {
+                padding-right: $menu-popup-item-padding-x;
+                padding-left: $menu-popup-item-padding-end;
+
+                .k-menu-expand-arrow {
+                    right: auto;
+                    left: $icon-spacing;
+                }
+            }
+        }
+
+
+        // Sub menu
+        .k-menu-group {
+
+            .k-menu-link {
+                padding-right: $menu-popup-item-padding-x;
+                padding-left: $menu-popup-item-padding-end;
+
+                .k-menu-expand-arrow {
+                    right: auto;
+                    left: $icon-spacing;
+                }
+            }
+
+        }
+
+    }
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/classic/scss/menu/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/menu/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/menu/_theme.scss
+@include exports("menu/theme") {
+
+    .k-menu:not(.k-context-menu) {
+        @include fill(
+            $menu-text,
+            $menu-bg,
+            $menu-border,
+            $menu-gradient
+        );
+
+        > .k-item {
+            @include fill(
+                $menu-item-text,
+                $menu-item-bg,
+                $menu-item-border,
+                $menu-item-gradient
+            );
+
+            &:hover,
+            &.k-state-hover {
+                @include fill(
+                    $menu-item-hover-text,
+                    $menu-item-hover-bg,
+                    $menu-item-hover-border,
+                    $menu-item-hover-gradient
+                );
+            }
+
+            > .k-state-active,
+            &.k-state-selected {
+                @include fill(
+                    $menu-item-expanded-text,
+                    $menu-item-expanded-bg,
+                    $menu-item-expanded-border,
+                    $menu-item-expanded-gradient
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-state-focused {
+                @include box-shadow( $menu-item-focus-shadow );
+            }
+        }
+    }
+
+    .k-menu-group,
+    .k-menu.k-context-menu {
+        @include fill(
+            $menu-popup-text,
+            $menu-popup-bg,
+            $menu-popup-border,
+            $menu-popup-gradient
+        );
+
+        .k-item {
+            @include fill(
+                $menu-popup-item-text,
+                $menu-popup-item-bg,
+                $menu-popup-item-border,
+                $menu-popup-item-gradient
+            );
+
+            &:hover,
+            &.k-state-hover {
+                @include fill(
+                    $menu-popup-item-hover-text,
+                    $menu-popup-item-hover-bg,
+                    $menu-popup-item-hover-border,
+                    $menu-popup-item-hover-gradient
+                );
+            }
+
+            > .k-state-active,
+            &.k-state-selected {
+                @include fill(
+                    $menu-popup-item-expanded-text,
+                    $menu-popup-item-expanded-bg,
+                    $menu-popup-item-expanded-border,
+                    $menu-popup-item-expanded-gradient
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-state-focused {
+                @include box-shadow( $menu-popup-item-focus-shadow );
+            }
+        }
+    }
+
+
+    // Scrolling
+    .k-menu-scroll-button {
+        @include fill(
+            $menu-scroll-button-text,
+            $menu-scroll-button-bg,
+            $menu-scroll-button-border,
+            $menu-scroll-button-gradient
+        );
+
+        &:hover {
+            @include fill(
+                $menu-scroll-button-hover-text,
+                $menu-scroll-button-hover-bg,
+                $menu-scroll-button-hover-border,
+                $menu-scroll-button-hover-gradient
+            );
+
+            &::before {
+                opacity: 0;
+            }
+        }
+    }
+}
+
+// #endregion
+
+// #endregion
+
 // #endregion
 // #region @import "../icons/_index.scss"; -> packages/classic/scss/icons/_index.scss
 // File already imported_once. Skipping output.
@@ -12277,6 +12914,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
         .k-toolbar {
             padding: 0;
             border-width: 0;
+            flex-shrink: 1;
             color: inherit;
             background: none;
         }
@@ -12418,6 +13056,7 @@ $actions-gradient: null !default;
 
     .k-actions {
         padding: $actions-padding-y $actions-padding-x;
+        box-sizing: border-box;
         border-width: $actions-border-width 0 0 0;
         border-style: solid;
         border-color: inherit;
@@ -12429,6 +13068,12 @@ $actions-gradient: null !default;
         overflow: hidden;
         // TODO: remove
         clear: both;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -13129,6 +13774,12 @@ $fieldset-legend-border: null !default;
         z-index: 12000;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-tooltip-icon {
@@ -13167,7 +13818,6 @@ $fieldset-legend-border: null !default;
         border-width: $tooltip-callout-size;
         border-style: solid;
         border-color: transparent;
-        box-sizing: border-box;
         position: absolute;
         pointer-events: none;
     }
@@ -13411,6 +14061,12 @@ $textbox-line-height: $input-line-height !default;
         position: relative;
         -webkit-appearance: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         // Hide clear icon
         &::-ms-clear { display: none; }
 
@@ -13655,6 +14311,12 @@ $textarea-invalid-focus-shadow: $invalid-shadow !default;
         position: relative;
         -webkit-appearance: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         // Hide clear icon
         &::-ms-clear { display: none; }
 
@@ -13941,9 +14603,18 @@ $listbox-drop-hint-width: 1px !default;
 
         .k-list-scroller {
             width: 100%;
+            height: inherit;
             border-width: $listbox-border-width;
             border-style: solid;
             box-sizing: border-box;
+
+            .k-list-scroller {
+                border-width: 0;
+            }
+
+            .k-list {
+                height: inherit;
+            }
         }
 
         .k-drop-hint {
@@ -14077,6 +14748,12 @@ $progressbar-chunk-border: $body-bg !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Selection
         > .k-state-selected {
@@ -14889,40 +15566,15 @@ $slider-disabled-opacity: null !default;
         line-height: $slider-line-height;
         background: none;
         display: inline-flex;
-        align-items: stretch;
+        align-items: center;
         position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        .k-button {
-            height: $slider-button-size;
-            line-height: $slider-button-size;
-            margin: 0;
-            min-width: 0;
-            outline: 0;
-            padding: 0;
-            position: absolute;
-            width: $slider-button-size;
-            box-sizing: content-box;
-
-            .k-icon,
-            .k-button-icon {
-                vertical-align: baseline;
-                line-height: $slider-button-size;
-                height: 100%;
-            }
-        }
-
-        .k-button-increase {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-
-        .k-button-decrease {
-            position: absolute;
-            left: 0;
-            top: 0;
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
         }
 
         .k-label {
@@ -14964,30 +15616,32 @@ $slider-disabled-opacity: null !default;
                 left: auto;
                 right: 0;
             }
+        }
+    }
 
-            .k-button-increase {
-                left: 0;
-                right: auto;
-            }
 
-            .k-button-decrease {
-                right: 0;
-                left: auto;
-            }
-        }
+    // Slider wrap
+    .k-slider-wrap {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-flow: inherit;
+        align-items: inherit;
+        gap: inherit;
+        position: relative;
     }
 
 
     // New rendering
     .k-slider {
+        width: min-content;
+        height: min-content;
         gap: calc( #{$slider-draghandle-size} / 2 );
 
-        > .k-button {
-            position: relative;
-            flex-shrink: 0;
-            align-self: center;
+        .k-button {
+            flex: none;
         }
-        > .k-slider-track-wrap {
+        .k-slider-track-wrap {
             flex: 1 1 auto;
             display: flex;
             flex-flow: inherit;
@@ -14995,6 +15649,9 @@ $slider-disabled-opacity: null !default;
             touch-action: none;
 
             .k-slider-items {
+                margin: 0;
+                padding: 0;
+                list-style: none;
                 // For some reason, Safari does not understand `flex-basis: 100%`
                 // See telerik/kendo-themes#2197
                 // flex-basis: 100%;
@@ -15002,8 +15659,7 @@ $slider-disabled-opacity: null !default;
                 display: flex;
                 flex-flow: inherit;
                 justify-content: space-between;
-
-                &::after { display: none; }
+                user-select: none;
             }
             .k-tick {
                 flex: 0 0 1px;
@@ -15015,7 +15671,8 @@ $slider-disabled-opacity: null !default;
         }
 
         &-horizontal {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
+                height: 26px;
 
                 .k-slider-track {
                     width: 100%;
@@ -15067,7 +15724,8 @@ $slider-disabled-opacity: null !default;
         }
 
         &-vertical {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
+                width: 26px;
 
                 .k-slider-track {
                     height: 100%;
@@ -15100,14 +15758,8 @@ $slider-disabled-opacity: null !default;
     // Slider vertical
     .k-slider-vertical {
         height: $slider-size;
-        width: $slider-alt-size;
         flex-flow: column-reverse nowrap;
 
-        .k-button-decrease {
-            bottom: 0;
-            top: auto;
-        }
-
         .k-tick {
             text-align: right;
             margin-left: 2px;
@@ -15119,32 +15771,32 @@ $slider-disabled-opacity: null !default;
 
         // ticks
 
-        .k-tick { background-position: -92px center; }
-        .k-slider-topleft .k-tick { background-position: -122px center; }
-        .k-slider-bottomright .k-tick { background-position: -152px center; }
+        .k-tick { background-position: -94px center; }
+        .k-slider-topleft .k-tick { background-position: -124px center; }
+        .k-slider-bottomright .k-tick { background-position: -154px center; }
 
         .k-tick-large {
             display: flex;
             align-items: center;
-            background-position: -2px center;
+            background-position: -4px center;
         }
 
-        .k-slider-topleft .k-tick-large { background-position: -32px center; }
-        .k-slider-bottomright .k-tick-large { background-position: -62px center; }
+        .k-slider-topleft .k-tick-large { background-position: -34px center; }
+        .k-slider-bottomright .k-tick-large { background-position: -64px center; }
 
-        .k-first { background-position: -92px 100%; }
-        .k-tick-large.k-first { background-position: -2px 100%; }
-        .k-slider-topleft .k-first { background-position: -122px 100%; }
-        .k-slider-topleft .k-tick-large.k-first { background-position: -32px 100%; }
-        .k-slider-bottomright .k-first { background-position: -152px 100%; }
-        .k-slider-bottomright .k-tick-large.k-first { background-position: -62px 100%; }
+        .k-first { background-position: -94px 100%; }
+        .k-tick-large.k-first { background-position: -4px 100%; }
+        .k-slider-topleft .k-first { background-position: -124px 100%; }
+        .k-slider-topleft .k-tick-large.k-first { background-position: -34px 100%; }
+        .k-slider-bottomright .k-first { background-position: -154px 100%; }
+        .k-slider-bottomright .k-tick-large.k-first { background-position: -64px 100%; }
 
-        .k-last { background-position: -92px 0; }
-        .k-tick-large.k-last { background-position: -2px 0; }
-        .k-slider-topleft .k-last { background-position: -122px 0; }
-        .k-slider-topleft .k-tick-large.k-last { background-position: -32px 0; }
-        .k-slider-bottomright .k-last { background-position: -152px 0; }
-        .k-slider-bottomright .k-tick-large.k-last { background-position: -62px 0; }
+        .k-last { background-position: -94px 0; }
+        .k-tick-large.k-last { background-position: -4px 0; }
+        .k-slider-topleft .k-last { background-position: -124px 0; }
+        .k-slider-topleft .k-tick-large.k-last { background-position: -34px 0; }
+        .k-slider-bottomright .k-last { background-position: -154px 0; }
+        .k-slider-bottomright .k-tick-large.k-last { background-position: -64px 0; }
 
         // labels
 
@@ -15182,17 +15834,9 @@ $slider-disabled-opacity: null !default;
 
     // Slider horizontal
     .k-slider-horizontal {
-        height: $slider-alt-size;
         width: $slider-size;
         flex-flow: row nowrap;
 
-        // ticks
-        .k-tick {
-            float: left;
-            height: 100%;
-            text-align: center;
-        }
-
         .k-tick { background-position: center -92px; }
         .k-slider-topleft .k-tick { background-position: center -122px; }
         .k-slider-bottomright .k-tick { background-position: center -152px; }
@@ -15238,9 +15882,6 @@ $slider-disabled-opacity: null !default;
                 right: 0;
                 left: auto;
             }
-            .k-slider-buttons .k-slider-track {
-                right: $slider-button-spacing;
-            }
 
             .k-button .k-i-arrow-e,
             .k-button .k-i-arrow-w {
@@ -15249,11 +15890,6 @@ $slider-disabled-opacity: null !default;
         }
     }
 
-    .k-slider-wrap {
-        height: 100%;
-        width: 100%;
-    }
-
     .k-slider-track,
     .k-slider-selection {
         margin: 0;
@@ -15275,16 +15911,6 @@ $slider-disabled-opacity: null !default;
         }
     }
 
-    .k-slider-buttons .k-slider-track {
-        .k-slider-horizontal & {
-            left: $slider-button-spacing;
-        }
-
-        .k-slider-vertical & {
-            bottom: $slider-button-spacing;
-        }
-    }
-
 
     .k-draghandle {
         background-color: transparent;
@@ -15295,30 +15921,9 @@ $slider-disabled-opacity: null !default;
         position: absolute;
         text-align: center;
         text-decoration: none;
-        box-sizing: content-box;
         width: $slider-draghandle-size;
         height: $slider-draghandle-size;
 
-        .k-slider-horizontal & {
-            top: 50%;
-            transform: translateY(-50%);
-
-            &:active,
-            &.k-pressed {
-                transform: translateY(-50%) scale($slider-draghandle-active-scale);
-            }
-        }
-
-        .k-slider-vertical & {
-            left: 50%;
-            transform: translateX(-50%);
-
-            &:active,
-            &.k-pressed {
-                transform: translateX(-50%) scale($slider-draghandle-active-scale);
-            }
-        }
-
         .k-slider-transitions.k-slider-horizontal & {
             transition: left $slider-transition-speed $slider-transition-function, background-color $slider-transition-speed $slider-transition-function, transform $slider-draghandle-transition-speed $slider-draghandle-transition-function;
         }
@@ -15347,34 +15952,18 @@ $slider-disabled-opacity: null !default;
     }
 
 
-    .k-slider-items {
-        user-select: none;
-
-        .k-slider-buttons & {
-            margin-left: $slider-button-spacing;
-        }
-
-        .k-slider-horizontal & {
-            height: 100%;
-            padding: 2px 0;
-            box-sizing: border-box;
-        }
-
-        .k-slider-vertical & {
-            padding-top: 1px;
-        }
-
-        .k-slider-vertical .k-slider-buttons & {
-            margin: 0;
-            padding-top: $slider-button-spacing;
+    // Slider readonly
+    .k-slider.k-readonly {
+        .k-button,
+        .k-slider-track,
+        .k-tick,
+        .k-draghandle {
+            pointer-events: none;
         }
     }
-    .k-slider-items::after {
-        content: "";
-        display: block;
-        clear: both;
-    }
 
+
+    // Slider tooltip
     .k-slider-tooltip {
         .k-callout-n,
         .k-callout-s {
@@ -15386,6 +15975,21 @@ $slider-disabled-opacity: null !default;
             margin-top: -$tooltip-callout-size / 2;
         }
     }
+
+
+    // Angular specific
+    .k-slider kendo-resize-sensor {
+        position: absolute;
+    }
+    .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
+        padding-left: calc( #{$slider-draghandle-size} / 2 );
+        padding-right: calc( #{$slider-draghandle-size} / 2 );
+    }
+    .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
+        padding-top: calc( #{$slider-draghandle-size} / 2 );
+        padding-bottom: calc( #{$slider-draghandle-size} / 2 );
+    }
+
 }
 
 // #endregion
@@ -15460,12 +16064,6 @@ $slider-disabled-opacity: null !default;
         &.k-state-disabled {
             opacity: $slider-disabled-opacity;
         }
-
-        .k-slider-wrap {
-            &:focus {
-                outline: none;
-            }
-        }
     }
 
     .k-slider-horizontal .k-tick {
@@ -16545,6 +17143,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
         flex: 1;
         position: relative;
         z-index: 1;
+        outline: 0;
         overflow: hidden;
 
         &::before,
@@ -16759,6 +17358,12 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -16911,6 +17516,12 @@ $captcha-validation-message-font-style: italic !default;
         display: flex;
         flex-flow: column nowrap;
         gap: $captcha-gap;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Image
@@ -17029,6 +17640,12 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
         position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Table
@@ -17182,6 +17799,12 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {
@@ -17196,7 +17819,6 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             flex-direction: column;
@@ -17210,7 +17832,6 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
         .k-link {
             padding: 0 $picker-select-padding-x;
             min-width: $spinner-min-width;
-            box-sizing: border-box;
             flex: 1 1 auto;
             display: block;
             overflow: hidden;
@@ -17415,6 +18036,12 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
         gap: $colorgradient-gap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Canvas
@@ -17501,10 +18128,6 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
             z-index: 1;
         }
 
-        .k-slider-wrap > .k-slider-track {
-            height: $colorgradient-slider-vertical-size;
-        }
-
         .k-slider-selection {
             display: none;
         }
@@ -17757,6 +18380,12 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
         display: inline-flex;
         flex-direction: column;
         align-items: stretch;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Header
@@ -17921,13 +18550,18 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-selected-color {
             margin: $button-padding-y;
             width: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
             height: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
             border-width: 1px;
             border-style: solid;
-            box-sizing: border-box;
             background-clip: content-box;
             line-height: 0;
             position: relative;
@@ -17947,7 +18581,6 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
             border-width: 0;
             border-style: solid;
             border-color: inherit;
-            box-sizing: border-box;
             font-size: inherit;
             text-align: center;
             flex-direction: column;
@@ -17983,7 +18616,6 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
             border-color: transparent;
-            box-sizing: border-box;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -18127,6 +18759,12 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -18151,7 +18789,7 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
         }
         .k-link {
             padding: 0 $picker-select-padding-x;
-            min-width: $icon-size;
+            min-width: $spinner-min-width;
             flex: 1 1 auto;
             display: block;
             overflow: hidden;
@@ -18331,6 +18969,12 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -18509,6 +19153,12 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -18521,7 +19171,6 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             flex-flow: row nowrap;
@@ -18694,6 +19343,12 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -18704,7 +19359,6 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             align-items: stretch;
@@ -18723,7 +19377,6 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
             display: flex;
             align-items: center;
             justify-content: center;
-            box-sizing: border-box;
         }
     }
 
@@ -18916,6 +19569,12 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
         flex-flow: row nowrap;
         align-items: flex-start;
         gap: map-get( $spacing, 2 );
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -19362,6 +20021,12 @@ $dropdownlist-focused-shadow: $input-focused-shadow !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -19382,7 +20047,6 @@ $dropdownlist-focused-shadow: $input-focused-shadow !default;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
             border-color: transparent;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             flex-flow: row nowrap;
@@ -19615,6 +20279,12 @@ $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-loading-hidden {
             visibility: hidden;
         }
@@ -19660,8 +20330,8 @@ $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
 
             // Token
             .k-button {
-                min-height: calc( #{$form-line-height-em} + #{$button-padding-y-sm} + 2px );
-                padding: ($button-padding-y-sm / 2) ($button-padding-x / 2);
+                min-height: calc( #{$form-line-height-em} + #{$button-padding-y /2} + 2px );
+                padding: ($button-padding-y / 4) ($button-padding-x / 2);
                 margin: $padding-y-sm 0 0 $padding-y-sm;
                 cursor: default;
                 display: inline-flex;
@@ -19963,7 +20633,7 @@ $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
 
 // Component
 // #region @import "_variables.scss"; -> packages/classic/scss/treeview/_variables.scss
-// TreeviewTreeview
+// Treeview
 
 /// Font family of the treeview component.
 /// @group treeview
@@ -20086,6 +20756,21 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
         white-space: nowrap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Treeview filter
+    .k-treeview-filter {
+        padding: map-get( $spacing, 2 );
+        display: block;
+        position: relative;
+        flex: none;
     }
 
 
@@ -20149,11 +20834,6 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
     .k-treeview .k-i-collapse {
         margin-left: -$treeview-indent;
         cursor: pointer;
-
-        + .k-checkbox-wrap,
-        + .k-checkbox-wrapper {
-            margin-left: $icon-spacing;
-        }
     }
 
 
@@ -20166,6 +20846,7 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
     // Checkbox
     .k-treeview .k-checkbox-wrap,
     .k-treeview .k-checkbox-wrapper {
+        margin-left: $icon-spacing;
         margin-right: $icon-spacing;
         align-self: center;
     }
@@ -20229,11 +20910,6 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
         .k-treeview-toggle {
             margin-left: 0;
             margin-right: -$treeview-indent;
-
-            + .k-checkbox-wrap,
-            + .k-checkbox-wrapper {
-                margin-right: $icon-spacing;
-            }
         }
 
         // Loading
@@ -20242,13 +20918,6 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
             margin-left: $icon-spacing;
         }
 
-        // Checkbox
-        .k-checkbox-wrap,
-        .k-checkbox-wrapper {
-            margin-right: 0;
-            margin-left: $icon-spacing;
-        }
-
         // Treeview leaf
         .k-treeview-leaf,
         .k-in {
@@ -20259,8 +20928,8 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
                 margin-left: $icon-spacing;
             }
         }
-
     }
+
 }
 
 // #endregion
@@ -20458,6 +21127,12 @@ $dropdowntree-filter-spacer: $dropdowntree-popup-spacer-y !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -20607,6 +21282,12 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         &.k-state-readonly {
             pointer-events: none;
         }
@@ -20615,7 +21296,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
     .k-rating-container {
         flex: 0 1 auto;
         position: relative;
-        box-sizing: border-box;
         margin: 0 $rating-container-margin-x;
 
         .k-rating-item {
@@ -20777,6 +21457,12 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         // Input
         > .k-input {
             padding: $input-padding-y $input-padding-x;
@@ -20882,20 +21568,25 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
 // Component
 // #region @import "_variables.scss"; -> packages/classic/scss/switch/_variables.scss
 // Switch
-$switch-size: 60px !default;
+$switch-size: 56px !default;
 $switch-border-radius: 9999px !default;
 
+/// Font family of the switch.
+/// @group switch
 $switch-font-family: $font-family !default;
-$switch-font-size: $font-size-xs !default;
-$switch-line-height: $line-height !default;
+$switch-font-size: $font-size-sm !default;
 
 $switch-track-size: null !default;
-$switch-container-border-width: 0px !default;
-$switch-container-padding-x: 0px !default;
+/// Border width of the switch track.
+/// @group switch
+$switch-container-border-width: 1px !default;
+$switch-container-padding-x: 2px !default;
 $switch-container-padding-y: $switch-container-padding-x !default;
 
-$switch-handle-size: 30px !default;
+$switch-handle-size: 24px !default;
 $switch-handle-border-radius: 9999px !default;
+/// Border width of the switch thumb.
+/// @group switch
 $switch-handle-border-width: 1px !default;
 $switch-thumb-start-x: 0px !default;
 // TODO: Remove width property from jQuery and Blazor, and do not use 100% for thumb X calc
@@ -20903,69 +21594,158 @@ $switch-thumb-end-x: calc( 100% - #{$switch-handle-size}) !default;
 
 $switch-label-offset: 8px !default;
 $switch-label-width: calc( 100% - (#{$switch-handle-size} + #{$switch-label-offset} + #{$switch-container-padding-x} ) ) !default;
-$switch-label-text-transform: uppercase !default;
+/// Text transform of the switch label.
+/// @group switch
+$switch-label-text-transform: null !default;
+/// Display of the switch label.
+/// @group switch
 $switch-label-display: inline !default;
 
-$switch-container-shadow: inset 0 0 0 1px $base-border !default;
-$switch-container-hovered-shadow: inset 0 0 0 1px $hovered-border !default;
-$switch-container-focused-shadow: inset 0 0 0 3px rgba( black, .06) !default;
-
-$switch-on-bg: $primary !default;
-$switch-on-text: contrast-wcag( $switch-on-bg ) !default;
-$switch-on-border: null !default;
-$switch-on-gradient: null !default;
-$switch-on-shadow: null !default;
-
-$switch-on-hovered-bg: shade( $switch-on-bg ) !default;
-$switch-on-hovered-text: $switch-on-text !default;
-$switch-on-hovered-border: null !default;
-$switch-on-hovered-gradient: null !default;
-
-$switch-on-focused-bg: null !default;
-$switch-on-focused-text: null !default;
-$switch-on-focused-border: null !default;
-$switch-on-focused-gradient: null !default;
-$switch-on-focused-shadow: null !default;
-
-$switch-on-handle-bg: darken( white, 5 ) !default;
-$switch-on-handle-text: $switch-on-text !default;
-$switch-on-handle-border: $base-border !default;
-$switch-on-handle-gradient: null !default;
-$switch-on-handle-shadow: null !default;
-
-$switch-on-handle-hovered-bg: darken( white, 7 ) !default;
-$switch-on-handle-hovered-text: $switch-on-text !default;
-$switch-on-handle-hovered-border: $hovered-border !default;
-$switch-on-handle-hovered-gradient: null !default;
+$switch-container-shadow: null !default;
+$switch-container-hovered-shadow: null !default;
+$switch-container-focused-shadow: 0 0 3px 1px rgba( if($dark-theme, $white, $black), .25 ) !default;
 
+/// The background of the track when the switch is not checked.
+/// @group switch
 $switch-off-bg: $component-bg !default;
+/// The text color of the track when the switch is not checked.
+/// @group switch
 $switch-off-text: $component-text !default;
-$switch-off-border: null !default;
+/// The border color of the track when the switch is not checked.
+/// @group switch
+$switch-off-border: $component-border !default;
+/// The background gradient of the track when the switch is not checked.
+/// @group switch
 $switch-off-gradient: null !default;
 $switch-off-shadow: null !default;
 
-$switch-off-hovered-bg: $switch-off-bg !default;
-$switch-off-hovered-text: $switch-off-text !default;
+/// The background of the track when the hovered switch is not checked.
+/// @group switch
+$switch-off-hovered-bg: null !default;
+/// The text color of the track when the hovered switch is not checked.
+/// @group switch
+$switch-off-hovered-text: null !default;
+/// The border color of the track when the hovered switch is not checked.
+/// @group switch
 $switch-off-hovered-border: null !default;
+/// The background gradient of the track when the hovered switch is not checked.
+/// @group switch
 $switch-off-hovered-gradient: null !default;
 
+/// The background of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-bg: null !default;
+/// The text color of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-text: null !default;
+/// The border color of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-border: null !default;
+/// The background gradient of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-gradient: null !default;
+/// The ring around the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-shadow: null !default;
 
-$switch-off-handle-bg: $switch-on-handle-bg !default;
-$switch-off-handle-text: $switch-off-text !default;
-$switch-off-handle-border: $switch-on-handle-border !default;
-$switch-off-handle-gradient: null !default;
+/// The background of the thumb when the switch is not checked.
+/// @group switch
+$switch-off-handle-bg: try-shade( $switch-off-bg ) !default;
+/// The text color of the thumb when the switch is not checked.
+/// @group switch
+$switch-off-handle-text: null !default;
+/// The border color of the thumb when the switch is not checked.
+/// @group switch
+$switch-off-handle-border: $switch-off-border !default;
+/// The background gradient of the thumb when the switch is not checked.
+/// @group switch
+$switch-off-handle-gradient: $base-gradient !default;
 $switch-off-handle-shadow: null !default;
 
-$switch-off-handle-hovered-bg: $switch-on-handle-hovered-bg !default;
-$switch-off-handle-hovered-text: $switch-off-text !default;
-$switch-off-handle-hovered-border: $switch-on-handle-hovered-border !default;
+/// The background of the thumb when the hovered switch is not checked.
+/// @group switch
+$switch-off-handle-hovered-bg: try-shade( $switch-off-handle-bg ) !default;
+/// The text color of the thumb when the hovered switch is not checked.
+/// @group switch
+$switch-off-handle-hovered-text: null !default;
+/// The border color of the thumb when the hovered switch is not checked.
+/// @group switch
+$switch-off-handle-hovered-border: $switch-off-border !default;
+/// The background gradient of the thumb when the hovered switch is not checked.
+/// @group switch
 $switch-off-handle-hovered-gradient: null !default;
 
+
+/// The background of the track when the switch is checked.
+/// @group switch
+$switch-on-bg: $component-bg !default;
+/// The text color of the track when the switch is checked.
+/// @group switch
+$switch-on-text: $primary !default;
+/// The border color of the track when the switch is checked.
+/// @group switch
+$switch-on-border: $component-border !default;
+/// The background gradient of the track when the switch is checked.
+/// @group switch
+$switch-on-gradient: null !default;
+$switch-on-shadow: null !default;
+
+/// The background of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-bg: null !default;
+/// The text color of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-text: null !default;
+/// The border color of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-border: null !default;
+/// The background gradient of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-gradient: null !default;
+
+/// The background of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-bg: null !default;
+/// The text color of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-text: null !default;
+/// The border color of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-border: null !default;
+/// The background gradient of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-gradient: null !default;
+/// The ring around the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-shadow: null !default;
+
+/// The background of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-bg: $primary !default;
+/// The text color of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-text: null !default;
+/// The border color of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-border: try-shade( $switch-on-handle-bg ) !default;
+/// The background gradient of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-gradient: $base-gradient !default;
+$switch-on-handle-shadow: null !default;
+
+/// The background of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-bg: try-shade( $switch-on-handle-bg ) !default;
+/// The text color of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-text: null !default;
+/// The border color of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-border: try-shade( $switch-on-handle-hovered-bg ) !default;
+/// The background gradient of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-gradient: null !default;
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/classic/scss/switch/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/switch/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/switch/_layout.scss
@@ -20980,14 +21760,20 @@ $switch-off-handle-hovered-gradient: null !default;
         display: inline-flex;
         align-items: center;
         vertical-align: middle;
-        font-family: $font-family;
-        font-size: $font-size-xs;
-        line-height: $line-height;
+        font-family: $switch-font-family;
+        font-size: $switch-font-size;
+        line-height: 1;
         user-select: none;
         text-align: left;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         [type="checkbox"] {
             display: none;
         }
@@ -20997,11 +21783,9 @@ $switch-off-handle-hovered-gradient: null !default;
         }
     }
 
-    .k-switch,
-    .k-switch-container,
-    .k-switch-handle {
-        box-sizing: border-box;
-    }
+    // .k-switch,
+    // .k-switch-container,
+    // .k-switch-handle {}
 
 
     // Switch track
@@ -21061,7 +21845,8 @@ $switch-off-handle-hovered-gradient: null !default;
 
     // RTL
     .k-rtl .k-switch,
-    .k-switch[dir = "rtl"] {
+    [dir="rtl"] .k-switch,
+    .k-switch[dir="rtl"] {
         &.k-switch-on .k-switch-handle {
             left: $switch-thumb-start-x;
         }
@@ -21479,6 +22264,12 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-upload-button {
             min-width: 7em;
         }
@@ -21634,7 +22425,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
                 border-style: solid;
                 font-size: ($font-size * .57);
                 text-transform: uppercase;
-                box-sizing: content-box;
                 position: absolute;
                 top: $upload-item-padding-y;
             }
@@ -22110,9 +22900,14 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         > * {
             flex-shrink: 0;
-
         }
 
         // Appbar section
@@ -22345,814 +23140,325 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
         font-family: $fab-font-family;
         text-align: center;
         white-space: nowrap;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        vertical-align: middle;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        cursor: pointer;
-        outline: none;
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    // FAB Icon
-    .k-fab-icon {
-        width: $fab-icon-width;
-        height: $fab-icon-height;
-
-        &:not(:only-child) {
-            margin-right: $fab-icon-spacing;
-            margin-left: -$fab-icon-spacing;
-        }
-    }
-
-
-    // Sizes
-    .k-fab-sm {
-        padding: $fab-padding-y-sm $fab-padding-x-sm;
-    }
-    .k-fab-md {
-        padding: $fab-padding-y $fab-padding-x;
-    }
-    .k-fab-lg {
-        padding: $fab-padding-y-lg $fab-padding-x-lg;
-    }
-
-
-    // Shapes
-    .k-fab-square {
-        border-radius: 0;
-
-        &.k-fab-sm {
-            width: $fab-size-sm;
-            height: $fab-size-sm;
-        }
-        &.k-fab-md {
-            width: $fab-size-md;
-            height: $fab-size-md;
-        }
-        &.k-fab-lg {
-            width: $fab-size-lg;
-            height: $fab-size-lg;
-        }
-    }
-    .k-fab-circle {
-        border-radius: 50%;
-
-        &.k-fab-sm {
-            width: $fab-size-sm;
-            height: $fab-size-sm;
-        }
-        &.k-fab-md {
-            width: $fab-size-md;
-            height: $fab-size-md;
-        }
-        &.k-fab-lg {
-            width: $fab-size-lg;
-            height: $fab-size-lg;
-        }
-    }
-    .k-fab-pill {
-        border-radius: 5rem;
-    }
-    .k-fab-rounded {
-        @include border-radius( $fab-border-radius );
-    }
-
-
-    // Items
-    .k-fab-items {
-        margin: 0;
-        padding: $fab-items-padding-y $fab-items-padding-x;
-        display: flex;
-    }
-
-    .k-fab-items-bottom {
-        flex-direction: column;
-    }
-    .k-fab-items-bottom .k-fab-item:last-child {
-        margin-bottom: 0;
-    }
-
-    .k-fab-items-top {
-        flex-direction: column-reverse;
-    }
-    .k-fab-items-top .k-fab-item:first-child {
-        margin-bottom: 0;
-    }
-
-    .k-fab-item {
-        list-style-type: none;
-        margin-bottom: map-get( $spacing, 2 );
-        outline: none;
-        white-space: nowrap;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        cursor: pointer;
-
-        &.k-text-right {
-            flex-direction: row;
-
-            .k-fab-item-text {
-                margin-right: map-get( $spacing, 2 );
-            }
-        }
-        &.k-text-left {
-            flex-direction: row-reverse;
-
-            .k-fab-item-text {
-                margin-left: map-get( $spacing, 2 );
-            }
-        }
-    }
-
-    .k-fab-item-text {
-        padding: $fab-item-text-padding-y $fab-item-text-padding-x;
-        border-width: $fab-item-text-border-width;
-        border-radius: $fab-item-text-border-radius;
-        font-size: $fab-item-text-font-size;
-        line-height: $fab-item-text-line-height;
-    }
-
-    .k-fab-item-icon {
-        width: $fab-item-icon-width;
-        height: $fab-item-icon-height;
-        padding: $fab-item-icon-padding-y $fab-item-icon-padding-x;
-        border-width: $fab-item-icon-border-width;
-        border-radius: $fab-item-icon-border-radius;
-        box-sizing: content-box;
-        outline: none;
-    }
-
-}
-
-@include exports("fab/layout/rtl") {
-
-    .k-rtl .k-fab,
-    .k-fab[dir="rtl"],
-    [dir="rtl"] .k-fab {
-        direction: rtl;
-
-        .k-fab-icon {
-            &:not(:only-child) {
-                margin-right: -$icon-spacing;
-                margin-left: $icon-spacing;
-            }
-        }
-    }
-
-    .k-rtl .k-fab-popup,
-    [dir="rtl"] .k-fab-popup {
-        .k-fab-item.k-text-left {
-            flex-direction: row;
-        }
-
-        .k-fab-item.k-text-right {
-            flex-direction: row-reverse;
-        }
-    }
-
-}
-
-
-// #endregion
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/classic/scss/fab/_theme.scss
-// #region @import "~@progress/kendo-theme-default/scss/fab/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/fab/_theme.scss
-@include exports( "fab/theme" ) {
-
-    // Normal state
-    @each $name, $color in $fab-theme-colors {
-        .k-fab-#{$name} {
-            @include box-shadow($fab-shadow);
-            outline: $fab-border-width solid $color;
-            outline-offset: -$fab-border-width;
-            border-color: $color;
-            color: contrast-wcag( $color );
-            background-color: $color;
-        }
-    }
-
-    // Hover state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-hover.k-fab-#{$name},
-        .k-state-hovered.k-fab-#{$name},
-        .k-fab-#{$name}:hover {
-            border-color: try-shade( $color, .5 );
-            background-color: try-shade( $color, .5 );
-        }
-    }
-
-    // Focus state
-    @each $name, $color in $fab-theme-colors {
-        .k-fab-#{$name}.k-state-focus,
-        .k-fab-#{$name}.k-state-focused,
-        .k-fab-#{$name}:focus {
-            outline-style: solid;
-            outline-width: 2px;
-            outline-color: rgba( $color, .3 );
-        }
-    }
-
-    // Active state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-active.k-fab-#{$name},
-        .k-state-selected.k-fab-#{$name},
-        .k-fab-#{$name}:active {
-            @include box-shadow($fab-active-shadow);
-            border-color: try-shade( $color, 1.5);
-            background-color: try-shade( $color, 1.5);
-        }
-    }
-
-    // Disabled state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-disabled.k-fab-#{$name},
-        .k-fab-#{$name}:disabled {
-            @include box-shadow($fab-disabled-shadow);
-            background-color: try-tint( $color, 5 );
-            color: try-tint( contrast-wcag( $color ), 5 );
-            opacity: 1;
-        }
-    }
-
-    // Items
-    .k-fab-item-text {
-        @include fill(
-            $fab-item-text,
-            $fab-item-bg,
-            $fab-item-border
-        );
-        @include box-shadow($fab-item-shadow);
-
-    }
-    .k-fab-item-icon {
-        @include fill(
-            $fab-item-icon-text,
-            $fab-item-icon-bg,
-            $fab-item-icon-border
-        );
-        @include box-shadow($fab-item-shadow);
-        outline: $fab-border-width solid rgba(0, 0, 0, .08);
-        outline-offset: -$fab-border-width;
-    }
-
-    // Hover state
-    .k-fab-item.k-state-hover .k-fab-item-icon,
-    .k-fab-item.k-state-hovered .k-fab-item-icon
-    .k-fab-item:hover .k-fab-item-icon {
-        border-color: try-shade( $fab-item-icon-border, .5 );
-        background-color: try-shade( $fab-item-icon-bg, .5 );
-    }
-
-    // Focus state
-    .k-fab-item:focus .k-fab-item-text,
-    .k-fab-item:focus .k-fab-item-icon,
-    .k-fab-item.k-state-focus .k-fab-item-text,
-    .k-fab-item.k-state-focus .k-fab-item-icon,
-    .k-fab-item.k-state-focused .k-fab-item-text,
-    .k-fab-item.k-state-focused .k-fab-item-icon {
-        outline-style: solid;
-        outline-width: 2px;
-        outline-color: rgba(0, 0, 0, .08);
-    }
-
-    // Active state
-    .k-fab-item.k-state-active .k-fab-item-icon,
-    .k-fab-item:active .k-fab-item-icon {
-        @include box-shadow($fab-item-active-shadow);
-        border-color: try-shade( $fab-item-icon-border, 1);
-        background-color: try-shade( $fab-item-icon-bg, 1);
-    }
-
-    // Disabled state
-    .k-fab-item.k-state-disabled,
-    .k-fab-item:disabled {
-        opacity: 1;
-
-        .k-fab-item-text,
-        .k-fab-item-icon {
-            @include box-shadow($fab-item-disabled-shadow);
-            background-color: try-tint( $fab-item-bg, 5 );
-            color: try-tint( $fab-item-text, 5 );
-        }
-    }
-
-    // Popup
-    .k-animation-container > .k-fab-popup {
-        @include box-shadow( none );
-    }
-
-}
-
-// #endregion
-
-// #endregion
-
-// #endregion
-// #region @import "menu/_index.scss"; -> packages/classic/scss/menu/_index.scss
-// #region @import "../core/_index.scss"; -> packages/classic/scss/core/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Dependencies
-// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../popup/_index.scss"; -> packages/classic/scss/popup/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../icons/_index.scss"; -> packages/classic/scss/icons/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../list/_index.scss"; -> packages/classic/scss/list/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/classic/scss/menu/_variables.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "_layout.scss"; -> packages/classic/scss/menu/_layout.scss
-// #region @import "~@progress/kendo-theme-default/scss/menu/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/menu/_layout.scss
-@include exports("menu/layout") {
-
-    // Base
-    .k-menu {
-        border-width: $menu-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $menu-font-family;
-        font-size: $menu-font-size;
-        line-height: $menu-line-height;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: stretch;
-        position: relative;
-        cursor: default;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-    }
-
-
-    // Menu item
-    .k-menu-item {
-        box-sizing: border-box;
-        border-width: 0;
-        outline: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        flex: none;
-        position: relative;
-        user-select: none;
-    }
-
-
-    // Menu link
-    .k-menu-link {
-        padding: $menu-item-padding-y $menu-item-padding-x;
-        outline: 0;
-        color: inherit;
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 1 1 auto;
-        align-items: center;
-        position: relative;
-        white-space: nowrap;
-        cursor: pointer;
-
-        > .k-icon:not(.k-menu-expand-arrow),
-        > .k-image,
-        > .k-sprite {
-            margin-right: $menu-item-icon-spacing;
-        }
-    }
-
-
-    // Menu item text
-    .k-menu-link-text {
-        flex: 1 1 auto;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-
-    // Expand arrow
-    .k-menu-expand-arrow {
-        margin-left: $icon-spacing;
-        margin-right: -$icon-spacing;
-        display: inline-flex;
-        flex-flow: row wrap;
-        align-items: center;
-        flex: none;
-        position: relative;
-    }
-    .k-menu-expand-arrow.k-i-arrow-60-left,
-    .k-menu-expand-arrow.k-i-arrow-60-right {
-        margin: 0;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-    .k-menu-expand-arrow.k-i-arrow-60-right {
-        right: $icon-spacing;
-    }
-    .k-menu-expand-arrow.k-i-arrow-60-left {
-        left: $icon-spacing;
-    }
-
-
-    // Orientation -- horizontal
-    .k-menu-horizontal {
-        flex-direction: row;
-
-        > .k-menu-item + .k-menu-item {
-            margin-left: $menu-item-spacing;
-        }
-
-        > .k-separator {
-            margin: 0 $menu-separator-spacing;
-            width: 0;
-            height: auto;
-            border-width: 0 0 0 1px;
-            border-style: solid;
-        }
-    }
-
-
-    // Orientation -- vertical
-    .k-menu-vertical {
-        flex-direction: column;
-
-        > .k-menu-item + .k-menu-item {
-            margin-top: $menu-item-spacing;
-        }
-
-        > .k-menu-item > .k-menu-link {
-            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
-            padding-right: $menu-popup-item-padding-end;
-
-            .k-menu-expand-arrow {
-                margin: 0;
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                right: $icon-spacing;
-            }
-        }
-
-        > .k-separator {
-            margin: $menu-separator-spacing 0;
-            height: 0;
-            border-width: 1px 0 0;
-            border-style: solid;
-            border-color: $panel-border;
-            display: block;
-        }
-    }
-
-
-    // Menu popup
-    .k-menu-popup {
-        border-width: $menu-popup-border-width;
-        border-style: solid;
-        overflow: auto;
-        max-height: 80vh;
-    }
-
-
-    // Sub menu
-    .k-menu-group {
-        margin: 0;
-        padding: 0;
-        // padding: $menu-popup-padding-y $menu-popup-padding-x;
-        font-size: $menu-popup-font-size;
-        line-height: $menu-popup-line-height;
-        list-style: none;
-        display: none;
-        position: absolute;
-
-        .k-menu-popup & {
-            position: relative;
-            display: flex;
-            flex-direction: column;
-        }
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        outline: none;
 
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $menu-popup-font-size;
-            line-height: $menu-popup-line-height;
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
         }
 
-        .k-menu-item + .k-menu-item {
-            margin-top: $menu-popup-item-spacing;
+        &:focus {
+            outline: none;
         }
+    }
 
-        .k-menu-link {
-            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
-            padding-right: $menu-popup-item-padding-end;
-
-            .k-menu-expand-arrow {
-                margin: 0;
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                right: $icon-spacing;
-            }
-        }
+    // FAB Icon
+    .k-fab-icon {
+        width: $fab-icon-width;
+        height: $fab-icon-height;
 
-        .k-separator {
-            margin: $menu-separator-spacing 0;
-            height: 0;
-            border-width: 1px 0 0;
-            border-style: solid;
-            border-color: $component-border;
-            display: block;
+        &:not(:only-child) {
+            margin-right: $fab-icon-spacing;
+            margin-left: -$fab-icon-spacing;
         }
     }
 
 
-    // Context menu
-    .k-popups-wrapper {
-        position: relative;
-        border: 0;
-        margin: 0;
-        padding: 0;
-    }
-    .k-context-menu {
-        margin: 0;
-        padding: 0;
-        // padding: $menu-popup-padding-y $menu-popup-padding-x;
-        border-width: $menu-popup-border-width;
-        border-style: solid;
-    }
-    .k-animation-container .k-context-menu.k-menu-horizontal {
-        // kendo-jquery adds `display: block` via js and we need to override it.
-        display: flex !important; // sass-lint:disable-line no-important
-        flex-wrap: nowrap;
+    // Sizes
+    .k-fab-sm {
+        padding: $fab-padding-y-sm $fab-padding-x-sm;
     }
-    .k-context-menu-popup {
-        z-index: 12000;
-
-        .k-context-menu {
-            border-width: 0;
-        }
+    .k-fab-md {
+        padding: $fab-padding-y $fab-padding-x;
     }
-    .k-popup .k-context-menu,
-    .k-context-menu-popup .k-context-menu {
-        border-width: 0;
+    .k-fab-lg {
+        padding: $fab-padding-y-lg $fab-padding-x-lg;
     }
 
 
-    // Scrolling
-    .k-menu-scroll-wrapper {
-        margin: 0;
-        padding: 0;
-        border: 0;
-        position: relative;
+    // Shapes
+    .k-fab-square {
+        border-radius: 0;
 
-        .k-menu {
-            overflow: hidden;
-            flex-wrap: nowrap;
+        &.k-fab-sm {
+            width: $fab-size-sm;
+            height: $fab-size-sm;
+        }
+        &.k-fab-md {
+            width: $fab-size-md;
+            height: $fab-size-md;
+        }
+        &.k-fab-lg {
+            width: $fab-size-lg;
+            height: $fab-size-lg;
         }
     }
-    .k-menu-scroll-button {
-        @include border-radius( 0 );
-        padding: 0;
-        border-width: 0;
-        border-color: inherit;
-        color: inherit;
-        background: inherit;
-        position: absolute;
+    .k-fab-circle {
+        border-radius: 50%;
 
-        &.k-scroll-left {
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 16px;
-            border-right-width: 1px;
-        }
-        &.k-scroll-right {
-            top: 0;
-            right: 0;
-            height: 100%;
-            width: 16px;
-            border-left-width: 1px;
+        &.k-fab-sm {
+            width: $fab-size-sm;
+            height: $fab-size-sm;
         }
-        &.k-scroll-up {
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 16px;
-            border-bottom-width: 1px;
+        &.k-fab-md {
+            width: $fab-size-md;
+            height: $fab-size-md;
         }
-        &.k-scroll-down {
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 16px;
-            border-top-width: 1px;
+        &.k-fab-lg {
+            width: $fab-size-lg;
+            height: $fab-size-lg;
         }
     }
+    .k-fab-pill {
+        border-radius: 5rem;
+    }
+    .k-fab-rounded {
+        @include border-radius( $fab-border-radius );
+    }
 
 
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
+    // Items
+    .k-fab-items {
+        margin: 0;
+        padding: $fab-items-padding-y $fab-items-padding-x;
+        display: flex;
+    }
 
-        .k-menu-link {
-            > .k-icon:not(.k-menu-expand-arrow),
-            > .k-image,
-            > .k-sprite {
-                margin-left: $menu-item-icon-spacing;
-                margin-right: 0;
-            }
-        }
+    .k-fab-items-bottom {
+        flex-direction: column;
+    }
+    .k-fab-items-bottom .k-fab-item:last-child {
+        margin-bottom: 0;
+    }
 
-        .k-menu-expand-arrow.k-i-arrow-60-down {
-            margin-left: -$icon-spacing;
-            margin-right: $icon-spacing;
-        }
+    .k-fab-items-top {
+        flex-direction: column-reverse;
+    }
+    .k-fab-items-top .k-fab-item:first-child {
+        margin-bottom: 0;
+    }
 
+    .k-fab-item {
+        list-style-type: none;
+        margin-bottom: map-get( $spacing, 2 );
+        outline: none;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        cursor: pointer;
 
-        // Orientation -- horizontal
-        .k-menu-horizontal {
+        &.k-text-right {
+            flex-direction: row;
 
-            > .k-menu-item + .k-menu-item {
-                margin-right: $menu-item-spacing;
-                margin-left: 0;
+            .k-fab-item-text {
+                margin-right: map-get( $spacing, 2 );
             }
         }
+        &.k-text-left {
+            flex-direction: row-reverse;
 
-
-        // Orientation -- vertical
-        .k-menu-vertical {
-
-            > .k-menu-item > .k-menu-link {
-                padding-right: $menu-popup-item-padding-x;
-                padding-left: $menu-popup-item-padding-end;
-
-                .k-menu-expand-arrow {
-                    right: auto;
-                    left: $icon-spacing;
-                }
+            .k-fab-item-text {
+                margin-left: map-get( $spacing, 2 );
             }
         }
+    }
+
+    .k-fab-item-text {
+        padding: $fab-item-text-padding-y $fab-item-text-padding-x;
+        border-width: $fab-item-text-border-width;
+        border-radius: $fab-item-text-border-radius;
+        font-size: $fab-item-text-font-size;
+        line-height: $fab-item-text-line-height;
+    }
 
+    .k-fab-item-icon {
+        width: $fab-item-icon-width;
+        height: $fab-item-icon-height;
+        padding: $fab-item-icon-padding-y $fab-item-icon-padding-x;
+        border-width: $fab-item-icon-border-width;
+        border-radius: $fab-item-icon-border-radius;
+        box-sizing: content-box;
+        outline: none;
+    }
 
-        // Sub menu
-        .k-menu-group {
+}
 
-            .k-menu-link {
-                padding-right: $menu-popup-item-padding-x;
-                padding-left: $menu-popup-item-padding-end;
+@include exports("fab/layout/rtl") {
 
-                .k-menu-expand-arrow {
-                    right: auto;
-                    left: $icon-spacing;
-                }
+    .k-rtl .k-fab,
+    .k-fab[dir="rtl"],
+    [dir="rtl"] .k-fab {
+        direction: rtl;
+
+        .k-fab-icon {
+            &:not(:only-child) {
+                margin-right: -$icon-spacing;
+                margin-left: $icon-spacing;
             }
+        }
+    }
 
+    .k-rtl .k-fab-popup,
+    [dir="rtl"] .k-fab-popup {
+        .k-fab-item.k-text-left {
+            flex-direction: row;
         }
 
+        .k-fab-item.k-text-right {
+            flex-direction: row-reverse;
+        }
     }
 
 }
 
+
 // #endregion
 
 // #endregion
-// #region @import "_theme.scss"; -> packages/classic/scss/menu/_theme.scss
-// #region @import "~@progress/kendo-theme-default/scss/menu/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/menu/_theme.scss
-@include exports("menu/theme") {
+// #region @import "_theme.scss"; -> packages/classic/scss/fab/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/fab/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/fab/_theme.scss
+@include exports( "fab/theme" ) {
 
-    .k-menu:not(.k-context-menu) {
-        @include fill(
-            $menu-text,
-            $menu-bg,
-            $menu-border,
-            $menu-gradient
-        );
+    // Normal state
+    @each $name, $color in $fab-theme-colors {
+        .k-fab-#{$name} {
+            @include box-shadow($fab-shadow);
+            outline: $fab-border-width solid $color;
+            outline-offset: -$fab-border-width;
+            border-color: $color;
+            color: contrast-wcag( $color );
+            background-color: $color;
+        }
+    }
 
-        > .k-item {
-            @include fill(
-                $menu-item-text,
-                $menu-item-bg,
-                $menu-item-border,
-                $menu-item-gradient
-            );
+    // Hover state
+    @each $name, $color in $fab-theme-colors {
+        .k-state-hover.k-fab-#{$name},
+        .k-state-hovered.k-fab-#{$name},
+        .k-fab-#{$name}:hover {
+            border-color: try-shade( $color, .5 );
+            background-color: try-shade( $color, .5 );
+        }
+    }
 
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $menu-item-hover-text,
-                    $menu-item-hover-bg,
-                    $menu-item-hover-border,
-                    $menu-item-hover-gradient
-                );
-            }
+    // Focus state
+    @each $name, $color in $fab-theme-colors {
+        .k-fab-#{$name}.k-state-focus,
+        .k-fab-#{$name}.k-state-focused,
+        .k-fab-#{$name}:focus {
+            outline-style: solid;
+            outline-width: 2px;
+            outline-color: rgba( $color, .3 );
+        }
+    }
 
-            > .k-state-active,
-            &.k-state-selected {
-                @include fill(
-                    $menu-item-expanded-text,
-                    $menu-item-expanded-bg,
-                    $menu-item-expanded-border,
-                    $menu-item-expanded-gradient
-                );
-            }
+    // Active state
+    @each $name, $color in $fab-theme-colors {
+        .k-state-active.k-fab-#{$name},
+        .k-state-selected.k-fab-#{$name},
+        .k-fab-#{$name}:active {
+            @include box-shadow($fab-active-shadow);
+            border-color: try-shade( $color, 1.5);
+            background-color: try-shade( $color, 1.5);
+        }
+    }
 
-            &:focus,
-            &.k-state-focus,
-            &.k-state-focused {
-                @include box-shadow( $menu-item-focus-shadow );
-            }
+    // Disabled state
+    @each $name, $color in $fab-theme-colors {
+        .k-state-disabled.k-fab-#{$name},
+        .k-fab-#{$name}:disabled {
+            @include box-shadow($fab-disabled-shadow);
+            background-color: try-tint( $color, 5 );
+            color: try-tint( contrast-wcag( $color ), 5 );
+            opacity: 1;
         }
     }
 
-    .k-menu-group,
-    .k-menu.k-context-menu {
+    // Items
+    .k-fab-item-text {
         @include fill(
-            $menu-popup-text,
-            $menu-popup-bg,
-            $menu-popup-border,
-            $menu-popup-gradient
+            $fab-item-text,
+            $fab-item-bg,
+            $fab-item-border
         );
+        @include box-shadow($fab-item-shadow);
 
-        .k-item {
-            @include fill(
-                $menu-popup-item-text,
-                $menu-popup-item-bg,
-                $menu-popup-item-border,
-                $menu-popup-item-gradient
-            );
-
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $menu-popup-item-hover-text,
-                    $menu-popup-item-hover-bg,
-                    $menu-popup-item-hover-border,
-                    $menu-popup-item-hover-gradient
-                );
-            }
-
-            > .k-state-active,
-            &.k-state-selected {
-                @include fill(
-                    $menu-popup-item-expanded-text,
-                    $menu-popup-item-expanded-bg,
-                    $menu-popup-item-expanded-border,
-                    $menu-popup-item-expanded-gradient
-                );
-            }
+    }
+    .k-fab-item-icon {
+        @include fill(
+            $fab-item-icon-text,
+            $fab-item-icon-bg,
+            $fab-item-icon-border
+        );
+        @include box-shadow($fab-item-shadow);
+        outline: $fab-border-width solid rgba(0, 0, 0, .08);
+        outline-offset: -$fab-border-width;
+    }
 
-            &:focus,
-            &.k-state-focus,
-            &.k-state-focused {
-                @include box-shadow( $menu-popup-item-focus-shadow );
-            }
-        }
+    // Hover state
+    .k-fab-item.k-state-hover .k-fab-item-icon,
+    .k-fab-item.k-state-hovered .k-fab-item-icon
+    .k-fab-item:hover .k-fab-item-icon {
+        border-color: try-shade( $fab-item-icon-border, .5 );
+        background-color: try-shade( $fab-item-icon-bg, .5 );
     }
 
+    // Focus state
+    .k-fab-item:focus .k-fab-item-text,
+    .k-fab-item:focus .k-fab-item-icon,
+    .k-fab-item.k-state-focus .k-fab-item-text,
+    .k-fab-item.k-state-focus .k-fab-item-icon,
+    .k-fab-item.k-state-focused .k-fab-item-text,
+    .k-fab-item.k-state-focused .k-fab-item-icon {
+        outline-style: solid;
+        outline-width: 2px;
+        outline-color: rgba(0, 0, 0, .08);
+    }
 
-    // Scrolling
-    .k-menu-scroll-button {
-        @include fill(
-            $menu-scroll-button-text,
-            $menu-scroll-button-bg,
-            $menu-scroll-button-border,
-            $menu-scroll-button-gradient
-        );
+    // Active state
+    .k-fab-item.k-state-active .k-fab-item-icon,
+    .k-fab-item:active .k-fab-item-icon {
+        @include box-shadow($fab-item-active-shadow);
+        border-color: try-shade( $fab-item-icon-border, 1);
+        background-color: try-shade( $fab-item-icon-bg, 1);
+    }
 
-        &:hover {
-            @include fill(
-                $menu-scroll-button-hover-text,
-                $menu-scroll-button-hover-bg,
-                $menu-scroll-button-hover-border,
-                $menu-scroll-button-hover-gradient
-            );
+    // Disabled state
+    .k-fab-item.k-state-disabled,
+    .k-fab-item:disabled {
+        opacity: 1;
 
-            &::before {
-                opacity: 0;
-            }
+        .k-fab-item-text,
+        .k-fab-item-icon {
+            @include box-shadow($fab-item-disabled-shadow);
+            background-color: try-tint( $fab-item-bg, 5 );
+            color: try-tint( $fab-item-text, 5 );
         }
     }
+
+    // Popup
+    .k-animation-container > .k-fab-popup {
+        @include box-shadow( none );
+    }
+
 }
 
 // #endregion
 
 // #endregion
 
+// #endregion
+// #region @import "menu/_index.scss"; -> packages/classic/scss/menu/_index.scss
+// File already imported_once. Skipping output.
 // #endregion
 // #region @import "toolbar/_index.scss"; -> packages/classic/scss/toolbar/_index.scss
 // File already imported_once. Skipping output.
@@ -23285,6 +23591,12 @@ $actionsheet-item-disabled-shadow: null !default;
         overflow-y: auto;
         position: fixed;
         z-index: 10002;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -23641,10 +23953,10 @@ $actionsheet-item-disabled-shadow: null !default;
         margin-top: -($window-inner-padding-y / 2);
     }
     .k-window-content:first-child {
-        padding-top: #{"max( #{$window-inner-padding-y}, #{$window-titlebar-padding-y} )"};
+        padding-top: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
     }
     .k-window-content:last-child {
-        padding-bottom: #{"max( #{$window-inner-padding-y}, #{$window-titlebar-padding-y} )"};
+        padding-bottom: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
     }
 
     .k-window-iframecontent {
@@ -23954,6 +24266,12 @@ $drawer-selected-hover-text: $selected-hover-text !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         // Borders
         .k-drawer-mini &.k-drawer-start,
         .k-drawer-expanded &.k-drawer-start,
@@ -24309,6 +24627,12 @@ $notification-themes: () !default;
         display: block;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-notification-wrap {
@@ -24548,6 +24872,12 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
         overflow: hidden;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
     .k-card > .k-card-inner {
         @include border-radius( $card-inner-border-radius );
@@ -25091,6 +25421,12 @@ $popover-callout-shadow-w: $card-callout-box-shadow-w !default;
         z-index: 12000;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Header
@@ -25369,6 +25705,12 @@ $bottom-nav-flat-border: $component-border !default;
         outline: none;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-bottom-nav-border {
@@ -25620,6 +25962,12 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         flex-direction: row;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -25945,6 +26293,12 @@ $pager-dropdown-width: 5em !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-link {
             text-decoration: none;
             outline: 0;
@@ -25997,7 +26351,6 @@ $pager-dropdown-width: 5em !default;
     %base-pager-item {
         min-width: $button-calc-size;
         height: $button-calc-size;
-        box-sizing: border-box;
         color: inherit;
         text-align: center;
         display: inline-flex;
@@ -26157,7 +26510,6 @@ $pager-dropdown-width: 5em !default;
             }
 
             height: $button-calc-size;
-            box-sizing: border-box;
             border-color: inherit;
         }
 
@@ -26482,6 +26834,12 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
         color: inherit;
         background: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Step list
         .k-step-list {
@@ -26531,7 +26889,6 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
             transition-property: color, background-color, border-color;
             transition-duration: .4s;
             transition-timing-function: ease-in-out;
-            box-sizing: content-box;
 
             &::after {
                 @include border-radius( 100% );
@@ -27065,6 +27422,7 @@ $tabstrip-content-border-focused: $component-text !default;
 
     .k-tabstrip-wrapper {
         padding: $tabstrip-wrapper-padding-y $tabstrip-wrapper-padding-x;
+        box-sizing: border-box;
         border-width: $tabstrip-wrapper-border-width;
         border-style: solid;
         display: flex;
@@ -27082,7 +27440,7 @@ $tabstrip-content-border-focused: $component-text !default;
         color: inherit;
         background-color: transparent;
         display: flex;
-        flex-direction: column;
+        flex-flow: column nowrap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
@@ -27092,6 +27450,7 @@ $tabstrip-content-border-focused: $component-text !default;
     }
 
     .k-tabstrip-items-wrapper {
+        box-sizing: border-box;
         border-width: 0;
         border-style: solid;
         border-color: inherit;
@@ -27100,11 +27459,18 @@ $tabstrip-content-border-focused: $component-text !default;
     }
 
     .k-tabstrip-items {
+        box-sizing: border-box;
         outline: 0;
         display: flex;
         flex-flow: row wrap;
         flex: 0 0 auto;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-item {
             margin: 0;
             padding: 0;
@@ -27141,6 +27507,7 @@ $tabstrip-content-border-focused: $component-text !default;
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
         padding: $tabstrip-content-padding-y $tabstrip-content-padding-x;
+        box-sizing: border-box;
         border-width: $tabstrip-content-border-width;
         border-style: solid;
         border-color: inherit;
@@ -27175,6 +27542,9 @@ $tabstrip-content-border-focused: $component-text !default;
         left: 0;
         transition: width .2s linear;
 
+        // TODO: a better name
+        display: none;
+
         &.k-complete {
             width: 100%;
             border-top-width: 0;
@@ -27188,24 +27558,33 @@ $tabstrip-content-border-focused: $component-text !default;
 
             > .k-tabstrip-items {
                 flex: 1 1 auto;
+                flex-wrap: nowrap;
                 white-space: nowrap;
                 overflow: hidden;
             }
 
             > .k-button {
-                flex-shrink: 0;
+                width: auto;
+                height: auto;
+                flex: none;
                 align-self: stretch;
+                aspect-ratio: auto;
+
+                .k-button-icon {
+                    min-width: auto;
+                    min-height: auto;
+                }
             }
 
             &.k-hstack {
                 > .k-button {
-                    height: auto;
+                    padding: 0 map-get( $spacing, 1 );
                 }
             }
 
             &.k-vstack {
                 > .k-button {
-                    width: auto;
+                    padding: map-get( $spacing, 1 ) 0;
                 }
             }
         }
@@ -27575,11 +27954,13 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
         overflow: hidden;
 
         .k-wizard-steps {
+            box-sizing: border-box;
             display: flex;
             overflow: hidden;
         }
 
         .k-wizard-step {
+            box-sizing: border-box;
             padding: calc(#{$wizard-content-padding-x / 4} + 2px);
             width: 100%;
             display: flex;
@@ -27596,11 +27977,13 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
         }
 
         .k-wizard-content {
+            box-sizing: border-box;
             overflow-y: auto;
         }
 
         .k-wizard-buttons {
             margin-top: $wizard-content-padding-y;
+            box-sizing: border-box;
             display: flex;
             flex-wrap: nowrap;
             align-items: center;
@@ -27779,6 +28162,12 @@ $expander-content-padding-y: $padding-y * 4 !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-rtl &,
         &.k-rtl,
         &[dir = "rtl"] {
@@ -27818,7 +28207,6 @@ $expander-content-padding-y: $padding-y * 4 !default;
     // Expander content
     .k-expander-content {
         padding: $expander-content-padding-y $expander-content-padding-x;
-        box-sizing: border-box;
     }
 
     // Multiple expanders
@@ -28029,6 +28417,12 @@ $panelbar-header-expanded-gradient: null !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Root
         > .k-item,
@@ -30633,11 +31027,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
     }
 
     .k-grid-norecords-template {
+        box-sizing: border-box;
+        margin: 0 auto;
         width: 20em;
         height: 4em;
-        line-height: 4em;
-        margin: 0 auto;
         border: 1px solid;
+        line-height: 4em;
     }
 
     .k-header > .k-cell-inner {
@@ -30909,7 +31304,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
         }
         .k-popup > & {
-            width: 100%;
+            max-width: 100%;
         }
 
         .k-actions {
@@ -31137,8 +31532,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
 
         // Hover state
-        tbody tr:hover,
-        tbody tr.k-state-hover {
+        tbody tr:not(.k-detail-row):hover,
+        tbody tr:not(.k-detail-row).k-state-hover {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
@@ -31208,12 +31603,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
 
-            // Hovered state
-            .k-state-hover td,
-            tr:hover td {
-                @include fill( $bg: $grid-sticky-hovered-bg );
-            }
-
             // Selected hover
             .k-state-selected:hover td,
             .k-state-selected.k-state-hover td {
@@ -31930,6 +32319,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         margin: 0;
     }
     .k-spreadsheet-tabstrip .k-loading {
+        // TODO: better name
         display: none;
     }
     .k-spreadsheet-tabstrip .k-content,
@@ -33723,6 +34113,7 @@ $pivotgrid-remove-text: null !default;
         border-style: solid;
         align-items: flex-start;
         flex-wrap: wrap;
+        box-shadow: none;
 
         > * {
             max-width: 100%;
@@ -33733,33 +34124,6 @@ $pivotgrid-remove-text: null !default;
         }
     }
 
-    .k-pivot-toolbar .k-button,
-    .k-fieldselector .k-list li.k-item {
-        @include border-radius( $border-radius );
-        padding: $button-padding-y $button-padding-x;
-        padding-right: calc( #{$button-padding-x} + #{$icon-size * 3} );
-        min-height: auto;
-        font-size: $font-size;
-        line-height: $button-line-height;
-        text-align: left;
-        white-space: normal;
-        word-break: break-word;
-        position: relative;
-        cursor: move;
-
-        .k-field-actions .k-setting-delete {
-            box-sizing: content-box;
-        }
-    }
-
-    .k-field-actions {
-        position: absolute;
-        right: $button-padding-y;
-        top: $button-padding-y;
-        line-height: 1;
-        cursor: pointer;
-    }
-
     .k-pivot-layout {
         border-spacing: 0;
         table-layout: auto;
@@ -33782,6 +34146,8 @@ $pivotgrid-remove-text: null !default;
     .k-pivot-rowheaders > .k-grid,
     .k-pivot-table > .k-grid {
         border-width: 0;
+        color: inherit;
+        background: none;
     }
 
     .k-pivot-rowheaders > .k-grid td:first-child,
@@ -33845,77 +34211,73 @@ $pivotgrid-remove-text: null !default;
 @include exports("pivotgrid/configurator/layout/legacy") {
 
 
-    .k-fieldselector {
-        border-width: 1px;
-        border-style: solid;
+    // jquery specific -- old pivot
+    .k-pivotgrid-wrapper {
         box-sizing: border-box;
-        outline: 0;
-        font-family: $pivotgrid-font-family;
-        font-size: $pivotgrid-font-size;
-        line-height: $pivotgrid-line-height;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        .k-columns {
-            display: flex;
-            align-items: stretch;
-
-            > div {
-                padding: $table-cell-padding-y;
-                width: 50%;
-                box-sizing: border-box;
-                border-width: 0;
-                border-style: solid;
-                float: left;
-                overflow: auto;
-            }
-            > div + div {
-                border-left-width: 1px;
-            }
-        }
-
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: map-get( $spacing, 2 );
 
-        p {
-            margin: 0 0 $padding-y-sm;
-            text-transform: uppercase;
+        > .k-pivotgrid-configurator-panel {
+            max-width: 320px;
+            flex: none;
         }
-        p .k-icon {
-            margin: 0 $icon-spacing 0 0;
+        > .k-pivot {
+            flex: 1;
         }
+    }
+    .k-pivotgrid-configurator-panel.kendo-jquery {
+        box-sizing: border-box;
+        display: inline-flex;
 
-
-        // Treeview
-        .k-treeview {
-            border-width: 0;
-            overflow: visible;
+        .k-pivotgrid-configurator {
+            height: 100%;
         }
 
-        .k-edit-label {
-            width: 16%;
-        }
-        .k-edit-field {
-            width: 77%;
+        .k-pivotgrid-configurator-content {
+            padding: map-get( $spacing, 4 );
+            max-height: 100%;
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 4 );
+            overflow-x: hidden;
+            overflow-y: auto;
         }
 
-
-        // List container
-        .k-list-container {
-            margin-bottom: $spacer;
-            padding: $padding-y-sm;
-            border-width: 1px;
-            border-style: solid;
+        .k-pivotgrid-targets {
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 4 );
         }
-        .k-list {
-            padding-bottom: $spacer;
+
+        .k-pivotgrid-configurator-section {
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
         }
-        .k-list .k-item {
+
+        .k-column-fields {
+            margin: 0;
+            padding: map-get( $spacing, 1 );
+            max-height: 200px;
             border-width: 1px;
             border-style: solid;
+            display: flex;
+            flex-flow: row wrap;
+            gap: map-get( $spacing, 1 );
+            overflow-x: hidden;
+            overflow-y: auto;
+
+            > * {
+                margin: 0;
+            }
         }
-        .k-list .k-item + .k-item {
-            margin-top: ($spacer / 2);
+        .k-ie & .k-column-fields {
+            > * {
+                margin: 2px;
+            }
         }
-
     }
 
 }
@@ -34133,103 +34495,59 @@ $pivotgrid-remove-text: null !default;
 @include exports("pivotgrid/theme/legacy") {
 
     .k-pivot {
+        @include fill (
+            $pivotgrid-text,
+            $pivotgrid-bg,
+            $pivotgrid-border
+        );
+    }
+    .k-pivot-table {
         border-color: $pivotgrid-border;
     }
 
-    .k-alt,
-    .k-pivot-layout > tbody > tr:first-child > td:first-child {
-        background-color: $pivotgrid-alt-bg;
+    // Pivotgrid header
+    .k-pivot-rowheaders {
+        @include fill(
+            $pivotgrid-headers-text,
+            $pivotgrid-headers-bg,
+            $pivotgrid-headers-border
+        );
     }
 
-    .k-fieldselector {
-        color: $pivotgrid-configurator-text;
+
+    // Pivotgrid toolbar
+    .k-pivot-toolbar {
+        @include fill(
+            $pivotgrid-headers-text,
+            $pivotgrid-headers-bg,
+            $pivotgrid-headers-border
+        );
+
+        .k-empty {
+            color: $subtle-text;
+        }
     }
 
-    .k-fieldselector .k-list-container {
-        background-color: $pivotgrid-container-bg;
+    .k-alt {
+        background-color: $pivotgrid-alt-bg;
     }
 
     .k-pivot-toolbar,
     .k-pivot-table,
-    .k-fieldselector,
-    .k-fieldselector .k-list-container,
-    .k-fieldselector .k-columns > div,
     .k-pivot-rowheaders > .k-grid td:first-child,
     .k-pivot-table .k-grid-header .k-header.k-first {
         border-color: $pivotgrid-chrome-border;
     }
 
-    .k-pivot-rowheaders .k-alt .k-alt,
     .k-header.k-alt {
         background-color: $pivotgrid-row-headers-bg;
     }
 
-    .k-pivot-toolbar .k-button,
-    .k-fieldselector .k-list li.k-item {
-        @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
-        );
-
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
-            );
-        }
-
-        // Pressed state
-        &:active,
-        &.k-state-active {
-            @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
-            );
-        }
-
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            box-shadow: $button-focused-shadow;
-        }
-
-        &.k-empty {
-            color: $subtle-text;
-        }
-    }
-
-    .k-pivot-toolbar {
-        .k-empty {
-            color: $subtle-text;
-        }
-    }
-
-    .k-pivot-layout .k-grid-footer,
-    .k-pivot-layout .k-grid.k-alt {
+    .k-pivot-layout .k-grid-footer {
         color: $pivotgrid-alt-text;
         background-color: $pivotgrid-alt-bg;
     }
 
-    // Loading indicator
-    .k-fieldselector {
-        .k-i-loading {
-            border-color: $header-bg;
-        }
-
-        .k-i-loading::before,
-        .k-i-loading::after {
-            background-color: $header-bg;
-        }
-    }
-
     // KPI icons
     .k-i-kpi-trend-increase,
     .k-i-kpi-trend-decrease,
@@ -34248,6 +34566,16 @@ $pivotgrid-remove-text: null !default;
     .k-i-kpi-status-open {
         color: $success;
     }
+
+
+    // Configurator
+    .k-pivotgrid-configurator-panel.kendo-jquery {
+
+        .k-column-fields {
+            border-color: $component-border;
+        }
+
+    }
 }
 
 // #endregion
@@ -34294,9 +34622,13 @@ $treelist-footer-row-border-width: 1px !default;
             padding: .4em .6em;
             line-height: 1.6em;
 
+            // TODO: see what this does and use a better name
             .k-loading {
                 vertical-align: baseline;
                 margin-right: 5px;
+
+                // TODO
+                display: none;
             }
         }
 
@@ -34450,11 +34782,19 @@ $filter-preview-operator-text: $subtle-text !default;
 // #region @import "_layout.scss"; -> packages/classic/scss/filter/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/filter/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/filter/_layout.scss
 @include exports("filter/layout") {
+
     .k-filter {
+        box-sizing: border-box;
         border-width: 0;
         display: inline-block;
         background-color: transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         ul {
             padding: 0;
 
@@ -35223,6 +35563,12 @@ $taskboard-drag-placeholder-border: $component-border !default;
         display: flex;
         flex-direction: column;
         position: relative;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Toolbar
@@ -35291,7 +35637,6 @@ $taskboard-drag-placeholder-border: $component-border !default;
     .k-taskboard-column-cards {
         padding: $taskboard-column-cards-padding-y $taskboard-column-cards-padding-x;
         min-height: 100%;
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         gap: $taskboard-column-cards-gap 0;
@@ -35323,7 +35668,6 @@ $taskboard-drag-placeholder-border: $component-border !default;
         width: $taskboard-pane-width;
         border-width: $taskboard-pane-border-width;
         border-style: solid;
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: absolute;
@@ -36567,6 +36911,12 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
         line-height: $imageeditor-line-height;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -39241,6 +39591,12 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             flex-shrink: 0;
             font-size: inherit;
         }
+
+        .k-no-data {
+            height: auto;
+            min-height: auto;
+            color: inherit;
+        }
     }
 
 }
@@ -40361,11 +40717,18 @@ $chat-quick-reply-hover-border: $primary !default;
 
 
         .k-scroll-button {
+            // IMPORTANT: if we don't set padding, the browser will set for us
+            padding: 0 map-get( $spacing, 1 );
             height: 100%;
+            aspect-ratio: auto;
             position: absolute;
             z-index: 2;
-            top: 50%;
-            transform: translateY(-50%);
+            top: 0;
+
+            .k-button-icon {
+                min-width: auto;
+                min-height: auto;
+            }
         }
         .k-scroll-button-left {
             left: 0;
@@ -40620,6 +40983,12 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         > iframe {
             width: 100%;
             height: 100%;
@@ -40668,6 +41037,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
         padding: 0 (14px / 2);
         align-items: center;
     }
+    .k-mediaplayer-volume {
+        width: 100px;
+    }
 
 
     // Seekbar
@@ -40675,8 +41047,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
         width: 100%;
         position: absolute;
         z-index: 3;
-        top: -17px;
+        top: 0;
         left: 0;
+        transform: translateY( -50% );
     }
     .k-mediaplayer-seekbar .k-slider-track {
         // sass-lint:disable no-important
@@ -40684,6 +41057,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
         // sass-lint:enable no-important
         border-radius: 0;
     }
+    .k-mediaplayer-seekbar .k-slider-selection {
+        border-radius: 0;
+    }
 
     .k-mediaplayer-fullscreen {
         z-index: 10000;
@@ -40835,6 +41211,14 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+
         ul {
             margin: 0;
             padding: 0;
@@ -40852,7 +41236,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
             line-height: $timeline-flag-line-height;
             min-width: $timeline-flag-min-width;
             max-width: $timeline-flag-max-width;
-            box-sizing: border-box;
             position: relative;
             z-index: 1;
         }
@@ -40932,7 +41315,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
         margin: $timeline-spacing-y 0;
         width: 100%;
         position: relative;
-        box-sizing: border-box;
         border: 0;
     }
 
@@ -41122,12 +41504,10 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
 
         .k-timeline-card {
             height: 100%;
-            box-sizing: border-box;
         }
 
         .k-card {
             max-height: 100%;
-            box-sizing: border-box;
         }
 
         .k-timeline-events-list {
@@ -42959,12 +43339,19 @@ $map-marker-fill: $primary !default;
     // Layout
     .k-map {
         height: 600px;
+        box-sizing: border-box;
         border-width: $map-border-width;
         border-style: solid;
         font-size: $map-font-size;
         line-height: $map-line-height;
         font-family: $map-font-family;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Scroll
         .km-scroll-wrapper {
@@ -43238,6 +43625,12 @@ $orgchart-line-v-height: 25px !default;
         font-family: $orgchart-font-family;
         line-height: $orgchart-line-height;
         overflow: auto;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-orgchart-container {