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

package/dist/all.scss

@@ -6862,26 +6862,82 @@ $message-box-link-text-decoration: underline !default;
 // #endregion
 // #region @import "../list/_variables.scss"; -> packages/material/scss/list/_variables.scss
 // List
-$list-font-size: $font-size !default;
-$list-line-height: 1.5 !default;
-$list-line-height-em: 1.5em !default;
 
+/// Font size of the list component.
+/// @group list
+$list-font-size: $font-size-lg !default;
+
+/// Line height of the list component.
+/// @group list
+$list-line-height: 1.25 !default;
+$list-line-height-em: 1.25em !default;
+
+/// Horizontal padding of list items.
+/// @group list
 $list-item-padding-x: map-get( $spacing, 4 ) !default;
-$list-item-padding-y: map-get( $spacing, 1 ) !default;
 
+/// Vertical padding of list items.
+/// @group list
+$list-item-padding-y: map-get( $spacing, 2 ) !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: null !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: null !default;
+
+/// Background color of selected list items.
+/// @group list
 $list-item-selected-bg: $component-bg !default;
+/// Text color of selected list items.
+/// @group list
 $list-item-selected-text: $secondary !default;
 
-$list-item-focused-shadow: null !default;
-
-$list-container-shadow: null !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
 
@@ -6889,78 +6945,148 @@ $list-container-no-data-text: $subtle-text !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/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: 2px !default;
-$checkbox-line-height: calc( #{$checkbox-size} + #{$checkbox-border-width} ) !default;
 
+/// Background color of checkbox.
+/// @group checkbox
 $checkbox-bg: null !default;
-$checkbox-text: transparent !default;
+/// Color of checkbox.
+/// @group checkbox
+$checkbox-text: null !default;
+/// Border color of checkbox.
+/// @group checkbox
 $checkbox-border: rgba( if( $dark-theme, $white, $black ), .54 ) !default;
 
+/// Background color of hovered checkbox.
+/// @group checkbox
 $checkbox-hovered-bg: null !default;
+/// Color of hovered checkbox.
+/// @group checkbox
 $checkbox-hovered-text: null !default;
-$checkbox-hovered-border: rgba( if( $dark-theme, $white, $black ), .87 ) !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-checked-bg !default;
+/// Color of indeterminate checkbox.
+/// @group checkbox
 $checkbox-indeterminate-text: $checkbox-checked-text !default;
+/// Border color of indeterminate checkbox.
+/// @group checkbox
 $checkbox-indeterminate-border: $checkbox-checked-border !default;
 
-$checkbox-focused-border: $checkbox-border !default;
-$checkbox-focused-shadow: none !default;
-$checkbox-focused-checked-border: $checkbox-checked-border !default;
-$checkbox-focused-checked-shadow: none !default;
-
+/// Border color of focused checkbox.
+/// @group checkbox
+$checkbox-focused-border: null !default;
+/// Box shadow of focused checkbox.
+/// @group checkbox
+$checkbox-focused-shadow: null !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: null !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: try-shade( $component-bg, 4 ) !default;
 
+
+/// Background color of disabled and checked checkbox.
+/// @group checkbox
 $checkbox-disabled-checked-bg: $checkbox-disabled-border !default;
+/// Color of disabled and checked checkbox.
+/// @group checkbox
 $checkbox-disabled-checked-text: contrast-wcag( $checkbox-disabled-checked-bg ) !default;
+/// Border color of disabled and checked checkbox.
+/// @group checkbox
 $checkbox-disabled-checked-border: $checkbox-disabled-checked-bg !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: image !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: 10px !default;
+/// Glyph of checkbox indicator.
+/// @group checkbox
 $checkbox-checked-glyph: "\e118" !default;
+/// Glyph of indeterminate checkbox indicator.
+/// @group checkbox
 $checkbox-indeterminate-glyph: "\e121" !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 24 24'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
+/// 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 20 20'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
 
-$checkbox-marker-checked-width: 10px !default;
-$checkbox-marker-checked-height: 10px !default;
-$checkbox-marker-indeterminate-width: 10px !default;
-$checkbox-marker-indeterminate-height: 2px !default;
-
 
 // Checkbox label
 $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} + #{$checkbox-border-width})) !default;
