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

package/dist/all.scss

@@ -8080,10 +8080,17 @@ $message-box-link-text-decoration: underline !default;
 // #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../checkbox/_index.scss"; -> packages/bootstrap/scss/checkbox/_index.scss
+// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
-// Component
-// #region @import "_variables.scss"; -> packages/bootstrap/scss/list/_variables.scss
+// Dependencies
+// #region @import "../typography/_variables.scss"; -> packages/bootstrap/scss/typography/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../list/_variables.scss"; -> packages/bootstrap/scss/list/_variables.scss
 // List
 
 /// Font size of the list component, if no size is set.
@@ -8333,6 +8340,579 @@ $kendo-list-group-item-shadow: null !default;
 /// @group list
 $kendo-list-no-data-text: $subtle-text !default;
 
+// #endregion
+
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/checkbox/_variables.scss
+// Checkbox
+
+/// The sizes of checkbox.
+/// @group checkbox
+$kendo-checkbox-sizes: (
+    sm: map-get( $spacing, 3 ),
+    md: map-get( $spacing, 4 ),
+    lg: map-get( $spacing, 6 )
+) !default;
+
+/// The  border width of checkbox.
+/// @group checkbox
+$kendo-checkbox-border-width: 1px !default;
+/// The line height of checkbox.
+/// @group checkbox
+$kendo-checkbox-line-height: calc( #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width} ) !default;
+
+/// The background of checkbox.
+/// @group checkbox
+$kendo-checkbox-bg: $component-bg !default;
+/// The background of checkbox.
+/// @group checkbox
+$kendo-checkbox-text: null !default;
+/// The border of checkbox.
+/// @group checkbox
+$kendo-checkbox-border: contrast-wcag( $kendo-checkbox-bg, $gray-400, $gray-600 ) !default;
+
+/// The background of hovered checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-bg: null !default;
+/// The text of hovered checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-text: null !default;
+/// The border of hovered checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-border: null !default;
+
+/// The background of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-bg: $primary !default;
+/// The text of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
+/// The border of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
+
+/// The background of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
+/// The text of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
+/// The border of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
+
+/// The border of focused checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-border: try-tint( $primary, 50% ) !default;
+/// The shadow of focused checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-shadow: 0 0 0 .25rem rgba( $primary, .25 ) !default;
+/// The border of focused and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;
+/// The shadow of focused and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-shadow: $kendo-checkbox-focus-shadow !default;
+
+/// The background of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-bg: null !default;
+/// The text of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-text: null !default;
+/// The border of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-border: null !default;
+
+/// The background of disabled and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-bg: null !default;
+/// The text of disabled and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-text: null !default;
+/// The border of disabled and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-border: null !default;
+
+/// The background of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-bg: null !default;
+/// The text of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-text: $invalid-text !default;
+/// The border of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-border: $invalid-border !default;
+
+
+// Checkbox indicator
+
+/// The icon type of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-icon-type: image !default;
+
+/// The glyph font family of checkbox.
+/// @group checkbox
+$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
+/// The glyph of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-glyph: "\e118" !default;
+/// The glyph of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-glyph: "\e121" !default;
+
+/// The image of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
+/// The image of indeterminate checkbox.
+/// @group checkbox
+$kendo-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='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
+
+
+// Checkbox label
+
+/// The horizontal margin of the checkbox inside a label.
+/// @group checkbox
+$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+
+
+// Checkbox list
+
+/// The horizontal margin of list item of checkbox.
+/// @group checkbox
+$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+/// The horizontal list item padding of checkbox.
+/// @group checkbox
+$kendo-checkbox-list-item-padding-x: 0px !default;
+/// The vertical list item padding of checkbox.
+/// @group checkbox
+$kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+
+
+// Checkbox ripple
+
+/// The ripple size of checkbox.
+/// @group checkbox
+$kendo-checkbox-ripple-size: (
+    sm: (map-get( $kendo-checkbox-sizes, "sm" ) * 3),
+    md: (map-get( $kendo-checkbox-sizes, "md" ) * 3),
+    lg: (map-get( $kendo-checkbox-sizes, "lg" ) * 3)
+) !default;
+/// The ripple margin of checkbox.
+/// @group checkbox
+$kendo-checkbox-ripple-margin: (
+    sm: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "sm" )} + #{$kendo-checkbox-border-width})),
+    md: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width})),
+    lg: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "lg" )} + #{$kendo-checkbox-border-width}))
+) !default;
+/// The ripple opacity of checkbox.
+/// @group checkbox
+$kendo-checkbox-ripple-opacity: .3 !default;
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/bootstrap/scss/checkbox/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/checkbox/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/checkbox/_layout.scss
+@include exports( "checkbox/layout" ) {
+
+    // Checkbox
+    .k-checkbox {
+        margin: 0;
+        padding: 0;
+        line-height: initial;
+        border-width: $kendo-checkbox-border-width;
+        border-style: solid;
+        outline: 0;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: inline-block;
+        flex: none;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+        -webkit-appearance: none;
+    }
+
+    @each $name, $size in $kendo-checkbox-sizes {
+        // Checkbox sizes
+        .k-checkbox-#{$name} {
+            width: $size;
+            height: $size;
+
+            + .k-checkbox-label {
+
+                .k-ripple {
+                    top: ($size / 2);
+                    left: ($size / 2);
+                    width: ($size * 5 / 2);
+                    height: ($size * 5 / 2);
+                }
+            }
+        }
+
+
+        // Checkbox indicator
+        .k-checkbox-#{$name}::before {
+            @if $kendo-checkbox-icon-type == "glyph" {
+                content: $kendo-checkbox-checked-glyph;
+                width: ($size - map-get( $spacing, thin ));
+                height: ($size - map-get( $spacing, thin ));
+                font-size: ($size - map-get( $spacing, thin ));
+                font-family: $kendo-checkbox-glyph-font-family;
+                line-height: 1;
+                transform: scale(0) translate(-50%, -50%);
+                overflow: hidden;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+            }
+
+            @if $kendo-checkbox-icon-type == "marker" {
+                content: "";
+                width: ($size - map-get( $spacing, 1 ));
+                height: ($size - map-get( $spacing, 1 ));
+                background-color: currentColor;
+                transform: scale(0) translate(-50%, -50%);
+                overflow: hidden;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+            }
+        }
+    }
+
+
+    // Checked state
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
+        @if $kendo-checkbox-icon-type == "image" {
+            background-image: $kendo-checkbox-checked-image;
+        }
+
+        @if $kendo-checkbox-icon-type == "glyph" {
+            &::before {
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+
+        @if $kendo-checkbox-icon-type == "marker" {
+            &::before {
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+    }
+
+    // Indeterminate state
+    .k-checkbox:indeterminate,
+    .k-checkbox.k-indeterminate {
+        @if $kendo-checkbox-icon-type == "image" {
+            background-image: $kendo-checkbox-indeterminate-image;
+        }
+
+        @if $kendo-checkbox-icon-type == "glyph" {
+            &::before {
+                content: $kendo-checkbox-indeterminate-glyph;
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+
+        @if $kendo-checkbox-icon-type == "marker" {
+            &::before {
+                width: $kendo-checkbox-maker-indeterminate-width;
+                height: $kendo-checkbox-marker-indeterminate-height;
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+    }
+
+
+    // Disabled state
+    .k-checkbox:disabled,
+    .k-checkbox.k-disabled,
+    .k-checkbox:disabled + .k-checkbox-label,
+    .k-checkbox.k-disabled + .k-checkbox-label {
+        @include disabled( $disabled-styling );
+    }
+
+
+    // Checkbox wrap
+    .k-checkbox-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
+
+    // Checkbox label
+    .k-checkbox-label {
+        margin: 0;
+        padding: 0;
+        line-height: $kendo-checkbox-line-height;
+        display: inline-flex;
+        align-items: flex-start;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+
+        .k-label {
+            cursor: pointer;
+        }
+
+        .k-ripple {
+            right: auto;
+            bottom: auto;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+
+            // Hide ripple temporarily
+            visibility: hidden !important; // sass-lint:disable-line no-important
+        }
+
+        .k-ripple-blob {
+            // sass-lint:disable-block no-important
+            // use !important until ripple can apply these styles from the script
+            top: 50% !important;
+            left: 50% !important;
+            width: 200% !important;
+            height: 200% !important;
+        }
+    }
+    .k-checkbox + .k-checkbox-label {
+        display: inline;
+    }
+    .k-checkbox + .k-checkbox-label,
+    .k-checkbox-label + .k-checkbox {
+        margin-left: $kendo-checkbox-label-margin-x;
+    }
+    .k-checkbox-label > .k-checkbox {
+        margin-right: $kendo-checkbox-label-margin-x;
+        flex-shrink: 0;
+    }
+    kendo-label.k-checkbox-label > .k-checkbox:last-child {
+        margin-right: 0;
+    }
+    kendo-label.k-checkbox-label > .k-label:first-child {
+        margin-right: $kendo-checkbox-label-margin-x;
+    }
+    kendo-label.k-checkbox-label > .k-label {
+        display: inline;
+    }
+
+
+    // Empty label
+    .k-checkbox-label:empty {
+        display: none !important; // sass-lint:disable-line no-important
+    }
+
+
+    // Label with no text
+    .k-checkbox-label.k-no-text {
+        min-width: 1px;
+    }
+
+
+    // Checkbox list
+    .k-checkbox-list {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
+        list-style: none;
+    }
+    .k-checkbox-item,
+    .k-checkbox-list-item {
+        padding: $kendo-checkbox-list-item-padding-y $kendo-checkbox-list-item-padding-x;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: map-get( $spacing, 1 );
+
+        .k-checkbox-label {
+            line-height: inherit;
+        }
+    }
+    .k-checkbox-list-horizontal,
+    .k-checkbox-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $kendo-checkbox-list-spacing;
+    }
+
+
+    // RTL
+    [dir="rtl"] {
+        .k-checkbox + .k-checkbox-label,
+        .k-checkbox-label + .k-checkbox {
+            margin-left: 0;
+            margin-right: $kendo-checkbox-label-margin-x;
+        }
+        .k-checkbox-label > .k-checkbox {
+            margin-right: 0;
+            margin-left: $kendo-checkbox-label-margin-x;
+        }
+        kendo-label.k-checkbox-label > .k-checkbox:last-child {
+            margin-left: 0;
+        }
+        kendo-label.k-checkbox-label > .k-label:first-child {
+            margin-right: 0;
+            margin-left: $kendo-checkbox-label-margin-x;
+        }
+    }
+
+    .k-ripple-container {
+        @each $name, $size in $kendo-checkbox-sizes {
+            .k-checkbox-#{$name}::after {
+                content: "";
+                display: block;
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: map-get( $kendo-checkbox-ripple-size, $name );
+                height: map-get( $kendo-checkbox-ripple-size, $name );
+                margin-left: map-get( $kendo-checkbox-ripple-margin, $name );
+                margin-top: map-get( $kendo-checkbox-ripple-margin, $name );
+                border-radius: 100%;
+                z-index: 1;
+                transform: scale(0);
+            }
+
+            .k-checkbox:disabled::after,
+            .k-checkbox.k-disabled::after {
+                display: none;
+            }
+        }
+    }
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/bootstrap/scss/checkbox/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/checkbox/_theme.scss
+@include exports("checkbox/theme") {
+
+    // Checkbox
+    .k-checkbox {
+        @include fill(
+            $kendo-checkbox-text,
+            $kendo-checkbox-bg,
+            $kendo-checkbox-border
+        );
+    }
+
+
+    // Hover state
+    .k-checkbox:hover,
+    .k-checkbox.k-hover {
+        @include fill(
+            $kendo-checkbox-hover-text,
+            $kendo-checkbox-hover-bg,
+            $kendo-checkbox-hover-border
+        );
+    }
+
+
+    // Focus state
+    .k-checkbox:focus,
+    .k-checkbox.k-focus {
+        @include fill( $border: $kendo-checkbox-focus-border );
+        @include box-shadow( $kendo-checkbox-focus-shadow );
+    }
+
+
+    // Indeterminate
+    .k-checkbox:indeterminate,
+    .k-checkbox.k-indeterminate {
+        @include fill(
+            $kendo-checkbox-indeterminate-text,
+            $kendo-checkbox-indeterminate-bg,
+            $kendo-checkbox-indeterminate-border
+        );
+    }
+
+
+    // Checked
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
+        @include fill(
+            $kendo-checkbox-checked-text,
+            $kendo-checkbox-checked-bg,
+            $kendo-checkbox-checked-border
+        );
+    }
+    .k-checkbox:checked:focus,
+    .k-checkbox.k-checked.k-focus {
+        @include fill( $border: $kendo-checkbox-focus-checked-border );
+        @include box-shadow( $kendo-checkbox-focus-checked-shadow );
+    }
+
+
+    // Disabled
+    .k-checkbox:disabled,
+    .k-checkbox.k-disabled {
+        @include fill(
+            $kendo-checkbox-disabled-text,
+            $kendo-checkbox-disabled-bg,
+            $kendo-checkbox-disabled-border
+        );
+    }
+    .k-checkbox:checked:disabled,
+    .k-checkbox:indeterminate:disabled,
+    .k-checkbox.k-checked.k-disabled,
+    .k-checkbox.k-indeterminate.k-disabled {
+        @include fill(
+            $kendo-checkbox-disabled-checked-text,
+            $kendo-checkbox-disabled-checked-bg,
+            $kendo-checkbox-disabled-checked-border
+        );
+    }
+
+
+    // Invalid
+    .k-checkbox:invalid,
+    .k-checkbox.k-invalid {
+        @include fill( $border: $kendo-checkbox-invalid-border );
+    }
+    .k-checkbox:invalid + .k-checkbox-label,
+    .k-checkbox.k-invalid + .k-checkbox-label {
+        @include fill( $color: $kendo-checkbox-invalid-text );
+    }
+
+
+    // Ripple
+    .k-ripple-container {
+        .k-checkbox::after {
+            background: $kendo-checkbox-checked-bg;
+            opacity: $kendo-checkbox-ripple-opacity;
+        }
+    }
+
+}
+
+// #endregion
+
+// #endregion
+
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/list/_variables.scss
+// File already imported_once. Skipping output.
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/list/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/list/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/list/_layout.scss
@@ -8370,6 +8950,9 @@ $kendo-list-no-data-text: $subtle-text !default;
         line-height: $kendo-list-header-line-height;
         font-weight: $kendo-list-header-font-weight;
         white-space: nowrap;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
         flex: none;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -8405,7 +8988,7 @@ $kendo-list-no-data-text: $subtle-text !default;
         font-size: $kendo-list-item-font-size;
         line-height: $kendo-list-item-line-height;
         outline: none;
-        cursor: default;
+        cursor: pointer;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -8416,6 +8999,10 @@ $kendo-list-no-data-text: $subtle-text !default;
         transition-duration: 200ms;
         transition-timing-function: ease;
 
+        .k-checkbox-wrap {
+            align-self: flex-start;
+        }
+
         &.k-first::before {
             content: "";
             border-width: 1px 0 0;
@@ -8481,7 +9068,8 @@ $kendo-list-no-data-text: $subtle-text !default;
         position: absolute;
         width: 100%;
     }
-    .k-virtual-list .k-list-item-text {
+    .k-virtual-list .k-list-item-text,
+    .k-virtual-list .k-list-header-text {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -8655,26 +9243,6 @@ $kendo-list-no-data-text: $subtle-text !default;
 
 // #endregion
 
-@include exports( "list/theme/bootstrap" ) {
-
-    .k-list {}
-
-    .k-list-item:focus,
-    .k-list-item.k-focus,
-    .k-list-optionlabel:focus,
-    .k-list-optionlabel.k-focus {
-        &:hover,
-        &.k-hover {
-            box-shadow: inset 0 0 0 3px rgba($kendo-list-item-hover-text, .15);
-        }
-
-        &.k-selected {
-            box-shadow: inset 0 0 0 3px rgba($kendo-list-item-selected-text, .15);
-        }
-    }
-
-}
-
 // #endregion
 
 // #endregion
@@ -10077,7 +10645,7 @@ $kendo-button-group-focus-shadow: null !default;
     .k-button {
 
         &::after {
-            @include border-radius( $kendo-button-border-radius );
+            @include border-radius( inherit );
             content: "";
             opacity: 0;
             display: none;
@@ -10093,43 +10661,6 @@ $kendo-button-group-focus-shadow: null !default;
     }
 }
 
-
-
-
-@include exports( "button/ie-compat" ) {
-
-    .k-ie {
-
-        .k-button,
-        .k-button-group {
-            display: inline-block;
-            overflow: visible; // IE9
-        }
-
-        .k-button-icontext {
-
-            .k-icon,
-            .k-image,
-            .k-sprite {
-                margin: 0 $icon-spacing 0 0;
-            }
-
-            &.k-rtl,
-            .k-rtl &,
-            &[dir="rtl"],
-            [dir="rtl"] & {
-                .k-icon,
-                .k-image,
-                .k-sprite {
-                    margin: 0 0 0 $icon-spacing;
-                }
-            }
-        }
-
-    }
-
-}
-
 // #endregion
 
 @include exports("button/layout/bootstrap") {
@@ -10543,17 +11074,17 @@ $kendo-input-line-height: $input-line-height !default;
 
 $kendo-input-padding-x-sm: $input-padding-x-sm !default;
 $kendo-input-padding-y-sm: $input-padding-y-sm !default;
-$kendo-input-font-size-sm: $input-font-size-sm !default;
+$kendo-input-font-size-sm: $font-size-md !default;
 $kendo-input-line-height-sm: $line-height-md !default;
 
 $kendo-input-padding-x-md: $input-padding-x !default;
 $kendo-input-padding-y-md: $input-padding-y !default;
-$kendo-input-font-size-md: $input-font-size !default;
+$kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
 $kendo-input-padding-x-lg: $input-padding-x-lg !default;
 $kendo-input-padding-y-lg: $input-padding-y-lg !default;
-$kendo-input-font-size-lg: $input-font-size-lg !default;
+$kendo-input-font-size-lg: $font-size-md !default;
 $kendo-input-line-height-lg: $line-height-md !default;
 
 $kendo-input-sizes: (
@@ -10726,6 +11257,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         overflow: hidden;
         text-overflow: ellipsis;
     }
+    .k-input-value-text::before {
+        content: "\200b";
+        width: 0px;
+        overflow: hidden;
+        flex: none;
+        display: inline-block;
+        vertical-align: top;
+    }
 
 
     // Input multiple values
@@ -10734,6 +11273,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         padding: $kendo-input-values-margin-y $kendo-input-values-margin-x;
         cursor: text;
     }
+    .k-input-values > .k-searchbar,
     .k-input-values > .k-input-inner {
         margin: (-$kendo-input-values-margin-y) (-$kendo-input-values-margin-x);
     }
@@ -10808,6 +11348,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         color: $kendo-input-clear-value-hover-text;
         opacity: $kendo-input-clear-value-hover-opacity;
     }
+    .k-clear-value:focus-visible {
+        outline: 1px dotted;
+        outline-offset: -1px;
+    }
 
 
     // Input button
@@ -10823,6 +11367,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             min-width: auto !important; // sass-lint:disable-line no-important
             min-height: auto !important; // sass-lint:disable-line no-important
         }
+
+        &:focus {
+            box-shadow: none;
+        }
     }
     .k-picker .k-input-button {
         color: inherit;
@@ -11283,42 +11831,12 @@ $floating-label-focus-text: null !default;
 
 // Component
 // #region @import "_variables.scss"; -> packages/bootstrap/scss/combobox/_variables.scss
-// Comboboxes
-$combobox-select-padding-x: $kendo-button-padding-y !default;
-$combobox-select-padding-y: $kendo-button-padding-y !default;
-
-$combobox-bg: $kendo-input-bg !default;
-$combobox-text: $kendo-input-text !default;
-$combobox-border: $kendo-input-border !default;
-
-$combobox-hovered-bg: $kendo-input-hover-bg !default;
-$combobox-hovered-text: $kendo-input-hover-text !default;
-$combobox-hovered-border: $kendo-input-hover-border !default;
-
-$combobox-focused-bg: $kendo-input-focus-bg !default;
-$combobox-focused-text: $kendo-input-focus-text !default;
-$combobox-focused-border: $kendo-input-focus-border !default;
-$combobox-focused-shadow: $kendo-input-focus-shadow !default;
-
-$combobox-select-bg: $kendo-button-bg !default;
-$combobox-select-text: $kendo-button-text !default;
-$combobox-select-border: $kendo-button-border !default;
-$combobox-select-gradient: $kendo-button-gradient !default;
-
-$combobox-select-hovered-bg: $kendo-button-hover-bg !default;
-$combobox-select-hovered-text: $kendo-button-hover-text !default;
-$combobox-select-hovered-border: $kendo-button-hover-border !default;
-$combobox-select-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$combobox-select-pressed-bg: $kendo-button-active-bg !default;
-$combobox-select-pressed-text: $kendo-button-active-text !default;
-$combobox-select-pressed-border: $kendo-button-active-border !default;
-$combobox-select-pressed-gradient: $kendo-button-active-gradient !default;
+// Combobox
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/combobox/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/combobox/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/combobox/_layout.scss
-@include exports("combobox/layout") {
+@include exports( "combobox/layout" ) {
 
     // Combobox
     .k-combobox {}
@@ -11330,7 +11848,7 @@ $combobox-select-pressed-gradient: $kendo-button-active-gradient !default;
 // #endregion
 // #region @import "_theme.scss"; -> packages/bootstrap/scss/combobox/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/combobox/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/combobox/_theme.scss
-@include exports("combobox/theme") {
+@include exports( "combobox/theme" ) {
 
     // Combobox
     .k-combobox {}
@@ -11372,6 +11890,8 @@ $toolbar-shadow: null !default;
 
 $toolbar-separator-border: inherit !default;
 
+$toolbar-input-width: 10em !default;
+
 // #endregion
 // #region @import "../menu/_variables.scss"; -> packages/bootstrap/scss/menu/_variables.scss
 // Menu
@@ -11407,7 +11927,7 @@ $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: inset 0 0 0 3px rgba( $menu-text, .15 ) !default;
 
-$menu-separator-spacing: 0px !default;
+$menu-separator-spacing: map-get( $spacing, 1 ) !default;
 
 $menu-scroll-button-bg: $menu-bg !default;
 $menu-scroll-button-text: rgba( $menu-text, .5 ) !default;
@@ -11487,6 +12007,18 @@ $kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-
 $kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$icon-size} ) !default;
 $kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$icon-size} ) !default;
 
+/// The start margin of the menu item expand icon.
+/// @group menu-popup-item
+$kendo-menu-popup-item-icon-margin-start-sm: $kendo-menu-popup-item-padding-x-sm !default;
+$kendo-menu-popup-item-icon-margin-start: $kendo-menu-popup-item-padding-x-md !default;
+$kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg !default;
+
+/// The end margin of the menu item expand icon.
+/// @group menu-popup-item
+$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) ) !default;
+$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{$kendo-menu-popup-item-padding-x-md / 2}) ) !default;
+$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{$kendo-menu-popup-item-padding-x-lg / 2}) ) !default;
+
 /// The spacing between the menu items in popup.
 /// @group menu-popup-item
 $kendo-menu-popup-item-spacing: 0px !default;
