@progress/kendo-theme-default 5.0.0-beta.2 → 5.0.0-beta.3

package/dist/all.scss

@@ -1532,8 +1532,8 @@ $enable-typography: false !default;
 $font-size: 14px !default;
 $font-size-xs: 10px !default;
 $font-size-sm: 12px !default;
-$font-size-md: 16px !default;
-$font-size-lg: 18px !default;
+$font-size-md: $font-size !default;
+$font-size-lg: 16px !default;
 $font-size-xl: 20px !default;
 
 /// Font family across all components.
@@ -1548,7 +1548,7 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono",
 /// @group typography
 $line-height: (20 / 14) !default;
 $line-height-xs: 1 !default;
-$line-height-sm: 1.2 !default;
+$line-height-sm: 1.25 !default;
 $line-height-md: $line-height !default;
 $line-height-lg: 1.5 !default;
 $line-height-em: $line-height * 1em !default;
@@ -5931,10 +5931,17 @@ $message-box-link-text-decoration: underline !default;
 // #region @import "../common/_index.scss"; -> packages/default/scss/common/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../checkbox/_index.scss"; -> packages/default/scss/checkbox/_index.scss
+// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
-// Component
-// #region @import "_variables.scss"; -> packages/default/scss/list/_variables.scss
+// Dependencies
+// #region @import "../typography/_variables.scss"; -> packages/default/scss/typography/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../list/_variables.scss"; -> packages/default/scss/list/_variables.scss
 // List
 
 /// Font size of the list component, if no size is set.
@@ -6185,6 +6192,574 @@ $kendo-list-group-item-shadow: null !default;
 $kendo-list-no-data-text: $subtle-text !default;
 
 // #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/checkbox/_variables.scss
+// Checkbox
+
+/// The sizes of checkbox.
+/// @group checkbox
+$kendo-checkbox-sizes: (
+    sm: map-get( $spacing, 3 ),
+    md: map-get( $spacing, 4 ),
+    lg: map-get( $spacing, 6 )
+) !default;
+
+/// The  border width of checkbox.
+/// @group checkbox
+$kendo-checkbox-border-width: 1px !default;
+/// The line height of checkbox.
+/// @group checkbox
+$kendo-checkbox-line-height: calc( #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width} ) !default;
+
+/// The background of checkbox.
+/// @group checkbox
+$kendo-checkbox-bg: $white !default;
+/// The text of checkbox.
+/// @group checkbox
+$kendo-checkbox-text: transparent !default;
+/// The border of checkbox.
+/// @group checkbox
+$kendo-checkbox-border: $base-border !default;
+
+/// The background of hovered checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-bg: null !default;
+/// The text of hovered checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-text: null !default;
+/// The border of hovered checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-border: null !default;
+
+/// The background of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-bg: $primary !default;
+/// The text of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
+/// The border of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
+
+/// The background of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
+/// The text of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-bg !default;
+/// The border of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-border: $kendo-checkbox-border !default;
+
+/// The border of focused checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-border: null !default;
+/// The shadow of focused checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
+/// The border of focused and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-border: null !default;
+/// The shadow of focused and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
+
+/// The background of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-bg: null !default;
+/// The text of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-text: null !default;
+/// The border of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-border: null !default;
+
+/// The background of disabled and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-bg: null !default;
+/// The text of disabled and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-text: null !default;
+/// The border of disabled and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-border: null !default;
+
+/// The background of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-bg: null !default;
+/// The text of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-text: $invalid-text !default;
+/// The border of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-border: $invalid-border !default;
+
+
+// Checkbox indicator
+
+/// The icon type of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-icon-type: glyph !default;
+
+/// The glyph font family of checkbox.
+/// @group checkbox
+$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
+/// The glyph of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-glyph: "\e118" !default;
+/// The glyph of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-glyph: "\e121" !default;
+
+/// The image of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-image: null !default;
+/// The image of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-image: null !default;
+
+
+// Checkbox label
+
+/// The horizontal margin of the checkbox inside a label.
+/// @group checkbox
+$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+
+
+// Checkbox list
+
+/// The horizontal margin of list item of checkbox.
+/// @group checkbox
+$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+/// The horizontal list item padding of checkbox.
+/// @group checkbox
+$kendo-checkbox-list-item-padding-x: 0px !default;
+/// The vertical list item padding of checkbox.
+/// @group checkbox
+$kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+
+
+// Checkbox ripple
+
+/// The ripple size of checkbox.
+/// @group checkbox
+$kendo-checkbox-ripple-size: (
+    sm: (map-get( $kendo-checkbox-sizes, "sm" ) * 3),
+    md: (map-get( $kendo-checkbox-sizes, "md" ) * 3),
+    lg: (map-get( $kendo-checkbox-sizes, "lg" ) * 3)
+) !default;
+/// The ripple margin of checkbox.
+/// @group checkbox
+$kendo-checkbox-ripple-margin: (
+    sm: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "sm" )} + 2 * #{$kendo-checkbox-border-width})),
+    md: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "md" )} + 2 * #{$kendo-checkbox-border-width})),
+    lg: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "lg" )} + 2 * #{$kendo-checkbox-border-width}))
+) !default;
+/// The ripple opacity of checkbox.
+/// @group checkbox
+$kendo-checkbox-ripple-opacity: .3 !default;
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/checkbox/_layout.scss
+@include exports( "checkbox/layout" ) {
+
+    // Checkbox
+    .k-checkbox {
+        margin: 0;
+        padding: 0;
+        line-height: initial;
+        border-width: $kendo-checkbox-border-width;
+        border-style: solid;
+        outline: 0;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: inline-block;
+        flex: none;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+        -webkit-appearance: none;
+    }
+
+    @each $name, $size in $kendo-checkbox-sizes {
+        // Checkbox sizes
+        .k-checkbox-#{$name} {
+            width: $size;
+            height: $size;
+
+            + .k-checkbox-label {
+
+                .k-ripple {
+                    top: ($size / 2);
+                    left: ($size / 2);
+                    width: ($size * 5 / 2);
+                    height: ($size * 5 / 2);
+                }
+            }
+        }
+
+
+        // Checkbox indicator
+        .k-checkbox-#{$name}::before {
+            @if $kendo-checkbox-icon-type == "glyph" {
+                content: $kendo-checkbox-checked-glyph;
+                width: ($size - map-get( $spacing, thin ));
+                height: ($size - map-get( $spacing, thin ));
+                font-size: ($size - map-get( $spacing, thin ));
+                font-family: $kendo-checkbox-glyph-font-family;
+                line-height: 1;
+                transform: scale(0) translate(-50%, -50%);
+                overflow: hidden;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+            }
+
+            @if $kendo-checkbox-icon-type == "marker" {
+                content: "";
+                width: ($size - map-get( $spacing, 1 ));
+                height: ($size - map-get( $spacing, 1 ));
+                background-color: currentColor;
+                transform: scale(0) translate(-50%, -50%);
+                overflow: hidden;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+            }
+        }
+    }
+
+
+    // Checked state
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
+        @if $kendo-checkbox-icon-type == "image" {
+            background-image: $kendo-checkbox-checked-image;
+        }
+
+        @if $kendo-checkbox-icon-type == "glyph" {
+            &::before {
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+
+        @if $kendo-checkbox-icon-type == "marker" {
+            &::before {
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+    }
+
+    // Indeterminate state
+    .k-checkbox:indeterminate,
+    .k-checkbox.k-indeterminate {
+        @if $kendo-checkbox-icon-type == "image" {
+            background-image: $kendo-checkbox-indeterminate-image;
+        }
+
+        @if $kendo-checkbox-icon-type == "glyph" {
+            &::before {
+                content: $kendo-checkbox-indeterminate-glyph;
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+
+        @if $kendo-checkbox-icon-type == "marker" {
+            &::before {
+                width: $kendo-checkbox-maker-indeterminate-width;
+                height: $kendo-checkbox-marker-indeterminate-height;
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+    }
+
+
+    // Disabled state
+    .k-checkbox:disabled,
+    .k-checkbox.k-disabled,
+    .k-checkbox:disabled + .k-checkbox-label,
+    .k-checkbox.k-disabled + .k-checkbox-label {
+        @include disabled( $disabled-styling );
+    }
+
+
+    // Checkbox wrap
+    .k-checkbox-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
+
+    // Checkbox label
+    .k-checkbox-label {
+        margin: 0;
+        padding: 0;
+        line-height: $kendo-checkbox-line-height;
+        display: inline-flex;
+        align-items: flex-start;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+
+        .k-label {
+            cursor: pointer;
+        }
+
+        .k-ripple {
+            right: auto;
+            bottom: auto;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+
+            // Hide ripple temporarily
+            visibility: hidden !important; // sass-lint:disable-line no-important
+        }
+
+        .k-ripple-blob {
+            // sass-lint:disable-block no-important
+            // use !important until ripple can apply these styles from the script
+            top: 50% !important;
+            left: 50% !important;
+            width: 200% !important;
+            height: 200% !important;
+        }
+    }
+    .k-checkbox + .k-checkbox-label {
+        display: inline;
+    }
+    .k-checkbox + .k-checkbox-label,
+    .k-checkbox-label + .k-checkbox {
+        margin-left: $kendo-checkbox-label-margin-x;
+    }
+    .k-checkbox-label > .k-checkbox {
+        margin-right: $kendo-checkbox-label-margin-x;
+        flex-shrink: 0;
+    }
+    kendo-label.k-checkbox-label > .k-checkbox:last-child {
+        margin-right: 0;
+    }
+    kendo-label.k-checkbox-label > .k-label:first-child {
+        margin-right: $kendo-checkbox-label-margin-x;
+    }
+    kendo-label.k-checkbox-label > .k-label {
+        display: inline;
+    }
+
+
+    // Empty label
+    .k-checkbox-label:empty {
+        display: none !important; // sass-lint:disable-line no-important
+    }
+
+
+    // Label with no text
+    .k-checkbox-label.k-no-text {
+        min-width: 1px;
+    }
+
+
+    // Checkbox list
+    .k-checkbox-list {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
+        list-style: none;
+    }
+    .k-checkbox-item,
+    .k-checkbox-list-item {
+        padding: $kendo-checkbox-list-item-padding-y $kendo-checkbox-list-item-padding-x;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: map-get( $spacing, 1 );
+
+        .k-checkbox-label {
+            line-height: inherit;
+        }
+    }
+    .k-checkbox-list-horizontal,
+    .k-checkbox-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $kendo-checkbox-list-spacing;
+    }
+
+
+    // RTL
+    [dir="rtl"] {
+        .k-checkbox + .k-checkbox-label,
+        .k-checkbox-label + .k-checkbox {
+            margin-left: 0;
+            margin-right: $kendo-checkbox-label-margin-x;
+        }
+        .k-checkbox-label > .k-checkbox {
+            margin-right: 0;
+            margin-left: $kendo-checkbox-label-margin-x;
+        }
+        kendo-label.k-checkbox-label > .k-checkbox:last-child {
+            margin-left: 0;
+        }
+        kendo-label.k-checkbox-label > .k-label:first-child {
+            margin-right: 0;
+            margin-left: $kendo-checkbox-label-margin-x;
+        }
+    }
+
+    .k-ripple-container {
+        @each $name, $size in $kendo-checkbox-sizes {
+            .k-checkbox-#{$name}::after {
+                content: "";
+                display: block;
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: map-get( $kendo-checkbox-ripple-size, $name );
+                height: map-get( $kendo-checkbox-ripple-size, $name );
+                margin-left: map-get( $kendo-checkbox-ripple-margin, $name );
+                margin-top: map-get( $kendo-checkbox-ripple-margin, $name );
+                border-radius: 100%;
+                z-index: 1;
+                transform: scale(0);
+            }
+
+            .k-checkbox:disabled::after,
+            .k-checkbox.k-disabled::after {
+                display: none;
+            }
+        }
+    }
+
+}
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/default/scss/checkbox/_theme.scss
+@include exports("checkbox/theme") {
+
+    // Checkbox
+    .k-checkbox {
+        @include fill(
+            $kendo-checkbox-text,
+            $kendo-checkbox-bg,
+            $kendo-checkbox-border
+        );
+    }
+
+
+    // Hover state
+    .k-checkbox:hover,
+    .k-checkbox.k-hover {
+        @include fill(
+            $kendo-checkbox-hover-text,
+            $kendo-checkbox-hover-bg,
+            $kendo-checkbox-hover-border
+        );
+    }
+
+
+    // Focus state
+    .k-checkbox:focus,
+    .k-checkbox.k-focus {
+        @include fill( $border: $kendo-checkbox-focus-border );
+        @include box-shadow( $kendo-checkbox-focus-shadow );
+    }
+
+
+    // Indeterminate
+    .k-checkbox:indeterminate,
+    .k-checkbox.k-indeterminate {
+        @include fill(
+            $kendo-checkbox-indeterminate-text,
+            $kendo-checkbox-indeterminate-bg,
+            $kendo-checkbox-indeterminate-border
+        );
+    }
+
+
+    // Checked
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
+        @include fill(
+            $kendo-checkbox-checked-text,
+            $kendo-checkbox-checked-bg,
+            $kendo-checkbox-checked-border
+        );
+    }
+    .k-checkbox:checked:focus,
+    .k-checkbox.k-checked.k-focus {
+        @include fill( $border: $kendo-checkbox-focus-checked-border );
+        @include box-shadow( $kendo-checkbox-focus-checked-shadow );
+    }
+
+
+    // Disabled
+    .k-checkbox:disabled,
+    .k-checkbox.k-disabled {
+        @include fill(
+            $kendo-checkbox-disabled-text,
+            $kendo-checkbox-disabled-bg,
+            $kendo-checkbox-disabled-border
+        );
+    }
+    .k-checkbox:checked:disabled,
+    .k-checkbox:indeterminate:disabled,
+    .k-checkbox.k-checked.k-disabled,
+    .k-checkbox.k-indeterminate.k-disabled {
+        @include fill(
+            $kendo-checkbox-disabled-checked-text,
+            $kendo-checkbox-disabled-checked-bg,
+            $kendo-checkbox-disabled-checked-border
+        );
+    }
+
+
+    // Invalid
+    .k-checkbox:invalid,
+    .k-checkbox.k-invalid {
+        @include fill( $border: $kendo-checkbox-invalid-border );
+    }
+    .k-checkbox:invalid + .k-checkbox-label,
+    .k-checkbox.k-invalid + .k-checkbox-label {
+        @include fill( $color: $kendo-checkbox-invalid-text );
+    }
+
+
+    // Ripple
+    .k-ripple-container {
+        .k-checkbox::after {
+            background: $kendo-checkbox-checked-bg;
+            opacity: $kendo-checkbox-ripple-opacity;
+        }
+    }
+
+}
+
+// #endregion
+
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/list/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/list/_layout.scss
 @include exports( "list/layout" ) {
 
@@ -6220,6 +6795,9 @@ $kendo-list-no-data-text: $subtle-text !default;
         line-height: $kendo-list-header-line-height;
         font-weight: $kendo-list-header-font-weight;
         white-space: nowrap;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
         flex: none;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -6255,7 +6833,7 @@ $kendo-list-no-data-text: $subtle-text !default;
         font-size: $kendo-list-item-font-size;
         line-height: $kendo-list-item-line-height;
         outline: none;
-        cursor: default;
+        cursor: pointer;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -6266,6 +6844,10 @@ $kendo-list-no-data-text: $subtle-text !default;
         transition-duration: 200ms;
         transition-timing-function: ease;
 
+        .k-checkbox-wrap {
+            align-self: flex-start;
+        }
+
         &.k-first::before {
             content: "";
             border-width: 1px 0 0;
@@ -6331,7 +6913,8 @@ $kendo-list-no-data-text: $subtle-text !default;
         position: absolute;
         width: 100%;
     }
-    .k-virtual-list .k-list-item-text {
+    .k-virtual-list .k-list-item-text,
+    .k-virtual-list .k-list-header-text {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -7859,7 +8442,7 @@ $kendo-button-group-focus-shadow: inset 0 0 0 2px rgba( $kendo-button-border, op
     .k-button {
 
         &::after {
-            @include border-radius( $kendo-button-border-radius );
+            @include border-radius( inherit );
             content: "";
             opacity: 0;
             display: none;
@@ -7875,43 +8458,6 @@ $kendo-button-group-focus-shadow: inset 0 0 0 2px rgba( $kendo-button-border, op
     }
 }
 
-
-
-
-@include exports( "button/ie-compat" ) {
-
-    .k-ie {
-
-        .k-button,
-        .k-button-group {
-            display: inline-block;
-            overflow: visible; // IE9
-        }
-
-        .k-button-icontext {
-
-            .k-icon,
-            .k-image,
-            .k-sprite {
-                margin: 0 $icon-spacing 0 0;
-            }
-
-            &.k-rtl,
-            .k-rtl &,
-            &[dir="rtl"],
-            [dir="rtl"] & {
-                .k-icon,
-                .k-image,
-                .k-sprite {
-                    margin: 0 0 0 $icon-spacing;
-                }
-            }
-        }
-
-    }
-
-}
-
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/button/_theme.scss
 @include exports( "button/theme" ) {
@@ -8231,17 +8777,17 @@ $kendo-input-line-height: $line-height !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-font-size-sm: $font-size !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-font-size-md: $font-size !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-font-size-lg: $font-size !default;
+$kendo-input-font-size-lg: $font-size-md !default;
 $kendo-input-line-height-lg: $line-height-md !default;
 
 $kendo-input-sizes: (
@@ -8413,6 +8959,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         overflow: hidden;
         text-overflow: ellipsis;
     }
+    .k-input-value-text::before {
+        content: "\200b";
+        width: 0px;
+        overflow: hidden;
+        flex: none;
+        display: inline-block;
+        vertical-align: top;
+    }
 
 
     // Input multiple values
@@ -8421,6 +8975,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         padding: $kendo-input-values-margin-y $kendo-input-values-margin-x;
         cursor: text;
     }
+    .k-input-values > .k-searchbar,
     .k-input-values > .k-input-inner {
         margin: (-$kendo-input-values-margin-y) (-$kendo-input-values-margin-x);
     }
@@ -8495,6 +9050,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         color: $kendo-input-clear-value-hover-text;
         opacity: $kendo-input-clear-value-hover-opacity;
     }
+    .k-clear-value:focus-visible {
+        outline: 1px dotted;
+        outline-offset: -1px;
+    }
 
 
     // Input button
@@ -8510,6 +9069,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             min-width: auto !important; // sass-lint:disable-line no-important
             min-height: auto !important; // sass-lint:disable-line no-important
         }
+
+        &:focus {
+            box-shadow: none;
+        }
     }
     .k-picker .k-input-button {
         color: inherit;
@@ -8950,41 +9513,11 @@ $floating-label-focus-text: null !default;
 
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/combobox/_variables.scss
-// Comboboxes
-$combobox-select-padding-x: 0px !default;
-$combobox-select-padding-y: 0px !default;
-
-$combobox-bg: $kendo-input-bg !default;
-$combobox-text: $kendo-input-text !default;
-$combobox-border: $kendo-input-border !default;
-
-$combobox-hovered-bg: $kendo-input-hover-bg !default;
-$combobox-hovered-text: $kendo-input-hover-text !default;
-$combobox-hovered-border: $kendo-input-hover-border !default;
-
-$combobox-focused-bg: $kendo-input-focus-bg !default;
-$combobox-focused-text: $kendo-input-focus-text !default;
-$combobox-focused-border: $kendo-input-focus-border !default;
-$combobox-focused-shadow: $kendo-input-focus-shadow !default;
-
-$combobox-select-bg: $kendo-button-bg !default;
-$combobox-select-text: $kendo-button-text !default;
-$combobox-select-border: $kendo-button-border !default;
-$combobox-select-gradient: $kendo-button-gradient !default;
-
-$combobox-select-hovered-bg: $kendo-button-hover-bg !default;
-$combobox-select-hovered-text: $kendo-button-hover-text !default;
-$combobox-select-hovered-border: $kendo-button-hover-border !default;
-$combobox-select-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$combobox-select-pressed-bg: $kendo-button-active-bg !default;
-$combobox-select-pressed-text: $kendo-button-active-text !default;
-$combobox-select-pressed-border: $kendo-button-active-border !default;
-$combobox-select-pressed-gradient: $kendo-button-active-gradient !default;
+// Combobox
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/combobox/_layout.scss
-@include exports("combobox/layout") {
+@include exports( "combobox/layout" ) {
 
     // Combobox
     .k-combobox {}
@@ -8993,7 +9526,7 @@ $combobox-select-pressed-gradient: $kendo-button-active-gradient !default;
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/combobox/_theme.scss
-@include exports("combobox/theme") {
+@include exports( "combobox/theme" ) {
 
     // Combobox
     .k-combobox {}
@@ -9033,6 +9566,8 @@ $toolbar-shadow: null !default;
 
 $toolbar-separator-border: inherit !default;
 
+$toolbar-input-width: 10em !default;
+
 // #endregion
 // #region @import "../menu/_variables.scss"; -> packages/default/scss/menu/_variables.scss
 // Menu
@@ -9070,7 +9605,7 @@ $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$menu-separator-spacing: 0px !default;
+$menu-separator-spacing: map-get( $spacing, 1 ) !default;
 
 $menu-scroll-button-bg: $component-bg !default;
 $menu-scroll-button-text: $link-text !default;
@@ -9150,6 +9685,18 @@ $kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-
 $kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$icon-size} ) !default;
 $kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$icon-size} ) !default;
 
+/// The start margin of the menu item expand icon.
+/// @group menu-popup-item
+$kendo-menu-popup-item-icon-margin-start-sm: $kendo-menu-popup-item-padding-x-sm !default;
+$kendo-menu-popup-item-icon-margin-start: $kendo-menu-popup-item-padding-x-md !default;
+$kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg !default;
+
+/// The end margin of the menu item expand icon.
+/// @group menu-popup-item
+$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) ) !default;
+$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{$kendo-menu-popup-item-padding-x-md / 2}) ) !default;
+$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{$kendo-menu-popup-item-padding-x-lg / 2}) ) !default;
+
 /// The spacing between the menu items in popup.
 /// @group menu-popup-item
 $kendo-menu-popup-item-spacing: 0px !default;