-$checkbox-ripple-opacity: .38 !default;
+/// Background color of checkbox ripple.
+/// @group checkbox
+$checkbox-ripple-bg: $primary !default;
+/// Opacity of checkbox ripple.
+/// @group checkbox
+$checkbox-ripple-opacity: .2 !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/checkbox/_layout.scss
@@ -6990,28 +7116,17 @@ $checkbox-ripple-opacity: .38 !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%;
@@ -7023,19 +7138,13 @@ $checkbox-ripple-opacity: .38 !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" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-
-        @if $checkbox-icon-type == "marker" {
+        @if $checkbox-indicator-type == "glyph" {
             &::before {
-                transform: scale(1) translate(-50%, -50%);
+                transform: translate(-50%, -50%) scale(1);
             }
         }
     }
@@ -7045,22 +7154,14 @@ $checkbox-ripple-opacity: .38 !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);
             }
         }
     }
@@ -7068,69 +7169,55 @@ $checkbox-ripple-opacity: .38 !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;
     }
 
 
@@ -7138,9 +7225,6 @@ $checkbox-ripple-opacity: .38 !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;
     }
@@ -7148,73 +7232,62 @@ $checkbox-ripple-opacity: .38 !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,
@@ -7225,26 +7298,12 @@ $checkbox-ripple-opacity: .38 !default;
 
 }
 
-
-
-
-@include exports( "checkbox/layout/edge" ) {
-
-    .k-checkbox::-ms-check {
-        border-width: 1px;
-        border-color: inherit;
-        color: inherit;
-        background-color: inherit;
-    }
-
-}
-
 // #endregion
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/material/scss/checkbox/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/checkbox/_theme.scss
-@include exports("checkbox/theme") {
+@include exports( "checkbox/theme" ) {
 
     // Checkbox
     .k-checkbox {
@@ -7341,9 +7400,13 @@ $checkbox-ripple-opacity: .38 !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;
         }
     }
@@ -7352,7 +7415,7 @@ $checkbox-ripple-opacity: .38 !default;
 
 // #endregion
 
-@include exports("checkbox/theme/material") {
+@include exports( "checkbox/theme/material" ) {
 
     // Checkbox
     .k-checkbox-label {
@@ -7363,15 +7426,8 @@ $checkbox-ripple-opacity: .38 !default;
             opacity: 1;
             filter: none;
         }
-
-
-        // Ripple
-        .k-ripple-blob {
-            opacity: .2;
-            background-color: $checkbox-checked-bg;
-        }
-
     }
+
 }
 
 // #endregion
@@ -7407,10 +7463,9 @@ $checkbox-ripple-opacity: .38 !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;
@@ -7449,7 +7504,6 @@ $checkbox-ripple-opacity: .38 !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;
@@ -7463,12 +7517,6 @@ $checkbox-ripple-opacity: .38 !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;
@@ -7551,34 +7599,9 @@ $checkbox-ripple-opacity: .38 !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;
@@ -7588,14 +7611,15 @@ $checkbox-ripple-opacity: .38 !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
@@ -7631,7 +7655,7 @@ $checkbox-ripple-opacity: .38 !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
@@ -7721,8 +7745,9 @@ $checkbox-ripple-opacity: .38 !default;
         }
 
 
-        .k-nodata {
-            color: $list-container-no-data-text;
+        // No data
+        .k-no-data {
+            color: $list-no-data-text;
         }
 
     }
@@ -8492,7 +8517,7 @@ $clear-button-focused-opacity: .155 !default; // equal to 10% of black
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/input/_variables.scss
 // Input
-$input-default-width: 200px !default;
+$input-default-width: 10em !default;
 
 $input-border-width: 1px !default;
 $input-border-height: 1px !default;
@@ -8503,19 +8528,19 @@ $input-border-radius-lg: 0px !default;
 $input-padding-x: map-get( $spacing, 4 ) !default;
 $input-padding-y: map-get( $spacing, 2 ) !default;
 $input-font-family: $font-family !default;