@@ -11670,21 +12202,21 @@ $grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
 $grid-sticky-hovered-bg: try-shade( $grid-bg ) !default;
 $grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;
 
-$grid-filter-menu-width: 250px !default;
+$grid-column-menu-width: 250px !default;
 
 $grid-filter-menu-check-all-border-bottom-width: 1px !default;
 
 $grid-filter-menu-item-spacing-x: map-get( $spacing, 6 ) !default;
 $grid-filter-menu-item-spacing-y: map-get( $spacing, 2 ) !default;
 
-$grid-column-menu-popup-padding-x: 0 !default;
-$grid-column-menu-popup-padding-y: $padding-y !default;
+$grid-column-menu-popup-padding-x: null !default;
+$grid-column-menu-popup-padding-y: null !default;
 
-$grid-column-menu-item-padding-x: $padding-x-lg !default;
-$grid-column-menu-item-padding-y: $padding-y-sm !default;
+$grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x-md !default;
+$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y-md !default;
 
-$grid-column-menu-list-item-padding-x: $padding-x-lg !default;
-$grid-column-menu-list-item-padding-y: $padding-y-sm !default;
+$grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 $grid-column-menu-items-wrap-padding-x: 0 !default;
 $grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;
@@ -11745,7 +12277,7 @@ $kendo-table-sizes: (
     sm: (
         font-size: $font-size,
         line-height: $line-height,
-        cell-padding-x: map-get( $spacing, 1 ),
+        cell-padding-x: map-get( $spacing, 2 ),
         cell-padding-y: map-get( $spacing, 1 )
     ),
     md: (
@@ -11757,7 +12289,7 @@ $kendo-table-sizes: (
     lg: (
         font-size: $font-size,
         line-height: $line-height,
-        cell-padding-x: map-get( $spacing, 3 ),
+        cell-padding-x: map-get( $spacing, 2 ),
         cell-padding-y: map-get( $spacing, 3 )
     )
 ) !default;
@@ -11798,13 +12330,13 @@ $kendo-table-footer-border: $grid-footer-border !default;
 
 /// Background color of group rows in table.
 /// @group table
-$kendo-table-group-row-bg: $grid-grouping-row-bg !default;
+$kendo-table-group-row-bg: $kendo-table-header-bg !default;
 /// Text color of group rows in table.
 /// @group table
-$kendo-table-group-row-text: $grid-grouping-row-text !default;
+$kendo-table-group-row-text: $kendo-table-header-text !default;
 /// Border color of group rows in table.
 /// @group table
-$kendo-table-group-row-border: null !default;
+$kendo-table-group-row-border: $kendo-table-header-border !default;
 
 
 /// Background color of alternating rows in table.
@@ -11856,7 +12388,7 @@ $kendo-table-selected-border: $grid-selected-border !default;
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/table/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/table/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/table/_layout.scss
-@include exports("table/layout") {
+@include exports( "table/layout" ) {
 
     // Table
     .k-table {
@@ -11888,12 +12420,11 @@ $kendo-table-selected-border: $grid-selected-border !default;
     // Table native parts
     .k-table-thead,
     .k-table-tbody,
-    .k-table-tfoot {
-        text-align: inherit;
-    }
+    .k-table-tfoot,
     .k-table-row,
     .k-table-alt-row {
         border-color: inherit;
+        text-align: inherit;
     }
     .k-table-th,
     .k-table-td {
@@ -11914,6 +12445,9 @@ $kendo-table-selected-border: $grid-selected-border !default;
             border-left-width: 0;
         }
     }
+    .k-table-th {
+        border-bottom-width: 1px;
+    }
 
 
     // Table header
@@ -11932,8 +12466,25 @@ $kendo-table-selected-border: $grid-selected-border !default;
         width: 100%;
         border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
         border-style: solid;
+        border-color: inherit;
         overflow: hidden;
     }
+    .k-table-header,
+    .k-table-header-wrap {
+        > .k-table {
+            margin-bottom: -1px;
+        }
+    }
+    .k-table-group-sticky-header {
+        flex: none;
+
+        .k-table-th {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            align-content: center;
+        }
+    }
 
 
     // Table list
@@ -12011,7 +12562,8 @@ $kendo-table-selected-border: $grid-selected-border !default;
 
 
     // Virtualization
-    .k-virtual-table .k-table-row {
+    .k-virtual-table .k-table-row,
+    .k-virtual-table .k-table-group-row {
         position: absolute;
         width: 100%;
     }
@@ -12044,6 +12596,7 @@ $kendo-table-selected-border: $grid-selected-border !default;
         width: 100%;
         border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
         border-style: solid;
+        border-color: inherit;
         overflow: hidden;
     }
 
@@ -12116,7 +12669,7 @@ $kendo-table-selected-border: $grid-selected-border !default;
 // #endregion
 // #region @import "_theme.scss"; -> packages/bootstrap/scss/table/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/table/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/table/_theme.scss
-@include exports("table/theme") {
+@include exports( "table/theme" ) {
 
     // Table
     .k-table,
@@ -12129,7 +12682,8 @@ $kendo-table-selected-border: $grid-selected-border !default;
 
     // Table header
     .k-table-thead,
-    .k-table-header {
+    .k-table-header,
+    .k-table-group-sticky-header {
         border-color: $kendo-table-header-border;
         color: $kendo-table-header-text;
         background-color: $kendo-table-header-bg;
@@ -12203,6 +12757,72 @@ $kendo-table-selected-border: $grid-selected-border !default;
 // #endregion
 
 
+// #endregion
+// #region @import "virtual-scroller/_index.scss"; -> packages/bootstrap/scss/virtual-scroller/_index.scss
+// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/virtual-scroller/_variables.scss
+// Virtual-scroller
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/bootstrap/scss/virtual-scroller/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/virtual-scroller/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/virtual-scroller/_layout.scss
+@include exports( "virtual-scroller/layout" ) {
+
+    // Virtual scroller
+    .k-virtual-scroller {
+        width: 100%;
+        height: 100%;
+        flex: 1 1 auto;
+        overflow: auto;
+        position: relative;
+    }
+
+
+    // Virtual scroller wrap
+    .k-virtual-scroller-wrap {
+        position: relative;
+        z-index: 1;
+    }
+
+
+    // Virtual scroller content
+    .k-virtual-scroller-content {
+        position: absolute;
+        width: 100%;
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+
+    // Virtual scroller size
+    .k-virtual-scroller-size {
+        position: relative;
+        z-index: 0;
+    }
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/bootstrap/scss/virtual-scroller/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/virtual-scroller/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/virtual-scroller/_theme.scss
+@include exports( "virtual-scroller/theme" ) {
+
+}
+
+// #endregion
+
+// #endregion
+
 // #endregion
 
 
@@ -12844,31 +13464,16 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
         height: 100%;
         border-width: $color-preview-border-width;
         border-radius: $color-preview-border-radius;
+        box-sizing: border-box;
         border-style: solid;
         display: inline-flex;
         flex-direction: row;
         flex-wrap: nowrap;
         position: relative;
         overflow: hidden;
-
-        > .k-color-preview-mask {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-
-        &::before {
-            content: "";
-            width: 100%;
-            height: 100%;
-            display: block;
-            position: relative;
-            z-index: -1;
-        }
     }
 
+
     // Current Color
     .k-coloreditor-current-color {
         cursor: pointer;
@@ -12888,23 +13493,37 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
         .k-color-preview-mask {
             width: calc( #{$icon-size} - 2px );
             height: 2px;
-            position: static;
-        }
-
-        &::before {
-            display: none;
         }
     }
 
 
-    // No Color
-    .k-no-color::before {
+    // Color Preview Mask
+    .k-color-preview-mask {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+    .k-color-preview-mask::before {
         content: "";
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
+        z-index: -1;
+        background: $color-preview-transparent-color-image;
+        background-size: contain;
+        background-position: 0 0;
+    }
+
+
+    // No Color
+    .k-no-color .k-color-preview-mask::before {
+        content: "";
+        background-color: $color-preview-no-color-bg;
+        background-image: $color-preview-no-color-image;
+        background-size: 100% 100%;
+        background-position: 0 0;
     }
 
 }
@@ -12924,26 +13543,12 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
             $color-preview-border
         );
 
-        &::before {
-            background: $color-preview-transparent-color-image;
-            background-size: contain;
-            background-position: 0;
-        }
-
         &:hover,
         &.k-hover {
             @include fill( $border: $color-preview-hover-border );
         }
     }
 
-    // No Color
-    .k-no-color::before {
-        background-color: $color-preview-no-color-bg;
-        background-image: $color-preview-no-color-image;
-        background-size: 100% 100%;
-        background-position: 0 0;
-    }
-
 }
 
 // #endregion
@@ -13809,13 +14414,20 @@ $tooltip-error-border: $tooltip-error-bg !default;
         .k-split-button {}
 
 
+        // Input
+        .k-input,
+        .k-picker:not(.k-colorpicker) {
+            width: $toolbar-input-width;
+        }
+
         // Overflow anchor
         .k-overflow-anchor {
             @include border-radius( 0 );
             margin: 0;
             padding: $toolbar-padding-y;
-            width: $toolbar-inner-calc-size;
+            width: auto;
             height: 100%;
+            aspect-ratio: 1;
             border-width: 0;
             border-color: inherit;
             box-sizing: border-box;
@@ -13847,6 +14459,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
             flex: 1 0 0%;
         }
 
+
         // Template
         .k-toolbar-template {
             align-self: center;
@@ -13867,6 +14480,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
     // Angular specific
     kendo-toolbar-renderer {
+        display: inline-block;
         border-color: inherit;
     }
 
@@ -13874,6 +14488,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;
@@ -13881,13 +14503,23 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
         // Button
         .k-overflow-button {
+            @include border-radius( 0 );
+            padding: $kendo-list-item-padding-y-md $kendo-list-item-padding-x-md;
             width: 100%;
+            border-width: 0;
+            color: inherit;
+            background-color: transparent;
+            background-image: none;
+            line-height: inherit;
+            display: flex;
+            justify-content: flex-start;
         }
 
         // Button group
         .k-button-group {
+            @include box-shadow( none );
             display: flex;
-            flex-direction: column;
+            flex-flow: column nowrap;
 
             .k-button {
                 margin: if( $kendo-button-border-width == 0, null, 0);
@@ -13981,13 +14613,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;
@@ -13999,6 +14624,41 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
     }
 
+
+    // Overflow container
+    .k-overflow-container {
+
+        .k-button {
+
+            // Hover state
+            &:hover,
+            &.k-state-hover {
+                color: $kendo-list-item-hover-text;
+                background: $kendo-list-item-hover-bg;
+            }
+
+            // Active state
+            &:active,
+            &.k-state-active {
+                color: $kendo-list-item-selected-text;
+                background: $kendo-list-item-selected-bg;
+            }
+
+            // Button focus state
+            .k-button:focus,
+            .k-button.k-state-focused {
+                box-shadow: $kendo-list-item-focus-shadow;
+            }
+
+            // Disabled state
+            &:disabled,
+            &.k-state-disabled {
+                color: inherit;
+            }
+        }
+
+    }
+
 }
 
 
@@ -14353,7 +15013,8 @@ $fieldset-legend-border: null !default;
             border: 0;
 
             > * {
-                &:first-child {
+                &:not(.k-hidden):first-child,
+                &.k-hidden + :not(.k-hidden) {
                     margin-top: 0;
                 }
             }
@@ -14382,7 +15043,8 @@ $fieldset-legend-border: null !default;
 
         > *,
         .k-daterangepicker .k-textbox-container {
-            &:first-child {
+            &:not(.k-hidden):first-child,
+            &.k-hidden + :not(.k-hidden) {
                 margin-top: 0;
             }
         }
@@ -14946,753 +15608,184 @@ $fieldset-legend-border: null !default;
             $tooltip-success-text,
             $tooltip-success-bg,
             $tooltip-success-border
-        );
-
-        .k-callout {
-            color: $tooltip-success-bg;
-        }
-    }
-    .k-tooltip-warning {
-        @include fill(
-            $tooltip-warning-text,
-            $tooltip-warning-bg,
-            $tooltip-warning-border
-        );
-
-        .k-callout {
-            color: $tooltip-warning-bg;
-        }
-    }
-    .k-tooltip-error {
-        @include fill(
-            $tooltip-error-text,
-            $tooltip-error-bg,
-            $tooltip-error-border
-        );
-
-        .k-callout {
-            color: $tooltip-error-bg;
-        }
-    }
-}
-
-// #endregion
-
-// #endregion
-
-// #endregion
-// #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/bootstrap/scss/validator/_variables.scss
-
-// #endregion
-// #region @import "_layout.scss"; -> packages/bootstrap/scss/validator/_layout.scss
-// #region @import "~@progress/kendo-theme-default/scss/validator/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/validator/_layout.scss
-@include exports("validator/layout") {
-
-    .k-validator-tooltip {
-        margin-top: calc( #{$tooltip-callout-size} + #{$tooltip-border-width} );
-        width: auto;
-        white-space: normal;
-        display: flex;
-        align-items: center;
-        // NOTE: This works around popup / tooltip stackin issue
-        z-index: 9999;
-
-        // .k-callout-n { inset-inline-start: 16px; }
-    }
-    .k-grid .k-validator-tooltip {
-        max-width: 300px;
-    }
-
-}
-
-// #endregion
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/bootstrap/scss/validator/_theme.scss
-// #region @import "~@progress/kendo-theme-default/scss/validator/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/validator/_theme.scss
-@include exports( "validator/theme" ) {}
-
-// #endregion
-
-// #endregion
-
-// #endregion
-// #region @import "floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Native forms
-// #region @import "button/_index.scss"; -> packages/bootstrap/scss/button/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "textbox/_index.scss"; -> packages/bootstrap/scss/textbox/_index.scss
-// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Dependencies
-// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/bootstrap/scss/textbox/_variables.scss
-// Textbox
-
-// #endregion
-// #region @import "_layout.scss"; -> packages/bootstrap/scss/textbox/_layout.scss
-// #region @import "~@progress/kendo-theme-default/scss/textbox/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textbox/_layout.scss
-@include exports( "textbox/layout" ) {
-
-    // Textbox
-    .k-textbox {}
-
-}
-
-// #endregion
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/bootstrap/scss/textbox/_theme.scss
-// #region @import "~@progress/kendo-theme-default/scss/textbox/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textbox/_theme.scss
-@include exports("textbox/theme") {
-
-    // Textbox
-    .k-textbox {}
-}
-
-// #endregion
-
-// #endregion
-
-// #endregion
-// #region @import "textarea/_index.scss"; -> packages/bootstrap/scss/textarea/_index.scss
-// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Dependencies
-// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/bootstrap/scss/textarea/_variables.scss
-// Textarea
-
-// #endregion
-// #region @import "_layout.scss"; -> packages/bootstrap/scss/textarea/_layout.scss
-// #region @import "~@progress/kendo-theme-default/scss/textarea/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textarea/_layout.scss
-@include exports( "textarea/layout" ) {
-
-    // Textarea
-    .k-textarea {}
-
-}
-
-// #endregion
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/bootstrap/scss/textarea/_theme.scss
-// #region @import "~@progress/kendo-theme-default/scss/textarea/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textarea/_theme.scss
-@include exports("textarea/theme") {
-
-    // Textarea
-    .k-textarea {}
-
-}
-
-// #endregion
-
-// #endregion
-
-// #endregion
-// #region @import "checkbox/_index.scss"; -> packages/bootstrap/scss/checkbox/_index.scss
-// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Dependencies
-// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../list/_variables.scss"; -> packages/bootstrap/scss/list/_variables.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-// Component
-// #region @import "_variables.scss"; -> packages/bootstrap/scss/checkbox/_variables.scss
-// Checkbox
-
-/// The sizes of checkbox.
-/// @group checkbox
-$kendo-checkbox-sizes: (
-    sm: map-get( $spacing, 3 ),
-    md: map-get( $spacing, 4 ),
-    lg: map-get( $spacing, 6 )
-) !default;
-
-/// The  border width of checkbox.
-/// @group checkbox
-$kendo-checkbox-border-width: 1px !default;
-/// The line height of checkbox.
-/// @group checkbox
-$kendo-checkbox-line-height: calc( #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width} ) !default;
-
-/// The background of checkbox.
-/// @group checkbox
-$kendo-checkbox-bg: $component-bg !default;
-/// The background of checkbox.
-/// @group checkbox
-$kendo-checkbox-text: null !default;
-/// The border of checkbox.
-/// @group checkbox
-$kendo-checkbox-border: contrast-wcag( $kendo-checkbox-bg, $gray-400, $gray-600 ) !default;
-
-/// The background of hovered checkbox.
-/// @group checkbox
-$kendo-checkbox-hover-bg: null !default;
-/// The text of hovered checkbox.
-/// @group checkbox
-$kendo-checkbox-hover-text: null !default;
-/// The border of hovered checkbox.
-/// @group checkbox
-$kendo-checkbox-hover-border: null !default;
-
-/// The background of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-bg: $primary !default;
-/// The text of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
-/// The border of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
-
-/// The background of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
-/// The text of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
-/// The border of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
-
-/// The border of focused checkbox.
-/// @group checkbox
-$kendo-checkbox-focus-border: try-tint( $primary, 50% ) !default;
-/// The shadow of focused checkbox.
-/// @group checkbox
-$kendo-checkbox-focus-shadow: 0 0 0 .25rem rgba( $primary, .25 ) !default;
-/// The border of focused and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;
-/// The shadow of focused and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-focus-checked-shadow: $kendo-checkbox-focus-shadow !default;
-
-/// The background of disabled checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-bg: null !default;
-/// The text of disabled checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-text: null !default;
-/// The border of disabled checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-border: null !default;
-
-/// The background of disabled and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-checked-bg: null !default;
-/// The text of disabled and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-checked-text: null !default;
-/// The border of disabled and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-disabled-checked-border: null !default;
-
-/// The background of invalid checkbox.
-/// @group checkbox
-$kendo-checkbox-invalid-bg: null !default;
-/// The text of invalid checkbox.
-/// @group checkbox
-$kendo-checkbox-invalid-text: $invalid-text !default;
-/// The border of invalid checkbox.
-/// @group checkbox
-$kendo-checkbox-invalid-border: $invalid-border !default;
-
-
-// Checkbox indicator
-
-/// The icon type of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-icon-type: image !default;
-
-/// The glyph font family of checkbox.
-/// @group checkbox
-$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-/// The glyph of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-glyph: "\e118" !default;
-/// The glyph of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-glyph: "\e121" !default;
-
-/// The image of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
-/// The image of indeterminate checkbox.
-/// @group checkbox
-$kendo-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='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
-
-
-// Checkbox label
-
-/// The horizontal margin of the checkbox inside a label.
-/// @group checkbox
-$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
-
-
-// Checkbox list
-
-/// The list margin checkbox.
-/// @group checkbox
-$kendo-checkbox-list-margin: 0px !default;
-/// The list padding checkbox.
-/// @group checkbox
-$kendo-checkbox-list-padding: 0px !default;
-/// The horizontal list item padding of checkbox.
-/// @group checkbox
-$kendo-checkbox-list-item-padding-x: 0px !default;
-/// The vertical list item padding of checkbox.
-/// @group checkbox
-$kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
-/// The horizontal margin of list item of checkbox.
-/// @group checkbox
-$kendo-checkbox-list-horizontal-item-margin-x: 32px !default;
-
-
-// Checkbox ripple
-
-/// The ripple size of checkbox.
-/// @group checkbox
-$kendo-checkbox-ripple-size: (
-    sm: (map-get( $kendo-checkbox-sizes, "sm" ) * 3),
-    md: (map-get( $kendo-checkbox-sizes, "md" ) * 3),
-    lg: (map-get( $kendo-checkbox-sizes, "lg" ) * 3)
-) !default;
-/// The ripple margin of checkbox.
-/// @group checkbox
-$kendo-checkbox-ripple-margin: (
-    sm: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "sm" )} + #{$kendo-checkbox-border-width})),
-    md: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width})),
-    lg: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "lg" )} + #{$kendo-checkbox-border-width}))
-) !default;
-/// The ripple opacity of checkbox.
-/// @group checkbox
-$kendo-checkbox-ripple-opacity: .3 !default;
-
-// #endregion
-// #region @import "_layout.scss"; -> packages/bootstrap/scss/checkbox/_layout.scss
-// #region @import "~@progress/kendo-theme-default/scss/checkbox/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/checkbox/_layout.scss
-@include exports( "checkbox/layout" ) {
-
-    // Checkbox
-    .k-checkbox {
-        margin: 0;
-        padding: 0;
-        line-height: initial;
-        border-width: $kendo-checkbox-border-width;
-        border-style: solid;
-        outline: 0;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        display: inline-block;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-        -webkit-appearance: none;
-    }
-
-    @each $name, $size in $kendo-checkbox-sizes {
-        // Checkbox sizes
-        .k-checkbox-#{$name} {
-            width: $size;
-            height: $size;
-
-            + .k-checkbox-label {
-
-                .k-ripple {
-                    top: ($size / 2);
-                    left: ($size / 2);
-                    width: ($size * 5 / 2);
-                    height: ($size * 5 / 2);
-                }
-            }
-        }
-
-
-        // Checkbox indicator
-        .k-checkbox-#{$name}::before {
-            @if $kendo-checkbox-icon-type == "glyph" {
-                content: $kendo-checkbox-checked-glyph;
-                width: ($size - map-get( $spacing, thin ));
-                height: ($size - map-get( $spacing, thin ));
-                font-size: ($size - map-get( $spacing, thin ));
-                font-family: $kendo-checkbox-glyph-font-family;
-                line-height: 1;
-                transform: scale(0) translate(-50%, -50%);
-                overflow: hidden;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-            }
-
-            @if $kendo-checkbox-icon-type == "marker" {
-                content: "";
-                width: ($size - map-get( $spacing, 1 ));
-                height: ($size - map-get( $spacing, 1 ));
-                background-color: currentColor;
-                transform: scale(0) translate(-50%, -50%);
-                overflow: hidden;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-            }
-        }
-    }
-
-
-    // Checked state
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
-        @if $kendo-checkbox-icon-type == "image" {
-            background-image: $kendo-checkbox-checked-image;
-        }
-
-        @if $kendo-checkbox-icon-type == "glyph" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-
-        @if $kendo-checkbox-icon-type == "marker" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-    }
+        );
 
