@progress/kendo-theme-classic 5.0.0-beta.5 → 5.0.0-beta.6

package/dist/all.scss

@@ -6808,9 +6808,6 @@ $kendo-checkbox-ripple-opacity: .25 !default;
         text-overflow: ellipsis;
         cursor: pointer;
     }
-    .k-list-optionlabel {
-        @extend .k-list-group-sticky-header;
-    }
 
 
     // List content
@@ -6863,6 +6860,9 @@ $kendo-checkbox-ripple-opacity: .25 !default;
             right: 0;
         }
     }
+    .k-list-optionlabel {
+        @extend .k-list-item;
+    }
 
 
     // List group item
@@ -6980,7 +6980,7 @@ $kendo-checkbox-ripple-opacity: .25 !default;
 
     // No data
     .k-no-data {
-        min-height: 138px;
+        min-height: 140px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -7724,6 +7724,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;
@@ -8172,6 +8178,12 @@ $kendo-button-transition: color .2s ease-in-out !default;
         position: relative;
         transition: $kendo-button-transition;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         &:disabled,
         &.k-disabled {
             @include disabled( $disabled-styling );
@@ -8279,6 +8291,7 @@ $kendo-button-transition: color .2s ease-in-out !default;
     // Menu button
     .k-menu-button,
     .k-dropdown-button {
+        aspect-ratio: auto;
         outline: 0;
         display: inline-flex;
         flex-flow: row nowrap;
@@ -8801,24 +8814,24 @@ $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
 $kendo-input-border-radius: null !default;
 
-$kendo-input-padding-x: $padding-x !default;
-$kendo-input-padding-y: $padding-y !default;
+$kendo-input-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y: map-get( $spacing, 1 ) !default;
 $kendo-input-font-family: $font-family !default;
-$kendo-input-font-size: $font-size !default;
-$kendo-input-line-height: $line-height !default;
+$kendo-input-font-size: $font-size-md !default;
+$kendo-input-line-height: $line-height-md !default;
 
-$kendo-input-padding-x-sm: ($kendo-input-padding-x / 2) !default;
-$kendo-input-padding-y-sm: ($kendo-input-padding-y / 2) !default;
+$kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-input-font-size-sm: $font-size-md !default;
 $kendo-input-line-height-sm: $line-height-md !default;
 
-$kendo-input-padding-x-md: $kendo-input-padding-x !default;
-$kendo-input-padding-y-md: $kendo-input-padding-y !default;
+$kendo-input-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
 $kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
-$kendo-input-padding-x-lg: ($kendo-input-padding-x * 1.5) !default;
-$kendo-input-padding-y-lg: ($kendo-input-padding-y * 1.5) !default;
+$kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 $kendo-input-font-size-lg: $font-size-md !default;
 $kendo-input-line-height-lg: $line-height-md !default;
 
@@ -8828,21 +8841,27 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-padding-y-sm,
         font-size: $kendo-input-font-size-sm,
         line-height: $kendo-input-line-height-sm,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} )
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} ),
+        button-padding-x: $kendo-input-padding-y-sm,
+        button-padding-y: $kendo-input-padding-y-sm
     ),
     md: (
         padding-x: $kendo-input-padding-x-md,
         padding-y: $kendo-input-padding-y-md,
         font-size: $kendo-input-font-size-md,
         line-height: $kendo-input-line-height-md,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} )
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} ),
+        button-padding-x: $kendo-input-padding-y-md,
+        button-padding-y: $kendo-input-padding-y-md
     ),
     lg: (
         padding-x: $kendo-input-padding-x-lg,
         padding-y: $kendo-input-padding-y-lg,
         font-size: $kendo-input-font-size-lg,
         line-height: $kendo-input-line-height-lg,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} )
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} ),
+        button-padding-x: $kendo-input-padding-y-lg,
+        button-padding-y: $kendo-input-padding-y-lg
     )
 ) !default;
 
@@ -8861,6 +8880,24 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: rgba(0, 0, 0, .1) !default;
 $kendo-input-focus-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
 
+$kendo-picker-bg: $kendo-button-bg !default;
+$kendo-picker-text: $kendo-button-text !default;
+$kendo-picker-border: $kendo-button-border !default;
+$kendo-picker-gradient: $kendo-button-gradient !default;
+$kendo-picker-shadow: $kendo-button-shadow !default;
+
+$kendo-picker-hover-bg: $kendo-button-hover-bg !default;
+$kendo-picker-hover-text: $kendo-button-hover-text !default;
+$kendo-picker-hover-border: $kendo-button-hover-border !default;
+$kendo-picker-hover-gradient: $kendo-button-hover-gradient !default;
+$kendo-picker-hover-shadow: $kendo-button-hover-shadow !default;
+
+$kendo-picker-focus-bg: $kendo-button-focus-bg !default;
+$kendo-picker-focus-text: $kendo-button-focus-text !default;
+$kendo-picker-focus-border: $kendo-button-focus-border !default;
+$kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
+$kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
+
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
 
@@ -8905,6 +8942,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         padding: 0;
         width: $kendo-input-default-width;
         min-width: 0;
+        box-sizing: border-box;
         border-width: $kendo-input-border-width;
         border-style: solid;
         outline: 0;