-$input-font-size: $font-size-md !default;
-$input-line-height: ( 20 / 14 ) !default;
+$input-font-size: $font-size-lg !default;
+$input-line-height: 1.25 !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: (20 / 14) !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: (20 / 14) !default;
+$input-line-height-lg: $input-line-height !default;
 
 $input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width * 2} ) !default;
 $input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-width * 2} ) !default;
@@ -8656,9 +8681,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;
@@ -9329,7 +9354,7 @@ $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: null !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: $subtle-text !default;
@@ -9346,8 +9371,8 @@ $menu-scroll-button-hover-gradient: null !default;
 $menu-popup-padding-x: null !default;
 $menu-popup-padding-y: null !default;
 $menu-popup-border-width: $popup-border-width !default;
-$menu-popup-font-size: $font-size !default;
-$menu-popup-line-height: $line-height !default;
+$menu-popup-font-size: $list-font-size !default;
+$menu-popup-line-height: $list-line-height !default;
 
 $menu-popup-bg: $popup-bg !default;
 $menu-popup-text: $popup-text !default;
@@ -9495,8 +9520,6 @@ $grid-edit-cell-padding-y: 6px !default;
 
 $grid-command-cell-button-spacing: map-get( $spacing, 2 ) !default;
 
-$grid-search-width: $input-default-width !default;
-
 $grid-sticky-bg: $grid-bg !default;
 $grid-sticky-text: $grid-text !default;
 $grid-sticky-border: rgba( contrast-wcag( $grid-bg ), .5 ) !default;
@@ -9516,7 +9539,7 @@ $grid-sticky-selected-alt-bg: $grid-sticky-selected-bg !default;
 $grid-sticky-hovered-bg: try-shade($grid-bg, 7%) !default;
 $grid-sticky-selected-hovered-bg: try-shade($grid-sticky-selected-bg, .87) !default;
 
-$grid-filter-menu-width: 250px !default;
+$grid-column-menu-width: 250px !default;
 
 $grid-filter-menu-check-all-border-bottom-width: 0 !default;
 
@@ -9617,13 +9640,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.
@@ -9675,7 +9698,7 @@ $table-selected-border: $grid-selected-border !default;
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/table/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/table/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/table/_layout.scss
-@include exports("table/layout") {
+@include exports( "table/layout" ) {
 
     // Table
     .k-table {
@@ -9707,12 +9730,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 {
@@ -9733,6 +9755,9 @@ $table-selected-border: $grid-selected-border !default;
             border-left-width: 0;
         }
     }
+    .k-table-th {
+        border-bottom-width: 1px;
+    }
 
 
     // Table header
@@ -9751,8 +9776,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
@@ -9789,7 +9833,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;
@@ -9831,7 +9875,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%;
     }
@@ -9864,6 +9909,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;
     }
 
@@ -9909,7 +9955,7 @@ $table-selected-border: $grid-selected-border !default;
 // #endregion
 // #region @import "_theme.scss"; -> packages/material/scss/table/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/table/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/table/_theme.scss
-@include exports("table/theme") {
+@include exports( "table/theme" ) {
 
     // Table
     .k-table,
@@ -9922,7 +9968,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;
@@ -10081,14 +10128,24 @@ $table-selected-border: $grid-selected-border !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/avatar/_variables.scss
 // Avatar
+
+/// Border width of the avatar.
+/// @group avatar
 $avatar-border-width: 1px !default;
 $avatar-border-radius: map-get( $spacing, 1 ) !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 ),
@@ -12010,7 +12067,7 @@ $skeleton-wave-bg: rgba( black, .04 ) !default;
         transform: $skeleton-text-transform;
 
         &:empty::before {
-            content: "\00a0";
+            content: "\200b";
         }
     }
 
@@ -12299,8 +12356,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,
@@ -12310,6 +12365,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
@@ -13299,8 +13356,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;
@@ -13374,6 +13432,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;
@@ -13381,13 +13447,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);
@@ -13492,12 +13568,18 @@ $tooltip-error-border: $tooltip-error-bg !default;
         }
     }
 