@@ -9336,21 +9883,21 @@ $grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
 $grid-sticky-hovered-bg: darken($grid-bg, 8%) !default;
 $grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;
 
-$grid-filter-menu-width: 230px !default;
+$grid-column-menu-width: 230px !default;
 
 $grid-filter-menu-check-all-border-bottom-width: 1px !default;
 
 $grid-filter-menu-item-spacing-x: map-get( $spacing, 2 ) !default;
 $grid-filter-menu-item-spacing-y: $grid-filter-menu-item-spacing-x !default;
 
-$grid-column-menu-popup-padding-x: 0 !default;
-$grid-column-menu-popup-padding-y: $padding-y-sm !default;
+$grid-column-menu-popup-padding-x: null !default;
+$grid-column-menu-popup-padding-y: null !default;
 
-$grid-column-menu-item-padding-x: $padding-x !default;
-$grid-column-menu-item-padding-y: $padding-y !default;
+$grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x-md !default;
+$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y-md !default;
 
-$grid-column-menu-list-item-padding-x: $padding-x !default;
-$grid-column-menu-list-item-padding-y: $padding-y-sm !default;
+$grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 $grid-column-menu-items-wrap-padding-x: 0 !default;
 $grid-column-menu-items-wrap-padding-y: $padding-y-lg !default;
@@ -9411,20 +9958,20 @@ $kendo-table-sizes: (
     sm: (
         font-size: $font-size,
         line-height: $line-height,
-        cell-padding-x: map-get( $spacing, 1),
-        cell-padding-y: map-get( $spacing, 1)
+        cell-padding-x: map-get( $spacing, 2 ),
+        cell-padding-y: map-get( $spacing, 1 )
     ),
     md: (
         font-size: $font-size,
         line-height: $line-height,
-        cell-padding-x: map-get( $spacing, 2),
-        cell-padding-y: map-get( $spacing, 2)
+        cell-padding-x: map-get( $spacing, 2 ),
+        cell-padding-y: map-get( $spacing, 2 )
     ),
     lg: (
         font-size: $font-size,
         line-height: $line-height,
-        cell-padding-x: map-get( $spacing, 3),
-        cell-padding-y: map-get( $spacing, 3)
+        cell-padding-x: map-get( $spacing, 2 ),
+        cell-padding-y: map-get( $spacing, 3 )
     )
 ) !default;
 
@@ -9464,13 +10011,13 @@ $kendo-table-footer-border: $grid-footer-border !default;
 
 /// Background color of group rows in table.
 /// @group table
-$kendo-table-group-row-bg: $grid-grouping-row-bg !default;
+$kendo-table-group-row-bg: $kendo-table-header-bg !default;
 /// Text color of group rows in table.
 /// @group table
-$kendo-table-group-row-text: $grid-grouping-row-text !default;
+$kendo-table-group-row-text: $kendo-table-header-text !default;
 /// Border color of group rows in table.
 /// @group table
-$kendo-table-group-row-border: null !default;
+$kendo-table-group-row-border: $kendo-table-header-border !default;
 
 
 /// Background color of alternating rows in table.