@@ -8922,6 +8960,12 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         text-overflow: ellipsis;
         -webkit-appearance: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-input,
         .k-picker {
             border-width: 0 !important; // sass-lint:disable-line no-important
@@ -8969,7 +9013,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         position: relative;
         z-index: 1;
         overflow: hidden;
-        text-overflow: ellipsis;
+        text-overflow: clip;
         -webkit-appearance: none;
 
         // Hide clear icon
@@ -9008,7 +9052,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     .k-input-value-text {
         flex: 1;
         overflow: hidden;
-        text-overflow: ellipsis;
+        text-overflow: clip;
     }
     .k-input-value-text::before {
         content: "\200b";
@@ -9216,6 +9260,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         $_font-size: map-get( $size-props, font-size );
         $_line-height: map-get( $size-props, line-height );
         $_icon-size: map-get( $size-props, icon-size );
+        $_button-padding-x: map-get( $size-props, button-padding-x );
+        $_button-padding-y: map-get( $size-props, button-padding-y );
 
         .k-input-#{$size},
         .k-picker-#{$size} {
@@ -9226,6 +9272,12 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
                 padding: $_padding-y $_padding-x;
             }
 
+            .k-input-button,
+            .k-spinner-increase,
+            .k-spinner-decrease {
+                padding: $_button-padding-y $_button-padding-x;
+            }
+
             .k-input-icon,
             .k-input-validation-icon,
             .k-input-loading-icon,
@@ -9347,20 +9399,20 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     // Solid picker
     .k-picker {
         @include fill(
-            $kendo-button-text,
-            $kendo-button-bg,
-            $kendo-button-border,
-            $kendo-button-gradient
+            $kendo-picker-text,
+            $kendo-picker-bg,
+            $kendo-picker-border,
+            $kendo-picker-gradient
         );
 
         // Hover
         &:hover,
         &.k-hover {
             @include fill(
-                $kendo-button-hover-text,
-                $kendo-button-hover-bg,
-                $kendo-button-hover-border,
-                $kendo-button-hover-gradient
+                $kendo-picker-hover-text,
+                $kendo-picker-hover-bg,
+                $kendo-picker-hover-border,
+                $kendo-picker-hover-gradient
             );
         }
 
@@ -9368,21 +9420,21 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         &:focus,
         &.k-focus {
             @include fill (
-                $kendo-button-focus-text,
-                $kendo-button-focus-bg,
-                $kendo-button-focus-border,
-                $kendo-button-focus-gradient
+                $kendo-picker-focus-text,
+                $kendo-picker-focus-bg,
+                $kendo-picker-focus-border,
+                $kendo-picker-focus-gradient
             );
-            @include box-shadow( $kendo-button-focus-shadow );
+            @include box-shadow( $kendo-picker-focus-shadow );
         }
         &:focus-within {
             @include fill (
-                $kendo-button-focus-text,
-                $kendo-button-focus-bg,
-                $kendo-button-focus-border,
-                $kendo-button-focus-gradient
+                $kendo-picker-focus-text,
+                $kendo-picker-focus-bg,
+                $kendo-picker-focus-border,
+                $kendo-picker-focus-gradient
             );
-            @include box-shadow( $kendo-button-focus-shadow );
+            @include box-shadow( $kendo-picker-focus-shadow );
         }
 
         // Invalid
@@ -9458,12 +9510,19 @@ $floating-label-focus-text: null !default;
     // Floating label
     .k-floating-label-container {
         padding-top: $floating-label-height;
+        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;
@@ -10659,6 +10718,12 @@ $kendo-avatar-theme-colors: $theme-colors !default;
         align-items: center;
         flex-shrink: 0;
         overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -10782,27 +10847,27 @@ $kendo-chip-spacing: map-get( $spacing, 2 );
 /// Horizontal padding of the chip.
 /// @group chip
 $kendo-chip-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-sm: $kendo-chip-padding-x * .75 !default;
-$kendo-chip-padding-x-md: $kendo-chip-padding-x !default;
-$kendo-chip-padding-x-lg: $kendo-chip-padding-x * 1.25 !default;
+$kendo-chip-padding-x-sm: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-md: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-lg: map-get( $spacing, 1 ) !default;
 
 /// Vertical padding of the chip.
 /// @group chip
-$kendo-chip-padding-y: $kendo-chip-padding-x !default;
-$kendo-chip-padding-y-sm: $kendo-chip-padding-x-sm !default;
-$kendo-chip-padding-y-md: $kendo-chip-padding-x-md !default;
-$kendo-chip-padding-y-lg: $kendo-chip-padding-x-lg !default;
+$kendo-chip-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin )  !default;
+$kendo-chip-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 
 /// Font sizes of the chip.
 /// @group chip
-$kendo-chip-font-size: $font-size !default;
-$kendo-chip-font-size-sm: $font-size-sm !default;
-$kendo-chip-font-size-md: $font-size !default;
+$kendo-chip-font-size: $font-size-md !default;
+$kendo-chip-font-size-sm: $font-size-md !default;
+$kendo-chip-font-size-md: $font-size-md !default;
 $kendo-chip-font-size-lg: $font-size-md !default;
 
 /// Line heights of the chip that are connected to the $font-size.
 /// @group chip
-$kendo-chip-line-height: normal !default;
+$kendo-chip-line-height: 1 !default;
 $kendo-chip-line-height-sm: $kendo-chip-line-height !default;
 $kendo-chip-line-height-md: $kendo-chip-line-height !default;
 $kendo-chip-line-height-lg: $kendo-chip-line-height !default;
@@ -10810,9 +10875,24 @@ $kendo-chip-line-height-lg: $kendo-chip-line-height !default;
 /// Sizes map for the chip.
 /// @group chip
 $kendo-chip-sizes: (
-    sm: ( font-size: $kendo-chip-font-size-sm, line-height: $kendo-chip-line-height-sm, padding: $kendo-chip-padding-x-sm ),
-    md: ( font-size: $kendo-chip-font-size-md, line-height: $kendo-chip-line-height-md, padding: $kendo-chip-padding-x-md ),
-    lg: ( font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg, padding: $kendo-chip-padding-x-lg )
+    sm: (
+        padding-x: $kendo-chip-padding-x-sm,
+        padding-y: $kendo-chip-padding-y-sm,
+        font-size: $kendo-chip-font-size-sm,
+        line-height: $kendo-chip-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-chip-padding-x-md,
+        padding-y: $kendo-chip-padding-y-md,
+        font-size: $kendo-chip-font-size-md,
+        line-height: $kendo-chip-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-chip-padding-x-lg,
+        padding-y: $kendo-chip-padding-y-lg,
+        font-size: $kendo-chip-font-size-lg,
+        line-height: $kendo-chip-line-height-lg
+    )
 ) !default;
 
 /// The base background of the chip.
@@ -10924,6 +11004,12 @@ $kendo-chip-list-sizes: (
         cursor: pointer;
         user-select: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-selected-icon-wrapper {
             display: none !important; // sass-lint:disable-line no-important
         }
@@ -11039,16 +11125,14 @@ $kendo-chip-list-sizes: (
 
     // Sizes
     @each $size, $size-props in $kendo-chip-sizes {
-
+        $_padding-x: map-get( $size-props, padding-x );
+        $_padding-y: map-get( $size-props, padding-y );
         $_font-size: map-get( $size-props, font-size );
         $_line-height: map-get( $size-props, line-height );
-        $_padding: map-get( $size-props, padding );
-        $_size: calc( #{$line-height-xs * 1em} + #{$_padding * 2} + #{$kendo-chip-border-width * 2} );
         $_avatar-size: 1em;
 
         .k-chip-#{$size} {
-            height: $_size;
-            padding: $_padding;
+            padding: $_padding-y $_padding-x;
             font-size: $_font-size;
             line-height: $_line-height;
         }
@@ -11244,6 +11328,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;
+        }
     }
 
 
@@ -12112,474 +12202,519 @@ $tooltip-error-border: $tooltip-error-bg !default;
 // #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 "../list/_index.scss"; -> packages/classic/scss/list/_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/toolbar/_variables.scss
+// #region @import "_variables.scss"; -> packages/classic/scss/menu/_variables.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "_layout.scss"; -> packages/classic/scss/toolbar/_layout.scss
-// #region @import "~@progress/kendo-theme-default/scss/toolbar/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/toolbar/_layout.scss
-@include exports("toolbar/layout") {
+// #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-toolbar {
-        margin: 0;
-        padding: $toolbar-padding-y $toolbar-padding-x;
-        border-width: $toolbar-border-width;
+    // Menu bar
+    .k-menu-bar {
+        border-width: $menu-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $toolbar-font-family;
-        font-size: $toolbar-font-size;
-        line-height: $toolbar-line-height;
-        list-style: none;
+        font-family: $menu-font-family;
+        font-size: $menu-font-size;
+        line-height: $menu-line-height;
         display: flex;
-        flex-flow: row wrap;
-        gap: $toolbar-spacing;
-        align-items: center;
-        justify-content: flex-start;
+        flex-wrap: nowrap;
+        align-items: stretch;
         position: relative;
-        overflow: hidden;
+        cursor: default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        // Remove once we decide to not size empty containers
-        &::before {
-            content: "";
-            height: $kendo-button-calc-size;
-            margin-inline-start: -$toolbar-spacing;
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
         }
+    }
+    .k-menu { @extend .k-menu-bar !optional; }
 
-        &.k-toolbar-resizable {
-            flex-wrap: nowrap;
-        }
 
-        > * {
-            flex-shrink: 0;
-            display: inline-flex;
-            align-content: center;
-            vertical-align: middle;
+    // Menu item
+    .k-menu-item {
+        border-width: 0;
+        outline: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        flex: none;
+        position: relative;
+        user-select: none;
+    }
+    .k-menu-item-content {
+        display: block;
+        height: auto;
+        overflow: visible;
 
-            > label {
-                margin-inline-end: $toolbar-spacing;
-                align-self: center;
-            }
+        .k-actions {
+            margin-top: 0;
         }
+    }
 
 
-        // Button
-        .k-button {}
-
-
-        // Toggle button
-        .k-toggle-button {}
-
+    // 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;
+        gap: $menu-item-icon-spacing;
+        align-items: center;
+        position: relative;
+        white-space: nowrap;
+        cursor: pointer;
+    }
 
-        // Button group
-        .k-button-group {}
 
+    // Menu item text
+    .k-menu-link-text {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 
-        // Split button
-        .k-split-button {}
 
+    // Expand arrow
+    .k-menu-expand-arrow {
+        margin-inline-end: -$icon-spacing;
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
+        position: relative;
+    }
 
-        // Input
-        .k-input,
-        .k-picker {
-            width: $toolbar-input-width;
-        }
-        .k-color-picker {
-            width: min-content;
-        }
 
-        // Overflow anchor
-        .k-overflow-anchor {
-            @include border-radius( 0 );
-            margin: 0;
-            padding: $toolbar-padding-y;
-            width: auto;
-            height: 100%;
-            aspect-ratio: 1;
-            border-width: 0;
-            border-color: inherit;
-            box-sizing: border-box;
-            justify-content: center;
-            position: absolute;
-            top: 0;
-            right: 0;
+    // Orientation -- horizontal
+    .k-menu-horizontal {
+        flex-direction: row;
 
-            &::before {
-                display: block;
-            }
+        > .k-menu-item + .k-menu-item {
+            margin-left: $menu-item-spacing;
         }
 
-
-        // Separator
-        .k-separator,
-        .k-toolbar-separator {
+        > .k-separator {
+            margin: 0 $menu-separator-spacing;
             width: 0;
-            height: $line-height-em;
+            height: auto;
             border-width: 0 0 0 1px;
             border-style: solid;
-            align-self: center;
         }
+    }
 
 
-        // Spacer
-        .k-toolbar-spacer {
-            height: $line-height-em;
-            flex: 1 0 0%;
-        }
+    // Orientation -- vertical
+    .k-menu-vertical {
+        flex-direction: column;
 
+        > .k-menu-item + .k-menu-item {
+            margin-top: $menu-item-spacing;
+        }
 
-        // Template
-        .k-toolbar-template {
-            align-self: center;
-            align-items: center;
+        > .k-menu-item > .k-menu-link {
+            padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
+            padding-right: $kendo-menu-popup-item-padding-end;
         }
 
+        > .k-separator {
+            margin: $menu-separator-spacing 0;
+            height: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            border-color: $panel-border;
+            display: block;
+        }
     }
 
 
-    // Toolbar group
-    .k-toolbar-group {
-        display: flex;
-        flex-direction: inherit;
-        flex-wrap: nowrap;
-        gap: inherit;
-    }
-
+    // Menu popup
+    .k-menu-popup {
+        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        box-sizing: border-box;
+        border-width: $kendo-menu-popup-border-width;
+        border-style: solid;
+        overflow: auto;
+        max-height: 80vh;
 
-    // Angular specific
-    kendo-toolbar-renderer {
-        display: inline-block;
-        border-color: inherit;
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
-    // Overflow container
-    .k-overflow-container {
+    // Sub menu
+    .k-menu-group {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-flow: column nowrap;
+        position: absolute;
 
-        > .k-item {
-            border-color: inherit;
+        .k-menu-item + .k-menu-item {
+            margin-top: $kendo-menu-popup-item-spacing;
         }
 
         .k-separator {
-            margin: map-get( $spacing, 1 ) 0;
-        }
-
-        // Group
-        .k-overflow-tool-group {
+            margin: $menu-separator-spacing 0;
+            height: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            border-color: $component-border;
             display: block;
         }
+    }
+    .k-menu-popup .k-menu-group {
+        position: relative;
+    }
 
-        // Button
-        .k-overflow-button {
-            @include border-radius( 0 );
-            padding: $kendo-list-item-padding-y-md $kendo-list-item-padding-x-md;
-            width: 100%;
-            border-width: 0;
-            color: inherit;
-            background-color: transparent;
-            background-image: none;
-            line-height: inherit;
-            display: flex;
-            justify-content: flex-start;
-        }
 
-        // Button group
-        .k-button-group {
-            @include box-shadow( none );
-            display: flex;
-            flex-flow: column nowrap;
+    // Sizes
+    .k-menu-group-sm {
+        font-size: $kendo-menu-popup-font-size-sm;
+        line-height: $kendo-menu-popup-line-height-sm;
 
-            .k-button {
-                margin: if( $kendo-button-border-width == 0, null, 0);
-            }
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-font-size-sm;
+            line-height: $kendo-menu-popup-line-height-sm;
         }
 
-        // Split button
-        .k-split-button {
-            display: flex;
-            flex-direction: column;
+        .k-menu-link {
+            padding: $kendo-menu-popup-item-padding-y-sm $kendo-menu-popup-item-padding-x-sm;
+            padding-inline-end: $kendo-menu-popup-item-padding-end-sm;
         }
 
-        // Hidden items
-        .k-overflow-hidden {
-            display: none;
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-item-icon-margin-start-sm;
+            margin-inline-end: $kendo-menu-popup-item-icon-margin-end-sm;
         }
     }
+    .k-menu-group-md {
+        font-size: $kendo-menu-popup-font-size-md;
+        line-height: $kendo-menu-popup-line-height-md;
 
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-font-size-md;
+            line-height: $kendo-menu-popup-line-height-md;
+        }
 
-
-
-    // RTL
-    .k-toolbar {
-
-        &.k-rtl,
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            .k-overflow-anchor {
-                margin: 0;
-                right: auto;
-                left: 0;
-            }
+        .k-menu-link {
+            padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
+            padding-inline-end: $kendo-menu-popup-item-padding-end-md;
         }
 
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-item-icon-margin-end;
+        }
     }
+    .k-menu-group-lg {
+        font-size: $kendo-menu-popup-font-size-lg;
+        line-height: $kendo-menu-popup-line-height-lg;
 
-}
-
-
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-font-size-lg;
+            line-height: $kendo-menu-popup-line-height-lg;
+        }
 
+        .k-menu-link {
+            padding: $kendo-menu-popup-item-padding-y-lg $kendo-menu-popup-item-padding-x-lg;
+            padding-inline-end: $kendo-menu-popup-item-padding-end-lg;
+        }
 
-@include exports( "floating-toolbar/layout" ) {
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-item-icon-margin-start-lg;
+            margin-inline-end: $kendo-menu-popup-item-icon-margin-end-lg;
+        }
+    }
 
 
-    // sass-lint:disable class-name-format
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content {
-        padding: $toolbar-padding-y $toolbar-padding-x !important; // sass-lint:disable-line no-important
-        border-width: $toolbar-border-width;
+    // Context menu
+    .k-popups-wrapper {
+        position: relative;
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
+    .k-context-menu {
+        margin: 0;
+        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        border-width: $kendo-menu-popup-border-width;
         border-style: solid;
-        display: flex;
-        flex-flow: row nowrap;
-        gap: $toolbar-spacing;
-        align-items: center;
 
-        .k-toolbar {
-            padding: 0;
-            border-width: 0;
-            flex-shrink: 1;
-            color: inherit;
-            background: none;
+        &.k-menu-horizontal {
+            padding: $kendo-menu-popup-padding-x $kendo-menu-popup-padding-y;
         }
     }
-    .k-editortoolbar-dragHandle {
-        cursor: move;
-        display: flex;
-        align-items: center;
-        align-self: stretch;
-        flex-shrink: 0;
+    .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;
     }
-    // sass-lint:enable class-name-format
-
-
-}
-
-// #endregion
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/classic/scss/toolbar/_theme.scss
-// #region @import "~@progress/kendo-theme-default/scss/toolbar/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/toolbar/_theme.scss
-@include exports("toolbar/theme") {
-
-    // Theme
-    .k-toolbar {
-        @include fill(
-            $toolbar-text,
-            $toolbar-bg,
-            $toolbar-border,
-            $toolbar-gradient
-        );
-        @include box-shadow( $toolbar-shadow );
-
+    .k-context-menu-popup {
+        z-index: 12000;
 
-        // Separator
-        .k-separator {
-            border-color: $toolbar-separator-border;
+        .k-context-menu {
+            border-width: 0;
         }
-
-
-        // Button group
-        .k-button-group {}
-
+    }
+    .k-popup .k-context-menu,
+    .k-context-menu-popup .k-context-menu {
+        border-width: 0;
     }
 
 
-    // Overflow container
-    .k-overflow-container {
-
-        .k-button {
-
-            // Hover state
-            &:hover,
-            &.k-state-hover {
-                color: $kendo-list-item-hover-text;
-                background: $kendo-list-item-hover-bg;
-            }
-
-            // Active state
-            &:active,
-            &.k-state-active {
-                color: $kendo-list-item-selected-text;
-                background: $kendo-list-item-selected-bg;
-            }
-
-            // Button focus state
-            .k-button:focus,
-            .k-button.k-state-focused {
-                box-shadow: $kendo-list-item-focus-shadow;
-            }
+    // Scrolling
+    .k-menu-scroll-wrapper {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        position: relative;
 
-            // Disabled state
-            &:disabled,
-            &.k-state-disabled {
-                color: inherit;
-            }
+        .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;
 
-}
-
-
-
-
-@include exports("floating-toolbar/theme") {
-
-    // sass-lint:disable-block class-name-format
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content {
-        @include fill(
-            $toolbar-text,
-            $toolbar-bg,
-            $toolbar-border,
-            $toolbar-gradient
-        );
+        &.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;
+        }
     }
 
-}
 
-// #endregion
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
 
-// #endregion
+        // Orientation -- horizontal
+        .k-menu-horizontal {
 
-// #endregion
-// #region @import "../action-buttons/_index.scss"; -> packages/classic/scss/action-buttons/_index.scss
-// #region @import "../core/_index.scss"; -> packages/classic/scss/core/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
+            > .k-menu-item + .k-menu-item {
+                margin-right: $menu-item-spacing;
+                margin-left: 0;
+            }
+        }
 
 
-// Dependencies
-// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
+        // Orientation -- vertical
+        .k-menu-vertical {
 
+            > .k-menu-item > .k-menu-link {
+                padding-right: $kendo-menu-popup-item-padding-x;
+                padding-left: $kendo-menu-popup-item-padding-end;
+            }
+        }
 
-// Component
-// #region @import "_variables.scss"; -> packages/classic/scss/action-buttons/_variables.scss
-// Actions
-$actions-margin-top: map-get( $spacing, 4 ) !default;
-$actions-padding-x: map-get( $spacing, 2 ) !default;
-$actions-padding-y: map-get( $spacing, 2 ) !default;
-$actions-border-width: 0px !default;
-$actions-button-spacing: map-get( $spacing, 2 ) !default;
 
-$actions-bg: null !default;
-$actions-text: null !default;
-$actions-border: null !default;
-$actions-gradient: null !default;
+        // Sub menu
+        .k-menu-group {
 
-// #endregion
-// #region @import "_layout.scss"; -> packages/classic/scss/action-buttons/_layout.scss
-// #region @import "~@progress/kendo-theme-default/scss/action-buttons/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/action-buttons/_layout.scss
-@include exports("action-buttons/layout") {
+            .k-menu-link {
+                padding-right: $kendo-menu-popup-item-padding-x;
+                padding-left: $kendo-menu-popup-item-padding-end;
+            }
+
+        }
 
-    .k-actions {
-        padding: $actions-padding-y $actions-padding-x;
-        border-width: $actions-border-width 0 0 0;
-        border-style: solid;
-        border-color: inherit;
-        flex-shrink: 0;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        gap: $actions-button-spacing;
-        overflow: hidden;
-        // TODO: remove
-        clear: both;
     }
 
+}
 
-    // Actions in popup
-    .k-popup .k-actions {
-        margin-top: $actions-margin-top;
-    }
+// #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") {
 
-    // Aliases
-    .k-edit-buttons,
-    .k-action-buttons,
-    .k-columnmenu-actions {
-        @extend .k-actions;
-    }
+    .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
+            );
 
-    // Legacy spacing
-    .k-ie {
-        .k-actions .k-button ~ .k-button {
-            margin-left: $actions-button-spacing;
-            flex-shrink: 0;
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    $menu-item-hover-text,
+                    $menu-item-hover-bg,
+                    $menu-item-hover-border,
+                    $menu-item-hover-gradient
+                );
+            }
 
-            .k-rtl &,
-            [dir="rtl"] & {
-                margin-left: 0;
-                margin-right: $actions-button-spacing;
+            &:active,
+            &.k-active {
+                @include fill(
+                    $menu-item-expanded-text,
+                    $menu-item-expanded-bg,
+                    $menu-item-expanded-border,
+                    $menu-item-expanded-gradient
+                );
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $menu-item-focus-shadow );
             }
         }
     }
 
-    // Actions align
-    .k-actions-start {
-        justify-content: flex-start;
-    }
-    .k-actions-center {
-        justify-content: center;
-    }
-    .k-actions-end {
-        justify-content: flex-end;
-    }
-    .k-actions-stretched > * {
-        flex: 1 0 0%;
-    }
+    .k-menu-group,
+    .k-menu.k-context-menu {
+        @include fill(
+            $kendo-menu-popup-text,
+            $kendo-menu-popup-bg,
+            $kendo-menu-popup-border,
+            $kendo-menu-popup-gradient
+        );
 
-    // Actions orientation
-    .k-actions-horizontal {
-        width: 100%;
-        flex-flow: row nowrap;
-    }
-    .k-actions-vertical {
-        flex-flow: column nowrap;
-    }
+        .k-item > .k-link {
+            @include fill(
+                $kendo-menu-popup-item-text,
+                $kendo-menu-popup-item-bg,
+                $kendo-menu-popup-item-border,
+                $kendo-menu-popup-item-gradient
+            );
 
-}
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    $kendo-menu-popup-item-hover-text,
+                    $kendo-menu-popup-item-hover-bg,
+                    $kendo-menu-popup-item-hover-border,
+                    $kendo-menu-popup-item-hover-gradient
+                );
+            }
 
-// #endregion
+            &:active,
+            &.k-active,
+            &.k-selected {
+                @include fill(
+                    $kendo-menu-popup-item-expanded-text,
+                    $kendo-menu-popup-item-expanded-bg,
+                    $kendo-menu-popup-item-expanded-border,
+                    $kendo-menu-popup-item-expanded-gradient
+                );
+            }
 
-// #endregion
-// #region @import "_theme.scss"; -> packages/classic/scss/action-buttons/_theme.scss
-// #region @import "~@progress/kendo-theme-default/scss/action-buttons/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/action-buttons/_theme.scss
-@include exports("action-buttons/theme") {
+            &.k-focus {
+                @include box-shadow( $kendo-menu-popup-item-focus-shadow );
+            }
+        }
 
-    .k-actions {
+        .k-item {
+            &:focus {
+                @include box-shadow( $kendo-menu-popup-item-focus-shadow );
+            }
+        }
+    }
+
+
+    // Scrolling
+    .k-menu-scroll-button {
         @include fill(
-            $actions-text,
-            $actions-bg,
-            $actions-border,
-            $actions-gradient
+            $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
@@ -12587,160 +12722,658 @@ $actions-gradient: null !default;
 // #endregion
 
 // #endregion
-// #region @import "../window/_variables.scss"; -> packages/classic/scss/window/_variables.scss
-// Window
-$window-border-width: 1px !default;
-$window-border-radius: map-get( $spacing, 1 ) !default;
-$window-font-family: $font-family !default;
-$window-font-size: $font-size !default;
-$window-line-height: $line-height !default;
-
-$window-titlebar-padding-x: map-get( $spacing, 3 ) !default;
-$window-titlebar-padding-y: map-get( $spacing, 2 ) !default;
-$window-titlebar-border-width: 0 0 1px !default;
-$window-titlebar-border-style: solid !default;
-
-$window-title-font-size: $font-size-lg !default;
-$window-title-line-height: 1.25 !default;
-
-$window-actions-gap: null !default;
+// #region @import "../icons/_index.scss"; -> packages/classic/scss/icons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-$window-action-opacity: null !default;
-$window-action-hover-opacity: null !default;
 
-$window-inner-padding-x: map-get( $spacing, 3 ) !default;
-$window-inner-padding-y: map-get( $spacing, 3 ) !default;
+// Component
+// #region @import "_variables.scss"; -> packages/classic/scss/toolbar/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "_layout.scss"; -> packages/classic/scss/toolbar/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/toolbar/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/toolbar/_layout.scss
+@include exports("toolbar/layout") {
 
-$window-buttongroup-padding-x: $actions-padding-x !default;
-$window-buttongroup-padding-y: $actions-padding-y !default;
-$window-buttongroup-border-width: 1px !default;
+    // Base
+    .k-toolbar {
+        margin: 0;
+        padding: $toolbar-padding-y $toolbar-padding-x;
+        border-width: $toolbar-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $toolbar-font-family;
+        font-size: $toolbar-font-size;
+        line-height: $toolbar-line-height;
+        list-style: none;
+        display: flex;
+        flex-flow: row wrap;
+        gap: $toolbar-spacing;
+        align-items: center;
+        justify-content: flex-start;
+        position: relative;
+        overflow: hidden;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
 
-$window-bg: $component-bg !default;
-$window-text: $component-text !default;
-$window-border: $component-border !default;
+        // Remove once we decide to not size empty containers
+        &::before {
+            content: "";
+            height: $kendo-button-calc-size;
+            margin-inline-start: -$toolbar-spacing;
+        }
 
-$window-titlebar-bg: $header-bg !default;
-$window-titlebar-text: $header-text !default;
-$window-titlebar-border: $header-border !default;
-$window-titlebar-gradient: $header-gradient !default;
+        &.k-toolbar-resizable {
+            flex-wrap: nowrap;
+        }
 
-$window-shadow: 1px 1px 7px 1px rgba( 0, 0, 0, .12 ) !default;
-$window-focused-shadow: 1px 1px 7px 1px rgba( 0, 0, 0, .25 ) !default;
+        > * {
+            flex-shrink: 0;
+            display: inline-flex;
+            align-content: center;
+            vertical-align: middle;
 
-$window-sizes: (
-    sm: 300px,
-    md: 800px,
-    lg: 1200px
-) !default;
+            > label {
+                margin-inline-end: $toolbar-spacing;
+                align-self: center;
+            }
+        }
 
-// #endregion
 
+        // Button
+        .k-button {}
 
-// Component
-// #region @import "_variables.scss"; -> packages/classic/scss/forms/_variables.scss
-// Forms
-$form-spacer: $padding-x * 2 !default;
 
-$form-font-size: $font-size !default;
-$form-line-height: $line-height !default;
-$form-line-height-em: $form-line-height * 1em !default;
-$form-line-height-sm: $line-height-sm !default;
-$form-line-height-lg: $line-height-lg !default;
+        // Toggle button
+        .k-toggle-button {}
 
-$form-fieldset-margin: 2em 0 0 !default;
-$form-fieldset-padding: 0px !default;
 
-$form-legend-margin: 0 0 1em !default;
-$form-legend-padding: 0px !default;
-$form-legend-border-width: 0 0 2px !default;
-$form-legend-border-style: solid !default;
-$form-legend-border-color: $component-border !default;
-$form-legend-width: 100% !default;
-$form-legend-font-size: 14px !default;
-$form-legend-text-transform: uppercase !default;
+        // Button group
+        .k-button-group {}
 
-$form-label-margin-bottom: 0px !default;
 
-$form-button-margin-x: 8px !default;
+        // Split button
+        .k-split-button {}
 
-$form-hint-font-size: 12px !default;
-$form-hint-font-style: italic !default;
-$form-hint-margin-top: 4px !default;
 
-$form-field-margin-top: 1em !default;
+        // Input
+        .k-input,
+        .k-picker {
+            width: $toolbar-input-width;
+        }
+        .k-color-picker {
+            width: min-content;
+        }
 
-$form-separator-margin: $form-field-margin-top 0 0 !default;
-$form-separator-border-color: $form-legend-border-color !default;
+        // Overflow anchor
+        .k-overflow-anchor {
+            @include border-radius( 0 );
+            margin: 0;
+            padding: $toolbar-padding-y;
+            width: auto;
+            height: 100%;
+            aspect-ratio: 1;
+            border-width: 0;
+            border-color: inherit;
+            box-sizing: border-box;
+            justify-content: center;
+            position: absolute;
+            top: 0;
+            right: 0;
 
-$horizontal-form-label-padding-top: 5px !default;
-$horizontal-form-label-margin-x: 10px !default;
-$horizontal-form-label-width: 25% !default;
-$horizontal-form-label-align: flex-end !default;
+            &::before {
+                display: block;
+            }
+        }
 
-$horizontal-form-field-wrap-max-width: calc( ( 100% - #{$horizontal-form-label-width} ) - #{$horizontal-form-label-margin-x} ) !default;
 
-$inline-form-element-width: 25% !default;
+        // Separator
+        .k-separator,
+        .k-toolbar-separator {
+            width: 0;
+            height: $line-height-em;
+            border-width: 0 0 0 1px;
+            border-style: solid;
+            align-self: center;
+        }
 
-$forms-invalid-color: $error !default;
 
+        // Spacer
+        .k-toolbar-spacer {
+            height: $line-height-em;
+            flex: 1 0 0%;
+        }
 
-// Label
-$label-optional-margin-x: 6px !default;
-$label-optional-font-size: 12px !default;
-$label-optional-font-style: italic !default;
 
+        // Template
+        .k-toolbar-template {
+            align-self: center;
+            align-items: center;
+        }
 
-// Fieldset
-$fieldset-margin: 30px !default;
-$fieldset-font-size: $h4-font-size !default;
+    }
 
-$fieldset-bg: null !default;
-$fieldset-text: null !default;
-$fieldset-border: null !default;
 
-$fieldset-legend-bg: null !default;
-$fieldset-legend-text: try-shade( $body-text, 2 ) !default;
-$fieldset-legend-border: null !default;
+    // Toolbar group
+    .k-toolbar-group {
+        display: flex;
+        flex-direction: inherit;
+        flex-wrap: nowrap;
+        gap: inherit;
+    }
 
-// #endregion
-// #region @import "_layout.scss"; -> packages/classic/scss/forms/_layout.scss
-// #region @import "~@progress/kendo-theme-default/scss/forms/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/forms/_layout.scss
-@include exports("forms/layout") {
 
-    // Common
-    .k-form,
-    .k-form-inline {
-        font-size: $form-font-size;
-        line-height: $form-line-height;
+    // Angular specific
+    kendo-toolbar-renderer {
+        display: inline-block;
+        border-color: inherit;
     }
 
 
-    // Fieldset
-    .k-fieldset {
-        margin: $fieldset-margin;
-        border-width: 1px 0 0;
-        border-style: solid;
-        padding: 25px 0 0;
+    // Overflow container
+    .k-overflow-container {
+        font-size: $kendo-menu-popup-font-size-md;
+        line-height: $kendo-menu-popup-line-height-md;
 
-        > legend {
-            margin-left: 0;
-            padding: 0 $padding-x 0 0;
-            text-transform: uppercase;
+        > .k-item {
+            border-color: inherit;
         }
-    }
 
+        .k-separator {
+            margin: map-get( $spacing, 1 ) 0;
+        }
 
-    // Label
-    kendo-label > .k-label {
-        margin: 0;
-    }
-
-    .k-label-optional {
-        margin-left: $label-optional-margin-x;
-        font-size: $label-optional-font-size;
-        font-style: $label-optional-font-style;
-        align-self: center;
-    }
+        // Group
+        .k-overflow-tool-group {
+            display: block;
+        }
+
+        // Button
+        .k-overflow-button {
+            padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
+            width: 100%;
+            height: auto;
+            border-width: 0;
+            border-radius: 0;
+            aspect-ratio: auto;
+            color: inherit;
+            background-color: transparent;
+            background-image: none;
+            font: inherit;
+            cursor: pointer;
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            align-content: center;
+            gap: $icon-spacing;
+            justify-content: flex-start;
+            position: relative;
+        }
+
+        // Button group
+        .k-button-group {
+            @include box-shadow( none );
+            display: flex;
+            flex-flow: column nowrap;
+
+            .k-button {
+                margin: if( $kendo-button-border-width == 0, null, 0);
+            }
+        }
+
+        // Split button
+        .k-split-button {
+            display: flex;
+            flex-direction: column;
+        }
+
+        // Hidden items
+        .k-overflow-hidden {
+            display: none;
+        }
+    }
+
+
+
+
+    // RTL
+    .k-toolbar {
+
+        &.k-rtl,
+        .k-rtl &,
+        &[dir="rtl"],
+        [dir="rtl"] & {
+            .k-overflow-anchor {
+                margin: 0;
+                right: auto;
+                left: 0;
+            }
+        }
+
+    }
+
+}
+
+
+
+
+@include exports( "floating-toolbar/layout" ) {
+
+
+    // sass-lint:disable class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        padding: $toolbar-padding-y $toolbar-padding-x !important; // sass-lint:disable-line no-important
+        border-width: $toolbar-border-width;
+        border-style: solid;
+        display: flex;
+        flex-flow: row nowrap;
+        gap: $toolbar-spacing;
+        align-items: center;
+
+        .k-toolbar {
+            padding: 0;
+            border-width: 0;
+            flex-shrink: 1;
+            color: inherit;
+            background: none;
+        }
+    }
+    .k-editortoolbar-dragHandle {
+        cursor: move;
+        display: flex;
+        align-items: center;
+        align-self: stretch;
+        flex-shrink: 0;
+    }
+    // sass-lint:enable class-name-format
+
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/classic/scss/toolbar/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/toolbar/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/toolbar/_theme.scss
+@include exports("toolbar/theme") {
+
+    // Theme
+    .k-toolbar {
+        @include fill(
+            $toolbar-text,
+            $toolbar-bg,
+            $toolbar-border,
+            $toolbar-gradient
+        );
+        @include box-shadow( $toolbar-shadow );
+
+
+        // Separator
+        .k-separator {
+            border-color: $toolbar-separator-border;
+        }
+
+
+        // Button group
+        .k-button-group {}
+
+    }
+
+
+    // Overflow container
+    .k-overflow-container {
+
+        .k-button {
+
+            // Hover state
+            &:hover,
+            &.k-hover {
+                color: $kendo-menu-popup-item-hover-text;
+                background: $kendo-menu-popup-item-hover-bg;
+            }
+
+            // Button focus state
+            &:focus,
+            &.k-focus {
+                box-shadow: $kendo-menu-popup-item-focus-shadow;
+            }
+
+            // Active state
+            &:active,
+            &.k-active {
+                color: $kendo-menu-popup-item-hover-text;
+                background: $kendo-menu-popup-item-hover-bg;
+            }
+
+            // Selected
+            &.k-selected {
+                color: $kendo-menu-popup-item-expanded-text;
+                background: $kendo-menu-popup-item-expanded-bg;
+            }
+
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: inherit;
+            }
+        }
+
+    }
+
+}
+
+
+
+
+@include exports("floating-toolbar/theme") {
+
+    // sass-lint:disable-block class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        @include fill(
+            $toolbar-text,
+            $toolbar-bg,
+            $toolbar-border,
+            $toolbar-gradient
+        );
+    }
+
+}
+
+// #endregion
+
+// #endregion
+
+// #endregion
+// #region @import "../action-buttons/_index.scss"; -> packages/classic/scss/action-buttons/_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 "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/classic/scss/action-buttons/_variables.scss
+// Actions
+$actions-margin-top: map-get( $spacing, 4 ) !default;
+$actions-padding-x: map-get( $spacing, 2 ) !default;
+$actions-padding-y: map-get( $spacing, 2 ) !default;
+$actions-border-width: 0px !default;
+$actions-button-spacing: map-get( $spacing, 2 ) !default;
+
+$actions-bg: null !default;
+$actions-text: null !default;
+$actions-border: null !default;
+$actions-gradient: null !default;
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/classic/scss/action-buttons/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/action-buttons/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/action-buttons/_layout.scss
+@include exports("action-buttons/layout") {
+
+    .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;
+        flex-shrink: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: $actions-button-spacing;
+        overflow: hidden;
+        // TODO: remove
+        clear: both;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Actions in popup
+    .k-popup .k-actions {
+        margin-top: $actions-margin-top;
+    }
+
+
+    // Aliases
+    .k-edit-buttons,
+    .k-action-buttons,
+    .k-columnmenu-actions {
+        @extend .k-actions;
+    }
+
+
+    // Legacy spacing
+    .k-ie {
+        .k-actions .k-button ~ .k-button {
+            margin-left: $actions-button-spacing;
+            flex-shrink: 0;
+
+            .k-rtl &,
+            [dir="rtl"] & {
+                margin-left: 0;
+                margin-right: $actions-button-spacing;
+            }
+        }
+    }
+
+    // Actions align
+    .k-actions-start {
+        justify-content: flex-start;
+    }
+    .k-actions-center {
+        justify-content: center;
+    }
+    .k-actions-end {
+        justify-content: flex-end;
+    }
+    .k-actions-stretched > * {
+        flex: 1 0 0%;
+    }
+
+    // Actions orientation
+    .k-actions-horizontal {
+        width: 100%;
+        flex-flow: row nowrap;
+    }
+    .k-actions-vertical {
+        flex-flow: column nowrap;
+    }
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/classic/scss/action-buttons/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/action-buttons/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/action-buttons/_theme.scss
+@include exports("action-buttons/theme") {
+
+    .k-actions {
+        @include fill(
+            $actions-text,
+            $actions-bg,
+            $actions-border,
+            $actions-gradient
+        );
+    }
+
+}
+
+// #endregion
+
+// #endregion
+
+// #endregion
+// #region @import "../window/_variables.scss"; -> packages/classic/scss/window/_variables.scss
+// Window
+$window-border-width: 1px !default;
+$window-border-radius: map-get( $spacing, 1 ) !default;
+$window-font-family: $font-family !default;
+$window-font-size: $font-size !default;
+$window-line-height: $line-height !default;
+
+$window-titlebar-padding-x: map-get( $spacing, 3 ) !default;
+$window-titlebar-padding-y: map-get( $spacing, 2 ) !default;
+$window-titlebar-border-width: 0 0 1px !default;
+$window-titlebar-border-style: solid !default;
+
+$window-title-font-size: $font-size-lg !default;
+$window-title-line-height: 1.25 !default;
+
+$window-actions-gap: null !default;
+
+$window-action-opacity: null !default;
+$window-action-hover-opacity: null !default;
+
+$window-inner-padding-x: map-get( $spacing, 3 ) !default;
+$window-inner-padding-y: map-get( $spacing, 3 ) !default;
+
+$window-buttongroup-padding-x: $actions-padding-x !default;
+$window-buttongroup-padding-y: $actions-padding-y !default;
+$window-buttongroup-border-width: 1px !default;
+
+$window-bg: $component-bg !default;
+$window-text: $component-text !default;
+$window-border: $component-border !default;
+
+$window-titlebar-bg: $header-bg !default;
+$window-titlebar-text: $header-text !default;
+$window-titlebar-border: $header-border !default;
+$window-titlebar-gradient: $header-gradient !default;
+
+$window-shadow: 1px 1px 7px 1px rgba( 0, 0, 0, .12 ) !default;
+$window-focused-shadow: 1px 1px 7px 1px rgba( 0, 0, 0, .25 ) !default;
+
+$window-sizes: (
+    sm: 300px,
+    md: 800px,
+    lg: 1200px
+) !default;
+
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/classic/scss/forms/_variables.scss
+// Forms
+$form-spacer: $padding-x * 2 !default;
+
+$form-font-size: $font-size !default;
+$form-line-height: $line-height !default;
+$form-line-height-em: $form-line-height * 1em !default;
+$form-line-height-sm: $line-height-sm !default;
+$form-line-height-lg: $line-height-lg !default;
+
+$form-fieldset-margin: 2em 0 0 !default;
+$form-fieldset-padding: 0px !default;
+
+$form-legend-margin: 0 0 1em !default;
+$form-legend-padding: 0px !default;
+$form-legend-border-width: 0 0 2px !default;
+$form-legend-border-style: solid !default;
+$form-legend-border-color: $component-border !default;
+$form-legend-width: 100% !default;
+$form-legend-font-size: 14px !default;
+$form-legend-text-transform: uppercase !default;
+
+$form-label-margin-bottom: 0px !default;
+
+$form-button-margin-x: 8px !default;
+
+$form-hint-font-size: 12px !default;
+$form-hint-font-style: italic !default;
+$form-hint-margin-top: 4px !default;
+
+$form-field-margin-top: 1em !default;
+
+$form-separator-margin: $form-field-margin-top 0 0 !default;
+$form-separator-border-color: $form-legend-border-color !default;
+
+$horizontal-form-label-padding-top: 5px !default;
+$horizontal-form-label-margin-x: 10px !default;
+$horizontal-form-label-width: 25% !default;
+$horizontal-form-label-align: flex-end !default;
+
+$horizontal-form-field-wrap-max-width: calc( ( 100% - #{$horizontal-form-label-width} ) - #{$horizontal-form-label-margin-x} ) !default;
+
+$inline-form-element-width: 25% !default;
+
+$forms-invalid-color: $error !default;
+
+
+// Label
+$label-optional-margin-x: 6px !default;
+$label-optional-font-size: 12px !default;
+$label-optional-font-style: italic !default;
+
+
+// Fieldset
+$fieldset-margin: 30px !default;
+$fieldset-font-size: $h4-font-size !default;
+
+$fieldset-bg: null !default;
+$fieldset-text: null !default;
+$fieldset-border: null !default;
+
+$fieldset-legend-bg: null !default;
+$fieldset-legend-text: try-shade( $body-text, 2 ) !default;
+$fieldset-legend-border: null !default;
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/classic/scss/forms/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/forms/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/forms/_layout.scss
+@include exports("forms/layout") {
+
+    // Common
+    .k-form,
+    .k-form-inline {
+        font-size: $form-font-size;
+        line-height: $form-line-height;
+    }
+
+
+    // Fieldset
+    .k-fieldset {
+        margin: $fieldset-margin;
+        border-width: 1px 0 0;
+        border-style: solid;
+        padding: 25px 0 0;
+
+        > legend {
+            margin-left: 0;
+            padding: 0 $padding-x 0 0;
+            text-transform: uppercase;
+        }
+    }
+
+
+    // Label
+    kendo-label > .k-label {
+        margin: 0;
+    }
+
+    .k-label-optional {
+        margin-left: $label-optional-margin-x;
+        font-size: $label-optional-font-size;
+        font-style: $label-optional-font-style;
+        align-self: center;
+    }
 
     .k-label-empty {
         &::before {
@@ -13192,6 +13825,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 {
@@ -13230,7 +13869,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;
     }
@@ -13662,6 +14300,7 @@ $listbox-drop-hint-width: 1px !default;
 
             .k-list {
                 height: inherit;
+                background: transparent;
             }
         }
 
@@ -13796,6 +14435,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 {
@@ -14655,6 +15300,12 @@ $slider-disabled-opacity: null !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-label {
             width: auto;
             font-size: .92em;
@@ -14702,7 +15353,6 @@ $slider-disabled-opacity: null !default;
     .k-slider-wrap {
         width: 100%;
         height: 100%;
-        box-sizing: border-box;
         display: flex;
         flex-flow: inherit;
         align-items: inherit;
@@ -15000,7 +15650,6 @@ $slider-disabled-opacity: null !default;
         position: absolute;
         text-align: center;
         text-decoration: none;
-        box-sizing: border-box;
         width: $slider-draghandle-size;
         height: $slider-draghandle-size;
 
@@ -16501,6 +17150,12 @@ $captcha-validation-message-font-style: italic !default;
         display: flex;
         flex-flow: column nowrap;
         gap: $captcha-gap;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Image
@@ -16614,6 +17269,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
@@ -16746,17 +17407,11 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
 @include exports( "numerictextbox/layout" ) {
 
     // Numeric textbox
-    .k-numeric-textbox {
-
-        .k-input-inner {
-            text-overflow: clip;
-        }
-
-    }
+    .k-numeric-textbox {}
 
 
     // Alias
-    .k-numerictextbox { @extend .k-numeric-textbox; }
+    .k-numerictextbox { @extend .k-numeric-textbox !optional; }
 
 }
 
@@ -16860,6 +17515,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
@@ -17194,6 +17855,12 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
         display: inline-flex;
         flex-direction: column;
         align-items: stretch;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Header
@@ -17533,6 +18200,9 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
 // #region @import "~@progress/kendo-theme-default/scss/datetimepicker/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/datetimepicker/_layout.scss
 @include exports( "datetimepicker/layout" ) {
 
+    // Datetime container
+    .k-datetime-container {}
+
     // Datetime selector
     .k-datetime-selector {
         display: flex;
@@ -17543,6 +18213,20 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
     .k-datetime-wrap {
         width: $datetime-width;
         overflow: hidden;
+
+        .k-datetime-buttongroup {
+            padding: $actions-padding-y $actions-padding-x;
+        }
+
+        .k-calendar,
+        .k-timeselector {
+            width: 100%;
+            border-width: 0;
+        }
+
+        .k-actions {
+            margin: 0;
+        }
     }
 
     // Inner wrap
@@ -17632,6 +18316,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;
+        }
     }
 
 
@@ -18374,13 +19064,18 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
         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, 1 );
-        box-sizing: border-box;
+        padding: map-get( $spacing, 2 );
         display: block;
         position: relative;
         flex: none;
@@ -18426,6 +19121,7 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
 
     // Treeview toggle
     .k-treeview-toggle {
+        margin-left: -$kendo-treeview-indent;
         flex: none;
         display: inline-flex;
         flex-flow: row nowrap;
@@ -18783,6 +19479,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;
         }
@@ -18791,7 +19493,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 {
@@ -18972,9 +19673,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
 /// Font family of the switch.
 /// @group switch
 $kendo-switch-font-family: null !default;
-/// Line height of the switch.
-/// @group switch
-$kendo-switch-line-height: null !default;
 
 /// Border width of the switch track.
 /// @group switch
@@ -18986,17 +19684,17 @@ $kendo-switch-thumb-border-width: 1px !default;
 
 /// Text transform of the switch label.
 /// @group switch
-$kendo-switch-label-text-transform: null !default;
+$kendo-switch-label-text-transform: uppercase !default;
 /// Display of the switch label.
 /// @group switch
-$kendo-switch-label-display: none !default;
+$kendo-switch-label-display: inline !default;
 
 /// Map with the different switch sizes.
 /// @group switch
 $kendo-switch-sizes: (
-    sm: ( font-size: 8px, track-width: 40px, track-height: 20px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 0px, label-offset: 5px ),
-    md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 8px ),
-    lg: ( font-size: 12px, track-width: 80px, track-height: 40px, thumb-width: 40px, thumb-height: 40px, thumb-offset: 0px, label-offset: 10px )
+    sm: ( font-size: 12px, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: 4px ),
+    md: ( font-size: 12px, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 6px ),
+    lg: ( font-size: 12px, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: 8px )
 ) !default;
 
 /// The background of the track when the switch is not checked.
@@ -19039,7 +19737,7 @@ $kendo-switch-off-track-focus-border: null !default;
 $kendo-switch-off-track-focus-gradient: null !default;
 /// The ring around the track when the focused switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-ring: 2px solid rgba( $kendo-switch-off-track-border, .5 ) !default;
+$kendo-switch-off-track-focus-ring: 0 0 3px 1px rgba( if($dark-theme, $white, $black), .25 ) !default;
 
 /// The background of the track when the disabled switch is not checked.
 /// @group switch
@@ -19056,26 +19754,26 @@ $kendo-switch-off-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: $base-bg !default;
+$kendo-switch-off-thumb-bg: try-shade( $kendo-switch-off-track-bg ) !default;
 /// The text color of the thumb when the switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-text: $base-text !default;
+$kendo-switch-off-thumb-text: null !default;
 /// The border color of the thumb when the switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-border: $base-border !default;
+$kendo-switch-off-thumb-border: $kendo-switch-off-track-border !default;
 /// The background gradient of the thumb when the switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-gradient: null !default;
+$kendo-switch-off-thumb-gradient: $base-gradient !default;
 
 /// The background of the thumb when the hovered switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-hover-bg: null !default;
+$kendo-switch-off-thumb-hover-bg: try-shade( $kendo-switch-off-thumb-bg ) !default;
 /// The text color of the thumb when the hovered switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-hover-text: null !default;
 /// The border color of the thumb when the hovered switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-hover-border: null !default;
+$kendo-switch-off-thumb-hover-border: $kendo-switch-off-thumb-border !default;
 /// The background gradient of the thumb when the hovered switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-hover-gradient: null !default;
@@ -19083,13 +19781,13 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
 
 /// The background of the track when the switch is checked.
 /// @group switch
-$kendo-switch-on-track-bg: $primary !default;
+$kendo-switch-on-track-bg: $component-bg !default;
 /// The text color of the track when the switch is checked.
 /// @group switch
-$kendo-switch-on-track-text: contrast-wcag( $kendo-switch-on-track-bg ) !default;
+$kendo-switch-on-track-text: $primary !default;
 /// The border color of the track when the switch is checked.
 /// @group switch
-$kendo-switch-on-track-border: $kendo-switch-on-track-bg !default;
+$kendo-switch-on-track-border: $component-border !default;
 /// The background gradient of the track when the switch is checked.
 /// @group switch
 $kendo-switch-on-track-gradient: null !default;
@@ -19121,7 +19819,7 @@ $kendo-switch-on-track-focus-border: null !default;
 $kendo-switch-on-track-focus-gradient: null !default;
 /// The ring around the track wen the focused switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-ring: 2px solid rgba( $kendo-switch-on-track-border, .25 ) !default;
+$kendo-switch-on-track-focus-ring: 0 0 3px 1px rgba( if($dark-theme, $white, $black), .25 ) !default;
 
 /// The background of the track when the disabled switch is checked.
 /// @group switch
@@ -19138,26 +19836,26 @@ $kendo-switch-on-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-bg: $base-bg !default;
+$kendo-switch-on-thumb-bg: $primary !default;
 /// The text color of the thumb when the switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-text: $base-text !default;
+$kendo-switch-on-thumb-text: null !default;
 /// The border color of the thumb when the switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-border: $base-border !default;
+$kendo-switch-on-thumb-border: try-shade( $kendo-switch-on-thumb-bg ) !default;
 /// The background gradient of the thumb when the switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-gradient: null !default;
+$kendo-switch-on-thumb-gradient: $base-gradient !default;
 
 /// The background of the thumb when the hovered switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-bg: null !default;
+$kendo-switch-on-thumb-hover-bg: try-shade( $kendo-switch-on-thumb-bg ) !default;
 /// The text color of the thumb when the hovered switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-text: null !default;
 /// The border color of the thumb when the hovered switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-border: null !default;
+$kendo-switch-on-thumb-hover-border: try-shade( $kendo-switch-on-thumb-hover-bg ) !default;
 /// The background gradient of the thumb when the hovered switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-gradient: null !default;
@@ -19168,17 +19866,32 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
 @include exports("switch/layout") {
 
     .k-switch {
+        box-sizing: border-box;
         font-family: $kendo-switch-font-family;
-        line-height: $kendo-switch-line-height;
         outline: 0;
         display: inline-flex;
         align-items: center;
         vertical-align: middle;
+        line-height: 1;
         position: relative;
         cursor: pointer;
         user-select: none;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        [type="checkbox"] {
+            display: none;
+        }
+
+        &[aria-readonly="true"] {
+            pointer-events: none;
+        }
     }
 
 
@@ -19700,6 +20413,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;
         }
@@ -19855,7 +20574,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;
             }
@@ -20331,6 +21049,12 @@ $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;
         }
@@ -20638,6 +21362,12 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
         cursor: pointer;
         outline: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         &:focus {
             outline: none;
         }
@@ -20708,717 +21438,201 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
         &.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: $kendo-fab-item-text-padding-y $kendo-fab-item-text-padding-x;
-        border-width: $kendo-fab-item-text-border-width;
-        border-radius: $kendo-fab-item-text-border-radius;
-        font-size: $kendo-fab-item-text-font-size;
-        line-height: $kendo-fab-item-text-line-height;
-    }
-
-    .k-fab-item-icon {
-        width: $kendo-fab-item-icon-width;
-        height: $kendo-fab-item-icon-height;
-        padding: $kendo-fab-item-icon-padding-y $kendo-fab-item-icon-padding-x;
-        border-width: $kendo-fab-item-icon-border-width;
-        border-radius: $kendo-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 $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name} {
-            @include box-shadow($kendo-fab-shadow);
-            outline: $kendo-fab-border-width solid $color;
-            outline-offset: -$kendo-fab-border-width;
-            border-color: $color;
-            color: contrast-wcag( $color );
-            background-color: $color;
-        }
-    }
-
-    // Hover state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-hover.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:hover {
-            border-color: try-shade( $color, .5 );
-            background-color: try-shade( $color, .5 );
-        }
-    }
-
-    // Focus state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name}.k-focus,
-        .k-fab-solid-#{$name}:focus {
-            outline-style: solid;
-            outline-width: 2px;
-            outline-color: rgba( $color, .3 );
-        }
-    }
-
-    // Active state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-active.k-fab-solid-#{$name},
-        .k-selected.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:active {
-            @include box-shadow($kendo-fab-active-shadow);
-            border-color: try-shade( $color, 1.5);
-            background-color: try-shade( $color, 1.5);
-        }
-    }
-
-    // Disabled state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-disabled.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:disabled {
-            @include box-shadow($kendo-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(
-            $kendo-fab-item-text,
-            $kendo-fab-item-bg,
-            $kendo-fab-item-border
-        );
-        @include box-shadow($kendo-fab-item-shadow);
-
-    }
-    .k-fab-item-icon {
-        @include fill(
-            $kendo-fab-item-icon-text,
-            $kendo-fab-item-icon-bg,
-            $kendo-fab-item-icon-border
-        );
-        @include box-shadow($kendo-fab-item-shadow);
-        outline: $kendo-fab-border-width solid rgba(0, 0, 0, .08);
-        outline-offset: -$kendo-fab-border-width;
-    }
-
-    // Hover state
-    .k-fab-item.k-hover .k-fab-item-icon,
-    .k-fab-item:hover .k-fab-item-icon {
-        border-color: try-shade( $kendo-fab-item-icon-border, .5 );
-        background-color: try-shade( $kendo-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-focus .k-fab-item-text,
-    .k-fab-item.k-focus .k-fab-item-icon {
-        outline-style: solid;
-        outline-width: 2px;
-        outline-color: rgba(0, 0, 0, .08);
-    }
-
-    // Active state
-    .k-fab-item.k-active .k-fab-item-icon,
-    .k-fab-item:active .k-fab-item-icon {
-        @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: try-shade( $kendo-fab-item-icon-border, 1);
-        background-color: try-shade( $kendo-fab-item-icon-bg, 1);
-    }
-
-    // Disabled state
-    .k-fab-item.k-disabled,
-    .k-fab-item:disabled {
-        opacity: 1;
-
-        .k-fab-item-text,
-        .k-fab-item-icon {
-            @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: try-tint( $kendo-fab-item-bg, 5 );
-            color: try-tint( $kendo-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 "../list/_index.scss"; -> packages/classic/scss/list/_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;
-    }
-
-    .k-menu-item-content {
-        display: block;
-        height: auto;
-        overflow: visible;
-
-        .k-actions {
-            margin-top: 0;
-        }
-    }
-
-
-    // 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;
-        gap: $menu-item-icon-spacing;
-        align-items: center;
-        position: relative;
-        white-space: nowrap;
-        cursor: pointer;
-    }
-
-
-    // Menu item text
-    .k-menu-link-text {
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 1 1 auto;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-
-    // Expand arrow
-    .k-menu-expand-arrow {
-        margin-inline-end: -$icon-spacing;
-        display: inline-flex;
-        flex-flow: row wrap;
-        align-items: center;
-        flex: none;
-        position: relative;
-    }
-
-
-    // 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: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
-            padding-right: $kendo-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: $kendo-menu-popup-border-width;
-        border-style: solid;
-        overflow: auto;
-        max-height: 80vh;
-    }
-
-
-    // Sub menu
-    .k-menu-group {
-        margin: 0;
-        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
-        list-style: none;
-        display: none;
-        position: absolute;
-
-        .k-menu-popup & {
-            position: relative;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .k-menu-item + .k-menu-item {
-            margin-top: $kendo-menu-popup-item-spacing;
-        }
-
-        .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;
-        }
-    }
-
-    // Sizes
-    .k-menu-group-sm {
-        font-size: $kendo-menu-popup-font-size-sm;
-        line-height: $kendo-menu-popup-line-height-sm;
-
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $kendo-menu-popup-font-size-sm;
-            line-height: $kendo-menu-popup-line-height-sm;
-        }
-
-        .k-menu-link {
-            padding: $kendo-menu-popup-item-padding-y-sm $kendo-menu-popup-item-padding-x-sm;
-            padding-inline-end: $kendo-menu-popup-item-padding-end-sm;
-        }
-
-        .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-item-icon-margin-start-sm;
-            margin-inline-end: $kendo-menu-popup-item-icon-margin-end-sm;
-        }
-    }
-    .k-menu-group-md {
-        font-size: $kendo-menu-popup-font-size-md;
-        line-height: $kendo-menu-popup-line-height-md;
-
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $kendo-menu-popup-font-size-md;
-            line-height: $kendo-menu-popup-line-height-md;
-        }
-
-        .k-menu-link {
-            padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
-            padding-inline-end: $kendo-menu-popup-item-padding-end-md;
-        }
-
-        .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-item-icon-margin-start;
-            margin-inline-end: $kendo-menu-popup-item-icon-margin-end;
-        }
-    }
-    .k-menu-group-lg {
-        font-size: $kendo-menu-popup-font-size-lg;
-        line-height: $kendo-menu-popup-line-height-lg;
-
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $kendo-menu-popup-font-size-lg;
-            line-height: $kendo-menu-popup-line-height-lg;
-        }
-
-        .k-menu-link {
-            padding: $kendo-menu-popup-item-padding-y-lg $kendo-menu-popup-item-padding-x-lg;
-            padding-inline-end: $kendo-menu-popup-item-padding-end-lg;
-        }
-
-        .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-item-icon-margin-start-lg;
-            margin-inline-end: $kendo-menu-popup-item-icon-margin-end-lg;
-        }
-    }
-
-
-    // Context menu
-    .k-popups-wrapper {
-        position: relative;
-        border: 0;
-        margin: 0;
-        padding: 0;
-    }
-    .k-context-menu {
-        margin: 0;
-        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
-        border-width: $kendo-menu-popup-border-width;
-        border-style: solid;
-
-        &.k-menu-horizontal {
-            padding: $kendo-menu-popup-padding-x $kendo-menu-popup-padding-y;
-        }
-    }
-    .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"] {
-
-        // Orientation -- horizontal
-        .k-menu-horizontal {
-
-            > .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: $kendo-menu-popup-item-padding-x;
-                padding-left: $kendo-menu-popup-item-padding-end;
+            .k-fab-item-text {
+                margin-left: map-get( $spacing, 2 );
             }
         }
+    }
 
+    .k-fab-item-text {
+        padding: $kendo-fab-item-text-padding-y $kendo-fab-item-text-padding-x;
+        border-width: $kendo-fab-item-text-border-width;
+        border-radius: $kendo-fab-item-text-border-radius;
+        font-size: $kendo-fab-item-text-font-size;
+        line-height: $kendo-fab-item-text-line-height;
+    }
 
-        // Sub menu
-        .k-menu-group {
+    .k-fab-item-icon {
+        width: $kendo-fab-item-icon-width;
+        height: $kendo-fab-item-icon-height;
+        padding: $kendo-fab-item-icon-padding-y $kendo-fab-item-icon-padding-x;
+        border-width: $kendo-fab-item-icon-border-width;
+        border-radius: $kendo-fab-item-icon-border-radius;
+        box-sizing: content-box;
+        outline: none;
+    }
 
-            .k-menu-link {
-                padding-right: $kendo-menu-popup-item-padding-x;
-                padding-left: $kendo-menu-popup-item-padding-end;
+}
+
+@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/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 $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name} {
+            @include box-shadow($kendo-fab-shadow);
+            outline: $kendo-fab-border-width solid $color;
+            outline-offset: -$kendo-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 $kendo-fab-theme-colors {
+        .k-hover.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:hover {
+            border-color: try-shade( $color, .5 );
+            background-color: try-shade( $color, .5 );
+        }
+    }
 
-            &:hover,
-            &.k-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 $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name}.k-focus,
+        .k-fab-solid-#{$name}:focus {
+            outline-style: solid;
+            outline-width: 2px;
+            outline-color: rgba( $color, .3 );
+        }
+    }
 
-            &:active,
-            &.k-active {
-                @include fill(
-                    $menu-item-expanded-text,
-                    $menu-item-expanded-bg,
-                    $menu-item-expanded-border,
-                    $menu-item-expanded-gradient
-                );
-            }
+    // Active state
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-active.k-fab-solid-#{$name},
+        .k-selected.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:active {
+            @include box-shadow($kendo-fab-active-shadow);
+            border-color: try-shade( $color, 1.5);
+            background-color: try-shade( $color, 1.5);
+        }
+    }
 
-            &:focus,
-            &.k-focus {
-                @include box-shadow( $menu-item-focus-shadow );
-            }
+    // Disabled state
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-disabled.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:disabled {
+            @include box-shadow($kendo-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(
-            $kendo-menu-popup-text,
-            $kendo-menu-popup-bg,
-            $kendo-menu-popup-border,
-            $kendo-menu-popup-gradient
+            $kendo-fab-item-text,
+            $kendo-fab-item-bg,
+            $kendo-fab-item-border
         );
+        @include box-shadow($kendo-fab-item-shadow);
 
-        .k-item > .k-link {
-            @include fill(
-                $kendo-menu-popup-item-text,
-                $kendo-menu-popup-item-bg,
-                $kendo-menu-popup-item-border,
-                $kendo-menu-popup-item-gradient
-            );
-
-            &:hover,
-            &.k-hover {
-                @include fill(
-                    $kendo-menu-popup-item-hover-text,
-                    $kendo-menu-popup-item-hover-bg,
-                    $kendo-menu-popup-item-hover-border,
-                    $kendo-menu-popup-item-hover-gradient
-                );
-            }
-
-            &:active,
-            &.k-active,
-            &.k-selected {
-                @include fill(
-                    $kendo-menu-popup-item-expanded-text,
-                    $kendo-menu-popup-item-expanded-bg,
-                    $kendo-menu-popup-item-expanded-border,
-                    $kendo-menu-popup-item-expanded-gradient
-                );
-            }
+    }
+    .k-fab-item-icon {
+        @include fill(
+            $kendo-fab-item-icon-text,
+            $kendo-fab-item-icon-bg,
+            $kendo-fab-item-icon-border
+        );
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width solid rgba(0, 0, 0, .08);
+        outline-offset: -$kendo-fab-border-width;
+    }
 
-            &:focus,
-            &.k-focus {
-                @include box-shadow( $kendo-menu-popup-item-focus-shadow );
-            }
-        }
+    // Hover state
+    .k-fab-item.k-hover .k-fab-item-icon,
+    .k-fab-item:hover .k-fab-item-icon {
+        border-color: try-shade( $kendo-fab-item-icon-border, .5 );
+        background-color: try-shade( $kendo-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-focus .k-fab-item-text,
+    .k-fab-item.k-focus .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-active .k-fab-item-icon,
+    .k-fab-item:active .k-fab-item-icon {
+        @include box-shadow($kendo-fab-item-active-shadow);
+        border-color: try-shade( $kendo-fab-item-icon-border, 1);
+        background-color: try-shade( $kendo-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-disabled,
+    .k-fab-item:disabled {
+        opacity: 1;
 
-            &::before {
-                opacity: 0;
-            }
+        .k-fab-item-text,
+        .k-fab-item-icon {
+            @include box-shadow($kendo-fab-item-disabled-shadow);
+            background-color: try-tint( $kendo-fab-item-bg, 5 );
+            color: try-tint( $kendo-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.
@@ -21551,6 +21765,12 @@ $actionsheet-item-disabled-shadow: null !default;
         overflow-y: auto;
         position: fixed;
         z-index: 10002;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -22219,6 +22439,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,
@@ -22574,6 +22800,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 {
@@ -22813,6 +23045,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 );
@@ -23352,6 +23590,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
@@ -23630,6 +23874,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 {
@@ -23881,6 +24131,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;
+        }
     }
 
 
@@ -24201,6 +24457,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;
@@ -24248,7 +24510,6 @@ $pager-dropdown-width: 5em !default;
     %base-pager-item {
         min-width: $kendo-button-calc-size;
         height: $kendo-button-calc-size;
-        box-sizing: border-box;
         color: inherit;
         text-align: center;
         display: inline-flex;
@@ -24408,7 +24669,6 @@ $pager-dropdown-width: 5em !default;
             }
 
             height: $kendo-button-calc-size;
-            box-sizing: border-box;
             border-color: inherit;
         }
 
@@ -24733,6 +24993,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 {
@@ -24782,7 +25048,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% );
@@ -25448,19 +25713,27 @@ $tabstrip-content-border-focused: $component-text !default;
             }
 
             > .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;
                 }
             }
         }
@@ -26040,6 +26313,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"] {
@@ -26079,7 +26358,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
@@ -26290,6 +26568,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,
@@ -31937,6 +32221,7 @@ $pivotgrid-remove-text: null !default;
         border-style: solid;
         align-items: flex-start;
         flex-wrap: wrap;
+        box-shadow: none;
 
         > * {
             max-width: 100%;
@@ -31947,32 +32232,6 @@ $pivotgrid-remove-text: null !default;
         }
     }
 
-    .k-pivot-toolbar .k-button {
-        @include border-radius( $border-radius );
-        padding: $kendo-button-padding-y $kendo-button-padding-x;
-        padding-right: calc( #{$kendo-button-padding-x} + #{$icon-size * 3} );
-        min-height: auto;
-        font-size: $font-size;
-        line-height: $kendo-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: $kendo-button-padding-y;
-        top: $kendo-button-padding-y;
-        line-height: 1;
-        cursor: pointer;
-    }
-
     .k-pivot-layout {
         border-spacing: 0;
         table-layout: auto;
@@ -31995,6 +32254,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,
@@ -32058,58 +32319,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;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: map-get( $spacing, 2 );
 
-            > 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;
-            }
+        > .k-pivotgrid-configurator-panel {
+            max-width: 320px;
+            flex: none;
         }
+        > .k-pivot {
+            flex: 1;
+        }
+    }
+    .k-pivotgrid-configurator-panel.kendo-jquery {
+        box-sizing: border-box;
+        display: inline-flex;
 
-
-        p {
-            margin: 0 0 $padding-y-sm;
-            text-transform: uppercase;
+        .k-pivotgrid-configurator {
+            height: 100%;
         }
-        p .k-icon {
-            margin: 0 $icon-spacing 0 0;
+
+        .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;
         }
 
+        .k-pivotgrid-targets {
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 4 );
+        }
 
-        // Treeview
-        .k-treeview {
-            border-width: 0;
-            overflow: visible;
+        .k-pivotgrid-configurator-section {
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
         }
 
-        .k-edit-label {
-            width: 16%;
+        .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-edit-field {
-            width: 77%;
+        .k-ie & .k-column-fields {
+            > * {
+                margin: 2px;
+            }
         }
-
     }
 
 }
@@ -32327,102 +32603,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 {
-        @include fill(
-            $kendo-button-text,
-            $kendo-button-bg,
-            $kendo-button-border,
-            $kendo-button-gradient
-        );
-
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $kendo-button-hover-text,
-                $kendo-button-hover-bg,
-                $kendo-button-hover-border,
-                $kendo-button-hover-gradient
-            );
-        }
-
-        // Pressed state
-        &:active,
-        &.k-state-active {
-            @include fill(
-                $kendo-button-active-text,
-                $kendo-button-active-bg,
-                $kendo-button-active-border,
-                $kendo-button-active-gradient
-            );
-        }
-
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            box-shadow: $kendo-button-focus-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,
@@ -32441,6 +32674,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
@@ -32649,10 +32892,17 @@ $filter-preview-operator-text: $subtle-text !default;
 @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;
 
@@ -33418,6 +33668,12 @@ $taskboard-drag-placeholder-border: $component-border !default;
         display: flex;
         flex-direction: column;
         position: relative;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Toolbar
@@ -33486,7 +33742,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;
@@ -33515,7 +33770,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;
@@ -34725,6 +34979,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;
+        }
     }
 
 
@@ -37208,6 +37468,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;
+        }
     }
 
 }
@@ -38219,12 +38485,13 @@ $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;
@@ -38484,6 +38751,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%;
@@ -38706,6 +38979,12 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         ul {
             margin: 0;
             padding: 0;
@@ -38723,7 +39002,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;
         }
@@ -38803,7 +39081,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;
     }
 
@@ -38993,12 +39270,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 {
@@ -40830,12 +41105,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 {
@@ -41103,6 +41385,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 {