+
+    // Overflow container
     .k-overflow-container {
 
-        .k-button-group {
+        .k-button {
             @include box-shadow( none );
+            font-weight: normal;
+            text-transform: unset;
         }
+
     }
+
 }
 
 // #endregion
@@ -13516,13 +13598,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;
@@ -13534,6 +13609,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;
+            }
+        }
+
+    }
+
 }
 
 
@@ -13917,10 +14027,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;
@@ -13955,13 +14061,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;
@@ -14003,7 +14107,6 @@ $fieldset-legend-border: null !default;
         .k-dateinput,
         .k-datepicker,
         .k-datetimepicker,
-        .k-daterangepicker-wrap,
         .k-timepicker,
         .k-numerictextbox,
         .k-maskedtextbox,
@@ -14012,6 +14115,11 @@ $fieldset-legend-border: null !default;
             display: inline-flex;
             width: 100%;
         }
+        .k-daterangepicker {
+            width: 100%;
+            flex-flow: column nowrap;
+            gap: 0;
+        }
     }
 
     // Form Buttons Container
@@ -15227,20 +15335,20 @@ $textarea-invalid-focus-shadow: null !default;
 // Listbox
 $listbox-margin: 12px !default;
 $listbox-button-margin: 8px !default;
-$listbox-width: 12.4em !default;
+$listbox-width: 10em !default;
 $listbox-default-height: 200px !default;
 
 $listbox-border-width: 1px !default;
 $listbox-font-family: $font-family !default;
-$listbox-font-size: $font-size !default;
-$listbox-line-height: $line-height !default;
+$listbox-font-size: $list-font-size !default;
+$listbox-line-height: $list-line-height !default;
 
 $listbox-bg: $component-bg !default;
 $listbox-text: $component-text !default;
 $listbox-border: $component-border !default;
 
-$listbox-item-padding-x: 24px !default;
-$listbox-item-padding-y: 2px !default;
+$listbox-item-padding-x: $list-item-padding-x !default;
+$listbox-item-padding-y: $list-item-padding-y !default;
 
 $listbox-drop-hint-border-width: 2px !default;
 $listbox-drop-hint-width: 2px !default;
@@ -15873,56 +15981,107 @@ $progressbar-chunk-border: $component-bg !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/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: 2px !default;
-$radio-line-height: calc(#{$radio-size} + #{$radio-border-width}) !default;
 
-$radio-bg: null !default;
-$radio-text: transparent !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: null !default;
+/// Color of hovered radio button.
+/// @group radio
 $radio-hovered-text: null !default;
-$radio-hovered-border: $checkbox-hovered-border !default;
+/// Border color of hovered radio button.
+/// @group radio
+$radio-hovered-border: null !default;
 
+/// Background color of checked radio button.
+/// @group radio
 $radio-checked-bg: null !default;
+/// Color of checked radio button.
+/// @group radio
 $radio-checked-text: $primary !default;
+/// Border color of checked radio button.
+/// @group radio
 $radio-checked-border: $radio-checked-text !default;
 
-$radio-indeterminate-bg: $radio-checked-bg !default;
-$radio-indeterminate-text: $radio-checked-text !default;
-$radio-indeterminate-border: $radio-checked-border !default;
-
-$radio-focused-border: $checkbox-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;
 
+/// Background color of disabled radio button.
+/// @group radio
 $radio-disabled-bg: null !default;
+/// Color of disabled radio button.
+/// @group radio
 $radio-disabled-text: null !default;
-$radio-disabled-border: try-shade( $component-bg, 4 ) !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: null !default;
+/// Color of disabled and checked radio button.
+/// @group radio
 $radio-disabled-checked-text: $radio-disabled-border !default;
+/// Border color of disabled and checked radio button.
+/// @group radio
 $radio-disabled-checked-border: $radio-disabled-border !default;
 
-$radio-invalid-bg: null !default;
-$radio-invalid-text: $invalid-text !default;
-$radio-invalid-border: $invalid-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 indicator
-$radio-icon-type: marker !default;
+
+/// Type of radio button indicator.
+/// @group radio
+$radio-indicator-type: image !default;
 
 $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 12 12'><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: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$radio-disabled-checked-text}'/></svg>") ) !default;
 
 
 // Radio label
@@ -15930,17 +16089,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} + #{$radio-border-width})) !default;
-$radio-ripple-opacity: .3 !default;
+/// Background color of radio button ripple.
+/// @group radio
+$radio-ripple-bg: $primary !default;
+/// Opacity of radio button ripple.
+/// @group radio
+$radio-ripple-opacity: .2 !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/radio/_layout.scss
@@ -15970,9 +16138,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;
@@ -15985,179 +16154,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,
@@ -16165,26 +16306,6 @@ $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;
-        }
-    }
 
 }
 