@@ -9521,7 +10068,7 @@ $kendo-table-selected-border: $grid-selected-border !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/table/_layout.scss
-@include exports("table/layout") {
+@include exports( "table/layout" ) {
 
     // Table
     .k-table {
@@ -9553,12 +10100,11 @@ $kendo-table-selected-border: $grid-selected-border !default;
     // Table native parts
     .k-table-thead,
     .k-table-tbody,
-    .k-table-tfoot {
-        text-align: inherit;
-    }
+    .k-table-tfoot,
     .k-table-row,
     .k-table-alt-row {
         border-color: inherit;
+        text-align: inherit;
     }
     .k-table-th,
     .k-table-td {
@@ -9579,6 +10125,9 @@ $kendo-table-selected-border: $grid-selected-border !default;
             border-left-width: 0;
         }
     }
+    .k-table-th {
+        border-bottom-width: 1px;
+    }
 
 
     // Table header
@@ -9597,8 +10146,25 @@ $kendo-table-selected-border: $grid-selected-border !default;
         width: 100%;
         border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
         border-style: solid;
+        border-color: inherit;
         overflow: hidden;
     }
+    .k-table-header,
+    .k-table-header-wrap {
+        > .k-table {
+            margin-bottom: -1px;
+        }
+    }
+    .k-table-group-sticky-header {
+        flex: none;
+
+        .k-table-th {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            align-content: center;
+        }
+    }
 
 
     // Table list
@@ -9676,7 +10242,8 @@ $kendo-table-selected-border: $grid-selected-border !default;
 
 
     // Virtualization
-    .k-virtual-table .k-table-row {
+    .k-virtual-table .k-table-row,
+    .k-virtual-table .k-table-group-row {
         position: absolute;
         width: 100%;
     }
@@ -9709,6 +10276,7 @@ $kendo-table-selected-border: $grid-selected-border !default;
         width: 100%;
         border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
         border-style: solid;
+        border-color: inherit;
         overflow: hidden;
     }
 
@@ -9778,7 +10346,7 @@ $kendo-table-selected-border: $grid-selected-border !default;
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/table/_theme.scss
-@include exports("table/theme") {
+@include exports( "table/theme" ) {
 
     // Table
     .k-table,
@@ -9791,7 +10359,8 @@ $kendo-table-selected-border: $grid-selected-border !default;
 
     // Table header
     .k-table-thead,
-    .k-table-header {
+    .k-table-header,
+    .k-table-group-sticky-header {
         border-color: $kendo-table-header-border;
         color: $kendo-table-header-text;
         background-color: $kendo-table-header-bg;
@@ -9863,6 +10432,66 @@ $kendo-table-selected-border: $grid-selected-border !default;
 // #endregion
 
 
+// #endregion
+// #region @import "virtual-scroller/_index.scss"; -> packages/default/scss/virtual-scroller/_index.scss
+// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/virtual-scroller/_variables.scss
+// Virtual-scroller
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/virtual-scroller/_layout.scss
+@include exports( "virtual-scroller/layout" ) {
+
+    // Virtual scroller
+    .k-virtual-scroller {
+        width: 100%;
+        height: 100%;
+        flex: 1 1 auto;
+        overflow: auto;
+        position: relative;
+    }
+
+
+    // Virtual scroller wrap
+    .k-virtual-scroller-wrap {
+        position: relative;
+        z-index: 1;
+    }
+
+
+    // Virtual scroller content
+    .k-virtual-scroller-content {
+        position: absolute;
+        width: 100%;
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+
+    // Virtual scroller size
+    .k-virtual-scroller-size {
+        position: relative;
+        z-index: 0;
+    }
+
+}
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/default/scss/virtual-scroller/_theme.scss
+@include exports( "virtual-scroller/theme" ) {
+
+}
+
+// #endregion
+
 // #endregion
 
 
@@ -10491,31 +11120,16 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
         height: 100%;
         border-width: $color-preview-border-width;
         border-radius: $color-preview-border-radius;
+        box-sizing: border-box;
         border-style: solid;
         display: inline-flex;
         flex-direction: row;
         flex-wrap: nowrap;
         position: relative;
         overflow: hidden;
-
-        > .k-color-preview-mask {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-
-        &::before {
-            content: "";
-            width: 100%;
-            height: 100%;
-            display: block;
-            position: relative;
-            z-index: -1;
-        }
     }
 
+
     // Current Color
     .k-coloreditor-current-color {
         cursor: pointer;
@@ -10535,23 +11149,37 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
         .k-color-preview-mask {
             width: calc( #{$icon-size} - 2px );
             height: 2px;
-            position: static;
-        }
-
-        &::before {
-            display: none;
         }
     }
 
 
-    // No Color
-    .k-no-color::before {
+    // Color Preview Mask
+    .k-color-preview-mask {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+    .k-color-preview-mask::before {
         content: "";
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
+        z-index: -1;
+        background: $color-preview-transparent-color-image;
+        background-size: contain;
+        background-position: 0 0;
+    }
+
+
+    // No Color
+    .k-no-color .k-color-preview-mask::before {
+        content: "";
+        background-color: $color-preview-no-color-bg;
+        background-image: $color-preview-no-color-image;
+        background-size: 100% 100%;
+        background-position: 0 0;
     }
 
 }
@@ -10568,26 +11196,12 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
             $color-preview-border
         );
 
-        &::before {
-            background: $color-preview-transparent-color-image;
-            background-size: contain;
-            background-position: 0;
-        }
-
         &:hover,
         &.k-hover {
             @include fill( $border: $color-preview-hover-border );
         }
     }
 
-    // No Color
-    .k-no-color::before {
-        background-color: $color-preview-no-color-bg;
-        background-image: $color-preview-no-color-image;
-        background-size: 100% 100%;
-        background-position: 0 0;
-    }
-
 }
 
 // #endregion
@@ -11437,13 +12051,20 @@ $tooltip-error-border: $tooltip-error-bg !default;
         .k-split-button {}
 
 
+        // Input
+        .k-input,
+        .k-picker:not(.k-colorpicker) {
+            width: $toolbar-input-width;
+        }
+
         // Overflow anchor
         .k-overflow-anchor {
             @include border-radius( 0 );
             margin: 0;
             padding: $toolbar-padding-y;
-            width: $toolbar-inner-calc-size;
+            width: auto;
             height: 100%;
+            aspect-ratio: 1;
             border-width: 0;
             border-color: inherit;
             box-sizing: border-box;
@@ -11475,6 +12096,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
             flex: 1 0 0%;
         }
 
+
         // Template
         .k-toolbar-template {
             align-self: center;
@@ -11495,6 +12117,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
     // Angular specific
     kendo-toolbar-renderer {
+        display: inline-block;
         border-color: inherit;
     }
 
@@ -11502,6 +12125,14 @@ $tooltip-error-border: $tooltip-error-bg !default;
     // Overflow container
     .k-overflow-container {
 
+        > .k-item {
+            border-color: inherit;
+        }
+
+        .k-separator {
+            margin: map-get( $spacing, 1 ) 0;
+        }
+
         // Group
         .k-overflow-tool-group {
             display: block;
@@ -11509,13 +12140,23 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
         // 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-direction: column;
+            flex-flow: column nowrap;
 
             .k-button {
                 margin: if( $kendo-button-border-width == 0, null, 0);
@@ -11606,13 +12247,6 @@ $tooltip-error-border: $tooltip-error-bg !default;
         @include box-shadow( $toolbar-shadow );
 
 
-        // Overflow anchor
-        .k-overflow-anchor {
-            color: inherit;
-            background: transparent;
-        }
-
-
         // Separator
         .k-separator {
             border-color: $toolbar-separator-border;
@@ -11624,6 +12258,41 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
     }
 
+
+    // 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;
+            }
+
+            // Disabled state
+            &:disabled,
+            &.k-state-disabled {
+                color: inherit;
+            }
+        }
+
+    }
+
 }
 
 
@@ -11781,7 +12450,7 @@ $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: ( 20 / 18 ) !default;
+$window-title-line-height: 1.25 !default;
 
 $window-actions-gap: null !default;
 
@@ -11969,7 +12638,8 @@ $fieldset-legend-border: null !default;
             border: 0;
 
             > * {
-                &:first-child {
+                &:not(.k-hidden):first-child,
+                &.k-hidden + :not(.k-hidden) {
                     margin-top: 0;
                 }
             }
@@ -11998,7 +12668,8 @@ $fieldset-legend-border: null !default;
 
         > *,
         .k-daterangepicker .k-textbox-container {
-            &:first-child {
+            &:not(.k-hidden):first-child,
+            &.k-hidden + :not(.k-hidden) {
                 margin-top: 0;
             }
         }
@@ -12468,769 +13139,208 @@ $fieldset-legend-border: null !default;
             $tooltip-border
         );
 
-        .k-callout {
-            color: $tooltip-bg;
-        }
-    }
-
-
-    // Tooltip variants
-    .k-tooltip-primary {
-        @include fill(
-            $tooltip-primary-text,
-            $tooltip-primary-bg,
-            $tooltip-primary-border
-        );
-
-        .k-callout {
-            color: $tooltip-primary-bg;
-        }
-    }
-    .k-tooltip-info {
-        @include fill(
-            $tooltip-info-text,
-            $tooltip-info-bg,
-            $tooltip-info-border
-        );
-
-        .k-callout {
-            color: $tooltip-info-bg;
-        }
-    }
-    .k-tooltip-success {
-        @include fill(
-            $tooltip-success-text,
-            $tooltip-success-bg,
-            $tooltip-success-border
-        );
-
-        .k-callout {
-            color: $tooltip-success-bg;
-        }
-    }
-    .k-tooltip-warning {
-        @include fill(
-            $tooltip-warning-text,
-            $tooltip-warning-bg,
-            $tooltip-warning-border
-        );
-
-        .k-callout {
-            color: $tooltip-warning-bg;
-        }
-    }
-    .k-tooltip-error {
-        @include fill(
-            $tooltip-error-text,
-            $tooltip-error-bg,
-            $tooltip-error-border
-        );
-
-        .k-callout {
-            color: $tooltip-error-bg;
-        }
-    }
-}
-
-// #endregion
-
-// #endregion
-// #region @import "../icons/_index.scss"; -> packages/default/scss/icons/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/default/scss/validator/_variables.scss
-
-// #endregion
-// #region @import "_layout.scss"; -> packages/default/scss/validator/_layout.scss
-@include exports("validator/layout") {
-
-    .k-validator-tooltip {
-        margin-top: calc( #{$tooltip-callout-size} + #{$tooltip-border-width} );
-        width: auto;
-        white-space: normal;
-        display: flex;
-        align-items: center;
-        // NOTE: This works around popup / tooltip stackin issue
-        z-index: 9999;
-
-        // .k-callout-n { inset-inline-start: 16px; }
-    }
-    .k-grid .k-validator-tooltip {
-        max-width: 300px;
-    }
-
-}
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/default/scss/validator/_theme.scss
-@include exports( "validator/theme" ) {}
-
-// #endregion
-
-// #endregion
-// #region @import "floating-label/_index.scss"; -> packages/default/scss/floating-label/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Native forms
-// #region @import "button/_index.scss"; -> packages/default/scss/button/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "input/_index.scss"; -> packages/default/scss/input/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "textbox/_index.scss"; -> packages/default/scss/textbox/_index.scss
-// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Dependencies
-// #region @import "../common/_index.scss"; -> packages/default/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../input/_index.scss"; -> packages/default/scss/input/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../floating-label/_index.scss"; -> packages/default/scss/floating-label/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/default/scss/textbox/_variables.scss
-// Textbox
-
-// #endregion
-// #region @import "_layout.scss"; -> packages/default/scss/textbox/_layout.scss
-@include exports( "textbox/layout" ) {
-
-    // Textbox
-    .k-textbox {}
-
-}
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/default/scss/textbox/_theme.scss
-@include exports("textbox/theme") {
-
-    // Textbox
-    .k-textbox {}
-}
-
-// #endregion
-
-// #endregion
-// #region @import "textarea/_index.scss"; -> packages/default/scss/textarea/_index.scss
-// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Dependencies
-// #region @import "../common/_index.scss"; -> packages/default/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../input/_index.scss"; -> packages/default/scss/input/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../floating-label/_index.scss"; -> packages/default/scss/floating-label/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/default/scss/textarea/_variables.scss
-// Textarea
-
-// #endregion
-// #region @import "_layout.scss"; -> packages/default/scss/textarea/_layout.scss
-@include exports( "textarea/layout" ) {
-
-    // Textarea
-    .k-textarea {}
-
-}
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/default/scss/textarea/_theme.scss
-@include exports("textarea/theme") {
-
-    // Textarea
-    .k-textarea {}
-
-}
-
-// #endregion
-
-// #endregion
-// #region @import "checkbox/_index.scss"; -> packages/default/scss/checkbox/_index.scss
-// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Dependencies
-// #region @import "../common/_index.scss"; -> packages/default/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../list/_variables.scss"; -> packages/default/scss/list/_variables.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/default/scss/checkbox/_variables.scss
-// Checkbox
-
-/// The sizes of checkbox.
-/// @group checkbox
-$kendo-checkbox-sizes: (
-    sm: map-get( $spacing, 3 ),
-    md: map-get( $spacing, 4 ),
-    lg: map-get( $spacing, 6 )
-) !default;
-
-/// The  border width of checkbox.
-/// @group checkbox
-$kendo-checkbox-border-width: 1px !default;
-/// The line height of checkbox.
-/// @group checkbox
-$kendo-checkbox-line-height: calc( #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width} ) !default;
-
-/// The background of checkbox.
-/// @group checkbox
-$kendo-checkbox-bg: $white !default;
-/// The text of checkbox.
-/// @group checkbox
-$kendo-checkbox-text: transparent !default;
-/// The border of checkbox.
-/// @group checkbox
-$kendo-checkbox-border: $base-border !default;
-
-/// The background of hovered checkbox.
-/// @group checkbox
-$kendo-checkbox-hover-bg: null !default;
-/// The text of hovered checkbox.
-/// @group checkbox
-$kendo-checkbox-hover-text: null !default;
-/// The border of hovered checkbox.
-/// @group checkbox
-$kendo-checkbox-hover-border: null !default;
-
-/// The background of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-bg: $primary !default;
-/// The text of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
-/// The border of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
-
-/// The background of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
-/// The text of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-bg !default;
-/// The border of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-border: $kendo-checkbox-border !default;
-
-/// The border of focused checkbox.
-/// @group checkbox
-$kendo-checkbox-focus-border: null !default;
-/// The shadow of focused checkbox.
-/// @group checkbox
-$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
-/// The border of focused and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-focus-checked-border: null !default;
-/// The shadow of focused and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
-
-/// The background of disabled checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-bg: null !default;
-/// The text of disabled checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-text: null !default;
-/// The border of disabled checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-border: null !default;
-
-/// The background of disabled and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-checked-bg: null !default;
-/// The text of disabled and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-checked-text: null !default;
-/// The border of disabled and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-checked-border: null !default;
-
-/// The background of invalid checkbox.
-/// @group checkbox
-$kendo-checkbox-invalid-bg: null !default;
-/// The text of invalid checkbox.
-/// @group checkbox
-$kendo-checkbox-invalid-text: $invalid-text !default;
-/// The border of invalid checkbox.
-/// @group checkbox
-$kendo-checkbox-invalid-border: $invalid-border !default;
-
-
-// Checkbox indicator
-
-/// The icon type of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-icon-type: glyph !default;
-
-/// The glyph font family of checkbox.
-/// @group checkbox
-$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-/// The glyph of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-glyph: "\e118" !default;
-/// The glyph of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-glyph: "\e121" !default;
-
-/// The image of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-image: null !default;
-/// The image of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-image: null !default;
-
-
-// Checkbox label
-
-/// The horizontal margin of the checkbox inside a label.
-/// @group checkbox
-$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
-
-
-// Checkbox list
-
-/// The list margin checkbox.
-/// @group checkbox
-$kendo-checkbox-list-margin: 0px !default;
-/// The list padding checkbox.
-/// @group checkbox
-$kendo-checkbox-list-padding: 0px !default;
-/// The horizontal list item padding of checkbox.
-/// @group checkbox
-$kendo-checkbox-list-item-padding-x: 0px !default;
-/// The vertical list item padding of checkbox.
-/// @group checkbox
-$kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
-/// The horizontal margin of list item of checkbox.
-/// @group checkbox
-$kendo-checkbox-list-horizontal-item-margin-x: 32px !default;
-
-
-// Checkbox ripple
-
-/// The ripple size of checkbox.
-/// @group checkbox
-$kendo-checkbox-ripple-size: (
-    sm: (map-get( $kendo-checkbox-sizes, "sm" ) * 3),
-    md: (map-get( $kendo-checkbox-sizes, "md" ) * 3),
-    lg: (map-get( $kendo-checkbox-sizes, "lg" ) * 3)
-) !default;
-/// The ripple margin of checkbox.
-/// @group checkbox
-$kendo-checkbox-ripple-margin: (
-    sm: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "sm" )} + 2 * #{$kendo-checkbox-border-width})),
-    md: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "md" )} + 2 * #{$kendo-checkbox-border-width})),
-    lg: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "lg" )} + 2 * #{$kendo-checkbox-border-width}))
-) !default;
-/// The ripple opacity of checkbox.
-/// @group checkbox
-$kendo-checkbox-ripple-opacity: .3 !default;
-
-// #endregion
-// #region @import "_layout.scss"; -> packages/default/scss/checkbox/_layout.scss
-@include exports( "checkbox/layout" ) {
-
-    // Checkbox
-    .k-checkbox {
-        margin: 0;
-        padding: 0;
-        line-height: initial;
-        border-width: $kendo-checkbox-border-width;
-        border-style: solid;
-        outline: 0;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        display: inline-block;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-        -webkit-appearance: none;
-    }
-
-    @each $name, $size in $kendo-checkbox-sizes {
-        // Checkbox sizes
-        .k-checkbox-#{$name} {
-            width: $size;
-            height: $size;
-
-            + .k-checkbox-label {
-
-                .k-ripple {
-                    top: ($size / 2);
-                    left: ($size / 2);
-                    width: ($size * 5 / 2);
-                    height: ($size * 5 / 2);
-                }
-            }
-        }
-
-
-        // Checkbox indicator
-        .k-checkbox-#{$name}::before {
-            @if $kendo-checkbox-icon-type == "glyph" {
-                content: $kendo-checkbox-checked-glyph;
-                width: ($size - map-get( $spacing, thin ));
-                height: ($size - map-get( $spacing, thin ));
-                font-size: ($size - map-get( $spacing, thin ));
-                font-family: $kendo-checkbox-glyph-font-family;
-                line-height: 1;
-                transform: scale(0) translate(-50%, -50%);
-                overflow: hidden;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-            }
-
-            @if $kendo-checkbox-icon-type == "marker" {
-                content: "";
-                width: ($size - map-get( $spacing, 1 ));
-                height: ($size - map-get( $spacing, 1 ));
-                background-color: currentColor;
-                transform: scale(0) translate(-50%, -50%);
-                overflow: hidden;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-            }
+        .k-callout {
+            color: $tooltip-bg;
         }
     }
 
 
