@progress/kendo-theme-default 4.43.1-dev.4 → 4.43.1-dev.5

package/dist/all.scss

@@ -1519,8 +1519,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.
@@ -1535,7 +1535,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,26 +5931,82 @@ $message-box-link-text-decoration: underline !default;
 // #endregion
 // #region @import "../list/_variables.scss"; -> packages/default/scss/list/_variables.scss
 // List
-$list-font-size: $font-size !default;
-$list-line-height: $line-height !default;
-$list-line-height-em: $line-height-em !default;
 
-$list-item-padding-x: $padding-x !default;
-$list-item-padding-y: $padding-y !default;
+/// Font size of the list component.
+/// @group list
+$list-font-size: $font-size-md !default;
+
+/// Line height of the list component.
+/// @group list
+$list-line-height: $line-height-md !default;
+$list-line-height-em: $line-height-em !default;
 
+/// Horizontal padding of list items.
+/// @group list
+$list-item-padding-x: map-get( $spacing, 2 ) !default;
+
+/// Vertical padding of list items.
+/// @group list
+$list-item-padding-y: map-get( $spacing, 1 ) !default;
+
+
+/// Background color of the list component.
+/// @group list
+$list-bg: $component-bg !default;
+/// Text color of the list component.
+/// @group list
+$list-text: $component-text !default;
+/// Border color of the list component.
+/// @group list
+$list-border: $component-border !default;
+
+/// Background color of list header.
+/// @group list
+$list-header-bg: null !default;
+/// Text color of list header.
+/// @group list
+$list-header-text: null !default;
+/// Border color of list header.
+/// @group list
+$list-header-border: inherit !default;
+/// Box shadow of list header.
+/// @group list
+$list-header-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
+
+/// Background color of list items.
+/// @group list
 $list-item-bg: null !default;
+/// Text color of list items.
+/// @group list
 $list-item-text: $component-text !default;
 
+/// Background color of hovered list items.
+/// @group list
 $list-item-hovered-bg: $hovered-bg !default;
+/// Text color of hovered list items.
+/// @group list
 $list-item-hovered-text: $hovered-text !default;
 
+/// Background color of focused list items.
+/// @group list
+$list-item-focused-bg: null !default;
+/// Text color of focused list items.
+/// @group list
+$list-item-focused-text: null !default;
+/// Box shadow of focused list items.
+/// @group list
+$list-item-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;
+
+/// Background color of selected list items.
+/// @group list
 $list-item-selected-bg: $selected-bg !default;
+/// Text color of selected list items.
+/// @group list
 $list-item-selected-text: $selected-text !default;
 
-$list-item-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;
-
-$list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
-$list-container-no-data-text: $subtle-text !default;
+/// Text color of the 'No Data' text.
+/// @group list
+$list-no-data-text: $subtle-text !default;
 
 // #endregion
 
@@ -5958,60 +6014,120 @@ $list-container-no-data-text: $subtle-text !default;
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/checkbox/_variables.scss
 // Checkbox
+
 $checkbox-size: map-get( $spacing, 4 ) !default;
 $checkbox-radius: map-get( $spacing, thin ) !default;
+/// Border width of checkbox.
+/// @group checkbox
 $checkbox-border-width: 1px !default;