@@ -16202,7 +16323,7 @@ $radio-ripple-opacity: .3 !default;
 // #endregion
 // #region @import "_theme.scss"; -> packages/material/scss/radio/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/radio/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/radio/_theme.scss
-@include exports("radio/theme") {
+@include exports( "radio/theme" ) {
 
     // Radio
     .k-radio {
@@ -16257,7 +16378,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 );
@@ -16283,6 +16403,7 @@ $radio-ripple-opacity: .3 !default;
         );
     }
 
+
     // Ripple
     .k-ripple-container {
         .k-radio::after {
@@ -16295,7 +16416,7 @@ $radio-ripple-opacity: .3 !default;
 
 // #endregion
 
-@include exports("radio/theme/material") {
+@include exports( "radio/theme/material" ) {
 
     // Radio
     .k-radio-label {
@@ -16306,15 +16427,8 @@ $radio-ripple-opacity: .3 !default;
             opacity: 1;
             filter: none;
         }
-
-
-        // Ripple
-        .k-ripple-blob {
-            opacity: .2;
-            background-color: $radio-checked-bg;
-        }
-
     }
+
 }
 
 // #endregion
@@ -17530,7 +17644,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;
@@ -17568,7 +17682,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;
@@ -17667,18 +17781,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,
@@ -18186,7 +18288,7 @@ $time-list-focused-bg: null !default;
             &::before,
             &::after {
                 display: block;
-                content: " ";
+                content: "\200b";
                 position: absolute;
                 width: 100%;
                 left: 0;
@@ -18222,7 +18324,7 @@ $time-list-focused-bg: null !default;
         &::after {
             display: block;
             position: absolute;
-            content: " ";
+            content: "\200b";
             height: 0;
             line-height: 0;
             z-index: 1;
@@ -18420,25 +18522,6 @@ $time-list-focused-bg: null !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/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/material/scss/autocomplete/_layout.scss
@@ -18498,79 +18581,60 @@ $autocomplete-disabled-shadow: null !default;
 // #endregion
 // #region @import "_theme.scss"; -> packages/material/scss/autocomplete/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/autocomplete/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-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);
-            }
         }
     }
 
@@ -18891,73 +18955,34 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
 // Component
 // #region @import "_variables.scss"; -> packages/material/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: null !default;
-$numeric-button-text: $subtle-text !default;
-$numeric-button-border: null !default;
-$numeric-button-gradient: null !default;
-
-$numeric-button-hovered-bg: null !default;
-$numeric-button-hovered-text: $input-text !default;
-$numeric-button-hovered-border: null !default;
-$numeric-button-hovered-gradient: null !default;
-
-$numeric-button-pressed-bg: null !default;
-$numeric-button-pressed-text: $primary !default;
-$numeric-button-pressed-border: null !default;
-$numeric-button-pressed-gradient: null !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/numerictextbox/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/numerictextbox/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-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 {
@@ -18973,6 +18998,7 @@ $numeric-button-pressed-gradient: null !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;
@@ -19005,13 +19031,6 @@ $numeric-button-pressed-gradient: null !default;
         .k-link-decrease .k-icon {
             top: -$spinner-icon-offset;
         }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-        }
     }
 
 }