-    // Checked state
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
-        @if $kendo-checkbox-icon-type == "image" {
-            background-image: $kendo-checkbox-checked-image;
-        }
+    // Tooltip variants
+    .k-tooltip-primary {
+        @include fill(
+            $tooltip-primary-text,
+            $tooltip-primary-bg,
+            $tooltip-primary-border
+        );
 
-        @if $kendo-checkbox-icon-type == "glyph" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
+        .k-callout {
+            color: $tooltip-primary-bg;
         }
+    }
+    .k-tooltip-info {
+        @include fill(
+            $tooltip-info-text,
+            $tooltip-info-bg,
+            $tooltip-info-border
+        );
 
-        @if $kendo-checkbox-icon-type == "marker" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
+        .k-callout {
+            color: $tooltip-info-bg;
         }
     }
+    .k-tooltip-success {
+        @include fill(
+            $tooltip-success-text,
+            $tooltip-success-bg,
+            $tooltip-success-border
+        );
 
-    // Indeterminate state
-    .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate {
-        @if $kendo-checkbox-icon-type == "image" {
-            background-image: $kendo-checkbox-indeterminate-image;
+        .k-callout {
+            color: $tooltip-success-bg;
         }
+    }
+    .k-tooltip-warning {
+        @include fill(
+            $tooltip-warning-text,
+            $tooltip-warning-bg,
+            $tooltip-warning-border
+        );
 
-        @if $kendo-checkbox-icon-type == "glyph" {
-            &::before {
-                content: $kendo-checkbox-indeterminate-glyph;
-                transform: scale(1) translate(-50%, -50%);
-            }
+        .k-callout {
+            color: $tooltip-warning-bg;
         }
+    }
+    .k-tooltip-error {
+        @include fill(
+            $tooltip-error-text,
+            $tooltip-error-bg,
+            $tooltip-error-border
+        );
 
-        @if $kendo-checkbox-icon-type == "marker" {
-            &::before {
-                width: $kendo-checkbox-maker-indeterminate-width;
-                height: $kendo-checkbox-marker-indeterminate-height;
-                transform: scale(1) translate(-50%, -50%);
-            }
+        .k-callout {
+            color: $tooltip-error-bg;
         }
     }
+}
 
+// #endregion
 
-    // Disabled state
-    .k-checkbox:disabled,
-    .k-checkbox.k-disabled,
-    .k-checkbox:disabled + .k-checkbox-label,
-    .k-checkbox.k-disabled + .k-checkbox-label {
-        @include disabled( $disabled-styling );
-    }
+// #endregion
+// #region @import "../icons/_index.scss"; -> packages/default/scss/icons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-    // Checkbox label
-    .k-checkbox-label {
-        margin: 0;
-        padding: 0;
-        line-height: $kendo-checkbox-line-height;
-        display: inline-flex;
-        align-items: flex-start;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
 
-        .k-label {
-            cursor: pointer;
-        }
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/validator/_variables.scss
 
-        .k-ripple {
-            right: auto;
-            bottom: auto;
-            transform: translate(-50%, -50%);
-            border-radius: 50%;
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/validator/_layout.scss
+@include exports("validator/layout") {
 
-            // Hide ripple temporarily
-            visibility: hidden !important; // sass-lint:disable-line no-important
-        }
+    .k-validator-tooltip {
+        margin-top: calc( #{$tooltip-callout-size} + #{$tooltip-border-width} );
+        width: auto;
+        white-space: normal;
+        display: flex;
+        align-items: center;
+        // NOTE: This works around popup / tooltip stackin issue
+        z-index: 9999;
 
-        .k-ripple-blob {
-            // sass-lint:disable-block no-important
-            // use !important until ripple can apply these styles from the script
-            top: 50% !important;
-            left: 50% !important;
-            width: 200% !important;
-            height: 200% !important;
-        }
-    }
-    .k-checkbox + .k-checkbox-label {
-        display: inline;
-    }
-    .k-checkbox + .k-checkbox-label,
-    .k-checkbox-label + .k-checkbox {
-        margin-left: $kendo-checkbox-label-margin-x;
-    }
-    .k-checkbox-label > .k-checkbox {
-        margin-right: $kendo-checkbox-label-margin-x;
-        flex-shrink: 0;
-    }
-    kendo-label.k-checkbox-label > .k-checkbox:last-child {
-        margin-right: 0;
-    }
-    kendo-label.k-checkbox-label > .k-label:first-child {
-        margin-right: $kendo-checkbox-label-margin-x;
-    }
-    kendo-label.k-checkbox-label > .k-label {
-        display: inline;
+        // .k-callout-n { inset-inline-start: 16px; }
     }
-
-
-    // Empty label
-    .k-checkbox-label:empty {
-        display: none;
+    .k-grid .k-validator-tooltip {
+        max-width: 300px;
     }
 
+}
 
-    // Label with no text
-    .k-checkbox-label.k-no-text {
-        min-width: 1px;
-    }
-
+// #endregion
+// #region @import "_theme.scss"; -> packages/default/scss/validator/_theme.scss
+@include exports( "validator/theme" ) {}
 
-    // Checkbox list
-    .k-checkbox-list {
-        margin: $kendo-checkbox-list-margin;
-        padding: $kendo-checkbox-list-padding;
-        list-style: none;
+// #endregion
 
-        .k-checkbox-item {
-            padding: $kendo-checkbox-list-item-padding-y $kendo-checkbox-list-item-padding-x;
-        }
-    }
+// #endregion
+// #region @import "floating-label/_index.scss"; -> packages/default/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-    .k-list-horizontal {
-        .k-checkbox-item {
-            display: inline-block;
-            margin: 0 $kendo-checkbox-list-horizontal-item-margin-x 0 0;
 
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-    }
+// Native forms
+// #region @import "button/_index.scss"; -> packages/default/scss/button/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "input/_index.scss"; -> packages/default/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "textbox/_index.scss"; -> packages/default/scss/textbox/_index.scss
+// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
-    // RTL
-    [dir="rtl"] {
-        .k-checkbox + .k-checkbox-label,
-        .k-checkbox-label + .k-checkbox {
-            margin-left: 0;
-            margin-right: $kendo-checkbox-label-margin-x;
-        }
-        .k-checkbox-label > .k-checkbox {
-            margin-right: 0;
-            margin-left: $kendo-checkbox-label-margin-x;
-        }
-        kendo-label.k-checkbox-label > .k-checkbox:last-child {
-            margin-left: 0;
-        }
-        kendo-label.k-checkbox-label > .k-label:first-child {
-            margin-right: 0;
-            margin-left: $kendo-checkbox-label-margin-x;
-        }
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/default/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../input/_index.scss"; -> packages/default/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../floating-label/_index.scss"; -> packages/default/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-        .k-list-horizontal {
-            .k-checkbox-item {
-                margin-right: 0;
-                margin-left: $kendo-checkbox-list-horizontal-item-margin-x;
 
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
-    }
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/textbox/_variables.scss
+// Textbox
 
-    .k-ripple-container {
-        @each $name, $size in $kendo-checkbox-sizes {
-            .k-checkbox-#{$name}::after {
-                content: "";
-                display: block;
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: map-get( $kendo-checkbox-ripple-size, $name );
-                height: map-get( $kendo-checkbox-ripple-size, $name );
-                margin-left: map-get( $kendo-checkbox-ripple-margin, $name );
-                margin-top: map-get( $kendo-checkbox-ripple-margin, $name );
-                border-radius: 100%;
-                z-index: 1;
-                transform: scale(0);
-            }
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/textbox/_layout.scss
+@include exports( "textbox/layout" ) {
 
-            .k-checkbox:disabled::after,
-            .k-checkbox.k-disabled::after {
-                display: none;
-            }
-        }
-    }
+    // Textbox
+    .k-textbox {}
 
 }
 
 // #endregion
-// #region @import "_theme.scss"; -> packages/default/scss/checkbox/_theme.scss
-@include exports("checkbox/theme") {
-
-    // Checkbox
-    .k-checkbox {
-        @include fill(
-            $kendo-checkbox-text,
-            $kendo-checkbox-bg,
-            $kendo-checkbox-border
-        );
-    }
-
-
-    // Hover state
-    .k-checkbox:hover,
-    .k-checkbox.k-hover {
-        @include fill(
-            $kendo-checkbox-hover-text,
-            $kendo-checkbox-hover-bg,
-            $kendo-checkbox-hover-border
-        );
-    }
+// #region @import "_theme.scss"; -> packages/default/scss/textbox/_theme.scss
+@include exports("textbox/theme") {
 
+    // Textbox
+    .k-textbox {}
+}
 
-    // Focus state
-    .k-checkbox:focus,
-    .k-checkbox.k-focus {
-        @include fill( $border: $kendo-checkbox-focus-border );
-        @include box-shadow( $kendo-checkbox-focus-shadow );
-    }
+// #endregion
 
+// #endregion
+// #region @import "textarea/_index.scss"; -> packages/default/scss/textarea/_index.scss
+// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-    // Indeterminate
-    .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate {
-        @include fill(
-            $kendo-checkbox-indeterminate-text,
-            $kendo-checkbox-indeterminate-bg,
-            $kendo-checkbox-indeterminate-border
-        );
-    }
 
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/default/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../input/_index.scss"; -> packages/default/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../floating-label/_index.scss"; -> packages/default/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-    // Checked
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
-        @include fill(
-            $kendo-checkbox-checked-text,
-            $kendo-checkbox-checked-bg,
-            $kendo-checkbox-checked-border
-        );
-    }
-    .k-checkbox:checked:focus,
-    .k-checkbox.k-checked.k-focus {
-        @include fill( $border: $kendo-checkbox-focus-checked-border );
-        @include box-shadow( $kendo-checkbox-focus-checked-shadow );
-    }
 
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/textarea/_variables.scss
+// Textarea
 
-    // Disabled
-    .k-checkbox:disabled,
-    .k-checkbox.k-disabled {
-        @include fill(
-            $kendo-checkbox-disabled-text,
-            $kendo-checkbox-disabled-bg,
-            $kendo-checkbox-disabled-border
-        );
-    }
-    .k-checkbox:checked:disabled,
-    .k-checkbox:indeterminate:disabled,
-    .k-checkbox.k-checked.k-disabled,
-    .k-checkbox.k-indeterminate.k-disabled {
-        @include fill(
-            $kendo-checkbox-disabled-checked-text,
-            $kendo-checkbox-disabled-checked-bg,
-            $kendo-checkbox-disabled-checked-border
-        );
-    }
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/textarea/_layout.scss
+@include exports( "textarea/layout" ) {
 
+    // Textarea
+    .k-textarea {}
 
-    // Invalid
-    .k-checkbox:invalid,
-    .k-checkbox.k-invalid {
-        @include fill( $border: $kendo-checkbox-invalid-border );
-    }
-    .k-checkbox:invalid + .k-checkbox-label,
-    .k-checkbox.k-invalid + .k-checkbox-label {
-        @include fill( $color: $kendo-checkbox-invalid-text );
-    }
+}
 
+// #endregion
+// #region @import "_theme.scss"; -> packages/default/scss/textarea/_theme.scss
+@include exports("textarea/theme") {
 
-    // Ripple
-    .k-ripple-container {
-        .k-checkbox::after {
-            background: $kendo-checkbox-checked-bg;
-            opacity: $kendo-checkbox-ripple-opacity;
-        }
-    }
+    // Textarea
+    .k-textarea {}
 
 }
 
 // #endregion
 
+// #endregion
+// #region @import "checkbox/_index.scss"; -> packages/default/scss/checkbox/_index.scss
+// File already imported_once. Skipping output.
 // #endregion
 // #region @import "listbox/_index.scss"; -> packages/default/scss/listbox/_index.scss
 // #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
@@ -13264,7 +13374,7 @@ $kendo-checkbox-ripple-opacity: .3 !default;
 // Listbox
 $listbox-margin: $padding-x !default;
 $listbox-button-margin: $padding-x !default;
-$listbox-width: 12.4em !default;
+$listbox-width: 10em !default;
 $listbox-default-height: 200px !default;
 
 $listbox-border-width: 1px !default;
@@ -13757,7 +13867,7 @@ $progressbar-chunk-border: $body-bg !default;
 
 
 // Dependencies
-// #region @import "../common/_index.scss"; -> packages/default/scss/common/_index.scss
+// #region @import "../typography/_variables.scss"; -> packages/default/scss/typography/_variables.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../list/_variables.scss"; -> packages/default/scss/list/_variables.scss
@@ -13904,21 +14014,15 @@ $kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
 
 // Radio list
 
-/// The list margin of radio button.
-/// @group radio
-$kendo-radio-list-margin: 0px !default;
-/// The list padding of radio button.
+/// The horizontal list item margin of radio button.
 /// @group radio
-$kendo-radio-list-padding: 0px !default;
+$kendo-radio-list-spacing: map-get( $spacing, 4 ) !default;
 /// The horizontal list item padding of radio button.
 /// @group radio
 $kendo-radio-list-item-padding-x: 0px !default;
 /// The vertical list item padding of radio button.
 /// @group radio
 $kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
-/// The horizontal list item margin of radio button.
-/// @group radio
-$kendo-radio-list-horizontal-item-margin-x: 32px !default;
 
 
 // Radio ripple
@@ -13961,6 +14065,7 @@ $kendo-radio-ripple-opacity: .3 !default;
         background-repeat: no-repeat;
         background-size: contain;
         display: inline-block;
+        flex: none;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
@@ -14044,6 +14149,25 @@ $kendo-radio-ripple-opacity: .3 !default;
         @include disabled( $disabled-styling );
     }
 
+
+    // Radio wrap
+    .k-radio-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
     .k-radio + .k-radio-label {
         display: inline;
     }
@@ -14065,7 +14189,7 @@ $kendo-radio-ripple-opacity: .3 !default;
 
         // Hide empty label
         &:empty {
-            display: none;
+            display: none !important; // sass-lint:disable-line no-important
         }
 
         .k-ripple {
@@ -14103,25 +14227,32 @@ $kendo-radio-ripple-opacity: .3 !default;
 
     // Radio list
     .k-radio-list {
-        margin: $kendo-radio-list-margin;
-        padding: $kendo-radio-list-padding;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
         list-style: none;
-
-        .k-radio-item {
-            padding: $kendo-radio-list-item-padding-y $kendo-radio-list-item-padding-x;
-        }
     }
+    .k-radio-item,
+    .k-radio-list-item {
+        padding: $kendo-radio-list-item-padding-y $kendo-radio-list-item-padding-x;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: map-get( $spacing, 1 );
 
-    .k-list-horizontal {
-        .k-radio-item {
-            display: inline-block;
-            margin: 0 $kendo-radio-list-horizontal-item-margin-x 0 0;
-
-            &:last-child {
-                margin-right: 0;
-            }
+        .k-radio-label {
+            line-height: inherit;
         }
     }
+    .k-radio-list-horizontal,
+    .k-radio-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $kendo-radio-list-spacing;
+    }
 
     // RTL
     .k-rtl,
@@ -14143,17 +14274,6 @@ $kendo-radio-ripple-opacity: .3 !default;
             margin-right: 0;
             margin-left: $kendo-radio-label-margin-x;
         }
-
-        .k-list-horizontal {
-            .k-radio-item {
-                margin-right: 0;
-                margin-left: $kendo-radio-list-horizontal-item-margin-x;
-
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 
     .k-ripple-container {
@@ -16532,10 +16652,20 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/numerictextbox/_layout.scss
-@include exports("numerictextbox/layout") {
+@include exports( "numerictextbox/layout" ) {
 
     // Numeric textbox
-    .k-numerictextbox {}
+    .k-numeric-textbox {
+
+        .k-input-inner {
+            text-overflow: clip;
+        }
+
+    }
+
+
+    // Alias
+    .k-numerictextbox { @extend .k-numeric-textbox; }
 
 }
 
@@ -16544,7 +16674,7 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
 @include exports( "numerictextbox/theme" ) {
 
     // Numeric textbox
-    .k-numerictextbox {}
+    .k-numeric-textbox {}
 
 }
 
@@ -16937,9 +17067,9 @@ $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
 $coloreditor-header-actions-gap: ( $coloreditor-spacer / 1.5 ) !default;
 
-$coloreditor-preview-gap: ( $coloreditor-spacer / 4 ) !default;
-$coloreditor-color-preview-width: 34px !default;
-$coloreditor-color-preview-height: 14px !default;
+$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-color-preview-width: 32px !default;
+$coloreditor-color-preview-height: 12px !default;
 
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
@@ -16975,8 +17105,12 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
     }
 
     .k-coloreditor-preview {
-        position: relative;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        justify-content: center;
         gap: $coloreditor-preview-gap;
+        position: relative;
         z-index: 1;
     }
     .k-coloreditor-preview .k-color-preview {
@@ -17263,8 +17397,45 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
 // #region @import "_layout.scss"; -> packages/default/scss/datetimepicker/_layout.scss
 @include exports( "datetimepicker/layout" ) {
 
-    // Datetime picker
-    .k-datetimepicker {}
+    // Datetime selector
+    .k-datetime-selector {
+        display: flex;
+        transition: transform .2s;
+    }
+
+    // Wrap
+    .k-datetime-wrap {
+        width: $datetime-width;
+        overflow: hidden;
+    }
+
+    // Inner wrap
+    .k-datetime-calendar-wrap,
+    .k-datetime-time-wrap {
+        text-align: center;
+        flex: 0 0 $datetime-width;
+    }
+
+    // Tabs
+    .k-date-tab .k-datetime-selector {
+        transform: translateX(0);
+    }
+    .k-time-tab .k-datetime-selector {
+        transform: translateX(-100%);
+    }
+
+}
+
+@include exports( "datetimepicker/layout/rtl" ) {
+
+    .k-datetimepicker {
+        &[dir="rtl"],
+        .k-rtl & {
+            .k-time-tab .k-datetime-selector {
+                transform: translateX(100%);
+            }
+        }
+    }
 
 }
 
@@ -17310,7 +17481,22 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/daterangepicker/_layout.scss
-@include exports("daterangepicker/layout") {
+@include exports( "daterangepicker/layout" ) {
+
+    // Daterange picker
+    .k-daterange-picker {
+        width: $kendo-input-default-width;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: map-get( $spacing, 2 );
+    }
+
+
+    // Alias
+    .k-daterangepicker {
+        @extend .k-daterange-picker;
+    }
 
 }
 
@@ -17806,13 +17992,19 @@ $dropdownlist-focused-shadow: $kendo-input-focus-shadow !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/multiselect/_layout.scss
-@include exports("multiselect/layout") {
+@include exports( "multiselect/layout" ) {
+
+    // Multiselect
+    .k-multiselect {}
 
 }
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/multiselect/_theme.scss
-@include exports("multiselect/theme") {
+@include exports( "multiselect/theme" ) {
+
+    // Multiselect
+    .k-multiselect {}
 
 }
 
@@ -17841,35 +18033,6 @@ $dropdownlist-focused-shadow: $kendo-input-focus-shadow !default;
 // #region @import "_variables.scss"; -> packages/default/scss/treeview/_variables.scss
 // Treeview
 
-/// The sizes of the treeview.
-/// @group treeview
-$kendo-treeview-sizes: (
-    sm: (
-        font-size: map-get( $spacing, 3),
-        line-height: $line-height,
-        item-padding-x: map-get( $spacing, thin ),
-        item-padding-y: map-get( $spacing, 1 )
-    ),
-    md: (
-        font-size: $font-size,
-        line-height: $line-height,
-        item-padding-x: map-get( $spacing, 1 ),
-        item-padding-y: map-get( $spacing, 2 )
-    ),
-    lg: (
-        font-size: map-get( $spacing, 4),
-        line-height: $line-height,
-        item-padding-x: map-get( $spacing, 2 ),
-        item-padding-y: map-get( $spacing, 3 )
-    )
-) !default;
-
-/// The horizontal padding of the treeview.
-/// @group treeview
-$kendo-treeview-padding-x: 0px !default;
-/// The vertical padding of the treeview.
-/// @group treeview
-$kendo-treeview-padding-y: 0px !default;
 /// The font family of the treeview.
 /// @group treeview
 $kendo-treeview-font-family: $font-family !default;
@@ -17897,6 +18060,31 @@ $kendo-treeview-item-border-width: 0px !default;
 /// @group treeview
 $kendo-treeview-item-border-radius: null !default;
 
+
+/// The sizes of the treeview.
+/// @group treeview
+$kendo-treeview-sizes: (
+    sm: (
+        font-size: map-get( $spacing, 3),
+        line-height: $line-height,
+        item-padding-x: map-get( $spacing, thin ),
+        item-padding-y: map-get( $spacing, 1 )
+    ),
+    md: (
+        font-size: $font-size,
+        line-height: $line-height,
+        item-padding-x: map-get( $spacing, 1 ),
+        item-padding-y: map-get( $spacing, 2 )
+    ),
+    lg: (
+        font-size: map-get( $spacing, 4),
+        line-height: $line-height,
+        item-padding-x: map-get( $spacing, 2 ),
+        item-padding-y: map-get( $spacing, 3 )
+    )
+) !default;
+
+
 /// The background of the treeview.
 /// @group treeview
 $kendo-treeview-bg: null !default;
@@ -17909,16 +18097,16 @@ $kendo-treeview-border: null !default;
 
 /// The background of a hovered treeview item.
 /// @group treeview
-$kendo-treeview-item-hovered-bg: $hovered-bg !default;
+$kendo-treeview-item-hover-bg: $hovered-bg !default;
 /// The text color of a hovered treeview item.
 /// @group treeview
-$kendo-treeview-item-hovered-text: $hovered-text !default;
+$kendo-treeview-item-hover-text: $hovered-text !default;
 /// The border of a hovered treeview item.
 /// @group treeview
-$kendo-treeview-item-hovered-border: null !default;
+$kendo-treeview-item-hover-border: null !default;
 /// The gradient of a hovered treeview item.
 /// @group treeview
-$kendo-treeview-item-hovered-gradient: null !default;
+$kendo-treeview-item-hover-gradient: null !default;
 
 /// The background of a selected treeview item.
 /// @group treeview
@@ -17935,27 +18123,15 @@ $kendo-treeview-item-selected-gradient: null !default;
 
 /// The shadow of a focused treeview item.
 /// @group treeview
-$kendo-treeview-item-focused-shadow: $focused-shadow !default;
+$kendo-treeview-item-focus-shadow: $focused-shadow !default;
 /// The shadow of a selected and focused treeview item.
-/// @group treeview
-$kendo-treeview-item-selected-focused-shadow: null !default;
-
-/// The horizontal padding of the load more checkboxes.
-/// @group treeview
-$kendo-treeview-loadmore-checkboxes-padding-x: calc( #{$icon-spacing} + #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-treeview-indent} ) !default;
-/// The icon indent of the load more checkboxes.
-/// @group treeview
-$kendo-treeview-loadmore-checkboxes-icon-indent: calc( -1 * (#{$icon-spacing} + #{$kendo-treeview-indent}) ) !default;
-/// The horizontal margin of the load more checkboxes.
-/// @group treeview
-$kendo-treeview-loadmore-checkboxes-icon-margin-x: $icon-spacing !default;
 
 /// The background of load more.
 /// @group treeview
 $kendo-treeview-loadmore-bg: transparent !default;
 /// The text color of load more.
 /// @group treeview
-$kendo-treeview-loadmore-text: $primary !default;
+$kendo-treeview-loadmore-text: $link-text !default;
 /// The border of load more.
 /// @group treeview
 $kendo-treeview-loadmore-border: null !default;
@@ -17965,7 +18141,7 @@ $kendo-treeview-loadmore-border: null !default;
 $kendo-treeview-loadmore-hover-bg: transparent !default;
 /// The text color of a hovered load more.
 /// @group treeview
-$kendo-treeview-loadmore-hover-text: $primary-darker !default;
+$kendo-treeview-loadmore-hover-text: $link-hover-text !default;
 /// The border of a hovered load more.
 /// @group treeview
 $kendo-treeview-loadmore-hover-border: null !default;
@@ -17975,21 +18151,21 @@ $kendo-treeview-loadmore-hover-border: null !default;
 $kendo-treeview-loadmore-focus-bg: transparent !default;
 /// The text color of a focused load more.
 /// @group treeview
-$kendo-treeview-loadmore-focus-text: $primary !default;
+$kendo-treeview-loadmore-focus-text: $link-hover-text !default;
 /// The border of a focused load more.
 /// @group treeview
 $kendo-treeview-loadmore-focus-border: null !default;
 /// The shadow of a focused load more.
 /// @group treeview
-$kendo-treeview-loadmore-focus-shadow: none !default;
+$kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/treeview/_layout.scss
 @include exports("treeview/layout") {
 
-    // Base
+    // Treeview
     .k-treeview {
-        padding: $kendo-treeview-padding-y $kendo-treeview-padding-x;
+        padding: 0;
         border-width: 0;
         background: none;
         box-sizing: border-box;
@@ -18001,161 +18177,156 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
         white-space: nowrap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+    }
 
-        > .k-treeview-group {
-            outline: 0;
-            -webkit-touch-callout: none;
-            -webkit-tap-highlight-color: $rgba-transparent;
-        }
 
-        .k-content,
-        > .k-treeview-group,
-        .k-treeview-item > .k-treeview-group {
-            margin: 0;
-            padding: 0;
-            background: none;
-            list-style: none;
-            position: relative;
+    // Treeview group
+    .k-treeview-group,
+    .k-treeview .k-group {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        position: relative;
+        outline: 0;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
 
-            &.ng-animating {
-                overflow: hidden;
-            }
+        &.ng-animating {
+            overflow: hidden;
         }
+    }
 
-        // Wrappers
-        .k-treeview-top,
-        .k-treeview-mid,
-        .k-treeview-bot {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            align-content: center;
-        }
 
-        // Items
-        .k-treeview-item {
-            outline-style: none;
-            margin: 0;
-            padding: 0 0 0 $kendo-treeview-indent;
-            border-width: 0;
-            display: block;
-        }
+    // Treeview wrappers
+    .k-treeview-top,
+    .k-treeview-mid,
+    .k-treeview-bot {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        align-content: center;
+    }
 
-        // Link
-        .k-treeview-leaf {
-            @include border-radius( $kendo-treeview-item-border-radius );
-            margin: 0;
-            border: $kendo-treeview-item-border-width solid transparent;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            align-content: center;
-            vertical-align: middle;
-            position: relative;
-        }
-        .k-treeview-leaf.k-state-focused {
-            z-index: 1;
-        }
 
-        // LoadMore button
-        .k-treeview-load-more-button {
-            cursor: pointer;
+    // Treeview item
+    .k-treeview-item {
+        outline-style: none;
+        margin: 0;
+        padding: 0 0 0 $kendo-treeview-indent;
+        border-width: 0;
+        display: block;
+    }
 
-            &:hover,
-            &.k-state-hover,
-            &:focus,
-            &.k-state-focused {
-                text-decoration: underline;
-            }
-        }
-        .k-treeview-load-more-checkboxes-container {
-            padding-left: $kendo-treeview-loadmore-checkboxes-padding-x;
 
-            .k-i-loading {
-                margin-left: $kendo-treeview-loadmore-checkboxes-icon-indent;
-                margin-right: $kendo-treeview-loadmore-checkboxes-icon-margin-x;
-            }
+    // Treeview toggle
+    .k-treeview-toggle {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        cursor: pointer;
+
+        + .k-checkbox-wrap,
+        + .k-checkbox-wrapper {
+            margin-left: $icon-spacing;
         }
+    }
 
-        // Expand / collapse
-        .k-i-expand,
-        .k-i-collapse {
-            margin-left: -$kendo-treeview-indent;
-            cursor: pointer;
 
-            + .k-checkbox-wrapper {
-                margin-left: $icon-spacing;
-            }
-        }
+    // Loading icon
+    .k-treeview-loading {
+        margin-right: $icon-spacing;
+    }
 
-        // Checkboxes
-        .k-checkbox-wrapper {
+
+    // Checkbox
+    .k-treeview .k-checkbox-wrap,
+    .k-treeview .k-checkbox-wrapper {
+        margin-right: $icon-spacing;
+    }
+
+
+    // Treeview leaf
+    .k-treeview-leaf {
+        @include border-radius( $kendo-treeview-item-border-radius );
+        border: $kendo-treeview-item-border-width solid transparent;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        align-content: center;
+        vertical-align: middle;
+        position: relative;
+
+        .k-icon,
+        .k-image,
+        .k-sprite {
             margin-right: $icon-spacing;
         }
 
-        // TODO: Delete the following block when https://github.com/telerik/kendo-angular-treeview/issues/138 is done
-        // Drag and Drop icon
-        .k-i-drag-and-drop {
-            position: absolute;
-            transform: translate(-50%, -50%);
-            z-index: 1000;
+        &.k-state-focus,
+        &.k-state-focused {
+            z-index: 1;
         }
+    }
 
-        // Other content
-        .k-treeview-leaf .k-icon,
-        .k-treeview-leaf .k-image,
-        .k-treeview-leaf .k-sprite {
-            margin-right: $icon-spacing;
+
+    // Treeview load more button
+    .k-treeview .k-treeview-load-more-button {
+        cursor: pointer;
+
+        &:hover,
+        &.k-state-hover,
+        &:focus,
+        &.k-state-focus,
+        &.k-state-focused {
+            text-decoration: underline;
         }
     }
 
-    .k-treeview-toggle {}
-
-    .k-treeview-leaf-text {}
 
     // RTL
     .k-rtl .k-treeview,
     .k-treeview[dir="rtl"] {
 
-        // Items
+        // Treeview item
         .k-treeview-item {
             padding-left: 0;
             padding-right: $kendo-treeview-indent;
         }
 
-        .k-treeview-load-more-checkboxes-container {
-            padding-left: 0;
-            padding-right: $kendo-treeview-loadmore-checkboxes-padding-x;
-
-            .k-i-loading {
-                margin-left: $kendo-treeview-loadmore-checkboxes-icon-margin-x;
-                margin-right: $kendo-treeview-loadmore-checkboxes-icon-indent;
-            }
-        }
-
-        // Expand / collapse
-        .k-i-expand,
-        .k-i-collapse {
+        // Treeview toggle
+        .k-treeview-toggle {
             margin-left: 0;
             margin-right: -$kendo-treeview-indent;
 
+            + .k-checkbox-wrap,
             + .k-checkbox-wrapper {
                 margin-right: $icon-spacing;
             }
         }
 
-        // Checkboxes
-        .k-checkbox-wrapper {
+        // Loading
+        .k-treeview-loading {
             margin-right: 0;
             margin-left: $icon-spacing;
         }
 
-        // Other content
-        .k-treeview-leaf .k-icon,
-        .k-treeview-leaf .k-image,
-        .k-treeview-leaf .k-sprite {
-            margin-left: $icon-spacing;
+        // Checkbox
+        .k-checkbox-wrap,
+        .k-checkbox-wrapper {
             margin-right: 0;
+            margin-left: $icon-spacing;
+        }
+
+        // Treeview leaf
+        .k-treeview-leaf,
+        .k-in {
+            .k-icon,
+            .k-image,
+            .k-sprite {
+                margin-right: 0;
+                margin-left: $icon-spacing;
+            }
         }
     }
 
@@ -18180,30 +18351,42 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
 // #region @import "_theme.scss"; -> packages/default/scss/treeview/_theme.scss
 @include exports("treeview/theme") {
 
-    // Appearance
+    // Treeview
     .k-treeview {
         @include fill(
             $kendo-treeview-text,
             $kendo-treeview-bg,
             $kendo-treeview-border
         );
+    }
 
 
-        // Item
-        .k-treeview-leaf {}
+    // Treeview item
+    .k-treeview-item {}
 
 
-        // Interactive states
-        .k-treeview-leaf:hover,
-        .k-treeview-leaf.k-hover {
+    // Treeview leaf
+    .k-treeview-leaf {
+
+        // Hover state
+        &:hover,
+        &.k-hover {
             @include fill(
-                $kendo-treeview-item-hovered-text,
-                $kendo-treeview-item-hovered-bg,
-                $kendo-treeview-item-hovered-border,
-                $kendo-treeview-item-hovered-gradient
+                $kendo-treeview-item-hover-text,
+                $kendo-treeview-item-hover-bg,
+                $kendo-treeview-item-hover-border,
+                $kendo-treeview-item-hover-gradient
             );
         }
-        .k-treeview-leaf.k-selected {
+
+        // Focus state
+        &:focus,
+        &.k-focus {
+            @include box-shadow( $kendo-treeview-item-focus-shadow );
+        }
+
+        // Selected state
+        &.k-selected {
             @include fill(
                 $kendo-treeview-item-selected-text,
                 $kendo-treeview-item-selected-bg,
@@ -18211,24 +18394,20 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
                 $kendo-treeview-item-selected-gradient
             );
         }
-        .k-treeview-leaf.k-focus {
-            @include box-shadow( $kendo-treeview-item-focused-shadow );
-        }
-        .k-treeview-leaf.k-selected.k-focus {
-            @include box-shadow( $kendo-treeview-item-selected-focused-shadow );
-        }
+    }
 
-        // LoadMore button
-        .k-treeview-load-more-button {
-            @include fill(
-                $kendo-treeview-loadmore-text,
-                $kendo-treeview-loadmore-bg,
-                $kendo-treeview-loadmore-border
-            );
-        }
 
-        .k-treeview-load-more-button:hover,
-        .k-treeview-load-more-button.k-hover {
+    // Treeview load more button
+    .k-treeview .k-treeview-load-more-button {
+        @include fill(
+            $kendo-treeview-loadmore-text,
+            $kendo-treeview-loadmore-bg,
+            $kendo-treeview-loadmore-border
+        );
+
+        // Hover state
+        &:hover,
+        &.k-hover {
             @include fill(
                 $kendo-treeview-loadmore-hover-text,
                 $kendo-treeview-loadmore-hover-bg,
@@ -18236,8 +18415,9 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
             );
         }
 
-        .k-treeview-load-more-button:focus,
-        .k-treeview-load-more-button.k-focus {
+        // Focus state
+        &:focus,
+        &.k-focus {
             @include fill(
                 $kendo-treeview-loadmore-focus-text,
                 $kendo-treeview-loadmore-focus-bg,
@@ -18309,7 +18489,7 @@ $dropdowntree-filter-spacer: $dropdowntree-popup-spacer-y !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/maskedtextbox/_layout.scss
-@include exports("maskedtextbox/layout") {
+@include exports( "maskedtextbox/layout" ) {
 
     // Masked textbox
     .k-maskedtextbox {}
@@ -18318,7 +18498,7 @@ $dropdowntree-filter-spacer: $dropdowntree-popup-spacer-y !default;
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/maskedtextbox/_theme.scss
-@include exports("maskedtextbox/theme") {
+@include exports( "maskedtextbox/theme" ) {
 
     // Masked textbox
     .k-maskedtextbox {}
@@ -19913,7 +20093,6 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
 
         > * {
             flex-shrink: 0;
-
         }
 
         // Appbar section
@@ -19923,15 +20102,16 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
             align-items: center;
         }
 
+
         // Appbar Spacer
         .k-appbar-spacer {
             flex: 1 0 auto;
         }
-
         .k-appbar-spacer-sized {
             flex-grow: 0;
         }
 
+
         // Separator
         .k-appbar-separator {
             margin: 0;
@@ -19941,12 +20121,24 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
             border-width: 0 0 0 1px;
             display: inline-block;
         }
+
+
+        // Input
+        .k-input,
+        .k-picker:not(.k-colorpicker) {
+            width: 10em;
+        }
+
     }
 
+
+    // Static appbar
     .k-appbar-static {
         position: static;
     }
 
+
+    // Sticky appbar
     .k-appbar-sticky {
         width: 100%;
         position: sticky;
@@ -19954,17 +20146,20 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
         z-index: $appbar-zindex;
     }
 
+
+    // Fixed appbar
     .k-appbar-fixed {
         width: 100%;
         position: fixed;
         z-index: 1;
     }
 
+
+    // Appbar position
     .k-appbar-top {
         top: 0;
         bottom: auto;
     }
-
     .k-appbar-bottom {
         top: auto;
         bottom: 0;
@@ -19973,6 +20168,7 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
             bottom: 0;
         }
     }
+
 }
 
 // #endregion
@@ -20035,79 +20231,136 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/fab/_variables.scss
 // Floating Action Button
-$fab-padding-x: map-get( $spacing, 4 ) !default;
-$fab-padding-y: $fab-padding-x !default;
-$fab-border-width: 1px !default;
-$fab-border-radius: $border-radius !default;
-$fab-font-family: $font-family !default;
-$fab-font-size: $font-size !default;
-$fab-line-height: $line-height !default;
-
-$fab-padding-x-sm: ( $fab-padding-x / 2 ) !default;
-$fab-padding-y-sm: ( $fab-padding-y / 2 ) !default;
-
-$fab-padding-x-md: $fab-padding-x !default;
-$fab-padding-y-md: $fab-padding-y !default;
-
-$fab-padding-x-lg: ( $fab-padding-x * 1.5 ) !default;
-$fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;
-
-$fab-icon-width: 20px !default;
-$fab-icon-height: $fab-icon-width !default;
-$fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
-
-$fab-items-padding-x: 0px !default;
-$fab-items-padding-y: map-get( $spacing, 4 ) !default;
-
-$fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
-$fab-item-text-padding-y: $fab-item-text-padding-x !default;
-$fab-item-text-border-width: 1px !default;
-$fab-item-text-border-radius: 2px !default;
-$fab-item-text-font-size: $font-size-xs !default;
-$fab-item-text-line-height: 1.2 !default;
-
-$fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
-$fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
-$fab-item-icon-border-width: 0 !default;
-$fab-item-icon-border-radius: 50% !default;
-$fab-item-icon-width: 20px !default;
-$fab-item-icon-height: $fab-item-icon-width !default;
-
-$fab-sizes: (
-    sm: map-get( $spacing, 4 ),
-    md: map-get( $spacing, 8 ),
-    lg: map-get( $spacing, 16 )
-) !default;
-
-$fab-theme-colors: $theme-colors !default;
-
-$fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
-$fab-disabled-shadow: 0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
-$fab-active-shadow: null !default;
-
-$fab-item-text: $component-text !default;
-$fab-item-bg: $component-bg !default;
-$fab-item-border: $component-border !default;
-
-$fab-item-icon-text: $kendo-button-text !default;
-$fab-item-icon-bg: $kendo-button-bg !default;
-$fab-item-icon-border: $kendo-button-border !default;
-
-$fab-item-shadow: $fab-shadow !default;
-$fab-item-disabled-shadow: $fab-disabled-shadow !default;
-$fab-item-active-shadow: $fab-active-shadow !default;
-
-$fab-border-width-sm: $fab-border-width !default;
-$fab-line-height-sm: $fab-line-height !default;
-$fab-size-sm: calc( #{$fab-line-height-sm * 1em} + #{$fab-padding-y-sm * 2} + #{$fab-border-width-sm * 2} ) !default;
 
-$fab-border-width-md: $fab-border-width !default;
-$fab-line-height-md: $fab-line-height !default;
-$fab-size-md: calc( #{$fab-line-height-md * 1em} + #{$fab-padding-y-md * 2} + #{$fab-border-width-md * 2} ) !default;
-
-$fab-border-width-lg: $fab-border-width !default;
-$fab-line-height-lg: $fab-line-height !default;
-$fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{$fab-border-width-lg * 2} ) !default;
+/// Width of the border around the FAB.
+/// @group floating-action-button
+$kendo-fab-border-width: 1px !default;
+/// Border radius of the FAB.
+/// @group floating-action-button
+$kendo-fab-border-radius: $border-radius !default;
+
+/// Font family of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-family: $font-family !default;
+/// Font size of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-size: $font-size !default;
+/// Line height of the FAB.
+/// @group floating-action-button
+$kendo-fab-line-height: $line-height !default;
+
+/// Horizontal padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-x: map-get( $spacing, 4 ) !default;
+$kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
+$kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
+$kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
+
+/// Vertical padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-y: $kendo-fab-padding-x !default;
+$kendo-fab-padding-y-sm: ( $kendo-fab-padding-y / 2 ) !default;
+$kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
+$kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
+
+/// FAB icon width.
+/// @group floating-action-button
+$kendo-fab-icon-width: 20px !default;
+/// FAB icon height.
+/// @group floating-action-button
+$kendo-fab-icon-height: $kendo-fab-icon-width !default;
+/// FAB icon spacing.
+/// @group floating-action-button
+$kendo-fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
+
+/// FAB items horizontal padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-x: 0px !default;
+/// FAB items vertical padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-y: map-get( $spacing, 4 ) !default;
+
+/// FAB item text horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
+/// FAB item text vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
+/// Width of the FAB item text border.
+/// @group floating-action-button
+$kendo-fab-item-text-border-width: 1px !default;
+/// Border radius of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-border-radius: 2px !default;
+/// Font size of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-font-size: $font-size-xs !default;
+/// Line height of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-line-height: 1.2 !default;
+
+/// FAB item icon horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
+/// FAB item icon vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
+/// Width of the FAB item icon border.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-width: 0 !default;
+/// Border radius of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-radius: 50% !default;
+/// Width of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-width: 20px !default;
+/// Height of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
+
+/// Theme colors map for the FAB.
+/// @group floating-action-button
+$kendo-fab-theme-colors: $theme-colors !default;
+
+/// The base shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
+/// The disabled shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-disabled-shadow: 0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+/// The active shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-active-shadow: null !default;
+
+/// The base text color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-text: $component-text !default;
+/// The base background color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-bg: $component-bg !default;
+/// The base border color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-border: $component-border !default;
+
+/// The base text color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-text: $kendo-button-text !default;
+/// The base background color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-bg: $kendo-button-bg !default;
+/// The base border color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border: $kendo-button-border !default;
+
+/// The base shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-shadow: $kendo-fab-shadow !default;
+/// The disabled shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
+/// The active shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/fab/_layout.scss
@@ -20122,9 +20375,9 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
         box-sizing: border-box;
         color: inherit;
         background-color: transparent;
-        font-size: $fab-font-size;
-        line-height: $fab-line-height;
-        font-family: $fab-font-family;
+        font-size: $kendo-fab-font-size;
+        line-height: $kendo-fab-line-height;
+        font-family: $kendo-fab-font-family;
         text-align: center;
         white-space: nowrap;
         display: inline-flex;
@@ -20143,73 +20396,39 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
 
     // FAB Icon
     .k-fab-icon {
-        width: $fab-icon-width;
-        height: $fab-icon-height;
+        width: $kendo-fab-icon-width;
+        height: $kendo-fab-icon-height;
 
         &:not(:only-child) {
-            margin-right: $fab-icon-spacing;
-            margin-left: -$fab-icon-spacing;
+            margin-right: $kendo-fab-icon-spacing;
+            margin-left: -$kendo-fab-icon-spacing;
         }
     }
 
 
     // Sizes
     .k-fab-sm {
-        padding: $fab-padding-y-sm $fab-padding-x-sm;
+        padding: $kendo-fab-padding-y-sm $kendo-fab-padding-x-sm;
     }
     .k-fab-md {
-        padding: $fab-padding-y $fab-padding-x;
+        padding: $kendo-fab-padding-y $kendo-fab-padding-x;
     }
     .k-fab-lg {
-        padding: $fab-padding-y-lg $fab-padding-x-lg;
+        padding: $kendo-fab-padding-y-lg $kendo-fab-padding-x-lg;
     }
 
-
     // Shapes
-    .k-fab-square {
-        border-radius: 0;
-
-        &.k-fab-sm {
-            width: $fab-size-sm;
-            height: $fab-size-sm;
-        }
-        &.k-fab-md {
-            width: $fab-size-md;
-            height: $fab-size-md;
-        }
-        &.k-fab-lg {
-            width: $fab-size-lg;
-            height: $fab-size-lg;
-        }
-    }
-    .k-fab-circle {
-        border-radius: 50%;
+    .k-fab-rectangle { }
 
-        &.k-fab-sm {
-            width: $fab-size-sm;
-            height: $fab-size-sm;
-        }
-        &.k-fab-md {
-            width: $fab-size-md;
-            height: $fab-size-md;
-        }
-        &.k-fab-lg {
-            width: $fab-size-lg;
-            height: $fab-size-lg;
-        }
-    }
-    .k-fab-pill {
-        border-radius: 5rem;
-    }
-    .k-fab-rounded {
-        @include border-radius( $fab-border-radius );
+    .k-fab-square {
+        aspect-ratio: 1;
     }
 
 
     // Items
     .k-fab-items {
         margin: 0;
-        padding: $fab-items-padding-y $fab-items-padding-x;
+        padding: $kendo-fab-items-padding-y $kendo-fab-items-padding-x;
         display: flex;
     }
 
@@ -20254,19 +20473,19 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     }
 
     .k-fab-item-text {
-        padding: $fab-item-text-padding-y $fab-item-text-padding-x;
-        border-width: $fab-item-text-border-width;
-        border-radius: $fab-item-text-border-radius;
-        font-size: $fab-item-text-font-size;
-        line-height: $fab-item-text-line-height;
+        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: $fab-item-icon-width;
-        height: $fab-item-icon-height;
-        padding: $fab-item-icon-padding-y $fab-item-icon-padding-x;
-        border-width: $fab-item-icon-border-width;
-        border-radius: $fab-item-icon-border-radius;
+        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;
     }
@@ -20307,11 +20526,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
 @include exports( "fab/theme" ) {
 
     // Normal state
-    @each $name, $color in $fab-theme-colors {
-        .k-fab-#{$name} {
-            @include box-shadow($fab-shadow);
-            outline: $fab-border-width solid $color;
-            outline-offset: -$fab-border-width;
+    @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;
@@ -20319,20 +20538,18 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     }
 
     // Hover state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-hover.k-fab-#{$name},
-        .k-state-hovered.k-fab-#{$name},
-        .k-fab-#{$name}:hover {
+    @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 $fab-theme-colors {
-        .k-fab-#{$name}.k-state-focus,
-        .k-fab-#{$name}.k-state-focused,
-        .k-fab-#{$name}:focus {
+    @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 );
@@ -20340,21 +20557,21 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     }
 
     // Active state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-active.k-fab-#{$name},
-        .k-state-selected.k-fab-#{$name},
-        .k-fab-#{$name}:active {
-            @include box-shadow($fab-active-shadow);
+    @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 $fab-theme-colors {
-        .k-state-disabled.k-fab-#{$name},
-        .k-fab-#{$name}:disabled {
-            @include box-shadow($fab-disabled-shadow);
+    @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;
@@ -20364,62 +20581,59 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     // Items
     .k-fab-item-text {
         @include fill(
-            $fab-item-text,
-            $fab-item-bg,
-            $fab-item-border
+            $kendo-fab-item-text,
+            $kendo-fab-item-bg,
+            $kendo-fab-item-border
         );
-        @include box-shadow($fab-item-shadow);
+        @include box-shadow($kendo-fab-item-shadow);
 
     }
     .k-fab-item-icon {
         @include fill(
-            $fab-item-icon-text,
-            $fab-item-icon-bg,
-            $fab-item-icon-border
+            $kendo-fab-item-icon-text,
+            $kendo-fab-item-icon-bg,
+            $kendo-fab-item-icon-border
         );
-        @include box-shadow($fab-item-shadow);
-        outline: $fab-border-width solid rgba(0, 0, 0, .08);
-        outline-offset: -$fab-border-width;
+        @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-state-hover .k-fab-item-icon,
-    .k-fab-item.k-state-hovered .k-fab-item-icon
+    .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: try-shade( $fab-item-icon-border, .5 );
-        background-color: try-shade( $fab-item-icon-bg, .5 );
+        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-state-focus .k-fab-item-text,
-    .k-fab-item.k-state-focus .k-fab-item-icon,
-    .k-fab-item.k-state-focused .k-fab-item-text,
-    .k-fab-item.k-state-focused .k-fab-item-icon {
+    .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-state-active .k-fab-item-icon,
+    .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
-        @include box-shadow($fab-item-active-shadow);
-        border-color: try-shade( $fab-item-icon-border, 1);
-        background-color: try-shade( $fab-item-icon-bg, 1);
+        @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-state-disabled,
+    .k-fab-item.k-disabled,
     .k-fab-item:disabled {
         opacity: 1;
 
         .k-fab-item-text,
         .k-fab-item-icon {
-            @include box-shadow($fab-item-disabled-shadow);
-            background-color: try-tint( $fab-item-bg, 5 );
-            color: try-tint( $fab-item-text, 5 );
+            @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 );
         }
     }
 
@@ -20485,8 +20699,12 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
 
     // 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;
     }
@@ -20508,28 +20726,34 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
         outline: 0;
         color: inherit;
         display: flex;
-        flex-direction: row;
+        flex-flow: row nowrap;
         flex: 1 1 auto;
+        gap: $menu-item-icon-spacing;
         align-items: center;
         position: relative;
         white-space: nowrap;
         cursor: pointer;
+    }
 
-        > .k-icon:not(.k-menu-expand-arrow),
-        > .k-image,
-        > .k-sprite {
-            margin-right: $menu-item-icon-spacing;
-        }
+
+    // Menu item text
+    .k-menu-link-text {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
 
     // Expand arrow
     .k-menu-expand-arrow {
-        margin: 0;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        right: $icon-spacing;
+        margin-inline-end: -$icon-spacing;
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
+        position: relative;
     }
 
 
@@ -20564,6 +20788,14 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             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;
@@ -20602,12 +20834,20 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             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: $panel-border;
+            border-color: $component-border;
             display: block;
         }
     }
@@ -20627,6 +20867,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             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;
@@ -20642,6 +20887,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             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;
@@ -20657,6 +20907,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             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;
+        }
     }
 
 
@@ -20685,11 +20940,14 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     .k-context-menu-popup {
         z-index: 12000;
 
-        > .k-popup:not(.k-menu-popup),
         .k-context-menu {
-            border: 0;
+            border-width: 0;
         }
     }
+    .k-popup .k-context-menu,
+    .k-context-menu-popup .k-context-menu {
+        border-width: 0;
+    }
 
 
     // Scrolling
@@ -20748,21 +21006,6 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     .k-rtl,
     [dir="rtl"] {
 
-        .k-menu-link {
-            > .k-icon:not(.k-menu-expand-arrow),
-            > .k-image,
-            > .k-sprite {
-                margin-left: $menu-item-icon-spacing;
-                margin-right: 0;
-            }
-        }
-
-        .k-menu-expand-arrow {
-            right: unset;
-            left: $icon-spacing;
-        }
-
-
         // Orientation -- horizontal
         .k-menu-horizontal {
 
@@ -22196,15 +22439,15 @@ $card-footer-text: $header-text !default;
 $card-footer-border: $header-border !default;
 
 $card-title-margin-bottom: map-get( $spacing, sm ) !default;
-$card-title-font-size: $font-size-md !default;
-$card-title-font-family: inherit !default;
-$card-title-line-height: normal !default;
+$card-title-font-size: $h5-font-size !default;
+$card-title-font-family: null !default;
+$card-title-line-height: 1.25 !default;
 $card-title-font-weight: $font-weight-normal !default;
 $card-title-letter-spacing: null !default;
 
 $card-subtitle-margin-bottom: map-get( $spacing, sm ) !default;
 $card-subtitle-font-size: $font-size-sm !default;
-$card-subtitle-font-family: inherit !default;
+$card-subtitle-font-family: null !default;
 $card-subtitle-line-height: normal !default;
 $card-subtitle-font-weight: $font-weight-normal !default;
 $card-subtitle-letter-spacing: null !default;
@@ -23604,7 +23847,7 @@ $pager-number-focus-opacity: .12 !default;
 $pager-number-focus-bg: transparent !default;
 $pager-number-focus-shadow: inset 0 0 0 2px rgba($pager-number-selected-bg, $pager-number-focus-opacity) !default;
 
-$pager-input-width: 3em !default;
+$pager-input-width: 5em !default;
 $pager-dropdown-width: 5em !default;
 
 // #endregion
@@ -24769,7 +25012,7 @@ $tabstrip-content-border-focused: $component-text !default;
     .k-tabstrip-items {
         outline: 0;
         display: flex;
-        flex-direction: row;
+        flex-flow: row wrap;
         flex: 0 0 auto;
 
         .k-item {
@@ -26637,9 +26880,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
         }
 
-        .k-grid .k-grid-search {
-            width: 100%;
-        }
     }
 
     .k-grid.k-grid-mobile {
@@ -27945,14 +28185,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         padding: 4px 8px;
     }
 
-    .k-grid-columnmenu-popup {
-        width: 230px;
-
-        &.k-popup {
-            padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
-        }
-    }
-
     // Filter row
     .k-filter-row {
         line-height: $form-line-height;
@@ -28425,83 +28657,83 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
 @include exports( "filtermenu/layout" ) {
 
-    .k-filter-menu.k-popup,
-    .k-grid-filter-popup.k-popup {
-
-        .k-filter-menu-container {
-            width: $grid-filter-menu-width;
-        }
+    // Filter menu
+    .k-filter-menu-popup {
+        width: $grid-column-menu-width;
     }
+    .k-filter-menu {
+        box-sizing: border-box;
+    }
+    .k-filter-menu-container {
+        padding: map-get( $spacing, 2 );
+        box-sizing: border-box;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        gap: map-get( $spacing, 2 );
 
-    .k-filter-menu.k-popup,
-    .k-grid-filter-popup.k-popup,
-    .k-popup .k-filter-menu,
-    .k-popup .k-grid-filter-popup {
-        .k-multicheck-wrap {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
-
-            .k-item {
-                padding: $grid-column-menu-list-item-padding-y 0;
-            }
-
-            .k-check-all-wrap {
-                padding-bottom: ($grid-column-menu-list-item-padding-y * 2);
-                border-bottom-width: $grid-filter-menu-check-all-border-bottom-width;
-                border-bottom-style: solid;
-            }
+        .k-filter-and {
+            width: min-content;
+            align-self: start;
         }
 
-        .k-filter-help-text {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
+        .k-actions {
+            margin: 0;
+            padding: 0;
         }
 
-        .k-filter-selected-items {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
+        // Angular specific
+        kendo-numeric-filter-menu,
+        kendo-grid-string-filter-menu,
+        kendo-grid-date-filter-menu,
+        kendo-grid-filter-menu-input-wrapper {
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: stretch;
+            gap: map-get( $spacing, 2 );
         }
     }
+    .k-ie .k-filter-menu-container {
+        > * { margin-top: map-get( $spacing, 2 ); }
+        > :first-child { margin-top: 0; }
 
-    .k-filter-menu {
-        $item-spacing: $spacer-y / 2;
-        $form-padding: $spacer-y;
-        $form-padding-y: $form-padding - $item-spacing;
-
-        .k-filter-menu-container {
-            box-sizing: border-box;
+        // Angular specific
+        .k-filter-and,
+        kendo-grid-filter-menu-input-wrapper > * {
+            margin-top: map-get( $spacing, 2 );
         }
-
-        .k-widget,
-        .k-textbox,
-        .k-dropdown,
-        .k-numerictextbox,
-        .k-radio-list,
-        .k-datepicker,
-        .k-input {
-            margin: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
-            width: calc( 100% - ( 2 * #{$grid-filter-menu-item-spacing-x} ) );
-            box-sizing: border-box;
-            display: flex;
-        }
-
-        .k-switch {
-            margin: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
-            box-sizing: border-box;
-            display: flex;
+        kendo-grid-filter-menu-input-wrapper > :first-child {
+            margin-top: 0;
         }
+    }
 
-        .k-widget.k-filter-and {
-            width: 6em;
-        }
+    .k-filter-menu.k-popup,
+    .k-grid-filter-popup.k-popup {
 
-        .k-widget.k-button-group {
-            width: auto;
-            display: inline-flex;
+        .k-filter-menu-container {
+            width: $grid-column-menu-width;
         }
     }
 
-    .k-multicheck-wrap {
+    .k-popup .k-multicheck-wrap {
+        margin: 0;
+        padding: 0;
         max-height: 300px;
+        font-size: $kendo-list-font-size;
+        line-height: $kendo-list-line-height;
         white-space: nowrap;
         overflow: auto;
+        list-style: none;
+
+        .k-item,
+        .k-check-all-wrap {
+            padding: $grid-column-menu-list-item-padding-y $grid-column-menu-list-item-padding-x;
+
+            > .k-checkbox-label {
+                line-height: inherit;
+                display: block;
+            }
+        }
     }
 
     .k-filter-selected-items {
@@ -28525,17 +28757,48 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         .k-detail-row {
             display: none !important;
         }
-
-        input.k-input,
-        span.k-input,
-        input.k-textbox {
-            width: 0 !important;
-        }
     }
 
 }
 
 @include exports("columnmenu/layout") {
+
+    // Column menu
+    .k-column-menu-popup,
+    .k-grid-columnmenu-popup {
+        width: $grid-column-menu-width;
+        box-sizing: border-box;
+
+        &.k-popup {
+            padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
+        }
+        .k-popup > & {
+            width: 100%;
+        }
+
+        .k-actions {
+            margin: 0;
+        }
+
+    }
+    .k-column-menu {
+        box-sizing: border-box;
+
+        .k-menu:not(.k-context-menu) {
+            font-weight: 400;
+        }
+
+        .k-expander {
+            border: 0;
+            background: inherit;
+
+            .k-columnmenu-item {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+
     .k-column-list {
         padding: 0;
         margin: 0;
@@ -28580,16 +28843,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         overflow: hidden;
     }
 
-    .k-filter-menu,
-    .k-column-list-wrapper,
-    .k-columnmenu-item-content {
-
-        .k-actions {
-            margin-top: ($grid-filter-menu-item-spacing-y / 2);
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x;
-        }
-    }
-
     .k-column-menu-group-header {
         padding: $grid-column-menu-group-header-padding-y $grid-column-menu-group-header-padding-x;
         display: flex;
@@ -28608,22 +28861,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         flex: 1 1 auto;
     }
 
-    .k-column-menu {
-        .k-menu:not(.k-context-menu) {
-            font-weight: 400;
-        }
-
-        .k-expander {
-            border: 0;
-            background: inherit;
-
-            .k-columnmenu-item {
-                display: flex;
-                align-items: center;
-            }
-        }
-    }
-
     [dir="rtl"],
     .k-rtl {
         .k-columnmenu-item > .k-icon {
@@ -29191,7 +29428,7 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
     .k-listview {
         margin: 0;
         padding: 0;
-        border-width: $listview-border-width;
+        border-width: 0;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -29211,7 +29448,6 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
     // Header
     .k-listview-header {
         border-width: 0;
-        border-bottom-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -29220,7 +29456,7 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
     }
 
 
-    // Listview contnet
+    // Listview content
     .k-listview-content {
         margin: 0;
         padding: 0;
@@ -29275,7 +29511,6 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
     // Listview footer
     .k-listview-footer {
         border-width: 0;
-        border-top-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -29287,14 +29522,9 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
     // Listview pager
     .k-listview-pager {
         border-width: 0;
-        border-top-width: $listview-border-width;
         border-color: inherit;
         font: inherit;
     }
-    .k-listview-pager-top {
-        border-top-width: 0;
-        border-bottom-width: $listview-border-width;
-    }
     .k-listview-bordered > .k-listview-pager-top {
         border-bottom-width: $listview-border-width;
     }
@@ -29563,14 +29793,10 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             width: auto;
             min-width: $form-line-height * 1em;
         }
-        [data-tool="fontSize"] {
-            width: 5 * $spacer;
-        }
-        [data-tool="fontFamily"] {
-            width: 6 * $spacer;
-        }
-        [data-tool="format"] {
-            width: 4 * $spacer;
+
+        .k-input,
+        .k-picker:not(.k-colorpicker) {
+            width: 5em;
         }
     }
 
@@ -29732,6 +29958,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         font-family: Arial, Verdana, Sans-serif;
         flex: 1;
         position: relative;
+        overflow: hidden;
 
         // disabled cells in the Spreadsheet should allow navigation if link is used
         .k-state-disabled {
@@ -30090,33 +30317,45 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         }
 
         // Details
-        .k-details {
+        .k-details,
+        .k-expander {
             padding: 0;
             border-width: 1px 0 0;
             border-style: solid;
             border-color: inherit;
         }
-        .k-details-summary {
-            padding: $padding-y;
+        .k-expander {
+            border: 0;
+            background: inherit;
+        }
+        .k-details-summary,
+        .k-columnmenu-item {
+            padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
+            display: flex;
+            align-items: center;
             cursor: pointer;
 
             > .k-icon {
                 margin-right: $padding-y;
             }
         }
-        .k-details-content {
-            padding: $padding-y $padding-x $padding-y $filter-menu-padding-left;
-
-            > .k-widget {
-                width: 100%;
-                margin-bottom: 3px;
-            }
+        .k-details-content,
+        .k-columnmenu-item-content {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
             .k-filter-and {
-                width: 75px;
-                margin: 8px 0;
+                width: min-content;
+                align-self: flex-start;
             }
         }
+
+        .k-actions {
+            margin: 0;
+            padding: 0;
+        }
     }
 
 }
@@ -33303,6 +33542,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
     }
 
     // Toolbar
+    .k-editor-toolbar,
     .k-editor > .k-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
         flex-shrink: 0;
@@ -33330,13 +33570,10 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             top: 0;
             right: 0;
             visibility: hidden;
-        }
-        .k-overflow-anchor {
-            border-width: 0;
-            padding: $toolbar-padding-y;
-            width: $toolbar-inner-calc-size;
-            height: $toolbar-inner-calc-size;
-            position: relative;
+
+            .k-overflow-anchor {
+                position: relative;
+            }
         }
 
         .k-editor-export {
@@ -33454,6 +33691,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
         }
     }
 
+
     // Find and replace dialog
     .k-editor-find-replace {
         .k-content {
@@ -33710,6 +33948,24 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             }
         }
 
+        // Generic widgets
+        .k-numerictextbox {
+            width: 10em;
+
+            & + .k-dropdown-list {
+                width: 5em;
+            }
+
+            & + .k-colorpicker,
+            & + .k-dropdown-list {
+                margin-left: map-get( $spacing, 2 );
+            }
+        }
+
+        .k-colorpicker {
+            vertical-align: middle;
+        }
+
         .k-edit-field > .k-checkbox {
             position: relative; // fix scrolling
         }
@@ -33978,6 +34234,7 @@ $imageeditor-content-border-width: 1px !default;
 
 $imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
 $imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
+$imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
 
 $imageeditor-crop-border-width: 1px !default;
 $imageeditor-crop-border-style: dashed !default;
@@ -34059,16 +34316,16 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
 
     // Action Pane
     .k-imageeditor-action-pane {
+        padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
+        width: $imageeditor-action-pane-width;
         border-width: 0;
         border-left-width: $imageeditor-content-border-width;
         border-style: solid;
         border-color: inherit;
-        flex-shrink: 0;
+        box-sizing: border-box;
+        flex: none;
         overflow-y: auto;
     }
-    .k-imageeditor-action-pane > .k-form {
-        padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
-    }
 
 
     // Crop Tool
@@ -34158,10 +34415,6 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
             flex-direction: row;
             align-self: flex-start;
         }
-
-        .k-imageeditor-action-pane {
-            flex: 0 0 auto;
-        }
     }
 
 }
@@ -36530,7 +36783,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         .k-widget.k-recur-month,
         .k-widget.k-recur-weekday,
         .k-widget.k-recur-weekday-offset {
-            width: 9em;
+            width: 10em;
         }
 
     }
@@ -37046,8 +37299,6 @@ $chat-message-box-text: $kendo-input-text !default;
 $chat-message-box-border: inherit !default;
 $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
 
-$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
-
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/chat/_layout.scss
 @include exports("chat/layout") {
@@ -37340,6 +37591,7 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
         .k-input {}
 
         .k-button {
+            border-width: 0;
             flex-shrink: 0;
 
             svg {
@@ -37494,9 +37746,6 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
         }
 
         .k-button {
-            border-color: transparent;
-            color: inherit;
-            background: none;
             flex: none;
         }
 
@@ -37703,14 +37952,6 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
             $chat-toolbar-bg,
             $chat-toolbar-border
         );
-
-        .k-scroll-button {
-            @include fill( $bg: $chat-bg );
-            @include box-shadow( $chat-toolbar-box-scroll-button-shadow );
-        }
-        .k-scroll-button:hover {
-            @include fill( $bg: $chat-bg );
-        }
     }
 
 }
@@ -37810,6 +38051,11 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
         width: 100% !important;
         // sass-lint:enable no-important
         box-shadow: none;
+
+
+        .k-dropdown-list {
+            width: auto;
+        }
     }
     .k-mediaplayer-time-wrap {
         flex: 1;
@@ -38526,11 +38772,8 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-spacing: $toolbar-padding-x !default;
-$pdf-viewer-search-dialog-button-spacing: $pdf-viewer-search-dialog-spacing !default;
-$pdf-viewer-search-dialog-textbox-padding-x: $kendo-input-padding-y !default;
-$pdf-viewer-search-dialog-input-button-height: $line-height-em !default;
-$pdf-viewer-search-dialog-matches-width: 4.5em !default;
+$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
 $pdf-viewer-selection-line-height: $line-height-sm !default;
 
@@ -38626,38 +38869,45 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
 
     // Search
     .k-pdf-viewer-search-dialog {
-        padding: $pdf-viewer-search-dialog-spacing;
+        padding: $pdf-viewer-search-dialog-padding;
 
         .k-search-container {
             display: flex;
+            gap: $pdf-viewer-search-dialog-spacing;
+            flex-flow: row nowrap;
             flex: 0 0 auto;
             justify-content: flex-start;
             align-items: center;
 
-            .k-match-case-button {
-                display: inline-flex;
-                height: $pdf-viewer-search-dialog-input-button-height;
-                justify-content: center;
+            .k-search-dialog-draghandle {
+                cursor: move;
+                margin-left: 0;
             }
 
-            .k-search-matches {
-                display: inline-block;
-                min-width: $pdf-viewer-search-dialog-matches-width;
-                margin: 0 $pdf-viewer-search-dialog-spacing 0 $pdf-viewer-search-dialog-button-spacing;
-                vertical-align: middle;
-            }
+            .k-textbox {
+                width: 10em;
+                flex: none;
 
-            > .k-button {
-                margin-left: $pdf-viewer-search-dialog-button-spacing;
+                .k-button {
+                    border-width: 0;
+                }
             }
 
-            .k-search-dialog-draghandle {
-                cursor: move;
-                margin-left: 0;
+            .k-search-matches {
+                flex: 1 1 auto;
             }
         }
     }
 
+
+    // IE
+    .k-ie .k-pdf-viewer-search-dialog {
+
+        .k-search-container > * + * {
+            margin-left: $pdf-viewer-search-dialog-spacing;
+        }
+    }
+
 }
 
 // #endregion
@@ -40139,21 +40389,38 @@ $map-marker-fill: $primary !default;
 
 
         // Buttons
+        .k-button {
+            padding: 0;
+            width: auto;
+            height: auto;
+            line-height: 1;
+            box-shadow: none;
+            position: absolute;
+
+            .k-icon {
+                min-width: 0;
+                min-height: 0;
+            }
+        }
+        .k-navigator-n,
         .k-navigator-up {
             transform: translateX(-50%);
             top: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-e,
         .k-navigator-right {
             transform: translateY(-50%);
             right: $map-navigator-padding;
             top: 50%;
         }
+        .k-navigator-s,
         .k-navigator-down {
             transform: translateX(-50%);
             bottom: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-w,
         .k-navigator-left {
             transform: translateY(-50%);
             left: $map-navigator-padding;
@@ -40291,10 +40558,10 @@ $orgchart-card-shadow: $card-shadow !default;
 $orgchart-card-focus-shadow: $card-focus-shadow !default;
 
 $orgchart-card-title-margin-bottom: 0px !default;
-$orgchart-card-title-font-size: $font-size-lg !default;
+$orgchart-card-title-font-size: null !default;
 
 $orgchart-card-subtitle-margin-bottom: 0px !default;
-$orgchart-card-subtitle-font-size: $font-size !default;
+$orgchart-card-subtitle-font-size: null !default;
 
 $orgchart-card-body-border-width: 2px 0 0 !default;
 $orgchart-card-body-border-color: transparent !default;