-$checkbox-line-height: calc( #{$checkbox-size} + #{$checkbox-border-width} ) !default;
-
-$checkbox-bg: $white !default;
-$checkbox-text: transparent !default;
-$checkbox-border: $base-border !default;
 
+/// Background color of checkbox.
+/// @group checkbox
+$checkbox-bg: $component-bg !default;
+/// Color of checkbox.
+/// @group checkbox
+$checkbox-text: null !default;
+/// Border color of checkbox.
+/// @group checkbox
+$checkbox-border: $component-border !default;
+
+/// Background color of hovered checkbox.
+/// @group checkbox
 $checkbox-hovered-bg: null !default;
+/// Color of hovered checkbox.
+/// @group checkbox
 $checkbox-hovered-text: null !default;
+/// Border color of hovered checkbox.
+/// @group checkbox
 $checkbox-hovered-border: null !default;
 
+/// Background color of checked checkbox.
+/// @group checkbox
 $checkbox-checked-bg: $primary !default;
+/// Color of checked checkbox.
+/// @group checkbox
 $checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
+/// Border color of checked checkbox.
+/// @group checkbox
 $checkbox-checked-border: $checkbox-checked-bg !default;
 
+/// Background color of indeterminate checkbox.
+/// @group checkbox
 $checkbox-indeterminate-bg: $checkbox-bg !default;
+/// Color of indeterminate checkbox.
+/// @group checkbox
 $checkbox-indeterminate-text: $checkbox-checked-bg !default;
+/// Border color of indeterminate checkbox.
+/// @group checkbox
 $checkbox-indeterminate-border: $checkbox-border !default;
 
+/// Border color of focused checkbox.
+/// @group checkbox
 $checkbox-focused-border: null !default;
+/// Box shadow of focused checkbox.
+/// @group checkbox
 $checkbox-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
+/// Border color of focused and checked checkbox.
+/// @group checkbox
 $checkbox-focused-checked-border: null !default;
+/// Box shadow of focused and checked checkbox.
+/// @group checkbox
 $checkbox-focused-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
 
+/// Background color of disabled checkbox.
+/// @group checkbox
 $checkbox-disabled-bg: null !default;
+/// Color of disabled checkbox.
+/// @group checkbox
 $checkbox-disabled-text: null !default;
+/// Border color of disabled checkbox.
+/// @group checkbox
 $checkbox-disabled-border: null !default;
 
+/// Background color of disabled and checked checkbox.
+/// @group checkbox
 $checkbox-disabled-checked-bg: null !default;
+/// Color of disabled and checked checkbox.
+/// @group checkbox
 $checkbox-disabled-checked-text: null !default;
+/// Border color of disabled and checked checkbox.
+/// @group checkbox
 $checkbox-disabled-checked-border: null !default;
 
+/// Background color of invalid checkbox.
+/// @group checkbox
 $checkbox-invalid-bg: null !default;
+/// Color of invalid checkbox.
+/// @group checkbox
 $checkbox-invalid-text: $invalid-text !default;
+/// Border color of invalid checkbox.
+/// @group checkbox
 $checkbox-invalid-border: $invalid-border !default;
 
 
 // Checkbox indicator
-$checkbox-icon-type: glyph !default;
 
+/// Type of checkbox indicator.
+/// @group checkbox
+$checkbox-indicator-type: image !default;
+
+/// Glyph font family of checkbox indicator.
+/// @group checkbox
 $checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
 $checkbox-glyph-size: 12px !default;
+/// Glyph of checkbox indicator.
+/// @group checkbox
 $checkbox-checked-glyph: "\e118" !default;
+/// Glyph of indeterminate checkbox indicator.
+/// @group checkbox
 $checkbox-indeterminate-glyph: "\e121" !default;
 
-$checkbox-checked-image: null !default;
-$checkbox-indeterminate-image: null !default;
-
-$checkbox-marker-checked-width: ( $checkbox-size / 2 ) !default;
-$checkbox-marker-checked-height: ( $checkbox-size / 2 ) !default;
-$checkbox-marker-indeterminate-width: ( $checkbox-size / 2 ) !default;
-$checkbox-marker-indeterminate-height: ( $checkbox-size / 2 ) !default;
+/// Image of checked checkbox indicator.
+/// @group checkbox
+$checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+/// Image image of checked checkbox indicator.
+/// @group checkbox
+$checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
 
 
 // Checkbox label
@@ -6019,17 +6135,26 @@ $checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 
 // Checkbox list
-$checkbox-list-margin: 0px !default;
-$checkbox-list-padding: 0px !default;
+
+/// Spacing between items of horizontal checkbox list.
+/// @group checkbox
+$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+/// Horizontal padding of checkbox list items.
+/// @group checkbox
 $checkbox-list-item-padding-x: 0px !default;
+/// Vertical padding of checkbox list items.
+/// @group checkbox
 $checkbox-list-item-padding-y: $list-item-padding-y !default;
-$checkbox-list-horizontal-item-margin-x: 32px !default;
 
 
 // Checkbox ripple
 $checkbox-ripple-size: $checkbox-size * 3 !default;
-$checkbox-ripple-margin: calc(-1 * (#{$checkbox-size} + 2 * #{$checkbox-border-width})) !default;
-$checkbox-ripple-opacity: .3 !default;
+/// Background color of checkbox ripple.
+/// @group checkbox
+$checkbox-ripple-bg: $checkbox-checked-bg !default;
+/// Opacity of checkbox ripple.
+/// @group checkbox
+$checkbox-ripple-opacity: .25 !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/checkbox/_layout.scss
@@ -6058,28 +6183,17 @@ $checkbox-ripple-opacity: .3 !default;
         -webkit-appearance: none;
     }
 
+
     // Checkbox indicator
     .k-checkbox::before {
-        @if $checkbox-icon-type == "glyph" {
+        @if $checkbox-indicator-type == "glyph" {
             content: $checkbox-checked-glyph;
             width: $checkbox-glyph-size;
             height: $checkbox-glyph-size;
             font-size: $checkbox-glyph-size;
             font-family: $checkbox-glyph-font-family;
             line-height: 1;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-
-        @if $checkbox-icon-type == "marker" {
-            content: "";
-            width: $checkbox-marker-checked-width;
-            height: $checkbox-marker-checked-height;
-            background-color: currentColor;
-            transform: scale(0) translate(-50%, -50%);
+            transform: translate(-50%, -50%) scale(0);
             overflow: hidden;
             position: absolute;
             top: 50%;
@@ -6091,19 +6205,13 @@ $checkbox-ripple-opacity: .3 !default;
     // Checked state
     .k-checkbox:checked,
     .k-checkbox.k-checked {
-        @if $checkbox-icon-type == "image" {
+        @if $checkbox-indicator-type == "image" {
             background-image: $checkbox-checked-image;
         }
 
-        @if $checkbox-icon-type == "glyph" {
+        @if $checkbox-indicator-type == "glyph" {
             &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-
-        @if $checkbox-icon-type == "marker" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
+                transform: translate(-50%, -50%) scale(1);
             }
         }
     }
@@ -6113,22 +6221,14 @@ $checkbox-ripple-opacity: .3 !default;
     .k-checkbox:indeterminate,
     .k-checkbox.k-indeterminate,
     .k-checkbox.k-state-indeterminate {
-        @if $checkbox-icon-type == "image" {
+        @if $checkbox-indicator-type == "image" {
             background-image: $checkbox-indeterminate-image;
         }
 
-        @if $checkbox-icon-type == "glyph" {
+        @if $checkbox-indicator-type == "glyph" {
             &::before {
                 content: $checkbox-indeterminate-glyph;
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-
-        @if $checkbox-icon-type == "marker" {
-            &::before {
-                width: $checkbox-maker-indeterminate-width;
-                height: $checkbox-marker-indeterminate-height;
-                transform: scale(1) translate(-50%, -50%);
+                transform: translate(-50%, -50%) scale(1);
             }
         }
     }
@@ -6136,69 +6236,55 @@ $checkbox-ripple-opacity: .3 !default;
 
     // Disabled state
     .k-checkbox:disabled,
-    .k-checkbox.k-disabled,
-    .k-checkbox:disabled + .k-checkbox-label,
-    .k-checkbox.k-disabled + .k-checkbox-label {
+    .k-checkbox.k-disabled {
         @include disabled( $disabled-styling );
     }
 
+
+    // Checkbox wrap
+    .k-checkbox-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+        align-self: flex-start;
+        vertical-align: middle;
+        position: relative;
+
+        &::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: $checkbox-line-height;
         display: inline-flex;
         align-items: flex-start;
+        gap: $checkbox-label-margin-x;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
 
-        .k-label {
-            cursor: pointer;
-        }
-
         .k-ripple {
-            top: $checkbox-size / 2;
-            left: $checkbox-size / 2;
-            right: auto;
-            bottom: auto;
-            width: $checkbox-size * 5 / 2;
-            height: $checkbox-size * 5 / 2;
-            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-label,
+    .k-checkbox-wrap + .k-label,
     .k-checkbox + .k-checkbox-label,
-    .k-checkbox-label + .k-checkbox {
-        margin-left: $checkbox-label-margin-x;
-    }
-    .k-checkbox-label > .k-checkbox {
-        margin-right: $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: $checkbox-label-margin-x;
-    }
-    kendo-label.k-checkbox-label > .k-label {
+    .k-checkbox-wrap + .k-checkbox-label {
         display: inline;
+        margin-inline-start: $checkbox-label-margin-x;
     }
 
 
@@ -6206,9 +6292,6 @@ $checkbox-ripple-opacity: .3 !default;
     .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;
     }
@@ -6216,73 +6299,62 @@ $checkbox-ripple-opacity: .3 !default;
 
     // Checkbox list
     .k-checkbox-list {
-        margin: $checkbox-list-margin;
-        padding: $checkbox-list-padding;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
         list-style: none;
-
-        .k-checkbox-item {
-            padding: $checkbox-list-item-padding-y $checkbox-list-item-padding-x;
-        }
     }
+    .k-checkbox-item,
+    .k-checkbox-list-item {
+        padding: $checkbox-list-item-padding-y $checkbox-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-checkbox-item {
-            display: inline-block;
-            margin: 0 $checkbox-list-horizontal-item-margin-x 0 0;
-
-            &:last-child {
-                margin-right: 0;
-            }
+        .k-checkbox-label {
+            margin: 0;
         }
     }
+    .k-checkbox-list-horizontal,
+    .k-checkbox-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $checkbox-list-spacing;
+    }
 
 
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        .k-checkbox + .k-checkbox-label,
-        .k-checkbox-label + .k-checkbox {
-            margin-left: 0;
-            margin-right: $checkbox-label-margin-x;
-        }
-        .k-checkbox-label > .k-checkbox {
-            margin-right: 0;
-            margin-left: $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: $checkbox-label-margin-x;
-        }
-
-        .k-list-horizontal {
-            .k-checkbox-item {
-                margin-right: 0;
-                margin-left: $checkbox-list-horizontal-item-margin-x;
-
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
+    // Ripple
+    .k-checkbox-wrap .k-ripple-blob {
+        width: $checkbox-ripple-size;
+        height: $checkbox-ripple-size;
     }
-
     .k-ripple-container {
         .k-checkbox::after {
             content: "";
             display: block;
             position: absolute;
-            left: 0;
-            top: 0;
+            left: 50%;
+            top: 50%;
             width: $checkbox-ripple-size;
             height: $checkbox-ripple-size;
-            margin-left: $checkbox-ripple-margin;
-            margin-top: $checkbox-ripple-margin;
             border-radius: 100%;
-            z-index: 1;
-            transform: scale(0);
+            z-index: -1;
+            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
+            transform: translate(-50%, -50%) scale(0);
+            transform-origin: center center;
+        }
+
+        .k-checkbox:focus,
+        .k-checkbox.k-state-focus {
+            box-shadow: none !important; // sass-lint:disable-line no-important
+
+            &::after {
+                transform: translate(-50%, -50%) scale(1);
+            }
         }
 
         .k-checkbox:disabled::after,
@@ -6293,23 +6365,9 @@ $checkbox-ripple-opacity: .3 !default;
 
 }
 
-
-
-
-@include exports( "checkbox/layout/edge" ) {
-
-    .k-checkbox::-ms-check {
-        border-width: 1px;
-        border-color: inherit;
-        color: inherit;
-        background-color: inherit;
-    }
-
-}
-
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/checkbox/_theme.scss
-@include exports("checkbox/theme") {
+@include exports( "checkbox/theme" ) {
 
     // Checkbox
     .k-checkbox {
@@ -6406,9 +6464,13 @@ $checkbox-ripple-opacity: .3 !default;
 
 
     // Ripple
+    .k-checkbox-wrap .k-ripple-blob {
+        color: $checkbox-ripple-bg;
+        opacity: $checkbox-ripple-opacity;
+    }
     .k-ripple-container {
         .k-checkbox::after {
-            background: $checkbox-checked-bg;
+            background: $checkbox-ripple-bg;
             opacity: $checkbox-ripple-opacity;
         }
     }
@@ -6447,10 +6509,9 @@ $checkbox-ripple-opacity: .3 !default;
 
     .k-list__group-header { // sass-lint:disable-line class-name-format
         padding: $list-item-padding-y $list-item-padding-x;
-        min-height: $list-line-height-em;
         border-bottom-width: 1px;
         border-bottom-style: solid;
-        font-size: $font-size;
+        font-size: $list-font-size;
         white-space: normal;
         position: relative;
         transition: $transition;
@@ -6489,7 +6550,6 @@ $checkbox-ripple-opacity: .3 !default;
 
     .k-list__item { // sass-lint:disable-line class-name-format
         padding: $list-item-padding-y $list-item-padding-x;
-        min-height: $list-line-height-em;
         line-height: $list-line-height;
         white-space: normal;
         display: flex;
@@ -6503,12 +6563,6 @@ $checkbox-ripple-opacity: .3 !default;
         transition-timing-function: ease;
         outline: none;
 
-        .k-checkbox {
-            margin-top: calc( ( #{$list-line-height-em} - #{$checkbox-size} ) / 2 );
-            font-size: inherit;
-            align-self: flex-start;
-        }
-
         &.k-first::before {
             content: "";
             display: block;
@@ -6591,34 +6645,9 @@ $checkbox-ripple-opacity: .3 !default;
     }
 
 
+    // No data
     .k-list-container {
-
-        .k-button {
-            @include border-radius( 0 );
-            padding: $list-item-padding-y $list-item-padding-x;
-            border-width: 0;
-            color: inherit;
-            background-color: transparent;
-            background-image: none;
-            line-height: inherit;
-            display: flex;
-            justify-content: flex-start;
-
-            .k-ie11 & {
-                display: flex;
-
-                .k-icon {
-                    margin: 0 $icon-spacing 0 0;
-                }
-            }
-        }
-
-        // Button disabled state
-        .k-button.k-state-disabled {
-            pointer-events: none;
-        }
-
-        .k-nodata {
+        .k-no-data {
             min-height: 138px;
             width: 100%;
             display: flex;
@@ -6628,14 +6657,15 @@ $checkbox-ripple-opacity: .3 !default;
             font-weight: lighter;
             text-align: center;
             white-space: normal;
-
-            .k-button {
-                display: inline-flex;
-                border-width: 1px;
-            }
         }
     }
 
+
+    // Alias
+    .k-nodata {
+        @extend .k-no-data !optional;
+    }
+
 }
 
 // #endregion
@@ -6647,7 +6677,7 @@ $checkbox-ripple-opacity: .3 !default;
     .k-list__group-header { // sass-lint:disable-line class-name-format
         color: $component-text;
         border-color: $component-border;
-        box-shadow: $list-container-shadow;
+        box-shadow: $list-header-shadow;
     }
 
     .k-list__item__group { // sass-lint:disable-line class-name-format
@@ -6737,8 +6767,9 @@ $checkbox-ripple-opacity: .3 !default;
         }
 
 
-        .k-nodata {
-            color: $list-container-no-data-text;
+        // No data
+        .k-no-data {
+            color: $list-no-data-text;
         }
 
     }
@@ -7351,13 +7382,13 @@ $button-active-shadow: null !default;
 
 /// The background color of selected buttons.
 /// @group button
-$button-selected-bg: $primary !default;
+$button-selected-bg: $button-active-bg !default;
 /// The text color of selected buttons.
 /// @group button
-$button-selected-text: contrast-wcag( $button-selected-bg ) !default;
+$button-selected-text: $button-active-text !default;
 /// The border color of selected buttons.
 /// @group button
-$button-selected-border: $button-selected-bg !default;
+$button-selected-border: $button-active-border !default;
 /// The background gradient of selected buttons.
 /// @group button
 $button-selected-gradient: null !default;
@@ -7421,7 +7452,7 @@ $clear-button-focused-opacity: .1 !default;
 // #region @import "_variables.scss"; -> packages/default/scss/input/_variables.scss
 // Input
 
-$input-default-width: 200px !default;
+$input-default-width: 10em !default;
 
 $input-border-width: 1px !default;
 $input-border-height: ( $input-border-width * 2 ) !default;
@@ -7432,19 +7463,19 @@ $input-border-radius-lg: $border-radius !default;
 $input-padding-x: $padding-x !default;
 $input-padding-y: $padding-y !default;
 $input-font-family: $font-family !default;
-$input-font-size: $font-size !default;
-$input-line-height: $line-height !default;
+$input-font-size: $font-size-md !default;
+$input-line-height: $line-height-md !default;
 $input-line-height-em: $input-line-height * 1em !default;
 
 $input-padding-x-sm: ($input-padding-x / 2) !default;
 $input-padding-y-sm: ($input-padding-y / 2) !default;
 $input-font-size-sm: $input-font-size !default;
-$input-line-height-sm: $line-height-sm !default;
+$input-line-height-sm: $input-line-height !default;
 
 $input-padding-x-lg: ($input-padding-x * 1.5) !default;
 $input-padding-y-lg: ($input-padding-y * 1.5) !default;
 $input-font-size-lg: $input-font-size !default;
-$input-line-height-lg: $line-height-lg !default;
+$input-line-height-lg: $input-line-height !default;
 
 $input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-height} ) !default;
 $input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-height} ) !default;
@@ -7583,9 +7614,9 @@ $input-separator-opacity: .5 !default;
     .k-input-prefix,
     .k-input-suffix {
         display: flex;
+        flex-flow: row nowrap;
         align-items: center;
         flex-shrink: 0;
-        height: $button-inner-calc-size;
 
         > * {
             flex-shrink: 0;
@@ -8176,7 +8207,7 @@ $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: $list-item-focused-shadow !default;
 
-$menu-separator-spacing: 2px !default;
+$menu-separator-spacing: map-get( $spacing, 1 ) !default;
 
 $menu-scroll-button-bg: $component-bg !default;
 $menu-scroll-button-text: $link-text !default;
@@ -8344,8 +8375,6 @@ $grid-edit-cell-padding-y: 3px !default;
 
 $grid-command-cell-button-spacing: map-get( $spacing, 2 ) !default;
 
-$grid-search-width: $input-default-width !default;
-
 $grid-sticky-bg: $component-bg !default;
 $grid-sticky-text: $grid-text !default;
 $grid-sticky-border: rgba( black, .3 ) !default;
@@ -8365,7 +8394,7 @@ $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;
 
@@ -8466,13 +8495,13 @@ $table-footer-border: $grid-footer-border !default;
 
 /// Background color of group rows in table.
 /// @group table
-$table-group-row-bg: $grid-grouping-row-bg !default;
+$table-group-row-bg: $table-header-bg !default;
 /// Text color of group rows in table.
 /// @group table
-$table-group-row-text: $grid-grouping-row-text !default;
+$table-group-row-text: $table-header-text !default;
 /// Border color of group rows in table.
 /// @group table
-$table-group-row-border: null !default;
+$table-group-row-border: $table-header-border !default;
 
 
 /// Background color of alternating rows in table.
@@ -8523,7 +8552,7 @@ $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 {
@@ -8555,12 +8584,11 @@ $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 {
@@ -8581,6 +8609,9 @@ $table-selected-border: $grid-selected-border !default;
             border-left-width: 0;
         }
     }
+    .k-table-th {
+        border-bottom-width: 1px;
+    }
 
 
     // Table header
@@ -8599,8 +8630,27 @@ $table-selected-border: $grid-selected-border !default;
         width: 100%;
         border-width: 0 $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 {
+        font-size: $table-font-size;
+        line-height: $line-height;
+        flex: none;
+
+        .k-table-th {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            align-content: center;
+        }
+    }
 
 
     // Table list
@@ -8637,7 +8687,7 @@ $table-selected-border: $grid-selected-border !default;
         .k-table-group-row {
 
             &::before {
-                content: ".";
+                content: "\200b";
                 padding: $table-cell-padding-y 0;
                 width: 0;
                 display: block;
@@ -8679,7 +8729,8 @@ $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%;
     }
@@ -8712,6 +8763,7 @@ $table-selected-border: $grid-selected-border !default;
         width: 100%;
         border-width: 0 $table-cell-vertical-border-width 0 0;
         border-style: solid;
+        border-color: inherit;
         overflow: hidden;
     }
 
@@ -8754,7 +8806,7 @@ $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,
@@ -8767,7 +8819,8 @@ $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: $table-header-border;
         color: $table-header-text;
         background-color: $table-header-bg;
@@ -8918,14 +8971,24 @@ $table-selected-border: $grid-selected-border !default;
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/avatar/_variables.scss
 // Avatar
+
+/// Border width of the avatar.
+/// @group avatar
 $avatar-border-width: 1px !default;
 $avatar-border-radius: 2px !default;
 
+/// Font family of the avatar.
+/// @group avatar
 $avatar-font-family: $font-family !default;
+/// Font size of the avatar.
+/// @group avatar
 $avatar-font-size: $font-size !default;
+/// Line height of the avatar.
+/// @group avatar
 $avatar-line-height: $line-height !default;
 
-
+/// The sizes of the avatar.
+/// @group avatar
 $avatar-sizes: (
     sm: map-get( $spacing, 4 ),
     md: map-get( $spacing, 8 ),
@@ -10816,7 +10879,7 @@ $skeleton-wave-bg: rgba( black, .04 ) !default;
         transform: $skeleton-text-transform;
 
         &:empty::before {
-            content: "\00a0";
+            content: "\200b";
         }
     }
 
@@ -11099,8 +11162,6 @@ $tooltip-error-border: $tooltip-error-bg !default;
     .k-icon-button,
     .k-button.k-button-icon {
         padding: $button-padding-y;
-        width: $button-calc-size;
-        height: $button-calc-size;
         gap: 0;
 
         > .k-text,
@@ -11110,6 +11171,8 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
         .k-button-icon {
             margin: 0;
+            min-width: calc( #{$button-font-size} * #{$button-line-height} );
+            min-height: calc( #{$button-font-size} * #{$button-line-height} );
         }
     }
     // TODO: REMOVE
@@ -11857,8 +11920,9 @@ $tooltip-error-border: $tooltip-error-bg !default;
             @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;
@@ -11932,6 +11996,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;
@@ -11939,13 +12011,23 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
         // Button
         .k-overflow-button {
+            @include border-radius( 0 );
+            padding: $list-item-padding-y $list-item-padding-x;
             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( $button-border-width == 0, null, 0);
@@ -12036,13 +12118,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;
@@ -12054,6 +12129,41 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
     }
 
+
+    // Overflow container
+    .k-overflow-container {
+
+        .k-button {
+
+            // Hover state
+            &:hover,
+            &.k-state-hover {
+                color: $list-item-hovered-text;
+                background: $list-item-hovered-bg;
+            }
+
+            // Active state
+            &:active,
+            &.k-state-active {
+                color: $list-item-selected-text;
+                background: $list-item-selected-bg;
+            }
+
+            // Button focus state
+            .k-button:focus,
+            .k-button.k-state-focused {
+                box-shadow: $list-item-focused-shadow;
+            }
+
+            // Disabled state
+            &:disabled,
+            &.k-state-disabled {
+                color: inherit;
+            }
+        }
+
+    }
+
 }
 
 
@@ -12211,7 +12321,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;
 
@@ -12384,10 +12494,6 @@ $fieldset-legend-border: null !default;
             display: flex;
             flex-flow: row nowrap;
         }
-        .k-checkbox-label,
-        .k-radio-label {
-            display: inline-flex;
-        }
 
         .k-label + .k-radio {
             margin-left: 0;
@@ -12422,13 +12528,11 @@ $fieldset-legend-border: null !default;
             padding: 0;
         }
 
-        .k-form-field,
-        .k-daterangepicker .k-textbox-container {
+        .k-form-field {
             margin-top: $form-field-margin-top;
         }
 
-        > *,
-        .k-daterangepicker .k-textbox-container {
+        > * {
             &:not(.k-hidden):first-child,
             &.k-hidden + :not(.k-hidden) {
                 margin-top: 0;
@@ -12470,7 +12574,6 @@ $fieldset-legend-border: null !default;
         .k-dateinput,
         .k-datepicker,
         .k-datetimepicker,
-        .k-daterangepicker-wrap,
         .k-timepicker,
         .k-numerictextbox,
         .k-maskedtextbox,
@@ -12479,6 +12582,11 @@ $fieldset-legend-border: null !default;
             display: inline-flex;
             width: 100%;
         }
+        .k-daterangepicker {
+            width: 100%;
+            flex-flow: column nowrap;
+            gap: 0;
+        }
     }
 
     // Form Buttons Container
@@ -13507,7 +13615,7 @@ $textarea-invalid-focus-shadow: $invalid-shadow !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;
@@ -14014,56 +14122,109 @@ $progressbar-chunk-border: $body-bg !default;
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/radio/_variables.scss
 // Radio button
+
 $radio-size: map-get( $spacing, 4 ) !default;
+/// Border radius of radio button.
+/// @group radio
 $radio-radius: 50% !default;
+/// Border width of radio button.
+/// @group radio
 $radio-border-width: 1px !default;
-$radio-line-height: calc(#{$radio-size} + #{$radio-border-width}) !default;
 
+/// Background color of radio button.
+/// @group radio
 $radio-bg: $checkbox-bg !default;
+/// Color of radio button.
+/// @group radio
 $radio-text: $checkbox-text !default;
+/// Border color of radio button.
+/// @group radio
 $radio-border: $checkbox-border !default;
 
+/// Background color of hovered radio button.
+/// @group radio
 $radio-hovered-bg: $checkbox-hovered-bg !default;
+/// Color of hovered radio button.
+/// @group radio
 $radio-hovered-text: $checkbox-hovered-text !default;
+/// Border color of hovered radio button.
+/// @group radio
 $radio-hovered-border: $checkbox-hovered-border !default;
 
+/// Background color of checked radio button.
+/// @group radio
 $radio-checked-bg: $checkbox-checked-bg !default;
+/// Color of checked radio button.
+/// @group radio
 $radio-checked-text: $checkbox-checked-text !default;
+/// Border color of checked radio button.
+/// @group radio
 $radio-checked-border: $checkbox-checked-border !default;
 
-$radio-indeterminate-bg: $radio-checked-bg !default;
-$radio-indeterminate-text: $radio-checked-text !default;
-$radio-indeterminate-border: $radio-checked-border !default;
-
+/// Border color of focused radio button.
+/// @group radio
 $radio-focused-border: $checkbox-hovered-border !default;
+/// Box shadow of focused radio button.
+/// @group radio
 $radio-focused-shadow: $checkbox-focused-shadow !default;
+/// Border color of focused and checked radio button.
+/// @group radio
 $radio-focused-checked-border: $checkbox-checked-border !default;
+/// Box shadow of focused and checked radio button.
+/// @group radio
 $radio-focused-checked-shadow: $checkbox-focused-checked-shadow !default;
 
-$radio-disabled-bg: null !default;
-$radio-disabled-text: null !default;
-$radio-disabled-border: null !default;
-
-$radio-disabled-checked-bg: null !default;
-$radio-disabled-checked-text: null !default;
-$radio-disabled-checked-border: null !default;
+/// Background color of disabled radio button.
+/// @group radio
+$radio-disabled-bg: $checkbox-disabled-bg !default;
+/// Color of disabled radio button.
+/// @group radio
+$radio-disabled-text: $checkbox-disabled-text !default;
+/// Border color of disabled radio button.
+/// @group radio
+$radio-disabled-border: $checkbox-disabled-border !default;
+
+/// Background color of disabled and checked radio button.
+/// @group radio
+$radio-disabled-checked-bg: $checkbox-disabled-checked-bg !default;
+/// Color of disabled and checked radio button.
+/// @group radio
+$radio-disabled-checked-text: $checkbox-disabled-checked-text !default;
+/// Border color of disabled and checked radio button.
+/// @group radio
+$radio-disabled-checked-border: $checkbox-disabled-checked-border !default;
+
+/// Background color of invalid radio button.
+/// @group radio
+$radio-invalid-bg: $checkbox-invalid-bg !default;
+/// Color of invalid radio button.
+/// @group radio
+$radio-invalid-text: $checkbox-invalid-text !default;
+/// Border color of invalid radio button.
+/// @group radio
+$radio-invalid-border: $checkbox-invalid-border !default;
 
-$radio-invalid-bg: null !default;
-$radio-invalid-text: $invalid-text !default;
-$radio-invalid-border: $invalid-border !default;
+// Radio indicator
 
+/// Type of radio button indicator.
+/// @group radio
+$radio-indicator-type: image !default;
 
-// Radio indicator
-$radio-icon-type: marker !default;
 
+/// Glyph font family of radio button indicator.
+/// @group radio
 $radio-glyph-font-family: "WebComponentsIcons", monospace !default;
 $radio-glyph-size: 12px !default;
+/// Glyph of radio button indicator.
+/// @group radio
 $radio-checked-glyph: "\e308" !default;
 
-$radio-checked-image: null !default;
-
-$radio-marker-checked-width: ( $radio-size / 2 ) !default;
-$radio-marker-checked-height: ( $radio-size / 2 ) !default;
+/// Image of checked radio button indicator.
+/// @group radio
+$radio-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$radio-checked-text}'/></svg>") ) !default;
+/// Image of disabled and checked radio button indicator.
+/// @group radio
+$radio-disabled-checked-image: null !default;
 
 
 // Radio label
@@ -14071,17 +14232,26 @@ $radio-label-margin-x: map-get( $spacing, 1 ) !default;
 
 
 // Radio list
-$radio-list-margin: 0px !default;
-$radio-list-padding: 0px !default;
+
+/// Spacing between items of horizontal radio button list.
+/// @group radio
+$radio-list-spacing: map-get( $spacing, 4 ) !default;
+/// Horizontal padding of radio button list items.
+/// @group radio
 $radio-list-item-padding-x: 0px !default;
+/// Vertical padding of radio button list items.
+/// @group radio
 $radio-list-item-padding-y: $list-item-padding-y !default;
-$radio-list-horizontal-item-margin-x: 32px !default;
 
 
 // Radio ripple
 $radio-ripple-size: $radio-size * 3 !default;
-$radio-ripple-margin: calc(-1 * (#{$radio-size} + 2 * #{$radio-border-width})) !default;
-$radio-ripple-opacity: .3 !default;
+/// Background color of radio button ripple.
+/// @group radio
+$radio-ripple-bg: $radio-checked-bg !default;
+/// Opacity of radio button ripple.
+/// @group radio
+$radio-ripple-opacity: .25 !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/radio/_layout.scss
@@ -14110,9 +14280,10 @@ $radio-ripple-opacity: .3 !default;
         -webkit-appearance: none;
     }
 
+
     // Radio indicator
     .k-radio::before {
-        @if $radio-icon-type == "glyph" {
+        @if $radio-indicator-type == "glyph" {
             content: $radio-checked-glyph;
             width: $radio-glyph-size;
             height: $radio-glyph-size;
@@ -14125,179 +14296,151 @@ $radio-ripple-opacity: .3 !default;
             top: 50%;
             left: 50%;
         }
-
-        @if $radio-icon-type == "marker" {
-            content: "";
-            width: $radio-marker-checked-width;
-            height: $radio-marker-checked-width;
-            border-radius: 50%;
-            background-color: currentColor;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
     }
 
+
     // Checked state
     .k-radio:checked,
     .k-radio.k-checked {
-        @if $radio-icon-type == "image" {
+        @if $radio-indicator-type == "image" {
             background-image: $radio-checked-image;
         }
 
-        @if $radio-icon-type == "glyph" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-
-        @if $radio-icon-type == "marker" {
+        @if $radio-indicator-type == "glyph" {
             &::before {
                 transform: scale(1) translate(-50%, -50%);
             }
         }
     }
 
+
     // Disabled state
     .k-radio:disabled,
-    .k-radio.k-disabled,
-    .k-radio:disabled + .k-radio-label,
-    .k-radio.k-disabled + .k-radio-label {
+    .k-radio.k-disabled {
         @include disabled( $disabled-styling );
     }
+    .k-radio:disabled:checked,
+    .k-radio.k-disabled.k-checked {
+        @if $radio-indicator-type == "image" {
+            background-image: $radio-disabled-checked-image;
+        }
+    }
 
-    .k-radio + .k-radio-label {
-        display: inline;
+
+    // Radio wrap
+    .k-radio-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+        align-self: start;
+        vertical-align: middle;
+        position: relative;
+
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
     }
 
+
     // Radio label
     .k-radio-label {
         margin: 0;
         padding: 0;
-        line-height: $radio-line-height;
         display: inline-flex;
         align-items: flex-start;
+        gap: $radio-label-margin-x;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
 
-        .k-label {
-            cursor: pointer;
-        }
-
-        // Hide empty label
-        &:empty {
-            display: none !important; // sass-lint:disable-line no-important
-        }
-
         .k-ripple {
-            top: $radio-size / 2;
-            left: $radio-size / 2;
-            right: auto;
-            bottom: auto;
-            width: $radio-size * 5 / 2;
-            height: $radio-size * 5 / 2;
-            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-radio + .k-label,
+    .k-radio-wrap + .k-label,
     .k-radio + .k-radio-label,
-    .k-radio-label + .k-radio,
-    .k-label + .k-radio {
-        margin-left: $radio-label-margin-x;
+    .k-radio-wrap + .k-radio-label {
+        display: inline;
+        margin-inline-start: $radio-label-margin-x;
     }
-    .k-radio-label > .k-radio {
-        margin-right: $radio-label-margin-x;
-        flex-shrink: 0;
+
+
+    // Empty label
+    .k-radio-label:empty {
+        display: none !important; // sass-lint:disable-line no-important
     }
-    kendo-label.k-radio-label > .k-label {
-        display: inline;
+    .k-radio-label.k-no-text {
+        min-width: 1px;
     }
 
+
     // Radio list
     .k-radio-list {
-        margin: $radio-list-margin;
-        padding: $radio-list-padding;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
         list-style: none;
-
-        .k-radio-item {
-            padding: $radio-list-item-padding-y $radio-list-item-padding-x;
-        }
     }
+    .k-radio-item,
+    .k-radio-list-item {
+        padding: $radio-list-item-padding-y $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 $radio-list-horizontal-item-margin-x 0 0;
-
-            &:last-child {
-                margin-right: 0;
-            }
+        .k-radio-label {
+            margin: 0;
         }
     }
+    .k-radio-list-horizontal,
+    .k-radio-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $radio-list-spacing;
+    }
 
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        .k-radio + .k-radio-label,
-        .k-radio-label + .k-radio,
-        .k-label + .k-radio {
-            margin-left: 0;
-            margin-right: $radio-label-margin-x;
-        }
-        .k-radio-label > .k-radio {
-            margin-right: 0;
-            margin-left: $radio-label-margin-x;
-        }
-        kendo-label.k-radio-label > .k-radio:last-child {
-            margin-left: 0;
-        }
-        kendo-label.k-radio-label > .k-label:first-child {
-            margin-right: 0;
-            margin-left: $radio-label-margin-x;
-        }
-
-        .k-list-horizontal {
-            .k-radio-item {
-                margin-right: 0;
-                margin-left: $radio-list-horizontal-item-margin-x;
 
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
+    // Ripple
+    .k-radio-wrap .k-ripple-blob {
+        width: $radio-ripple-size;
+        height: $radio-ripple-size;
     }
-
     .k-ripple-container {
         .k-radio::after {
             content: "";
             display: block;
             position: absolute;
-            left: 0;
-            top: 0;
+            left: 50%;
+            top: 50%;
             width: $radio-ripple-size;
             height: $radio-ripple-size;
-            margin-left: $radio-ripple-margin;
-            margin-top: $radio-ripple-margin;
             border-radius: 100%;
-            z-index: 1;
-            transform: scale(0);
+            z-index: -1;
+            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
+            transform: translate(-50%, -50%) scale(0);
+            transform-origin: center center;
+        }
+
+        .k-radio:focus,
+        .k-radio.k-state-focus {
+            box-shadow: none !important; // sass-lint:disable-line no-important
+
+            &::after {
+                transform: translate(-50%, -50%) scale(1);
+            }
         }
 
         .k-radio:disabled::after,
@@ -14305,32 +14448,12 @@ $radio-ripple-opacity: .3 !default;
             display: none;
         }
     }
-}
-
-
-
-
-@include exports( "radio/layout/edge" ) {
-
-    .k-radio::-ms-check {
-        border-width: 0;
-        border-color: inherit;
-        color: inherit;
-        background-color: inherit;
-    }
-
-    // IE 11 hack
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-        .k-radio::-ms-check {
-            border-width: 1px;
-        }
-    }
 
 }
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/radio/_theme.scss
-@include exports("radio/theme") {
+@include exports( "radio/theme" ) {
 
     // Radio
     .k-radio {
@@ -14385,7 +14508,6 @@ $radio-ripple-opacity: .3 !default;
             $radio-checked-border
         );
     }
-
     .k-radio:checked:focus,
     .k-radio.k-checked.k-state-focus {
         @include fill( $border: $radio-focused-checked-border );
@@ -14411,6 +14533,7 @@ $radio-ripple-opacity: .3 !default;
         );
     }
 
+
     // Ripple
     .k-ripple-container {
         .k-radio::after {
@@ -15543,7 +15666,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
                 display: block;
                 position: absolute;
                 bottom: 0;
-                content: " ";
+                content: "\200b";
                 height: 0;
                 line-height: 0;
                 z-index: 1;
@@ -15581,7 +15704,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         &::after {
             display: block;
             position: absolute;
-            content: " ";
+            content: "\200b";
             height: 0;
             line-height: 0;
             z-index: 1;
@@ -15680,18 +15803,6 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
 
 
-
-@include exports("daterangepicker/layout") {
-
-    // jQuery DateRangePicker
-    .k-widget.k-daterangepicker {
-        border: 0;
-    }
-
-}
-
-
-
 @include exports("calendar/layout/rtl") {
 
     .k-rtl .k-calendar,
@@ -16145,7 +16256,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
             &::before,
             &::after {
                 display: block;
-                content: " ";
+                content: "\200b";
                 position: absolute;
                 width: 100%;
                 left: 0;
@@ -16181,7 +16292,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
         &::after {
             display: block;
             position: absolute;
-            content: " ";
+            content: "\200b";
             height: 0;
             line-height: 0;
             z-index: 1;
@@ -16356,25 +16467,6 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/autocomplete/_variables.scss
 // Autocomplete
-$autocomplete-bg: $input-bg !default;
-$autocomplete-text: $input-text !default;
-$autocomplete-border: $input-border !default;
-$autocomplete-shadow: $input-shadow !default;
-
-$autocomplete-hovered-bg: $input-hovered-bg !default;
-$autocomplete-hovered-text: $input-hovered-text !default;
-$autocomplete-hovered-border: $input-hovered-border !default;
-$autocomplete-hovered-shadow: $input-hovered-shadow !default;
-
-$autocomplete-focused-bg: $input-focused-bg !default;
-$autocomplete-focused-text: $input-focused-text !default;
-$autocomplete-focused-border: $input-focused-border !default;
-$autocomplete-focused-shadow: $input-focused-shadow !default;
-
-$autocomplete-disabled-bg: null !default;
-$autocomplete-disabled-text: null !default;
-$autocomplete-disabled-border: null !default;
-$autocomplete-disabled-shadow: null !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/autocomplete/_layout.scss
@@ -16420,79 +16512,60 @@ $autocomplete-disabled-shadow: null !default;
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/autocomplete/_theme.scss
-@include exports("autocomplete/theme") {
+@include exports( "autocomplete/theme" ) {
 
-    // Remove first selector when https://github.com/telerik/kendo-angular-dropdowns/issues/656 is done.
-    .k-autocomplete.k-header,
+    // Autocomplete
     .k-autocomplete {
         @include fill(
-            $autocomplete-text,
-            $autocomplete-bg,
-            $autocomplete-border
+            $input-text,
+            $input-bg,
+            $input-border
         );
-        @include box-shadow( $autocomplete-shadow );
 
         // Hover state
         &:hover,
         &.k-state-hover {
             @include fill(
-                $autocomplete-hovered-text,
-                $autocomplete-hovered-bg,
-                $autocomplete-hovered-border
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
             );
-            @include box-shadow( $autocomplete-hovered-shadow );
         }
 
         // Focus state
-        // &:focus-within,
-        &.k-state-focused,
+        &:focus,
         &.k-state-focus {
             @include fill(
-                $autocomplete-focused-text,
-                $autocomplete-focused-bg,
-                $autocomplete-focused-border
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
-            @include box-shadow( $autocomplete-focused-shadow );
+            @include box-shadow( $input-focused-shadow );
         }
         &:focus-within {
             @include fill(
-                $autocomplete-focused-text,
-                $autocomplete-focused-bg,
-                $autocomplete-focused-border
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
-            @include box-shadow( $autocomplete-focused-shadow );
+            @include box-shadow( $input-focused-shadow );
         }
 
-        // Disabled state
-        &:disabled,
-        &.k-state-disabled {
-            @include fill(
-                $autocomplete-disabled-text,
-                $autocomplete-disabled-bg,
-                $autocomplete-disabled-border
-            );
-            @include box-shadow( $autocomplete-disabled-shadow );
-        }
 
         // Invalid state
         &.k-invalid,
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
+        &.ng-invalid,
+        &.k-state-invalid {
             border-color: $invalid-border;
 
             .k-input-validation-icon {
                 color: $invalid-text;
             }
 
-            // &:focus-within,
-            &.k-state-focused,
+            &:focus-within,
             &.k-state-focus {
                 @include box-shadow($invalid-shadow);
             }
-            &:focus-within {
-                @include box-shadow($invalid-shadow);
-            }
         }
     }
 
@@ -16799,72 +16872,33 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/numerictextbox/_variables.scss
 // Numeric Textbox
-$numeric-bg: $input-bg !default;
-$numeric-text: $input-text !default;
-$numeric-border: $input-border !default;
-
-$numeric-hovered-bg: $input-hovered-bg !default;
-$numeric-hovered-text: $input-hovered-text !default;
-$numeric-hovered-border: $input-hovered-border !default;
-
-$numeric-focused-bg: $input-focused-bg !default;
-$numeric-focused-text: $input-focused-text !default;
-$numeric-focused-border: $input-focused-border !default;
-$numeric-focused-shadow: $input-focused-shadow !default;
-
-$numeric-button-bg: $button-bg !default;
-$numeric-button-text: $button-text !default;
-$numeric-button-border: $button-border !default;
-$numeric-button-gradient: $button-gradient !default;
-
-$numeric-button-hovered-bg: $button-hovered-bg !default;
-$numeric-button-hovered-text: $button-hovered-text !default;
-$numeric-button-hovered-border: $button-hovered-border !default;
-$numeric-button-hovered-gradient: $button-hovered-gradient !default;
-
-$numeric-button-pressed-bg: $button-active-bg !default;
-$numeric-button-pressed-text: $button-active-text !default;
-$numeric-button-pressed-border: $button-active-border !default;
-$numeric-button-pressed-gradient: $button-active-gradient !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/numerictextbox/_layout.scss
-@include exports("numerictextbox/layout") {
+@include exports( "numerictextbox/layout" ) {
 
     // Numeric textbox
     .k-numerictextbox {
+        @include border-radius( $input-border-radius );
         width: $input-default-width;
-        border-width: 0;
+        border-width: $input-border-width;
+        border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        background: none;
         font-family: $input-font-family;
         font-size: $input-font-size;
         line-height: $input-line-height;
-        text-align: left;
+        text-align: start;
         white-space: nowrap;
         display: inline-flex;
+        flex-flow: row nowrap;
         vertical-align: middle;
         position: relative;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        .k-numeric-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: $input-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: default;
-            outline: 0;
-            display: flex;
-            flex-flow: row nowrap;
-            overflow: hidden;
-        }
-
 
         // Input
         .k-input {
@@ -16880,6 +16914,7 @@ $numeric-button-pressed-gradient: $button-active-gradient !default;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
             box-sizing: border-box;
+            outline: 0;
             display: flex;
             flex-direction: column;
             align-items: stretch;
@@ -16912,13 +16947,6 @@ $numeric-button-pressed-gradient: $button-active-gradient !default;
         .k-link-decrease .k-icon {
             top: -$spinner-icon-offset;
         }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-        }
     }
 
 }
@@ -16927,110 +16955,90 @@ $numeric-button-pressed-gradient: $button-active-gradient !default;
 // #region @import "_theme.scss"; -> packages/default/scss/numerictextbox/_theme.scss
 @include exports( "numerictextbox/theme" ) {
 
-    // Numeric
+    // Numeric textbox
     .k-numerictextbox {
+        @include fill(
+            $input-text,
+            $input-bg,
+            $input-border
+        );
 
-        .k-i-warning {
-            color: $error;
+        // Hover state
+        &:hover,
+        &.k-state-hover {
+            @include fill(
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
+            );
         }
 
-        // Normal state
-        .k-numeric-wrap {
+        // Focus state
+        &:focus,
+        &.k-state-focus {
             @include fill(
-                $numeric-text,
-                $numeric-bg,
-                $numeric-border
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
+            @include box-shadow( $input-focused-shadow );
+        }
+        &:focus-within {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
 
 
-            // Hover state
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $numeric-hovered-text,
-                    $numeric-hovered-bg,
-                    $numeric-hovered-border
-                );
-            }
-
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
 
-            // Focus state
-            &.k-state-focused {
-                @include fill(
-                    $numeric-focused-text,
-                    $numeric-focused-bg,
-                    $numeric-focused-border
-                );
-                @include box-shadow($numeric-focused-shadow);
+            .k-input-validation-icon {
+                color: $invalid-text;
             }
 
-            // Invalid state
-            &.k-invalid,
-            &.k-invalid:hover,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
             }
         }
 
 
-        // Select buttons
+        // Spinner
         .k-select {
             @include fill(
-                $numeric-button-text,
-                $numeric-button-bg,
-                $numeric-button-border,
-                $numeric-button-gradient
+                $picker-select-text,
+                $picker-select-bg,
+                $picker-select-border,
+                $picker-select-gradient
             );
-
-            .k-link:hover,
-            .k-link.k-state-hover {
-                @include fill(
-                    $numeric-button-hovered-text,
-                    $numeric-button-hovered-bg,
-                    $numeric-button-hovered-border,
-                    $numeric-button-hovered-gradient
-                );
-            }
-
-            .k-link:active,
-            .k-link.k-state-active,
-            .k-link.k-state-selected {
-                @include fill(
-                    $numeric-button-pressed-text,
-                    $numeric-button-pressed-bg,
-                    $numeric-button-pressed-border,
-                    $numeric-button-pressed-gradient
-                );
-            }
         }
-
-
-        // Invalid state
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-numeric-wrap {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
+        .k-link:hover,
+        .k-link.k-state-hover {
+            @include fill(
+                $picker-select-hovered-text,
+                $picker-select-hovered-bg,
+                $picker-select-hovered-border,
+                $picker-select-hovered-gradient
+            );
+        }
+        .k-link:active,
+        .k-link.k-state-active {
+            @include fill(
+                $picker-select-pressed-text,
+                $picker-select-pressed-bg,
+                $picker-select-pressed-border,
+                $picker-select-pressed-gradient
+            );
         }
     }
+
 }
 
 // #endregion
@@ -18550,6 +18558,58 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
 
 // #endregion
 
+// #endregion
+// #region @import "daterangepicker/_index.scss"; -> packages/default/scss/daterangepicker/_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/daterangepicker/_variables.scss
+// Daterangepicker
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/daterangepicker/_layout.scss
+@include exports( "daterangepicker/layout" ) {
+
+    // Daterange picker
+    .k-daterangepicker {
+        border: 0;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: map-get( $spacing, 2 );
+    }
+
+
+    // Angular specific
+    kendo-daterange {
+        // @extend .k-daterangepicker;
+    }
+
+
+    // React specific
+    .k-daterangepicker-wrap {
+        display: inherit;
+        flex-flow: inherit;
+        align-items: inherit;
+        gap: inherit;
+    }
+
+}
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/default/scss/daterangepicker/_theme.scss
+@include exports("daterangepicker/theme") {
+
+}
+
+// #endregion
+
 // #endregion
 // #region @import "dropdowngrid/_index.scss"; -> packages/default/scss/dropdowngrid/_index.scss
 // #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
@@ -19548,60 +19608,114 @@ $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/treeview/_variables.scss
 // Treeview
-$treeview-padding-x: 0px !default;
-$treeview-padding-y: 0px !default;
-$treeview-font-family: $font-family !default;
-$treeview-font-size: $font-size !default;
-$treeview-line-height: $line-height !default;
 
+/// Font family of the treeview component.
+/// @group treeview
+$treeview-font-family: $font-family !default;
+/// Font size of the treeview component.
+/// @group treeview
+$treeview-font-size: $font-size-md !default;
+/// Line height of the treeview component.
+/// @group treeview
+$treeview-line-height: $line-height-md !default;
+
+/// Indentation of child groups in treeview component.
+/// @group treeview
 $treeview-indent: 16px !default;
 
+/// Horizontal padding of treeview items.
+/// @group treeview
 $treeview-item-padding-x: map-get( $spacing, 2 ) !default;
+/// Vertical padding of treeview items.
+/// @group treeview
 $treeview-item-padding-y: map-get( $spacing, 1 ) !default;
+/// Border width of treeview items.
+/// @group treeview
 $treeview-item-border-width: 0px !default;
+/// Border radius of treeview items.
+/// @group treeview
 $treeview-item-border-radius: null !default;
 
+/// Background color of the treeview component.
+/// @group treeview
 $treeview-bg: null !default;
+/// Text color of the treeview component.
+/// @group treeview
 $treeview-text: $component-text !default;
+/// Border color of the treeview component.
+/// @group treeview
 $treeview-border: null !default;
 
+/// Background color of hovered treeview items.
+/// @group treeview
 $treeview-item-hovered-bg: $hovered-bg !default;
+/// Text color of hovered treeview items.
+/// @group treeview
 $treeview-item-hovered-text: $hovered-text !default;
+/// Border color of hovered treeview items.
+/// @group treeview
 $treeview-item-hovered-border: null !default;
+/// Background gradient of hovered treeview items.
+/// @group treeview
 $treeview-item-hovered-gradient: null !default;
 
+/// Background color of selected treeview items.
+/// @group treeview
 $treeview-item-selected-bg: $selected-bg !default;
+/// Text color of selected treeview items.
+/// @group treeview
 $treeview-item-selected-text: $selected-text !default;
+/// Border color of selected treeview items.
+/// @group treeview
 $treeview-item-selected-border: null !default;
+/// Background gradient of selected treeview items.
+/// @group treeview
 $treeview-item-selected-gradient: null !default;
 
+/// Box shadow of focused treeview items.
+/// @group treeview
 $treeview-item-focused-shadow: $focused-shadow !default;
-$treeview-item-selected-focused-shadow: null !default;
-
-$treeview-loadmore-checkboxes-padding-x: calc( #{$icon-spacing} + #{$checkbox-size} + #{$treeview-indent} ) !default;
-$treeview-loadmore-checkboxes-icon-indent: calc( -1 * (#{$icon-spacing} + #{$treeview-indent}) ) !default;
-$treeview-loadmore-checkboxes-icon-margin-x: $icon-spacing !default;
 
+/// Background color of load more.
+/// @group treeview
 $treeview-loadmore-bg: transparent !default;
-$treeview-loadmore-text: $primary !default;
+/// Text color of load more.
+/// @group treeview
+$treeview-loadmore-text: $link-text !default;
+/// Border color of load more.
+/// @group treeview
 $treeview-loadmore-border: null !default;
 
+/// Background color of a hovered load more.
+/// @group treeview
 $treeview-loadmore-hover-bg: transparent !default;
-$treeview-loadmore-hover-text: $primary-darker !default;
+/// Text color of a hovered load more.
+/// @group treeview
+$treeview-loadmore-hover-text: $link-hover-text !default;
+/// Border color of a hovered load more.
+/// @group treeview
 $treeview-loadmore-hover-border: null !default;
 
+/// Background color of a focused load more.
+/// @group treeview
 $treeview-loadmore-focus-bg: transparent !default;
-$treeview-loadmore-focus-text: $primary !default;
+/// Text color of a focused load more.
+/// @group treeview
+$treeview-loadmore-focus-text: $link-hover-text !default;
+/// Border color of a focused load more.
+/// @group treeview
 $treeview-loadmore-focus-border: null !default;
-$treeview-loadmore-focus-shadow: none !default;
+/// Box shadow of a focused load more.
+/// @group treeview
+$treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/treeview/_layout.scss
 @include exports("treeview/layout") {
 
-    // Base
+    // Treeview
     .k-treeview {
-        padding: $treeview-padding-y $treeview-padding-x;
+        padding: 0;
         border-width: 0;
         background: none;
         box-sizing: border-box;
@@ -19615,158 +19729,178 @@ $treeview-loadmore-focus-shadow: none !default;
         white-space: nowrap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+    }
 
-        > .k-group {
-            outline: 0;
-            -webkit-touch-callout: none;
-            -webkit-tap-highlight-color: $rgba-transparent;
-        }
 
-        .k-content,
-        > .k-group,
-        .k-item > .k-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;
+        background: none;
+        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-top,
-        .k-mid,
-        .k-bot {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            align-content: center;
-        }
 
-        // Items
-        .k-item {
-            outline-style: none;
-            margin: 0;
-            padding: 0 0 0 $treeview-indent;
-            border-width: 0;
-            display: block;
-        }
+    // Treeview wrappers
+    .k-treeview-top,
+    .k-treeview .k-top,
+    .k-treeview-mid,
+    .k-treeview .k-mid,
+    .k-treeview-bot,
+    .k-treeview .k-bot {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        align-content: center;
+    }
 
-        // Link
-        .k-in {
-            @include border-radius( $treeview-item-border-radius );
-            margin: 0;
-            padding: $treeview-item-padding-y $treeview-item-padding-x;
-            border: $treeview-item-border-width solid transparent;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            align-content: center;
-            vertical-align: middle;
-            position: relative;
-        }
-        .k-in.k-state-focused {
-            z-index: 1;
-        }
 
-        // LoadMore button
-        .k-treeview-load-more-button {
-            cursor: pointer;
+    // Treeview item
+    .k-treeview-item,
+    .k-treeview .k-item {
+        outline-style: none;
+        margin: 0;
+        padding: 0 0 0 $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: $treeview-loadmore-checkboxes-padding-x;
 
-            .k-i-loading {
-                margin-left: $treeview-loadmore-checkboxes-icon-indent;
-                margin-right: $treeview-loadmore-checkboxes-icon-margin-x;
-            }
-        }
+    // Treeview toggle
+    .k-treeview-toggle {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
 
-        // Expand / collapse
         .k-i-expand,
         .k-i-collapse {
-            margin-left: -$treeview-indent;
-            cursor: pointer;
+            margin: 0 !important; // sass-lint:disable-line no-important
+        }
+    }
+    .k-treeview-toggle,
+    .k-treeview .k-i-expand,
+    .k-treeview .k-i-collapse {
+        margin-left: -$treeview-indent;
+        cursor: pointer;
 
-            + .k-checkbox-wrapper {
-                margin-left: $icon-spacing;
-            }
+        + .k-checkbox-wrap,
+        + .k-checkbox-wrapper {
+            margin-left: $icon-spacing;
         }
+    }
 
-        // Checkboxes
-        .k-checkbox-wrapper {
+
+    // Loading icon
+    .k-treeview-loading {
+        margin-right: $icon-spacing;
+    }
+
+
+    // Checkbox
+    .k-treeview .k-checkbox-wrap,
+    .k-treeview .k-checkbox-wrapper {
+        margin-right: $icon-spacing;
+        align-self: center;
+    }
+
+
+    // Treeview leaf
+    .k-treeview-leaf,
+    .k-treeview .k-in {
+        @include border-radius( $treeview-item-border-radius );
+        margin: 0;
+        padding: $treeview-item-padding-y $treeview-item-padding-x;
+        border: $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-in .k-icon,
-        .k-in .k-image,
-        .k-in .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;
         }
     }
 
+
     // RTL
     .k-rtl .k-treeview,
     .k-treeview[dir="rtl"] {
 
-        // Items
-        .k-item {
+        // Treeview item
+        .k-item,
+        .k-treeview-item {
             padding-left: 0;
             padding-right: $treeview-indent;
         }
 
-        .k-treeview-load-more-checkboxes-container {
-            padding-left: 0;
-            padding-right: $treeview-loadmore-checkboxes-padding-x;
-
-            .k-i-loading {
-                margin-left: $treeview-loadmore-checkboxes-icon-margin-x;
-                margin-right: $treeview-loadmore-checkboxes-icon-indent;
-            }
-        }
-
-        // Expand / collapse
+        // Treeview toggle
         .k-i-expand,
-        .k-i-collapse {
+        .k-i-collapse,
+        .k-treeview-toggle {
             margin-left: 0;
             margin-right: -$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-in .k-icon,
-        .k-in .k-image,
-        .k-in .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;
+            }
         }
 
     }
@@ -19776,22 +19910,27 @@ $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(
             $treeview-text,
             $treeview-bg,
             $treeview-border
         );
+    }
 
 
-        // Item
-        .k-in {}
+    // Treeview item
+    .k-treeview-item {}
 
 
-        // Interactive states
-        .k-in:hover,
-        .k-in.k-state-hover {
+    // Treeview leaf
+    .k-treeview-leaf,
+    .k-treeview .k-in {
+
+        // Hover state
+        &:hover,
+        &.k-state-hover {
             @include fill(
                 $treeview-item-hovered-text,
                 $treeview-item-hovered-bg,
@@ -19799,7 +19938,15 @@ $treeview-loadmore-focus-shadow: none !default;
                 $treeview-item-hovered-gradient
             );
         }
-        .k-in.k-state-selected {
+
+        // Focus state
+        &.k-state-focus,
+        &.k-state-focused {
+            @include box-shadow( $treeview-item-focused-shadow );
+        }
+
+        // Selected state
+        &.k-state-selected {
             @include fill(
                 $treeview-item-selected-text,
                 $treeview-item-selected-bg,
@@ -19807,24 +19954,20 @@ $treeview-loadmore-focus-shadow: none !default;
                 $treeview-item-selected-gradient
             );
         }
-        .k-in.k-state-focused {
-            @include box-shadow( $treeview-item-focused-shadow );
-        }
-        .k-in.k-state-selected.k-state-focused {
-            @include box-shadow( $treeview-item-selected-focused-shadow );
-        }
+    }
 
-        // LoadMore button
-        .k-treeview-load-more-button {
-            @include fill(
-                $treeview-loadmore-text,
-                $treeview-loadmore-bg,
-                $treeview-loadmore-border
-            );
-        }
 
-        .k-treeview-load-more-button:hover,
-        .k-treeview-load-more-button.k-state-hover {
+    // Treeview load more button
+    .k-treeview .k-treeview-load-more-button {
+        @include fill(
+            $treeview-loadmore-text,
+            $treeview-loadmore-bg,
+            $treeview-loadmore-border
+        );
+
+        // Hover state
+        &:hover,
+        &.k-state-hover {
             @include fill(
                 $treeview-loadmore-hover-text,
                 $treeview-loadmore-hover-bg,
@@ -19832,8 +19975,10 @@ $treeview-loadmore-focus-shadow: none !default;
             );
         }
 
-        .k-treeview-load-more-button:focus,
-        .k-treeview-load-more-button.k-state-focused {
+        // Focus state
+        &:focus,
+        &.k-state-focus,
+        &.k-state-focused {
             @include fill(
                 $treeview-loadmore-focus-text,
                 $treeview-loadmore-focus-bg,
@@ -20224,26 +20369,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/searchbox/_variables.scss
 // Searchbox
-$searchbox-padding-x: $input-padding-x !default;
-$searchbox-padding-y: $input-padding-y !default;
-$searchbox-border-width: $input-border-width !default;
-$searchbox-border-radius: $input-border-radius !default;
-
-$searchbox-font-family: $input-font-family !default;
-$searchbox-font-size: $input-font-size !default;
-$searchbox-line-height: $input-line-height !default;
-
-$searchbox-bg: $input-bg !default;
-$searchbox-text: $input-text !default;
-$searchbox-border: $input-border !default;
-
-$searchbox-hover-bg: $input-hovered-bg !default;
-$searchbox-hover-text: $input-hovered-text !default;
-$searchbox-hover-border: $input-hovered-border !default;
-
-$searchbox-focus-bg: $input-focused-bg !default;
-$searchbox-focus-text: $input-focused-text !default;
-$searchbox-focus-border: $input-focused-border !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/searchbox/_layout.scss
@@ -20251,22 +20376,36 @@ $searchbox-focus-border: $input-focused-border !default;
 
     // Searchbox
     .k-searchbox {
-        @include border-radius( $searchbox-border-radius );
-        border-width: 1px;
+        @include border-radius( $input-border-radius );
+        width: $input-default-width;
+        border-width: $input-border-width;
         border-style: solid;
         box-sizing: border-box;
-        font-family: $searchbox-font-family;
-        font-size: $searchbox-font-size;
-        line-height: $searchbox-line-height;
+        outline: 0;
+        font-family: $input-font-family;
+        font-size: $input-font-size;
+        line-height: $input-line-height;
+        text-align: start;
+        white-space: nowrap;
         display: inline-flex;
-        align-items: center;
-        vertical-align: middle;
         flex-flow: row nowrap;
+        vertical-align: middle;
         position: relative;
         overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
 
+        // Input
         > .k-input {
-            padding: $searchbox-padding-y $searchbox-padding-x;
+            padding: $input-padding-y $input-padding-x;
+        }
+
+
+        // Loading icon
+        .k-i-loading {
+            width: $input-icon-width;
+            height: $input-icon-height;
         }
     }
 
@@ -20279,53 +20418,44 @@ $searchbox-focus-border: $input-focused-border !default;
     // Searchbox
     .k-searchbox {
         @include fill(
-            $searchbox-text,
-            $searchbox-bg,
-            $searchbox-border
+            $input-text,
+            $input-bg,
+            $input-border
         );
 
-
         // Hover state
         &:hover,
         &.k-state-hover {
             @include fill(
-                $searchbox-hover-text,
-                $searchbox-hover-bg,
-                $searchbox-hover-border
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
             );
         }
 
-
         // Focus state
         &:focus,
-        // &:focus-within,
         &.k-state-focus {
             @include fill(
-                $searchbox-focus-text,
-                $searchbox-focus-bg,
-                $searchbox-focus-border
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
             @include box-shadow( $input-focused-shadow );
         }
         &:focus-within {
             @include fill(
-                $searchbox-focus-text,
-                $searchbox-focus-bg,
-                $searchbox-focus-border
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
             @include box-shadow( $input-focused-shadow );
         }
 
 
-        // Disabled
-        &:disabled,
-        &.k-state-disabled {
-            @include disabled( $disabled-styling );
-        }
-
-
-        // Invalid
+        // Invalid state
         &.k-invalid,
+        &.ng-invalid,
         &.k-state-invalid {
             border-color: $invalid-border;
 
@@ -20333,13 +20463,13 @@ $searchbox-focus-border: $input-focused-border !default;
                 color: $invalid-text;
             }
 
-            &:focus,
+            &:focus-within,
             &.k-state-focus {
                 @include box-shadow($invalid-shadow);
             }
         }
-
     }
+
 }
 
 // #endregion
@@ -21532,7 +21662,7 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 $appbar-margin-y: null !default;
 $appbar-margin-x: null !default;
 $appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 4 ) !default;
+$appbar-padding-x: map-get( $spacing, 2 ) !default;
 $appbar-border-width: 0px !default;
 
 $appbar-zindex: 1000 !default;
@@ -22159,10 +22289,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: 0 0 auto;
+        flex-flow: column nowrap;
+        flex: none;
         position: relative;
         user-select: none;
     }
@@ -22174,7 +22306,7 @@ $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;
         align-items: center;
         position: relative;
@@ -22189,10 +22321,22 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     }
 
 
+    // Menu item text
+    .k-menu-link-text {
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+
     // Expand arrow
     .k-menu-expand-arrow {
         margin-left: $icon-spacing;
         margin-right: -$icon-spacing;
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
         position: relative;
     }
     .k-menu-expand-arrow.k-i-arrow-60-left,
@@ -22239,6 +22383,14 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
         > .k-menu-item > .k-menu-link {
             padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
             padding-right: $menu-popup-item-padding-end;
+
+            .k-menu-expand-arrow {
+                margin: 0;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: $icon-spacing;
+            }
         }
 
         > .k-separator {
@@ -22291,6 +22443,14 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
         .k-menu-link {
             padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
             padding-right: $menu-popup-item-padding-end;
+
+            .k-menu-expand-arrow {
+                margin: 0;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: $icon-spacing;
+            }
         }
 
         .k-separator {
@@ -22298,7 +22458,7 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
-            border-color: $panel-border;
+            border-color: $component-border;
             display: block;
         }
     }
@@ -22326,11 +22486,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
@@ -22420,6 +22583,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             > .k-menu-item > .k-menu-link {
                 padding-right: $menu-popup-item-padding-x;
                 padding-left: $menu-popup-item-padding-end;
+
+                .k-menu-expand-arrow {
+                    right: auto;
+                    left: $icon-spacing;
+                }
             }
         }
 
@@ -22430,6 +22598,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             .k-menu-link {
                 padding-right: $menu-popup-item-padding-x;
                 padding-left: $menu-popup-item-padding-end;
+
+                .k-menu-expand-arrow {
+                    right: auto;
+                    left: $icon-spacing;
+                }
             }
 
         }
@@ -22468,7 +22641,8 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
                 );
             }
 
-            > .k-state-active {
+            > .k-state-active,
+            &.k-state-selected {
                 @include fill(
                     $menu-item-expanded-text,
                     $menu-item-expanded-bg,
@@ -22478,6 +22652,7 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             }
 
             &:focus,
+            &.k-state-focus,
             &.k-state-focused {
                 @include box-shadow( $menu-item-focus-shadow );
             }
@@ -22511,7 +22686,8 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
                 );
             }
 
-            > .k-state-active {
+            > .k-state-active,
+            &.k-state-selected {
                 @include fill(
                     $menu-popup-item-expanded-text,
                     $menu-popup-item-expanded-bg,
@@ -22521,6 +22697,7 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             }
 
             &:focus,
+            &.k-state-focus,
             &.k-state-focused {
                 @include box-shadow( $menu-popup-item-focus-shadow );
             }
@@ -23845,15 +24022,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;
@@ -25262,7 +25439,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
@@ -28283,14 +28460,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
         }
 
-        .k-grid-filter-menu {
-
-            .k-filter-selected-items {
-                margin: 1em;
-                font-weight: normal;
-            }
-        }
-
         .k-grid-edit-form {
 
             .k-popup-edit-form,
@@ -28299,10 +28468,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 min-width: auto;
             }
         }
-
-        .k-grid .k-grid-search {
-            width: 100%;
-        }
     }
 
     .k-grid.k-grid-mobile {
@@ -28569,39 +28734,18 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
     .k-pane-wrapper {
 
-        .k-grid-edit-form,
-        .k-grid-column-menu,
-        .k-grid-filter-menu,
-        .k-scheduler-edit-form {
-
-            > .k-header {
-                display: flex;
-                justify-content: space-between;
-                padding: .3em .6em;
-                width: auto;
-                line-height: 2em;
-
-                .k-header-done,
-                .k-header-cancel {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-
-                    .k-icon {
-                        font-size: 1.5em;
-                    }
-                }
-            }
+        .k-appbar {
+            padding: map-get( $spacing, 1 );
         }
 
         .k-list-title,
-        .k-filter-help-text,
-        .k-list-group-header {
+        .k-filter-help-text {
             padding: $listgroup-item-padding-y $listgroup-item-padding-x;
             display: block;
         }
 
-        .k-list-group-header {
+        .k-listgroup-title {
+            padding: $listgroup-item-padding-y $listgroup-item-padding-x;
             font-weight: bold;
             text-transform: uppercase;
         }
@@ -28613,31 +28757,56 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
         }
         .k-listgroup + .k-listgroup {
-            margin-top: 2em;
+            margin-top: map-get( $spacing, 4 );
         }
 
         // Column menu
         .k-column-menu {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
             .k-filter-item .k-filterable * {
                 pointer-events: none;
             }
+
+            .k-list-title,
+            .k-listgroup-title {
+                padding: 0;
+            }
+
+            .k-listgroup {
+                margin-inline: -#{map-get( $spacing, 2 )};
+            }
         }
 
         // Filter menu
         .k-filter-menu {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
-            .k-space-right {
-                margin: .5em 10px;
-                width: auto;
+            .k-list-title {
+                padding: 0;
+            }
+
+            .k-list-filter {
+                padding: 0;
                 display: flex;
-                align-items: center;
+                flex-flow: column nowrap;
+                gap: inherit;
             }
 
             .k-filter-tools {
-                margin: 1em;
                 display: flex;
-                justify-content: space-between;
+                flex-flow: row nowrap;
+                gap: inherit;
+            }
+
+            .k-listgroup {
+                margin-inline: -#{map-get( $spacing, 2 )};
             }
         }
 
@@ -28661,7 +28830,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
 
         // Pager
-
         .k-pager-wrap.k-pager-sm {
             justify-content: center;
 
@@ -28671,47 +28839,14 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
         }
 
-        // IE
-
-        .k-ie & {
-
-            .k-scheduler {
-                .k-scheduler-toolbar,
-                .k-scheduler-footer {
-                    line-height: 2em;
-                }
-            }
-
-            .k-grid {
-
-                .k-icon {
-                    text-indent: 0;
-                }
-            }
-        }
-
         // RTL
-
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
 
-            .k-grid-edit-form,
-            .k-grid-column-menu,
-            .k-grid-filter-menu,
-            .k-scheduler-edit-form {
-
-                > .k-header {
-                    flex-direction: row-reverse;
-                }
-            }
-
-            .k-filter-menu {
-
-                .k-space-right > .k-i-zoom {
-                    left: 15px;
-                    right: auto;
-                }
+            .k-header-cancel .k-i-arrow-chevron-left,
+            .k-listgroup-item .k-select .k-i-arrow-chevron-right {
+                transform: scaleX( -1 );
             }
 
             .k-scheduler-mobile {
@@ -28733,10 +28868,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                     margin-right: 0;
                 }
             }
-
-            .k-scheduler-edit-form .k-item .k-i-arrow-chevron-right {
-                transform: scaleX(-1);
-            }
         }
     }
 }
@@ -28811,15 +28942,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         .k-grid-filter-menu,
         .k-scheduler-edit-form {
 
-            .k-header {
-                color: $adaptive-menu-text;
-                background-color: $adaptive-menu-bg;
-
-                .k-link {
-                    color: inherit;
-                }
-            }
-
             .k-item,
             .k-link {
                 color: $base-text;
@@ -28933,7 +29055,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
     // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
     $grid-command-cell-padding-y: calc( #{$table-cell-padding-y} - (#{$button-calc-size} - #{$line-height-em}) / 2 ) !default;
 
-    $grid-form-component-vertical-align: middle !default;
     $grid-hierarchy-col-width: ($icon-size * 2) !default;
 
     $grid-group-indicator-border-radius: $border-radius !default;
@@ -29331,12 +29452,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
     }
 
 
-    // Grid search
-    .k-grid-search {
-        width: $grid-search-width;
-    }
-
-
     // Grouping header
     .k-grouping-header {
         padding: $grid-grouping-header-padding-y $grid-grouping-header-padding-x;
@@ -29634,14 +29749,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;
@@ -29725,6 +29832,18 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
     }
 
 
+    // Checkboxes
+    .k-grid th,
+    .k-grid td {
+        > .k-radio,
+        > .k-radio-wrap,
+        > .k-checkbox,
+        > .k-checkbox-wrap {
+            vertical-align: top;
+        }
+    }
+
+
     // Edit row
     .k-grid .k-edit-cell,
     .k-grid .k-command-cell,
@@ -29741,13 +29860,19 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         > .k-textbox,
         > .k-widget:not(.k-switch) {
             width: 100%;
-            vertical-align: $grid-form-component-vertical-align;
+            vertical-align: middle;
             box-sizing: border-box;
         }
+        > .k-radio,
+        > .k-checkbox,
+        > .k-radio-wrap,
+        > .k-checkbox-wrap {
+            vertical-align: middle;
+        }
     }
 
     .k-grid .k-command-cell > .k-button {
-        vertical-align: $grid-form-component-vertical-align;
+        vertical-align: middle;
     }
     .k-grid .k-command-cell > .k-button + .k-button {
         margin-left: $grid-command-cell-button-spacing;
@@ -30126,79 +30251,89 @@ $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;
-            }
+        > * {
+            width: 100%;
         }
 
-        .k-filter-help-text {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
+        .k-switch,
+        .k-filter-and {
+            width: min-content;
+            align-self: start;
         }
 
-        .k-filter-selected-items {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
+        .k-actions {
+            margin: 0;
+            padding: 0;
         }
-    }
 
-    .k-filter-menu {
-        $item-spacing: $spacer-y / 2;
-        $form-padding: $spacer-y;
-        $form-padding-y: $form-padding - $item-spacing;
+        // 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-filter-menu-container {
-            box-sizing: border-box;
+            > * {
+                width: 100%;
+            }
         }
+    }
+    .k-ie .k-filter-menu-container {
+        > * { margin-top: map-get( $spacing, 2 ); }
+        > :first-child { margin-top: 0; }
 
-        .k-widget,
-        .k-radio-list,
-        .k-textbox,
-        .k-searchbox {
-            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;
+        // Angular specific
+        .k-filter-and,
+        kendo-grid-filter-menu-input-wrapper > * {
+            margin-top: map-get( $spacing, 2 );
         }
-
-        .k-widget.k-filter-and {
-            width: 6em;
+        kendo-grid-filter-menu-input-wrapper > :first-child {
+            margin-top: 0;
         }
+    }
 
-        .k-widget.k-button-group {
-            width: auto;
-            display: inline-flex;
-        }
+    .k-filter-menu.k-popup,
+    .k-grid-filter-popup.k-popup {
 
-        .k-switch {
-            width: $switch-size;
-            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: $list-font-size;
+        line-height: $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;
+            display: flex;
+            flex-flow: row nowrap;
+        }
     }
 
     .k-filter-selected-items {
@@ -30233,6 +30368,43 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 }
 
 @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;
@@ -30248,10 +30420,17 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
     }
 
     .k-column-list-item {
-        position: relative;
-        display: block;
         margin: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: 4px;
         cursor: pointer;
+        position: relative;
+
+        .k-checkbox-label {
+            margin: 0;
+        }
     }
 
     .k-columns-items-wrap {
@@ -30277,16 +30456,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;
@@ -30305,22 +30474,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 {
@@ -30888,7 +31041,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;
@@ -30908,7 +31061,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;
     }
@@ -30917,7 +31069,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;
@@ -30972,7 +31124,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;
     }
@@ -30984,14 +31135,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;
     }
@@ -31445,6 +31591,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 {
@@ -31803,37 +31950,48 @@ $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: $menu-popup-item-padding-y $menu-popup-item-padding-x;
+            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-details-content,
+        .k-columnmenu-item-content {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
-            > .k-textbox,
-            > .k-widget {
-                width: 100%;
-                margin-bottom: 3px;
+            .k-filter-and {
+                width: min-content;
+                align-self: flex-start;
             }
 
-            .k-space-right {
-                background-image: none;
+            .k-searchbox {
+                width: 100%;
             }
+        }
 
-            .k-filter-and {
-                width: 75px;
-                margin: 8px 0;
-            }
+        .k-actions {
+            margin: 0;
+            padding: 0;
         }
     }
 
@@ -35088,10 +35246,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             visibility: hidden;
 
             .k-overflow-anchor {
-                border-width: 0;
-                padding: $toolbar-padding-y;
-                width: $toolbar-inner-calc-size;
-                height: $toolbar-inner-calc-size;
                 position: relative;
             }
         }
@@ -35234,10 +35388,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             display: flex;
             flex-direction: column;
             padding: 10px 0 40px;
-
-            > span {
-                padding-bottom: $padding-y;
-            }
         }
 
         .k-matches-container {
@@ -35473,12 +35623,12 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             width: 10em;
 
             & + .k-dropdown {
-                width: 4em;
+                width: 5em;
             }
 
             & + .k-colorpicker,
             & + .k-dropdown {
-                margin-left: $padding-x-sm;
+                margin-left: map-get( $spacing, 2 );
             }
         }
 
@@ -36542,7 +36692,7 @@ $gantt-offset-resize-handler-top: 50% !default;
             position: relative;
             vertical-align: middle;
         }
-        td::after { content: "\a0"; }
+        td::after { content: "\200b"; }
     }
     .k-task-wrap {
         margin: 0 -21px;
@@ -38258,7 +38408,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
     // TODO: add this class to jQuery rendering
     // after refactoring jQuery scheduler layout to be flex
     .k-recurrence-editor {
-        display: inline-flex;
+        display: flex;
         flex-direction: column;
     }
     kendo-scheduler .k-recurrence-editor {
@@ -38510,27 +38660,40 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
 
     .k-scheduler-edit-form {
 
-        .k-edit-form-container { width: 620px; }
+        .k-edit-form-container { width: 100%; }
         .k-edit-label { width: 17%; }
         .k-edit-field { width: 77%; }
 
-        .k-scheduler-delete {
-            float: left;
+        .k-edit-field > ul > li {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+        }
+        .k-recurrence-editor {
+            .k-radio-list .k-radio-wrap,
+            .k-checkbox-list .k-checkbox-wrap {
+                align-self: center;
+            }
         }
 
-
-        .k-widget.k-recur-interval,
-        .k-widget.k-recur-count,
-        .k-widget.k-recur-monthday {
+        .k-recur-interval,
+        .k-recur-count,
+        .k-recur-monthday {
             width: 5em;
         }
-        .k-widget.k-recur-until,
-        .k-widget.k-recur-month,
-        .k-widget.k-recur-weekday,
-        .k-widget.k-recur-weekday-offset {
+        .k-recur-until,
+        .k-recur-month,
+        .k-recur-weekday,
+        .k-recur-weekday-offset {
             width: 10em;
         }
 
+        .k-scheduler-datetime-picker {
+            display: flex;
+            flex-flow: row nowrap;
+            gap: map-get( $spacing, 2 );
+        }
+
     }
 
 }
@@ -39148,13 +39311,6 @@ $chat-quick-reply-hover-bg: $primary !default;
 $chat-quick-reply-hover-text: $primary-contrast !default;
 $chat-quick-reply-hover-border: $primary !default;
 
-$chat-message-box-bg: $input-bg !default;
-$chat-message-box-text: $input-text !default;
-$chat-message-box-border: inherit !default;
-$chat-message-box-focus-shadow: 0 0 40px rgba( $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") {
@@ -39430,7 +39586,8 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
         box-sizing: border-box;
         border-width: 1px 0 0;
         border-style: solid;
-        border-radius: 0;
+        border-color: inherit !important; // sass-lint:disable-line no-important
+        border-radius: 0 !important; // sass-lint:disable-line no-important
         flex: none;
         display: flex;
         flex-flow: row nowrap;
@@ -39447,6 +39604,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 {
@@ -39456,11 +39614,6 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
                 display: inline-block;
             }
 
-            &::before,
-            &::after {
-                display: none;
-            }
-
             .k-rtl &,
             &[dir="rtl"] {
                 transform: scaleX(-1);
@@ -39601,9 +39754,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;
         }
 
@@ -39786,19 +39936,6 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
             );
         }
 
-
-        // Message box
-        .k-message-box {
-            @include fill(
-                $chat-message-box-text,
-                $chat-message-box-bg,
-                $chat-message-box-border
-            );
-        }
-        .k-message-box.k-state-focused {
-            @include box-shadow( $chat-message-box-focus-shadow );
-        }
-
     }
 
 
@@ -39810,14 +39947,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 );
-        }
     }
 
 }
@@ -40638,11 +40767,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: $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;
 
@@ -40738,51 +40864,42 @@ $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-textbox {
-                display: inline-flex;
-                padding-right: $pdf-viewer-search-dialog-textbox-padding-x;
-                margin: 0 $pdf-viewer-search-dialog-spacing;
-                align-items: center;
-                background: none;
+            .k-search-dialog-draghandle {
+                cursor: move;
+                margin-left: 0;
             }
-            .k-textbox .k-icon {
-                position: absolute;
-                font-size: inherit;
 
-                .k-ie & {
-                    position: relative;
-                }
-            }
+            .k-textbox {
+                width: 10em;
+                flex: none;
 
-            .k-match-case-button {
-                display: inline-flex;
-                height: $pdf-viewer-search-dialog-input-button-height;
-                justify-content: center;
+                .k-button {
+                    border-width: 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;
+                flex: 1 1 auto;
             }
+        }
+    }
 
-            > .k-button {
-                margin-left: $pdf-viewer-search-dialog-button-spacing;
-            }
 
-            .k-search-dialog-draghandle {
-                cursor: move;
-                margin-left: 0;
-            }
+    // IE
+    .k-ie .k-pdf-viewer-search-dialog {
+
+        .k-search-container > * + * {
+            margin-left: $pdf-viewer-search-dialog-spacing;
         }
     }
 
@@ -42274,6 +42391,11 @@ $map-marker-fill: $primary !default;
             line-height: 1;
             box-shadow: none;
             position: absolute;
+
+            .k-icon {
+                min-width: 0;
+                min-height: 0;
+            }
         }
         .k-navigator-n,
         .k-navigator-up {
@@ -42437,10 +42559,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;