@@ -19020,12 +19039,11 @@ $numeric-button-pressed-gradient: null !default;
 
 @include exports("numerictextbox/layout/material") {
 
+    // Numeric textbox
     .k-numerictextbox {
-        .k-numeric-wrap {
-            @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
-            border-width: $input-border-width 0;
-            border-top-color: transparent !important; // sass-lint:disable-line no-important
-        }
+        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
+        border-width: $input-border-width 0;
+        border-top-color: transparent !important; // sass-lint:disable-line no-important
     }
 
 }
@@ -19035,110 +19053,90 @@ $numeric-button-pressed-gradient: null !default;
 // #region @import "~@progress/kendo-theme-default/scss/numerictextbox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-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(
+                $picker-select-hovered-text,
+                $picker-select-hovered-bg,
+                $picker-select-hovered-border,
+                $picker-select-hovered-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: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
@@ -20760,6 +20758,64 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
 
 // #endregion
 
+// #endregion
+// #region @import "daterangepicker/_index.scss"; -> packages/material/scss/daterangepicker/_index.scss
+// #region @import "../core/_index.scss"; -> packages/material/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/material/scss/daterangepicker/_variables.scss
+// Daterangepicker
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/material/scss/daterangepicker/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/daterangepicker/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-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
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/material/scss/daterangepicker/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/daterangepicker/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/daterangepicker/_theme.scss
+@include exports("daterangepicker/theme") {
+
+}
+
+// #endregion
+
+// #endregion
+
 // #endregion
 // #region @import "dropdowngrid/_index.scss"; -> packages/material/scss/dropdowngrid/_index.scss
 // #region @import "../core/_index.scss"; -> packages/material/scss/core/_index.scss
@@ -21900,62 +21956,116 @@ $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
 
 // Component
 // #region @import "_variables.scss"; -> packages/material/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: (20 / 14) !default;
+// TreeviewTreeview
 
+/// 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: 16px !default;
+/// Line height of the treeview component.
+/// @group treeview
+$treeview-line-height: 1.25 !default;
+
+/// Indentation of child groups in treeview component.
+/// @group treeview
 $treeview-indent: 16px !default;
 
-$treeview-item-padding-x: 8px !default;
-$treeview-item-padding-y: 6px !default;
+/// Horizontal padding of treeview items.
+/// @group treeview
+$treeview-item-padding-x: map-get( $spacing, 4 ) !default;
+/// Vertical padding of treeview items.
+/// @group treeview
+$treeview-item-padding-y: map-get( $spacing, 2 ) !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: rgba( $treeview-text, .07 ) !default;
+/// Text color of hovered treeview items.
+/// @group treeview
 $treeview-item-hovered-text: null !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: null !default;
+/// Text color of selected treeview items.
+/// @group treeview
 $treeview-item-selected-text: $selected-bg !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: null !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: inherit !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: inherit !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: inherit !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/material/scss/treeview/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/treeview/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-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;
@@ -21969,158 +22079,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;
+            }
         }
 
     }
@@ -22130,24 +22260,30 @@ $treeview-loadmore-focus-shadow: none !default;
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/material/scss/treeview/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/treeview/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-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,
@@ -22155,7 +22291,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,
@@ -22163,7 +22307,73 @@ $treeview-loadmore-focus-shadow: none !default;
                 $treeview-item-selected-gradient
             );
         }
-        .k-in.k-state-focused {
+    }
+
+
+    // 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,
+                $treeview-loadmore-hover-border
+            );
+        }
+
+        // Focus state
+        &:focus,
+        &.k-state-focus,
+        &.k-state-focused {
+            @include fill(
+                $treeview-loadmore-focus-text,
+                $treeview-loadmore-focus-bg,
+                $treeview-loadmore-focus-border
+            );
+            @include box-shadow( $treeview-loadmore-focus-shadow );
+        }
+    }
+
+}
+
+// #endregion
+
+@include exports( "treeview/theme/material" ) {
+
+    // Treeview
+    .k-treeview {}
+
+
+    // Treeview item
+    .k-treeview-item {}
+
+
+    // 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,
+                $treeview-item-hovered-border,
+                $treeview-item-hovered-gradient
+            );
+        }
+
+        // Focus state
+        &:focus,
+        &.k-state-focus,
+        &.k-state-focused {
             @include fill(
                 $treeview-item-hovered-text,
                 $treeview-item-hovered-bg,
@@ -22171,6 +22381,16 @@ $treeview-loadmore-focus-shadow: none !default;
                 $treeview-item-hovered-gradient
             );
         }