-    // Indeterminate state
-    .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate {
-        @if $kendo-checkbox-icon-type == "image" {
-            background-image: $kendo-checkbox-indeterminate-image;
+        .k-callout {
+            color: $tooltip-success-bg;
         }
+    }
+    .k-tooltip-warning {
+        @include fill(
+            $tooltip-warning-text,
+            $tooltip-warning-bg,
+            $tooltip-warning-border
+        );
 
-        @if $kendo-checkbox-icon-type == "glyph" {
-            &::before {
-                content: $kendo-checkbox-indeterminate-glyph;
-                transform: scale(1) translate(-50%, -50%);
-            }
+        .k-callout {
+            color: $tooltip-warning-bg;
         }
+    }
+    .k-tooltip-error {
+        @include fill(
+            $tooltip-error-text,
+            $tooltip-error-bg,
+            $tooltip-error-border
+        );
 
-        @if $kendo-checkbox-icon-type == "marker" {
-            &::before {
-                width: $kendo-checkbox-maker-indeterminate-width;
-                height: $kendo-checkbox-marker-indeterminate-height;
-                transform: scale(1) translate(-50%, -50%);
-            }
+        .k-callout {
+            color: $tooltip-error-bg;
         }
     }
+}
 
+// #endregion
 
-    // Disabled state
-    .k-checkbox:disabled,
-    .k-checkbox.k-disabled,
-    .k-checkbox:disabled + .k-checkbox-label,
-    .k-checkbox.k-disabled + .k-checkbox-label {
-        @include disabled( $disabled-styling );
-    }
+// #endregion
 
-    // Checkbox label
-    .k-checkbox-label {
-        margin: 0;
-        padding: 0;
-        line-height: $kendo-checkbox-line-height;
-        display: inline-flex;
-        align-items: flex-start;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
+// #endregion
+// #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-        .k-label {
-            cursor: pointer;
-        }
 
-        .k-ripple {
-            right: auto;
-            bottom: auto;
-            transform: translate(-50%, -50%);
-            border-radius: 50%;
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/validator/_variables.scss
 
-            // Hide ripple temporarily
-            visibility: hidden !important; // sass-lint:disable-line no-important
-        }
+// #endregion
+// #region @import "_layout.scss"; -> packages/bootstrap/scss/validator/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/validator/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/validator/_layout.scss
+@include exports("validator/layout") {
 
-        .k-ripple-blob {
-            // sass-lint:disable-block no-important
-            // use !important until ripple can apply these styles from the script
-            top: 50% !important;
-            left: 50% !important;
-            width: 200% !important;
-            height: 200% !important;
-        }
-    }
-    .k-checkbox + .k-checkbox-label {
-        display: inline;
-    }
-    .k-checkbox + .k-checkbox-label,
-    .k-checkbox-label + .k-checkbox {
-        margin-left: $kendo-checkbox-label-margin-x;
-    }
-    .k-checkbox-label > .k-checkbox {
-        margin-right: $kendo-checkbox-label-margin-x;
-        flex-shrink: 0;
-    }
-    kendo-label.k-checkbox-label > .k-checkbox:last-child {
-        margin-right: 0;
-    }
-    kendo-label.k-checkbox-label > .k-label:first-child {
-        margin-right: $kendo-checkbox-label-margin-x;
+    .k-validator-tooltip {
+        margin-top: calc( #{$tooltip-callout-size} + #{$tooltip-border-width} );
+        width: auto;
+        white-space: normal;
+        display: flex;
+        align-items: center;
+        // NOTE: This works around popup / tooltip stackin issue
+        z-index: 9999;
+
+        // .k-callout-n { inset-inline-start: 16px; }
     }
-    kendo-label.k-checkbox-label > .k-label {
-        display: inline;
+    .k-grid .k-validator-tooltip {
+        max-width: 300px;
     }
 
+}
 
-    // Empty label
-    .k-checkbox-label:empty {
-        display: none;
-    }
-
+// #endregion
 
-    // Label with no text
-    .k-checkbox-label.k-no-text {
-        min-width: 1px;
-    }
+// #endregion
+// #region @import "_theme.scss"; -> packages/bootstrap/scss/validator/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/validator/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/validator/_theme.scss
+@include exports( "validator/theme" ) {}
 
+// #endregion
 
-    // Checkbox list
-    .k-checkbox-list {
-        margin: $kendo-checkbox-list-margin;
-        padding: $kendo-checkbox-list-padding;
-        list-style: none;
+// #endregion
 
-        .k-checkbox-item {
-            padding: $kendo-checkbox-list-item-padding-y $kendo-checkbox-list-item-padding-x;
-        }
-    }
+// #endregion
+// #region @import "floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-    .k-list-horizontal {
-        .k-checkbox-item {
-            display: inline-block;
-            margin: 0 $kendo-checkbox-list-horizontal-item-margin-x 0 0;
 
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-    }
+// Native forms
+// #region @import "button/_index.scss"; -> packages/bootstrap/scss/button/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "textbox/_index.scss"; -> packages/bootstrap/scss/textbox/_index.scss
+// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
-    // RTL
-    [dir="rtl"] {
-        .k-checkbox + .k-checkbox-label,
-        .k-checkbox-label + .k-checkbox {
-            margin-left: 0;
-            margin-right: $kendo-checkbox-label-margin-x;
-        }
-        .k-checkbox-label > .k-checkbox {
-            margin-right: 0;
-            margin-left: $kendo-checkbox-label-margin-x;
-        }
-        kendo-label.k-checkbox-label > .k-checkbox:last-child {
-            margin-left: 0;
-        }
-        kendo-label.k-checkbox-label > .k-label:first-child {
-            margin-right: 0;
-            margin-left: $kendo-checkbox-label-margin-x;
-        }
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-        .k-list-horizontal {
-            .k-checkbox-item {
-                margin-right: 0;
-                margin-left: $kendo-checkbox-list-horizontal-item-margin-x;
 
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
-    }
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/textbox/_variables.scss
+// Textbox
 
-    .k-ripple-container {
-        @each $name, $size in $kendo-checkbox-sizes {
-            .k-checkbox-#{$name}::after {
-                content: "";
-                display: block;
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: map-get( $kendo-checkbox-ripple-size, $name );
-                height: map-get( $kendo-checkbox-ripple-size, $name );
-                margin-left: map-get( $kendo-checkbox-ripple-margin, $name );
-                margin-top: map-get( $kendo-checkbox-ripple-margin, $name );
-                border-radius: 100%;
-                z-index: 1;
-                transform: scale(0);
-            }
+// #endregion
+// #region @import "_layout.scss"; -> packages/bootstrap/scss/textbox/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/textbox/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textbox/_layout.scss
+@include exports( "textbox/layout" ) {
 
-            .k-checkbox:disabled::after,
-            .k-checkbox.k-disabled::after {
-                display: none;
-            }
-        }
-    }
+    // Textbox
+    .k-textbox {}
 
 }
 
 // #endregion
 
 // #endregion
-// #region @import "_theme.scss"; -> packages/bootstrap/scss/checkbox/_theme.scss
-// #region @import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/checkbox/_theme.scss
-@include exports("checkbox/theme") {
-
-    // Checkbox
-    .k-checkbox {
-        @include fill(
-            $kendo-checkbox-text,
-            $kendo-checkbox-bg,
-            $kendo-checkbox-border
-        );
-    }
+// #region @import "_theme.scss"; -> packages/bootstrap/scss/textbox/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/textbox/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textbox/_theme.scss
+@include exports("textbox/theme") {
 
+    // Textbox
+    .k-textbox {}
+}
 
-    // Hover state
-    .k-checkbox:hover,
-    .k-checkbox.k-hover {
-        @include fill(
-            $kendo-checkbox-hover-text,
-            $kendo-checkbox-hover-bg,
-            $kendo-checkbox-hover-border
-        );
-    }
+// #endregion
 
+// #endregion
 
-    // Focus state
-    .k-checkbox:focus,
-    .k-checkbox.k-focus {
-        @include fill( $border: $kendo-checkbox-focus-border );
-        @include box-shadow( $kendo-checkbox-focus-shadow );
-    }
+// #endregion
+// #region @import "textarea/_index.scss"; -> packages/bootstrap/scss/textarea/_index.scss
+// #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
-    // Indeterminate
-    .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate {
-        @include fill(
-            $kendo-checkbox-indeterminate-text,
-            $kendo-checkbox-indeterminate-bg,
-            $kendo-checkbox-indeterminate-border
-        );
-    }
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../input/_index.scss"; -> packages/bootstrap/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../floating-label/_index.scss"; -> packages/bootstrap/scss/floating-label/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
-    // Checked
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
-        @include fill(
-            $kendo-checkbox-checked-text,
-            $kendo-checkbox-checked-bg,
-            $kendo-checkbox-checked-border
-        );
-    }
-    .k-checkbox:checked:focus,
-    .k-checkbox.k-checked.k-focus {
-        @include fill( $border: $kendo-checkbox-focus-checked-border );
-        @include box-shadow( $kendo-checkbox-focus-checked-shadow );
-    }
+// Component
+// #region @import "_variables.scss"; -> packages/bootstrap/scss/textarea/_variables.scss
+// Textarea
 
+// #endregion
+// #region @import "_layout.scss"; -> packages/bootstrap/scss/textarea/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/textarea/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textarea/_layout.scss
+@include exports( "textarea/layout" ) {
 
-    // Disabled
-    .k-checkbox:disabled,
-    .k-checkbox.k-disabled {
-        @include fill(
-            $kendo-checkbox-disabled-text,
-            $kendo-checkbox-disabled-bg,
-            $kendo-checkbox-disabled-border
-        );
-    }
-    .k-checkbox:checked:disabled,
-    .k-checkbox:indeterminate:disabled,
-    .k-checkbox.k-checked.k-disabled,
-    .k-checkbox.k-indeterminate.k-disabled {
-        @include fill(
-            $kendo-checkbox-disabled-checked-text,
-            $kendo-checkbox-disabled-checked-bg,
-            $kendo-checkbox-disabled-checked-border
-        );
-    }
+    // Textarea
+    .k-textarea {}
 
+}
 
-    // Invalid
-    .k-checkbox:invalid,
-    .k-checkbox.k-invalid {
-        @include fill( $border: $kendo-checkbox-invalid-border );
-    }
-    .k-checkbox:invalid + .k-checkbox-label,
-    .k-checkbox.k-invalid + .k-checkbox-label {
-        @include fill( $color: $kendo-checkbox-invalid-text );
-    }
+// #endregion
 
+// #endregion
+// #region @import "_theme.scss"; -> packages/bootstrap/scss/textarea/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/textarea/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/textarea/_theme.scss
+@include exports("textarea/theme") {
 
-    // Ripple
-    .k-ripple-container {
-        .k-checkbox::after {
-            background: $kendo-checkbox-checked-bg;
-            opacity: $kendo-checkbox-ripple-opacity;
-        }
-    }
+    // Textarea
+    .k-textarea {}
 
 }
 
@@ -15700,6 +15793,9 @@ $kendo-checkbox-ripple-opacity: .3 !default;
 
 // #endregion
 
+// #endregion
+// #region @import "checkbox/_index.scss"; -> packages/bootstrap/scss/checkbox/_index.scss
+// File already imported_once. Skipping output.
 // #endregion
 // #region @import "listbox/_index.scss"; -> packages/bootstrap/scss/listbox/_index.scss
 // #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
@@ -15733,7 +15829,7 @@ $kendo-checkbox-ripple-opacity: .3 !default;
 // Listbox
 $listbox-margin: 5px !default;
 $listbox-button-margin: $padding-x !default;
-$listbox-width: 12.4em !default;
+$listbox-width: 10em !default;
 $listbox-default-height: 200px !default;
 
 $listbox-border-width: 1px !default;
@@ -16238,7 +16334,7 @@ $progressbar-chunk-border: $body-bg !default;
 
 
 // Dependencies
-// #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
+// #region @import "../typography/_variables.scss"; -> packages/bootstrap/scss/typography/_variables.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../list/_variables.scss"; -> packages/bootstrap/scss/list/_variables.scss
@@ -16385,21 +16481,15 @@ $kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
 
 // Radio list
 
-/// The list margin of radio button.
-/// @group radio
-$kendo-radio-list-margin: 0px !default;
-/// The list padding of radio button.
+/// The horizontal list item margin of radio button.
 /// @group radio
-$kendo-radio-list-padding: 0px !default;
+$kendo-radio-list-spacing: map-get( $spacing, 4 ) !default;
 /// The horizontal list item padding of radio button.
 /// @group radio
 $kendo-radio-list-item-padding-x: 0px !default;
 /// The vertical list item padding of radio button.
 /// @group radio
 $kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
-/// The horizontal list item margin of radio button.
-/// @group radio
-$kendo-radio-list-horizontal-item-margin-x: 32px !default;
 
 
 // Radio ripple
@@ -16441,6 +16531,7 @@ $kendo-radio-ripple-opacity: .3 !default;
         background-repeat: no-repeat;
         background-size: contain;
         display: inline-block;
+        flex: none;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
@@ -16524,6 +16615,25 @@ $kendo-radio-ripple-opacity: .3 !default;
         @include disabled( $disabled-styling );
     }
 
+
+    // Radio wrap
+    .k-radio-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
     .k-radio + .k-radio-label {
         display: inline;
     }
@@ -16545,7 +16655,7 @@ $kendo-radio-ripple-opacity: .3 !default;
 
         // Hide empty label
         &:empty {
-            display: none;
+            display: none !important; // sass-lint:disable-line no-important
         }
 
         .k-ripple {
@@ -16583,25 +16693,32 @@ $kendo-radio-ripple-opacity: .3 !default;
 
     // Radio list
     .k-radio-list {
-        margin: $kendo-radio-list-margin;
-        padding: $kendo-radio-list-padding;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
         list-style: none;
-
-        .k-radio-item {
-            padding: $kendo-radio-list-item-padding-y $kendo-radio-list-item-padding-x;
-        }
     }
+    .k-radio-item,
+    .k-radio-list-item {
+        padding: $kendo-radio-list-item-padding-y $kendo-radio-list-item-padding-x;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: map-get( $spacing, 1 );
 
-    .k-list-horizontal {
-        .k-radio-item {
-            display: inline-block;
-            margin: 0 $kendo-radio-list-horizontal-item-margin-x 0 0;
-
-            &:last-child {
-                margin-right: 0;
-            }
+        .k-radio-label {
+            line-height: inherit;
         }
     }
+    .k-radio-list-horizontal,
+    .k-radio-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $kendo-radio-list-spacing;
+    }
 
     // RTL
     .k-rtl,
@@ -16623,17 +16740,6 @@ $kendo-radio-ripple-opacity: .3 !default;
             margin-right: 0;
             margin-left: $kendo-radio-label-margin-x;
         }
-
-        .k-list-horizontal {
-            .k-radio-item {
-                margin-right: 0;
-                margin-left: $kendo-radio-list-horizontal-item-margin-x;
-
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 
     .k-ripple-container {
@@ -19059,10 +19165,20 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/numerictextbox/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/numerictextbox/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/numerictextbox/_layout.scss
-@include exports("numerictextbox/layout") {
+@include exports( "numerictextbox/layout" ) {
 
     // Numeric textbox
-    .k-numerictextbox {}
+    .k-numeric-textbox {
+
+        .k-input-inner {
+            text-overflow: clip;
+        }
+
+    }
+
+
+    // Alias
+    .k-numerictextbox { @extend .k-numeric-textbox; }
 
 }
 
@@ -19074,7 +19190,7 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
 @include exports( "numerictextbox/theme" ) {
 
     // Numeric textbox
-    .k-numerictextbox {}
+    .k-numeric-textbox {}
 
 }
 
@@ -19475,9 +19591,9 @@ $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
 $coloreditor-header-actions-gap: ( $coloreditor-spacer / 2 ) !default;
 
-$coloreditor-preview-gap: 2px !default;
-$coloreditor-color-preview-width: 34px !default;
-$coloreditor-color-preview-height: 14px !default;
+$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-color-preview-width: 32px !default;
+$coloreditor-color-preview-height: 12px !default;
 
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
@@ -19515,8 +19631,12 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
     }
 
     .k-coloreditor-preview {
-        position: relative;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        justify-content: center;
         gap: $coloreditor-preview-gap;
+        position: relative;
         z-index: 1;
     }
     .k-coloreditor-preview .k-color-preview {
@@ -19833,8 +19953,45 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
 // #region @import "~@progress/kendo-theme-default/scss/datetimepicker/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/datetimepicker/_layout.scss
 @include exports( "datetimepicker/layout" ) {
 
-    // Datetime picker
-    .k-datetimepicker {}
+    // Datetime selector
+    .k-datetime-selector {
+        display: flex;
+        transition: transform .2s;
+    }
+
+    // Wrap
+    .k-datetime-wrap {
+        width: $datetime-width;
+        overflow: hidden;
+    }
+
+    // Inner wrap
+    .k-datetime-calendar-wrap,
+    .k-datetime-time-wrap {
+        text-align: center;
+        flex: 0 0 $datetime-width;
+    }
+
+    // Tabs
+    .k-date-tab .k-datetime-selector {
+        transform: translateX(0);
+    }
+    .k-time-tab .k-datetime-selector {
+        transform: translateX(-100%);
+    }
+
+}
+
+@include exports( "datetimepicker/layout/rtl" ) {
+
+    .k-datetimepicker {
+        &[dir="rtl"],
+        .k-rtl & {
+            .k-time-tab .k-datetime-selector {
+                transform: translateX(100%);
+            }
+        }
+    }
 
 }
 
@@ -19886,7 +20043,22 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/daterangepicker/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/daterangepicker/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/daterangepicker/_layout.scss
-@include exports("daterangepicker/layout") {
+@include exports( "daterangepicker/layout" ) {
+
+    // Daterange picker
+    .k-daterange-picker {
+        width: $kendo-input-default-width;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: map-get( $spacing, 2 );
+    }
+
+
+    // Alias
+    .k-daterangepicker {
+        @extend .k-daterange-picker;
+    }
 
 }
 
@@ -20400,7 +20572,10 @@ $dropdownlist-focused-shadow: $kendo-button-focus-shadow !default;
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/multiselect/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/multiselect/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/multiselect/_layout.scss
-@include exports("multiselect/layout") {
+@include exports( "multiselect/layout" ) {
+
+    // Multiselect
+    .k-multiselect {}
 
 }
 
@@ -20409,7 +20584,10 @@ $dropdownlist-focused-shadow: $kendo-button-focus-shadow !default;
 // #endregion
 // #region @import "_theme.scss"; -> packages/bootstrap/scss/multiselect/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/multiselect/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/multiselect/_theme.scss
-@include exports("multiselect/theme") {
+@include exports( "multiselect/theme" ) {
+
+    // Multiselect
+    .k-multiselect {}
 
 }
 
@@ -20440,35 +20618,6 @@ $dropdownlist-focused-shadow: $kendo-button-focus-shadow !default;
 // #region @import "_variables.scss"; -> packages/bootstrap/scss/treeview/_variables.scss
 // Treeview
 
-/// The sizes of the treeview.
-/// @group treeview
-$kendo-treeview-sizes: (
-    sm: (
-        font-size: map-get( $spacing, 3),
-        line-height: $line-height,
-        item-padding-x: map-get( $spacing, thin ),
-        item-padding-y: map-get( $spacing, 1 )
-    ),
-    md: (
-        font-size: $font-size,
-        line-height: $line-height,
-        item-padding-x: map-get( $spacing, 1 ),
-        item-padding-y: map-get( $spacing, 2 )
-    ),
-    lg: (
-        font-size: map-get( $spacing, 4),
-        line-height: $line-height,
-        item-padding-x: map-get( $spacing, 2 ),
-        item-padding-y: map-get( $spacing, 3 )
-    )
-) !default;
-
-/// The horizontal padding of the treeview.
-/// @group treeview
-$kendo-treeview-padding-x: 2px !default;
-/// The vertical padding of the treeview.
-/// @group treeview
-$kendo-treeview-padding-y: $kendo-treeview-padding-x !default;
 /// The font family of the treeview.
 /// @group treeview
 $kendo-treeview-font-family: $font-family !default;
@@ -20496,6 +20645,31 @@ $kendo-treeview-item-border-width: 1px !default;
 /// @group treeview
 $kendo-treeview-item-border-radius: map-get( $spacing, 1 ) !default;
 
+
+/// The sizes of the treeview.
+/// @group treeview
+$kendo-treeview-sizes: (
+    sm: (
+        font-size: map-get( $spacing, 3),
+        line-height: $line-height,
+        item-padding-x: map-get( $spacing, thin ),
+        item-padding-y: map-get( $spacing, 1 )
+    ),
+    md: (
+        font-size: $font-size,
+        line-height: $line-height,
+        item-padding-x: map-get( $spacing, 1 ),
+        item-padding-y: map-get( $spacing, 2 )
+    ),
+    lg: (
+        font-size: map-get( $spacing, 4),
+        line-height: $line-height,
+        item-padding-x: map-get( $spacing, 2 ),
+        item-padding-y: map-get( $spacing, 3 )
+    )
+) !default;
+
+
 /// The background of the treeview.
 /// @group treeview
 $kendo-treeview-bg: null !default;
@@ -20508,16 +20682,16 @@ $kendo-treeview-border: null !default;
 
 /// The background of a hovered treeview item.
 /// @group treeview
-$kendo-treeview-item-hovered-bg: $hovered-bg !default;
+$kendo-treeview-item-hover-bg: $hovered-bg !default;
 /// The text color of a hovered treeview item.
 /// @group treeview
-$kendo-treeview-item-hovered-text: $hovered-text !default;
+$kendo-treeview-item-hover-text: $hovered-text !default;
 /// The border of a hovered treeview item.
 /// @group treeview
-$kendo-treeview-item-hovered-border: $kendo-treeview-item-hovered-bg !default;
+$kendo-treeview-item-hover-border: $kendo-treeview-item-hover-bg !default;
 /// The gradient of a hovered treeview item.
 /// @group treeview
-$kendo-treeview-item-hovered-gradient: null !default;
+$kendo-treeview-item-hover-gradient: null !default;
 
 /// The background of a selected treeview item.
 /// @group treeview
@@ -20534,20 +20708,7 @@ $kendo-treeview-item-selected-gradient: null !default;
 
 /// The shadow of a focused treeview item.
 /// @group treeview
-$kendo-treeview-item-focused-shadow: 0 0 0 2px $component-border !default;
-/// The shadow of a selected and focused treeview item.
-/// @group treeview
-$kendo-treeview-item-selected-focused-shadow: 0 0 0 2px rgba( $kendo-treeview-item-selected-border, .5 ) !default;
-
-/// The horizontal padding of the load more checkboxes.
-/// @group treeview
-$kendo-treeview-loadmore-checkboxes-padding-x: calc( #{$icon-spacing} + #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-treeview-indent} ) !default;
-/// The icon indent of the load more checkboxes.
-/// @group treeview
-$kendo-treeview-loadmore-checkboxes-icon-indent: calc( -1 * (#{$icon-spacing} + #{$kendo-treeview-indent}) ) !default;
-/// The horizontal margin of the load more checkboxes.
-/// @group treeview
-$kendo-treeview-loadmore-checkboxes-icon-margin-x: $icon-spacing !default;
+$kendo-treeview-item-focus-shadow: inset 0 0 0 2px rgba( $kendo-treeview-text, .15 ) !default;
 
 /// The background of load more.
 /// @group treeview
@@ -20574,22 +20735,22 @@ $kendo-treeview-loadmore-hover-border: null !default;
 $kendo-treeview-loadmore-focus-bg: transparent !default;
 /// The text color of a focused load more.
 /// @group treeview
-$kendo-treeview-loadmore-focus-text: $link-text !default;
+$kendo-treeview-loadmore-focus-text: $link-hover-text !default;
 /// The border of a focused load more.
 /// @group treeview
 $kendo-treeview-loadmore-focus-border: null !default;
 /// The shadow of a focused load more.
 /// @group treeview
-$kendo-treeview-loadmore-focus-shadow: none !default;
+$kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/treeview/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/treeview/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/treeview/_layout.scss
 @include exports("treeview/layout") {
 
-    // Base
+    // Treeview
     .k-treeview {
-        padding: $kendo-treeview-padding-y $kendo-treeview-padding-x;
+        padding: 0;
         border-width: 0;
         background: none;
         box-sizing: border-box;
@@ -20601,161 +20762,156 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
         white-space: nowrap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+    }
 
-        > .k-treeview-group {
-            outline: 0;
-            -webkit-touch-callout: none;
-            -webkit-tap-highlight-color: $rgba-transparent;
-        }
 
-        .k-content,
-        > .k-treeview-group,
-        .k-treeview-item > .k-treeview-group {
-            margin: 0;
-            padding: 0;
-            background: none;
-            list-style: none;
-            position: relative;
+    // Treeview group
+    .k-treeview-group,
+    .k-treeview .k-group {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        position: relative;
+        outline: 0;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
 
-            &.ng-animating {
-                overflow: hidden;
-            }
+        &.ng-animating {
+            overflow: hidden;
         }
+    }
 
-        // Wrappers
-        .k-treeview-top,
-        .k-treeview-mid,
-        .k-treeview-bot {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            align-content: center;
-        }
 
-        // Items
-        .k-treeview-item {
-            outline-style: none;
-            margin: 0;
-            padding: 0 0 0 $kendo-treeview-indent;
-            border-width: 0;
-            display: block;
-        }
+    // Treeview wrappers
+    .k-treeview-top,
+    .k-treeview-mid,
+    .k-treeview-bot {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        align-content: center;
+    }
 
-        // Link
-        .k-treeview-leaf {
-            @include border-radius( $kendo-treeview-item-border-radius );
-            margin: 0;
-            border: $kendo-treeview-item-border-width solid transparent;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            align-content: center;
-            vertical-align: middle;
-            position: relative;
-        }
-        .k-treeview-leaf.k-state-focused {
-            z-index: 1;
-        }
 
-        // LoadMore button
-        .k-treeview-load-more-button {
-            cursor: pointer;
+    // Treeview item
+    .k-treeview-item {
+        outline-style: none;
+        margin: 0;
+        padding: 0 0 0 $kendo-treeview-indent;
+        border-width: 0;
+        display: block;
+    }
 
-            &:hover,
-            &.k-state-hover,
-            &:focus,
-            &.k-state-focused {
-                text-decoration: underline;
-            }
-        }
-        .k-treeview-load-more-checkboxes-container {
-            padding-left: $kendo-treeview-loadmore-checkboxes-padding-x;
 
-            .k-i-loading {
-                margin-left: $kendo-treeview-loadmore-checkboxes-icon-indent;
-                margin-right: $kendo-treeview-loadmore-checkboxes-icon-margin-x;
-            }
+    // Treeview toggle
+    .k-treeview-toggle {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        cursor: pointer;
+
+        + .k-checkbox-wrap,
+        + .k-checkbox-wrapper {
+            margin-left: $icon-spacing;
         }
+    }
 
-        // Expand / collapse
-        .k-i-expand,
-        .k-i-collapse {
-            margin-left: -$kendo-treeview-indent;
-            cursor: pointer;
 
-            + .k-checkbox-wrapper {
-                margin-left: $icon-spacing;
-            }
-        }
+    // Loading icon
+    .k-treeview-loading {
+        margin-right: $icon-spacing;
+    }
 
-        // Checkboxes
-        .k-checkbox-wrapper {
+
+    // Checkbox
+    .k-treeview .k-checkbox-wrap,
+    .k-treeview .k-checkbox-wrapper {
+        margin-right: $icon-spacing;
+    }
+
+
+    // Treeview leaf
+    .k-treeview-leaf {
+        @include border-radius( $kendo-treeview-item-border-radius );
+        border: $kendo-treeview-item-border-width solid transparent;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        align-content: center;
+        vertical-align: middle;
+        position: relative;
+
+        .k-icon,
+        .k-image,
+        .k-sprite {
             margin-right: $icon-spacing;
         }
 
-        // TODO: Delete the following block when https://github.com/telerik/kendo-angular-treeview/issues/138 is done
-        // Drag and Drop icon
-        .k-i-drag-and-drop {
-            position: absolute;
-            transform: translate(-50%, -50%);
-            z-index: 1000;
+        &.k-state-focus,
+        &.k-state-focused {
+            z-index: 1;
         }
+    }
 
-        // Other content
-        .k-treeview-leaf .k-icon,
-        .k-treeview-leaf .k-image,
-        .k-treeview-leaf .k-sprite {
-            margin-right: $icon-spacing;
+
+    // Treeview load more button
+    .k-treeview .k-treeview-load-more-button {
+        cursor: pointer;
+
+        &:hover,
+        &.k-state-hover,
+        &:focus,
+        &.k-state-focus,
+        &.k-state-focused {
+            text-decoration: underline;
         }
     }
 
-    .k-treeview-toggle {}
-
-    .k-treeview-leaf-text {}
 
     // RTL
     .k-rtl .k-treeview,
     .k-treeview[dir="rtl"] {
 
-        // Items
+        // Treeview item
         .k-treeview-item {
             padding-left: 0;
             padding-right: $kendo-treeview-indent;
         }
 
-        .k-treeview-load-more-checkboxes-container {
-            padding-left: 0;
-            padding-right: $kendo-treeview-loadmore-checkboxes-padding-x;
-
-            .k-i-loading {
-                margin-left: $kendo-treeview-loadmore-checkboxes-icon-margin-x;
-                margin-right: $kendo-treeview-loadmore-checkboxes-icon-indent;
-            }
-        }
-
-        // Expand / collapse
-        .k-i-expand,
-        .k-i-collapse {
+        // Treeview toggle
+        .k-treeview-toggle {
             margin-left: 0;
             margin-right: -$kendo-treeview-indent;
 
+            + .k-checkbox-wrap,
             + .k-checkbox-wrapper {
                 margin-right: $icon-spacing;
             }
         }
 
-        // Checkboxes
-        .k-checkbox-wrapper {
+        // Loading
+        .k-treeview-loading {
             margin-right: 0;
             margin-left: $icon-spacing;
         }
 
-        // Other content
-        .k-treeview-leaf .k-icon,
-        .k-treeview-leaf .k-image,
-        .k-treeview-leaf .k-sprite {
-            margin-left: $icon-spacing;
+        // Checkbox
+        .k-checkbox-wrap,
+        .k-checkbox-wrapper {
             margin-right: 0;
+            margin-left: $icon-spacing;
+        }
+
+        // Treeview leaf
+        .k-treeview-leaf,
+        .k-in {
+            .k-icon,
+            .k-image,
+            .k-sprite {
+                margin-right: 0;
+                margin-left: $icon-spacing;
+            }
         }
     }
 
@@ -20778,25 +20934,17 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
 
 // #endregion
 
-
 @include exports( "treeview/layout/bootstrap" ) {
 
-    // Base
-    .k-treeview {
-
-        .k-treeview-top,
-        .k-treeview-mid,
-        .k-treeview-bot {
-            padding-top: 2px;
-            padding-bottom: 2px;
-        }
+    // Treeview
+    .k-treeview {}
 
 
-        // Item
-        .k-treeview-leaf {
-            transition: $transition;
-        }
+    // Treeview leaf
+    .k-treeview-leaf {
+        transition: $transition;
     }
+
 }
 
 // #endregion
@@ -20804,30 +20952,42 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
 // #region @import "~@progress/kendo-theme-default/scss/treeview/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/treeview/_theme.scss
 @include exports("treeview/theme") {
 
-    // Appearance
+    // Treeview
     .k-treeview {
         @include fill(
             $kendo-treeview-text,
             $kendo-treeview-bg,
             $kendo-treeview-border
         );
+    }
 
 
-        // Item
-        .k-treeview-leaf {}
+    // Treeview item
+    .k-treeview-item {}
 
 
-        // Interactive states
-        .k-treeview-leaf:hover,
-        .k-treeview-leaf.k-hover {
+    // Treeview leaf
+    .k-treeview-leaf {
+
+        // Hover state
+        &:hover,
+        &.k-hover {
             @include fill(
-                $kendo-treeview-item-hovered-text,
-                $kendo-treeview-item-hovered-bg,
-                $kendo-treeview-item-hovered-border,
-                $kendo-treeview-item-hovered-gradient
+                $kendo-treeview-item-hover-text,
+                $kendo-treeview-item-hover-bg,
+                $kendo-treeview-item-hover-border,
+                $kendo-treeview-item-hover-gradient
             );
         }
-        .k-treeview-leaf.k-selected {
+
+        // Focus state
+        &:focus,
+        &.k-focus {
+            @include box-shadow( $kendo-treeview-item-focus-shadow );
+        }
+
+        // Selected state
+        &.k-selected {
             @include fill(
                 $kendo-treeview-item-selected-text,
                 $kendo-treeview-item-selected-bg,
@@ -20835,24 +20995,20 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
                 $kendo-treeview-item-selected-gradient
             );
         }
-        .k-treeview-leaf.k-focus {
-            @include box-shadow( $kendo-treeview-item-focused-shadow );
-        }
-        .k-treeview-leaf.k-selected.k-focus {
-            @include box-shadow( $kendo-treeview-item-selected-focused-shadow );
-        }
+    }
 
-        // LoadMore button
-        .k-treeview-load-more-button {
-            @include fill(
-                $kendo-treeview-loadmore-text,
-                $kendo-treeview-loadmore-bg,
-                $kendo-treeview-loadmore-border
-            );
-        }
 
-        .k-treeview-load-more-button:hover,
-        .k-treeview-load-more-button.k-hover {
+    // Treeview load more button
+    .k-treeview .k-treeview-load-more-button {
+        @include fill(
+            $kendo-treeview-loadmore-text,
+            $kendo-treeview-loadmore-bg,
+            $kendo-treeview-loadmore-border
+        );
+
+        // Hover state
+        &:hover,
+        &.k-hover {
             @include fill(
                 $kendo-treeview-loadmore-hover-text,
                 $kendo-treeview-loadmore-hover-bg,
@@ -20860,8 +21016,9 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
             );
         }
 
-        .k-treeview-load-more-button:focus,
-        .k-treeview-load-more-button.k-focus {
+        // Focus state
+        &:focus,
+        &.k-focus {
             @include fill(
                 $kendo-treeview-loadmore-focus-text,
                 $kendo-treeview-loadmore-focus-bg,
@@ -20942,7 +21099,7 @@ $dropdowntree-filter-spacer: 0px !default;
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/maskedtextbox/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss
-@include exports("maskedtextbox/layout") {
+@include exports( "maskedtextbox/layout" ) {
 
     // Masked textbox
     .k-maskedtextbox {}
@@ -20954,7 +21111,7 @@ $dropdowntree-filter-spacer: 0px !default;
 // #endregion
 // #region @import "_theme.scss"; -> packages/bootstrap/scss/maskedtextbox/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss
-@include exports("maskedtextbox/theme") {
+@include exports( "maskedtextbox/theme" ) {
 
     // Masked textbox
     .k-maskedtextbox {}
@@ -22593,7 +22750,6 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
 
         > * {
             flex-shrink: 0;
-
         }
 
         // Appbar section
@@ -22603,15 +22759,16 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
             align-items: center;
         }
 
+
         // Appbar Spacer
         .k-appbar-spacer {
             flex: 1 0 auto;
         }
-
         .k-appbar-spacer-sized {
             flex-grow: 0;
         }
 
+
         // Separator
         .k-appbar-separator {
             margin: 0;
@@ -22621,12 +22778,24 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
             border-width: 0 0 0 1px;
             display: inline-block;
         }
+
+
+        // Input
+        .k-input,
+        .k-picker:not(.k-colorpicker) {
+            width: 10em;
+        }
+
     }
 
+
+    // Static appbar
     .k-appbar-static {
         position: static;
     }
 
+
+    // Sticky appbar
     .k-appbar-sticky {
         width: 100%;
         position: sticky;
@@ -22634,17 +22803,20 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
         z-index: $appbar-zindex;
     }
 
+
+    // Fixed appbar
     .k-appbar-fixed {
         width: 100%;
         position: fixed;
         z-index: 1;
     }
 
+
+    // Appbar position
     .k-appbar-top {
         top: 0;
         bottom: auto;
     }
-
     .k-appbar-bottom {
         top: auto;
         bottom: 0;
@@ -22653,6 +22825,7 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
             bottom: 0;
         }
     }
+
 }
 
 // #endregion
@@ -22720,79 +22893,135 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
 // Component
 // #region @import "_variables.scss"; -> packages/bootstrap/scss/fab/_variables.scss
 // Floating Action Button
-$fab-padding-x: $padding-x !default;
-$fab-padding-y: $fab-padding-x !default;
-$fab-border-width: 1px !default;
-$fab-border-radius: $border-radius / 2 !default;
-$fab-font-family: $font-family !default;
-$fab-font-size: $font-size !default;
-$fab-line-height: $line-height !default;
-
-$fab-padding-x-sm: ( $fab-padding-x / 2 ) !default;
-$fab-padding-y-sm: ( $fab-padding-y / 2 ) !default;
-
-$fab-padding-x-md: $fab-padding-x !default;
-$fab-padding-y-md: $fab-padding-y !default;
-
-$fab-padding-x-lg: ( $fab-padding-x * 1.5 ) !default;
-$fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;
-
-$fab-icon-width: 24px !default;
-$fab-icon-height: $fab-icon-width !default;
-$fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
-
-$fab-items-padding-x: 0px !default;
-$fab-items-padding-y: map-get( $spacing, 4 ) !default;
-
-$fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
-$fab-item-text-padding-y: $fab-item-text-padding-x !default;
-$fab-item-text-border-width: 1px !default;
-$fab-item-text-border-radius: 4px !default;
-$fab-item-text-font-size: $font-size-xs !default;
-$fab-item-text-line-height: 14px !default;
-
-$fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
-$fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
-$fab-item-icon-border-width: 0 !default;
-$fab-item-icon-border-radius: 50% !default;
-$fab-item-icon-width: 24px !default;
-$fab-item-icon-height: $fab-item-icon-width !default;
-
-$fab-sizes: (
-    sm: map-get( $spacing, 4 ),
-    md: map-get( $spacing, 8 ),
-    lg: map-get( $spacing, 16 )
-) !default;
-
-$fab-theme-colors: $theme-colors !default;
-
-$fab-shadow: 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .2) !default;
-$fab-disabled-shadow: 0px 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
-$fab-active-shadow: null !default;
 
-$fab-item-text: $component-text !default;
-$fab-item-bg: $component-bg !default;
-$fab-item-border: $component-border !default;
-
-$fab-item-icon-text: $kendo-button-text !default;
-$fab-item-icon-bg: $kendo-button-bg !default;
-$fab-item-icon-border: $kendo-button-border !default;
-
-$fab-item-shadow: $fab-shadow !default;
-$fab-item-disabled-shadow: $fab-disabled-shadow !default;
-$fab-item-active-shadow: $fab-active-shadow !default;
-
-$fab-border-width-sm: $fab-border-width !default;
-$fab-line-height-sm: $fab-line-height !default;
-$fab-size-sm: calc( #{$fab-line-height-sm * 1em} + #{$fab-padding-y-sm * 2} + #{$fab-border-width-sm * 2} ) !default;
-
-$fab-border-width-md: $fab-border-width !default;
-$fab-line-height-md: $fab-line-height !default;
-$fab-size-md: calc( #{$fab-line-height-md * 1em} + #{$fab-padding-y-md * 2} + #{$fab-border-width-md * 2} ) !default;
-
-$fab-border-width-lg: $fab-border-width !default;
-$fab-line-height-lg: $fab-line-height !default;
-$fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{$fab-border-width-lg * 2} ) !default;
+/// Width of the border around the FAB.
+/// @group floating-action-button
+$kendo-fab-border-width: 1px !default;
+/// Border radius of the FAB.
+/// @group floating-action-button
+$kendo-fab-border-radius: $border-radius / 2 !default;
+/// Font family of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-family: $font-family !default;
+/// Font size of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-size: $font-size !default;
+/// Line height of the FAB.
+/// @group floating-action-button
+$kendo-fab-line-height: $line-height !default;
+
+/// Horizontal padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-x: $padding-x !default;
+$kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
+$kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
+$kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
+
+/// Vertical padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-y: $kendo-fab-padding-x !default;
+$kendo-fab-padding-y-sm: ( $kendo-fab-padding-y / 2 ) !default;
+$kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
+$kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
+
+/// FAB icon width.
+/// @group floating-action-button
+$kendo-fab-icon-width: 24px !default;
+/// FAB icon height.
+/// @group floating-action-button
+$kendo-fab-icon-height: $kendo-fab-icon-width !default;
+/// FAB icon spacing.
+/// @group floating-action-button
+$kendo-fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
+
+/// FAB items horizontal padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-x: 0px !default;
+/// FAB items vertical padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-y: map-get( $spacing, 4 ) !default;
+
+/// FAB item text horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
+/// FAB item text vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
+/// Width of the FAB item text border.
+/// @group floating-action-button
+$kendo-fab-item-text-border-width: 1px !default;
+/// Border radius of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-border-radius: 4px !default;
+/// Font size of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-font-size: $font-size-xs !default;
+/// Line height of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-line-height: 14px !default;
+
+/// FAB item icon horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
+/// FAB item icon vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
+/// Width of the FAB item icon border.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-width: 0 !default;
+/// Border radius of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-radius: 50% !default;
+/// Width of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-width: 24px !default;
+/// height of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
+
+/// Theme colors map for the FAB.
+/// @group floating-action-button
+$kendo-fab-theme-colors: $theme-colors !default;
+
+/// The base shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-shadow: 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .2) !default;
+/// The disabled shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-disabled-shadow: 0px 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+/// The active shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-active-shadow: null !default;
+
+/// The base text color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-text: $component-text !default;
+/// The base background color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-bg: $component-bg !default;
+/// The base border color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-border: $component-border !default;
+
+/// The base text color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-text: $kendo-button-text !default;
+/// The base background color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-bg: $kendo-button-bg !default;
+/// The base border color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border: $kendo-button-border !default;
+
+/// The base shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-shadow: $kendo-fab-shadow !default;
+/// The disabled shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
+/// The active shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/fab/_layout.scss
@@ -22808,9 +23037,9 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
         box-sizing: border-box;
         color: inherit;
         background-color: transparent;
-        font-size: $fab-font-size;
-        line-height: $fab-line-height;
-        font-family: $fab-font-family;
+        font-size: $kendo-fab-font-size;
+        line-height: $kendo-fab-line-height;
+        font-family: $kendo-fab-font-family;
         text-align: center;
         white-space: nowrap;
         display: inline-flex;
@@ -22829,73 +23058,39 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
 
     // FAB Icon
     .k-fab-icon {
-        width: $fab-icon-width;
-        height: $fab-icon-height;
+        width: $kendo-fab-icon-width;
+        height: $kendo-fab-icon-height;
 
         &:not(:only-child) {
-            margin-right: $fab-icon-spacing;
-            margin-left: -$fab-icon-spacing;
+            margin-right: $kendo-fab-icon-spacing;
+            margin-left: -$kendo-fab-icon-spacing;
         }
     }
 
 
     // Sizes
     .k-fab-sm {
-        padding: $fab-padding-y-sm $fab-padding-x-sm;
+        padding: $kendo-fab-padding-y-sm $kendo-fab-padding-x-sm;
     }
     .k-fab-md {
-        padding: $fab-padding-y $fab-padding-x;
+        padding: $kendo-fab-padding-y $kendo-fab-padding-x;
     }
     .k-fab-lg {
-        padding: $fab-padding-y-lg $fab-padding-x-lg;
+        padding: $kendo-fab-padding-y-lg $kendo-fab-padding-x-lg;
     }
 
-
     // Shapes
-    .k-fab-square {
-        border-radius: 0;
+    .k-fab-rectangle { }
 
-        &.k-fab-sm {
-            width: $fab-size-sm;
-            height: $fab-size-sm;
-        }
-        &.k-fab-md {
-            width: $fab-size-md;
-            height: $fab-size-md;
-        }
-        &.k-fab-lg {
-            width: $fab-size-lg;
-            height: $fab-size-lg;
-        }
-    }
-    .k-fab-circle {
-        border-radius: 50%;
-
-        &.k-fab-sm {
-            width: $fab-size-sm;
-            height: $fab-size-sm;
-        }
-        &.k-fab-md {
-            width: $fab-size-md;
-            height: $fab-size-md;
-        }
-        &.k-fab-lg {
-            width: $fab-size-lg;
-            height: $fab-size-lg;
-        }
-    }
-    .k-fab-pill {
-        border-radius: 5rem;
-    }
-    .k-fab-rounded {
-        @include border-radius( $fab-border-radius );
+    .k-fab-square {
+        aspect-ratio: 1;
     }
 
 
     // Items
     .k-fab-items {
         margin: 0;
-        padding: $fab-items-padding-y $fab-items-padding-x;
+        padding: $kendo-fab-items-padding-y $kendo-fab-items-padding-x;
         display: flex;
     }
 
@@ -22940,19 +23135,19 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     }
 
     .k-fab-item-text {
-        padding: $fab-item-text-padding-y $fab-item-text-padding-x;
-        border-width: $fab-item-text-border-width;
-        border-radius: $fab-item-text-border-radius;
-        font-size: $fab-item-text-font-size;
-        line-height: $fab-item-text-line-height;
+        padding: $kendo-fab-item-text-padding-y $kendo-fab-item-text-padding-x;
+        border-width: $kendo-fab-item-text-border-width;
+        border-radius: $kendo-fab-item-text-border-radius;
+        font-size: $kendo-fab-item-text-font-size;
+        line-height: $kendo-fab-item-text-line-height;
     }
 
     .k-fab-item-icon {
-        width: $fab-item-icon-width;
-        height: $fab-item-icon-height;
-        padding: $fab-item-icon-padding-y $fab-item-icon-padding-x;
-        border-width: $fab-item-icon-border-width;
-        border-radius: $fab-item-icon-border-radius;
+        width: $kendo-fab-item-icon-width;
+        height: $kendo-fab-item-icon-height;
+        padding: $kendo-fab-item-icon-padding-y $kendo-fab-item-icon-padding-x;
+        border-width: $kendo-fab-item-icon-border-width;
+        border-radius: $kendo-fab-item-icon-border-radius;
         box-sizing: content-box;
         outline: none;
     }
@@ -22995,11 +23190,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
 @include exports( "fab/theme/bootstrap" ) {
 
     // Normal state
-    @each $name, $color in $fab-theme-colors {
-        .k-fab-#{$name} {
-            @include box-shadow($fab-shadow);
-            outline: $fab-border-width solid $color;
-            outline-offset: -$fab-border-width;
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name} {
+            @include box-shadow($kendo-fab-shadow);
+            outline: $kendo-fab-border-width solid $color;
+            outline-offset: -$kendo-fab-border-width;
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -23007,10 +23202,9 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     }
 
     // Hover state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-hover.k-fab-#{$name},
-        .k-state-hovered.k-fab-#{$name},
-        .k-fab-#{$name}:hover {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-hover.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:hover {
             border-color: try-darken( $color, 10% );
             color: contrast-wcag( try-darken( $color, 7.5% ) );
             background-color: try-darken( $color, 7.5% );
@@ -23018,10 +23212,9 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     }
 
     // Focus state
-    @each $name, $color in $fab-theme-colors {
-        .k-fab-#{$name}.k-state-focus,
-        .k-fab-#{$name}.k-state-focused,
-        .k-fab-#{$name}:focus {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name}.k-focus,
+        .k-fab-solid-#{$name}:focus {
             outline-style: solid;
             outline-width: 3px;
             outline-color: rgba( $color, .5 );
@@ -23029,11 +23222,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     }
 
     // Active state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-active.k-fab-#{$name},
-        .k-state-selected.k-fab-#{$name},
-        .k-fab-#{$name}:active {
-            @include box-shadow($fab-active-shadow);
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-active.k-fab-solid-#{$name},
+        .k-selected.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:active {
+            @include box-shadow($kendo-fab-active-shadow);
             border-color: try-darken( $color, 12.5% );
             color: contrast-wcag( try-darken( $color, 10% ) );
             background-color: try-darken( $color, 10% );
@@ -23041,10 +23234,10 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     }
 
     // Disabled state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-disabled.k-fab-#{$name},
-        .k-fab-#{$name}:disabled {
-            @include box-shadow($fab-disabled-shadow);
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-disabled.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:disabled {
+            @include box-shadow($kendo-fab-disabled-shadow);
             background-color: try-tint( $color, 4.5 );
             color: try-tint( contrast-wcag( $color ), 5 );
             opacity: 1;
@@ -23054,68 +23247,65 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     // Items
     .k-fab-item-text {
         @include fill(
-            $fab-item-text,
-            $fab-item-bg,
-            $fab-item-border
+            $kendo-fab-item-text,
+            $kendo-fab-item-bg,
+            $kendo-fab-item-border
         );
-        @include box-shadow($fab-item-shadow);
+        @include box-shadow($kendo-fab-item-shadow);
     }
     .k-fab-item-icon {
         @include fill(
-            $fab-item-icon-text,
-            $fab-item-icon-bg,
-            $fab-item-icon-border
+            $kendo-fab-item-icon-text,
+            $kendo-fab-item-icon-bg,
+            $kendo-fab-item-icon-border
         );
-        @include box-shadow($fab-item-shadow);
-        outline: $fab-border-width solid $kendo-button-bg;
-        outline-offset: -$fab-border-width;
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width solid $kendo-button-bg;
+        outline-offset: -$kendo-fab-border-width;
     }
 
     // Hover state
-    .k-fab-item.k-state-hover .k-fab-item-icon,
-    .k-fab-item.k-state-hovered .k-fab-item-icon,
+    .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        @include box-shadow($fab-item-shadow);
-        outline: $fab-border-width solid try-darken( $fab-item-icon-border, 10% );
-        outline-offset: -$fab-border-width;
-        border-color: try-darken( $fab-item-icon-border, 10% );
-        color: contrast-wcag( try-darken( $fab-item-icon-bg, 7.5% ) );
-        background-color: try-darken( $fab-item-icon-bg, 7.5% );
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 10% );
+        outline-offset: -$kendo-fab-border-width;
+        border-color: try-darken( $kendo-fab-item-icon-border, 10% );
+        color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 7.5% ) );
+        background-color: try-darken( $kendo-fab-item-icon-bg, 7.5% );
     }
 
     // Focus state
     .k-fab-item:focus .k-fab-item-text,
     .k-fab-item:focus .k-fab-item-icon,
-    .k-fab-item.k-state-focus .k-fab-item-text,
-    .k-fab-item.k-state-focus .k-fab-item-icon,
-    .k-fab-item.k-state-focused .k-fab-item-text,
-    .k-fab-item.k-state-focused .k-fab-item-icon {
+    .k-fab-item.k-focus .k-fab-item-text,
+    .k-fab-item.k-focus .k-fab-item-icon {
         outline-style: solid;
         outline-width: 3px;
-        outline-color: rgba( $fab-item-icon-border, .5 );
+        outline-color: rgba( $kendo-fab-item-icon-border, .5 );
     }
 
     // Active state
-    .k-fab-item.k-state-active .k-fab-item-icon,
+    .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
-        @include box-shadow($fab-item-active-shadow);
-        outline: $fab-border-width solid try-darken( $fab-item-icon-border, 12.5% );
-        outline-offset: -$fab-border-width;
-        border-color: try-darken( $fab-item-icon-border, 12.5% );
-        color: contrast-wcag( try-darken( $fab-item-icon-bg, 10% ) );
-        background-color: try-darken( $fab-item-icon-bg, 10% );
+        @include box-shadow($kendo-fab-item-active-shadow);
+        outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 12.5% );
+        outline-offset: -$kendo-fab-border-width;
+        border-color: try-darken( $kendo-fab-item-icon-border, 12.5% );
+        color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 10% ) );
+        background-color: try-darken( $kendo-fab-item-icon-bg, 10% );
     }
 
     // Disabled state
-    .k-fab-item.k-state-disabled,
+    .k-fab-item.k-disabled,
     .k-fab-item:disabled {
         opacity: 1;
 
         .k-fab-item-text,
         .k-fab-item-icon {
-            @include box-shadow($fab-item-disabled-shadow);
-            background-color: try-tint( $fab-item-bg, 8 );
-            color: try-tint( $fab-item-text, 8 );
+            @include box-shadow($kendo-fab-item-disabled-shadow);
+            background-color: try-tint( $kendo-fab-item-bg, 8 );
+            color: try-tint( $kendo-fab-item-text, 8 );
         }
     }
 
@@ -23177,8 +23367,12 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
 
     // Menu item
     .k-menu-item {
+        box-sizing: border-box;
         border-width: 0;
         outline: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        flex: none;
         position: relative;
         user-select: none;
     }
@@ -23200,28 +23394,34 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
         outline: 0;
         color: inherit;
         display: flex;
-        flex-direction: row;
+        flex-flow: row nowrap;
         flex: 1 1 auto;
+        gap: $menu-item-icon-spacing;
         align-items: center;
         position: relative;
         white-space: nowrap;
         cursor: pointer;
+    }
 
-        > .k-icon:not(.k-menu-expand-arrow),
-        > .k-image,
-        > .k-sprite {
-            margin-right: $menu-item-icon-spacing;
-        }
+
+    // Menu item text
+    .k-menu-link-text {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
 
     // Expand arrow
     .k-menu-expand-arrow {
-        margin: 0;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        right: $icon-spacing;
+        margin-inline-end: -$icon-spacing;
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
+        position: relative;
     }
 
 
@@ -23256,6 +23456,14 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             padding-right: $kendo-menu-popup-item-padding-end;
         }
 
+        .k-menu-expand-arrow {
+            margin: 0;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: $icon-spacing;
+        }
+
         > .k-separator {
             margin: $menu-separator-spacing 0;
             height: 0;
@@ -23294,12 +23502,20 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             margin-top: $kendo-menu-popup-item-spacing;
         }
 
+        .k-menu-expand-arrow {
+            margin: 0;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: $icon-spacing;
+        }
+
         .k-separator {
             margin: $menu-separator-spacing 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
-            border-color: $panel-border;
+            border-color: $component-border;
             display: block;
         }
     }
@@ -23319,6 +23535,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             padding: $kendo-menu-popup-item-padding-y-sm $kendo-menu-popup-item-padding-x-sm;
             padding-inline-end: $kendo-menu-popup-item-padding-end-sm;
         }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-item-icon-margin-start-sm;
+            margin-inline-end: $kendo-menu-popup-item-icon-margin-end-sm;
+        }
     }
     .k-menu-group-md {
         font-size: $kendo-menu-popup-font-size-md;
@@ -23334,6 +23555,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
             padding-inline-end: $kendo-menu-popup-item-padding-end-md;
         }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-item-icon-margin-end;
+        }
     }
     .k-menu-group-lg {
         font-size: $kendo-menu-popup-font-size-lg;
@@ -23349,6 +23575,11 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
             padding: $kendo-menu-popup-item-padding-y-lg $kendo-menu-popup-item-padding-x-lg;
             padding-inline-end: $kendo-menu-popup-item-padding-end-lg;
         }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-item-icon-margin-start-lg;
+            margin-inline-end: $kendo-menu-popup-item-icon-margin-end-lg;
+        }
     }
 
 
@@ -23377,11 +23608,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
@@ -23440,21 +23674,6 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
     .k-rtl,
     [dir="rtl"] {
 
-        .k-menu-link {
-            > .k-icon:not(.k-menu-expand-arrow),
-            > .k-image,
-            > .k-sprite {
-                margin-left: $menu-item-icon-spacing;
-                margin-right: 0;
-            }
-        }
-
-        .k-menu-expand-arrow {
-            right: unset;
-            left: $icon-spacing;
-        }
-
-
         // Orientation -- horizontal
         .k-menu-horizontal {
 
@@ -23644,16 +23863,6 @@ $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{
 
 // #endregion
 
-@include exports("menu/theme/bootstrap") {
-
-    .k-context-menu-popup {
-        .k-header {
-            color: inherit;
-        }
-    }
-
-}
-
 // #endregion
 
 // #endregion
@@ -27702,7 +27911,7 @@ $tabstrip-content-border-focused: $component-text !default;
     .k-tabstrip-items {
         outline: 0;
         display: flex;
-        flex-direction: row;
+        flex-flow: row wrap;
         flex: 0 0 auto;
 
         .k-item {
@@ -29639,9 +29848,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
         }
 
-        .k-grid .k-grid-search {
-            width: 100%;
-        }
     }
 
     .k-grid.k-grid-mobile {
@@ -30953,14 +31159,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         padding: 4px 8px;
     }
 
-    .k-grid-columnmenu-popup {
-        width: 230px;
-
-        &.k-popup {
-            padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
-        }
-    }
-
     // Filter row
     .k-filter-row {
         line-height: $form-line-height;
@@ -31433,83 +31631,83 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
 @include exports( "filtermenu/layout" ) {
 
-    .k-filter-menu.k-popup,
-    .k-grid-filter-popup.k-popup {
-
-        .k-filter-menu-container {
-            width: $grid-filter-menu-width;
-        }
+    // Filter menu
+    .k-filter-menu-popup {
+        width: $grid-column-menu-width;
     }
+    .k-filter-menu {
+        box-sizing: border-box;
+    }
+    .k-filter-menu-container {
+        padding: map-get( $spacing, 2 );
+        box-sizing: border-box;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        gap: map-get( $spacing, 2 );
 
-    .k-filter-menu.k-popup,
-    .k-grid-filter-popup.k-popup,
-    .k-popup .k-filter-menu,
-    .k-popup .k-grid-filter-popup {
-        .k-multicheck-wrap {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
-
-            .k-item {
-                padding: $grid-column-menu-list-item-padding-y 0;
-            }
-
-            .k-check-all-wrap {
-                padding-bottom: ($grid-column-menu-list-item-padding-y * 2);
-                border-bottom-width: $grid-filter-menu-check-all-border-bottom-width;
-                border-bottom-style: solid;
-            }
+        .k-filter-and {
+            width: min-content;
+            align-self: start;
         }
 
-        .k-filter-help-text {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
+        .k-actions {
+            margin: 0;
+            padding: 0;
         }
 
-        .k-filter-selected-items {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
+        // Angular specific
+        kendo-numeric-filter-menu,
+        kendo-grid-string-filter-menu,
+        kendo-grid-date-filter-menu,
+        kendo-grid-filter-menu-input-wrapper {
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: stretch;
+            gap: map-get( $spacing, 2 );
         }
     }
+    .k-ie .k-filter-menu-container {
+        > * { margin-top: map-get( $spacing, 2 ); }
+        > :first-child { margin-top: 0; }
 
-    .k-filter-menu {
-        $item-spacing: $spacer-y / 2;
-        $form-padding: $spacer-y;
-        $form-padding-y: $form-padding - $item-spacing;
-
-        .k-filter-menu-container {
-            box-sizing: border-box;
-        }
-
-        .k-widget,
-        .k-textbox,
-        .k-dropdown,
-        .k-numerictextbox,
-        .k-radio-list,
-        .k-datepicker,
-        .k-input {
-            margin: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
-            width: calc( 100% - ( 2 * #{$grid-filter-menu-item-spacing-x} ) );
-            box-sizing: border-box;
-            display: flex;
+        // Angular specific
+        .k-filter-and,
+        kendo-grid-filter-menu-input-wrapper > * {
+            margin-top: map-get( $spacing, 2 );
         }
-
-        .k-switch {
-            margin: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
-            box-sizing: border-box;
-            display: flex;
+        kendo-grid-filter-menu-input-wrapper > :first-child {
+            margin-top: 0;
         }
+    }
 
-        .k-widget.k-filter-and {
-            width: 6em;
-        }
+    .k-filter-menu.k-popup,
+    .k-grid-filter-popup.k-popup {
 
-        .k-widget.k-button-group {
-            width: auto;
-            display: inline-flex;
+        .k-filter-menu-container {
+            width: $grid-column-menu-width;
         }
     }
 
-    .k-multicheck-wrap {
+    .k-popup .k-multicheck-wrap {
+        margin: 0;
+        padding: 0;
         max-height: 300px;
+        font-size: $kendo-list-font-size;
+        line-height: $kendo-list-line-height;
         white-space: nowrap;
         overflow: auto;
+        list-style: none;
+
+        .k-item,
+        .k-check-all-wrap {
+            padding: $grid-column-menu-list-item-padding-y $grid-column-menu-list-item-padding-x;
+
+            > .k-checkbox-label {
+                line-height: inherit;
+                display: block;
+            }
+        }
     }
 
     .k-filter-selected-items {
@@ -31533,17 +31731,48 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         .k-detail-row {
             display: none !important;
         }
-
-        input.k-input,
-        span.k-input,
-        input.k-textbox {
-            width: 0 !important;
-        }
     }
 
 }
 
 @include exports("columnmenu/layout") {
+
+    // Column menu
+    .k-column-menu-popup,
+    .k-grid-columnmenu-popup {
+        width: $grid-column-menu-width;
+        box-sizing: border-box;
+
+        &.k-popup {
+            padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
+        }
+        .k-popup > & {
+            width: 100%;
+        }
+
+        .k-actions {
+            margin: 0;
+        }
+
+    }
+    .k-column-menu {
+        box-sizing: border-box;
+
+        .k-menu:not(.k-context-menu) {
+            font-weight: 400;
+        }
+
+        .k-expander {
+            border: 0;
+            background: inherit;
+
+            .k-columnmenu-item {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+
     .k-column-list {
         padding: 0;
         margin: 0;
@@ -31588,16 +31817,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         overflow: hidden;
     }
 
-    .k-filter-menu,
-    .k-column-list-wrapper,
-    .k-columnmenu-item-content {
-
-        .k-actions {
-            margin-top: ($grid-filter-menu-item-spacing-y / 2);
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x;
-        }
-    }
-
     .k-column-menu-group-header {
         padding: $grid-column-menu-group-header-padding-y $grid-column-menu-group-header-padding-x;
         display: flex;
@@ -31616,22 +31835,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         flex: 1 1 auto;
     }
 
-    .k-column-menu {
-        .k-menu:not(.k-context-menu) {
-            font-weight: 400;
-        }
-
-        .k-expander {
-            border: 0;
-            background: inherit;
-
-            .k-columnmenu-item {
-                display: flex;
-                align-items: center;
-            }
-        }
-    }
-
     [dir="rtl"],
     .k-rtl {
         .k-columnmenu-item > .k-icon {
@@ -32202,7 +32405,7 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
     .k-listview {
         margin: 0;
         padding: 0;
-        border-width: $listview-border-width;
+        border-width: 0;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -32222,7 +32425,6 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
     // Header
     .k-listview-header {
         border-width: 0;
-        border-bottom-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -32231,7 +32433,7 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
     }
 
 
-    // Listview contnet
+    // Listview content
     .k-listview-content {
         margin: 0;
         padding: 0;
@@ -32286,7 +32488,6 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
     // Listview footer
     .k-listview-footer {
         border-width: 0;
-        border-top-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -32298,14 +32499,9 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
     // 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;
     }
@@ -32580,14 +32776,10 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             width: auto;
             min-width: $form-line-height * 1em;
         }
-        [data-tool="fontSize"] {
-            width: 5 * $spacer;
-        }
-        [data-tool="fontFamily"] {
-            width: 6 * $spacer;
-        }
-        [data-tool="format"] {
-            width: 4 * $spacer;
+
+        .k-input,
+        .k-picker:not(.k-colorpicker) {
+            width: 5em;
         }
     }
 
@@ -32749,6 +32941,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 {
@@ -33107,33 +33300,45 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         }
 
         // Details
-        .k-details {
+        .k-details,
+        .k-expander {
             padding: 0;
             border-width: 1px 0 0;
             border-style: solid;
             border-color: inherit;
         }
-        .k-details-summary {
-            padding: $padding-y;
+        .k-expander {
+            border: 0;
+            background: inherit;
+        }
+        .k-details-summary,
+        .k-columnmenu-item {
+            padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
+            display: flex;
+            align-items: center;
             cursor: pointer;
 
             > .k-icon {
                 margin-right: $padding-y;
             }
         }
-        .k-details-content {
-            padding: $padding-y $padding-x $padding-y $filter-menu-padding-left;
-
-            > .k-widget {
-                width: 100%;
-                margin-bottom: 3px;
-            }
+        .k-details-content,
+        .k-columnmenu-item-content {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
             .k-filter-and {
-                width: 75px;
-                margin: 8px 0;
+                width: min-content;
+                align-self: flex-start;
             }
         }
+
+        .k-actions {
+            margin: 0;
+            padding: 0;
+        }
     }
 
 }
@@ -36511,6 +36716,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
     }
 
     // Toolbar
+    .k-editor-toolbar,
     .k-editor > .k-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
         flex-shrink: 0;
@@ -36538,13 +36744,10 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             top: 0;
             right: 0;
             visibility: hidden;
-        }
-        .k-overflow-anchor {
-            border-width: 0;
-            padding: $toolbar-padding-y;
-            width: $toolbar-inner-calc-size;
-            height: $toolbar-inner-calc-size;
-            position: relative;
+
+            .k-overflow-anchor {
+                position: relative;
+            }
         }
 
         .k-editor-export {
@@ -36662,6 +36865,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
         }
     }
 
+
     // Find and replace dialog
     .k-editor-find-replace {
         .k-content {
@@ -36918,6 +37122,24 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             }
         }
 
+        // Generic widgets
+        .k-numerictextbox {
+            width: 10em;
+
+            & + .k-dropdown-list {
+                width: 5em;
+            }
+
+            & + .k-colorpicker,
+            & + .k-dropdown-list {
+                margin-left: map-get( $spacing, 2 );
+            }
+        }
+
+        .k-colorpicker {
+            vertical-align: middle;
+        }
+
         .k-edit-field > .k-checkbox {
             position: relative; // fix scrolling
         }
@@ -37191,6 +37413,7 @@ $imageeditor-content-border-width: 1px !default;
 
 $imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
 $imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
+$imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
 
 $imageeditor-crop-border-width: 1px !default;
 $imageeditor-crop-border-style: dashed !default;
@@ -37273,16 +37496,16 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
 
     // Action Pane
     .k-imageeditor-action-pane {
+        padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
+        width: $imageeditor-action-pane-width;
         border-width: 0;
         border-left-width: $imageeditor-content-border-width;
         border-style: solid;
         border-color: inherit;
-        flex-shrink: 0;
+        box-sizing: border-box;
+        flex: none;
         overflow-y: auto;
     }
-    .k-imageeditor-action-pane > .k-form {
-        padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
-    }
 
 
     // Crop Tool
@@ -37372,10 +37595,6 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
             flex-direction: row;
             align-self: flex-start;
         }
-
-        .k-imageeditor-action-pane {
-            flex: 0 0 auto;
-        }
     }
 
 }
@@ -39756,7 +39975,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         .k-widget.k-recur-month,
         .k-widget.k-recur-weekday,
         .k-widget.k-recur-weekday-offset {
-            width: 9em;
+            width: 10em;
         }
 
     }
@@ -40307,8 +40526,6 @@ $chat-message-box-text: $kendo-input-text !default;
 $chat-message-box-border: inherit !default;
 $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
 
-$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
-
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/chat/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/chat/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/chat/_layout.scss
@@ -40602,6 +40819,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 {
@@ -40756,9 +40974,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;
         }
 
@@ -40968,14 +41183,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 );
-        }
     }
 
 }
@@ -41078,6 +41285,11 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
         width: 100% !important;
         // sass-lint:enable no-important
         box-shadow: none;
+
+
+        .k-dropdown-list {
+            width: auto;
+        }
     }
     .k-mediaplayer-time-wrap {
         flex: 1;
@@ -41811,11 +42023,8 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-spacing: $toolbar-padding-x !default;
-$pdf-viewer-search-dialog-button-spacing: $pdf-viewer-search-dialog-spacing !default;
-$pdf-viewer-search-dialog-textbox-padding-x: $kendo-input-padding-y !default;
-$pdf-viewer-search-dialog-input-button-height: $line-height-em !default;
-$pdf-viewer-search-dialog-matches-width: 4.5em !default;
+$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
 $pdf-viewer-selection-line-height: 1.2 !default;
 
@@ -41912,38 +42121,45 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
 
     // Search
     .k-pdf-viewer-search-dialog {
-        padding: $pdf-viewer-search-dialog-spacing;
+        padding: $pdf-viewer-search-dialog-padding;
 
         .k-search-container {
             display: flex;
+            gap: $pdf-viewer-search-dialog-spacing;
+            flex-flow: row nowrap;
             flex: 0 0 auto;
             justify-content: flex-start;
             align-items: center;
 
-            .k-match-case-button {
-                display: inline-flex;
-                height: $pdf-viewer-search-dialog-input-button-height;
-                justify-content: center;
+            .k-search-dialog-draghandle {
+                cursor: move;
+                margin-left: 0;
             }
 
-            .k-search-matches {
-                display: inline-block;
-                min-width: $pdf-viewer-search-dialog-matches-width;
-                margin: 0 $pdf-viewer-search-dialog-spacing 0 $pdf-viewer-search-dialog-button-spacing;
-                vertical-align: middle;
-            }
+            .k-textbox {
+                width: 10em;
+                flex: none;
 
-            > .k-button {
-                margin-left: $pdf-viewer-search-dialog-button-spacing;
+                .k-button {
+                    border-width: 0;
+                }
             }
 
-            .k-search-dialog-draghandle {
-                cursor: move;
-                margin-left: 0;
+            .k-search-matches {
+                flex: 1 1 auto;
             }
         }
     }
 
+
+    // IE
+    .k-ie .k-pdf-viewer-search-dialog {
+
+        .k-search-container > * + * {
+            margin-left: $pdf-viewer-search-dialog-spacing;
+        }
+    }
+
 }
 
 // #endregion
@@ -43444,21 +43660,38 @@ $map-marker-fill: $primary !default;
 
 
         // Buttons
+        .k-button {
+            padding: 0;
+            width: auto;
+            height: auto;
+            line-height: 1;
+            box-shadow: none;
+            position: absolute;
+
+            .k-icon {
+                min-width: 0;
+                min-height: 0;
+            }
+        }
+        .k-navigator-n,
         .k-navigator-up {
             transform: translateX(-50%);
             top: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-e,
         .k-navigator-right {
             transform: translateY(-50%);
             right: $map-navigator-padding;
             top: 50%;
         }
+        .k-navigator-s,
         .k-navigator-down {
             transform: translateX(-50%);
             bottom: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-w,
         .k-navigator-left {
             transform: translateY(-50%);
             left: $map-navigator-padding;
@@ -43601,10 +43834,10 @@ $orgchart-card-shadow: $card-shadow !default;
 $orgchart-card-focus-shadow: $card-focus-shadow !default;
 
 $orgchart-card-title-margin-bottom: 0px !default;
-$orgchart-card-title-font-size: $font-size !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;