+
+        // Selected state
+        &.k-state-selected {
+            @include fill(
+                $treeview-item-selected-text,
+                $treeview-item-selected-bg,
+                $treeview-item-selected-border,
+                $treeview-item-selected-gradient
+            );
+        }
     }
 
 }
@@ -22572,26 +22792,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
 // Component
 // #region @import "_variables.scss"; -> packages/material/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/material/scss/searchbox/_layout.scss
@@ -22600,22 +22800,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;
         }
     }
 
@@ -22642,53 +22856,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;
 
@@ -22696,13 +22901,13 @@ $searchbox-focus-border: $input-focused-border !default;
                 color: $invalid-text;
             }
 
-            &:focus,
+            &:focus-within,
             &.k-state-focus {
                 @include box-shadow($invalid-shadow);
             }
         }
-
     }
+
 }
 
 // #endregion
@@ -23983,7 +24188,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, 6 ) !default;
+$appbar-padding-x: map-get( $spacing, 2 ) !default;
 $appbar-border-width: 0px !default;
 
 $appbar-zindex: 1000 !default;
@@ -24625,10 +24830,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;
     }
@@ -24640,7 +24847,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;
@@ -24655,10 +24862,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,
@@ -24705,6 +24924,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 {
@@ -24757,6 +24984,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 {
@@ -24764,7 +24999,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;
         }
     }
@@ -24792,11 +25027,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
@@ -24886,6 +25124,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;
+                }
             }
         }
 
@@ -24896,6 +25139,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;
+                }
             }
 
         }
@@ -24964,7 +25212,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,
@@ -24974,6 +25223,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 );
             }
@@ -25007,7 +25257,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,
@@ -25017,6 +25268,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 );
             }
@@ -25059,6 +25311,7 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
 
             // Focused state
             &:focus,
+            &.k-state-focus,
             &.k-state-focused {
                 @include fill(
                     $menu-item-hover-text,
@@ -25078,6 +25331,7 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
 
             // Focused
             &:focus,
+            &.k-state-focus,
             &.k-state-focused {
                 @include fill(
                     $menu-popup-item-hover-text,
@@ -27963,7 +28217,7 @@ $pager-number-focus-opacity: .12 !default;
 $pager-number-focus-bg: rgba($pager-number-text, $pager-number-focus-opacity) !default;
 $pager-number-focus-shadow: null !default;
 
-$pager-input-width: 3em !default;
+$pager-input-width: 5em !default;
 $pager-dropdown-width: 5em !default;
 
 // #endregion
@@ -31114,14 +31368,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,
@@ -31130,10 +31376,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 min-width: auto;
             }
         }
-
-        .k-grid .k-grid-search {
-            width: 100%;
-        }
     }
 
     .k-grid.k-grid-mobile {
@@ -31400,39 +31642,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;
         }
@@ -31444,31 +31665,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 )};
             }
         }
 
@@ -31492,7 +31738,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
 
         // Pager
-
         .k-pager-wrap.k-pager-sm {
             justify-content: center;
 
@@ -31502,47 +31747,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 {
@@ -31564,10 +31776,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);
-            }
         }
     }
 }
@@ -31645,15 +31853,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;
@@ -31755,7 +31954,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/grid/_layout.scss
 $grid-hierarchy-col-width: 32px !default;
-$grid-form-component-vertical-align: middle !default;
 // TODO: perhaps these should be the values for cell-padding-x/-y
 $grid-grouping-row-border-top: 0px !default;
 $grid-group-footer-border-y: 1px !default;
@@ -31785,7 +31983,6 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
     // 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;
@@ -32183,12 +32380,6 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
     }
 
 
-    // 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;
@@ -32486,14 +32677,6 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
         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;
@@ -32577,6 +32760,18 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
     }
 
 
+    // 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,
@@ -32593,13 +32788,19 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
         > .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;
@@ -32978,79 +33179,89 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
 
 @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 {
@@ -33085,6 +33296,43 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
 }
 
 @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;
@@ -33100,10 +33348,17 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
     }
 
     .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 {
@@ -33129,16 +33384,6 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
         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;
@@ -33157,22 +33402,6 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
         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 {
@@ -33229,15 +33458,8 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
 // #endregion
 
 @include exports ("grid/layout/material") {
-    $text-field-border-width: 2px;
-    $text-field-radius: $text-field-border-width + 1px;
-    $text-field-padding: (2 * $grid-cell-padding-x / 3);
 
     .k-grid {
-        .k-checkbox-label,
-        .k-radio-label {
-            line-height: normal;
-        }
 
         .k-button,
         .k-button:active {
@@ -34141,7 +34363,7 @@ $listview-item-focus-shadow: null !default;
     .k-listview {
         margin: 0;
         padding: 0;
-        border-width: $listview-border-width;
+        border-width: 0;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -34161,7 +34383,6 @@ $listview-item-focus-shadow: null !default;
     // Header
     .k-listview-header {
         border-width: 0;
-        border-bottom-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -34170,7 +34391,7 @@ $listview-item-focus-shadow: null !default;
     }
 
 
-    // Listview contnet
+    // Listview content
     .k-listview-content {
         margin: 0;
         padding: 0;
@@ -34225,7 +34446,6 @@ $listview-item-focus-shadow: null !default;
     // Listview footer
     .k-listview-footer {
         border-width: 0;
-        border-top-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -34237,14 +34457,9 @@ $listview-item-focus-shadow: null !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;
     }
@@ -34718,6 +34933,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 {
@@ -35076,37 +35292,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;
         }
     }
 
@@ -38739,10 +38966,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;
             }
         }
@@ -38885,10 +39108,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 {
@@ -39124,12 +39343,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 );
             }
         }
 
@@ -40261,7 +40480,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;
@@ -42019,7 +42238,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 {
@@ -42271,27 +42490,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 );
+        }
+
     }
 
 }
@@ -42659,8 +42891,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
 
     .k-scheduler-edit-form {
 
-        .k-edit-form-container { width: 390px; }
-
         .k-edit-label {
             width: auto;
             margin-bottom: .5em;
@@ -42705,20 +42935,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         width: 45%;
     }
 
-
-    // Recurrence editor
-    .k-edit-field .k-recur-interval,
-    .k-edit-field .k-recur-count,
-    .k-edit-field .k-recur-month,
-    .k-edit-field .k-recur-monthday,
-    .k-edit-field .k-recur-weekday-offset,
-    .k-edit-field .k-recur-weekday {
-        width: 28%;
-    }
-    .k-edit-field .k-recur-until {
-        width: 66%;
-    }
-
 }
 
 // #endregion
@@ -43209,13 +43425,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: $component-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/material/scss/chat/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/chat/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/chat/_layout.scss
@@ -43492,7 +43701,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;
@@ -43509,6 +43719,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 {
@@ -43518,11 +43729,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);
@@ -43663,9 +43869,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;
         }
 
@@ -43851,19 +44054,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 );
-        }
-
     }
 
 
@@ -43875,14 +44065,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 );
-        }
     }
 
 }
@@ -44737,11 +44919,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: 6px !default;
-$pdf-viewer-search-dialog-button-spacing: 0px !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;
 
@@ -44838,51 +45017,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;
         }
     }
 
@@ -46398,6 +46568,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 {
@@ -46566,10 +46741,10 @@ $orgchart-card-shadow: none !default;
 $orgchart-card-focus-shadow: $orgchart-node-group-focus-shadow !default;
 
 $orgchart-card-title-margin-bottom: 0px !default;
-$orgchart-card-title-font-size: $font-size-xl !default;
+$orgchart-card-title-font-size: null !default;
 
 $orgchart-card-subtitle-margin-bottom: 0px !default;
-$orgchart-card-subtitle-font-size: $font-size-md !default;
+$orgchart-card-subtitle-font-size: null !default;
 
 $orgchart-card-body-border-width: 2px 0 0 !default;
 $orgchart-card-body-border-color: transparent !default;