@progress/kendo-theme-classic 5.0.0-beta.1 → 5.0.0-beta.2

package/dist/all.scss

@@ -3307,8 +3307,7 @@ $utils-border-radius: (
     sm: map-get( $spacing, 1) / 2,
     md: map-get( $spacing, 1),
     lg: map-get( $spacing, 1) * 1.5,
-    circle: 50%,
-    pill: 9999px
+    full: 9999px
 ) !default;
 
 // #region @import "~@progress/kendo-theme-default/scss/utils/_border.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/utils/_border.scss
@@ -3360,8 +3359,7 @@ $utils-border-radius: (
         sm: ( map-get( $spacing, 1 ) / 4 ),
         md: ( map-get( $spacing, 1 ) / 2 ),
         lg: map-get( $spacing, 1 ),
-        circle: 50%,
-        pill: 9999px
+        full: 9999px
     ) !default;
 
 
@@ -3485,34 +3483,42 @@ $utils-border-radius: (
     /// @description This is equivalent to `display: flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
     /// @group flex-layout
     .k-d-flex                        { display: flex; }
+    .\!k-d-flex                      { display: flex !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-d-inline-flex
     /// @description This is equivalent to `display: inline-flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
     /// @group flex-layout
     .k-d-inline-flex                 { display: inline-flex; }
+    .\!k-d-inline-flex               { display: inline-flex !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-d-flex-row
     /// @description This is equivalent to `display: inline-flex` and `flex-direction: row`.
     /// @group flex-layout
-    .k-d-flex-row                    { display: flex; flex-direction: row; } // sass-lint:disable-line one-declaration-per-line
+    .k-d-flex-row                    { @extend .k-d-flex, .k-flex-row; }
+    .\!k-d-flex-row                  { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
     /// @name k-d-flex-col
     /// @description This is equivalent to `display: inline-flex` and `flex-direction: column`.
     /// @group flex-layout
-    .k-d-flex-col                    { display: flex; flex-direction: column; } // sass-lint:disable-line one-declaration-per-line
+    .k-d-flex-col                    { @extend .k-d-flex, .k-flex-col; }
+    .\!k-d-flex-col                  { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
     /// @name k-flex-row
     /// @description This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
     /// @group flex-layout
     .k-flex-row                      { flex-direction: row; }
+    .\!k-flex-row                    { flex-direction: row !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-row-reverse
     /// @description This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
     /// @group flex-layout
     .k-flex-row-reverse              { flex-direction: row-reverse; }
+    .\!k-flex-row-reverse            { flex-direction: row-reverse !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-col
     /// @description This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
     /// @group flex-layout
     .k-flex-col                      { flex-direction: column; }
+    .\!k-flex-col                    { flex-direction: column !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-col-reverse
     /// @description This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
     /// @group flex-layout
     .k-flex-col-reverse              { flex-direction: column-reverse; }
+    .\!k-flex-col-reverse            { flex-direction: column-reverse; } // sass-lint:disable-line no-important class-name-format
 
 
     // Aliases
@@ -3567,7 +3573,7 @@ $utils-border-radius: (
     /// @group flex-layout
     .k-flex-shrink                   { flex-shrink: 1; }
     /// @name k-flex-shrink-0
-    /// @description This is equivalent to `flex-shrink: 0`. The item will not srhink.
+    /// @description This is equivalent to `flex-shrink: 0`. The item will not shrink.
     /// @group flex-layout
     .k-flex-shrink-0                 { flex-shrink: 0; }
     /// @name k-flex-basis-auto
@@ -6268,12 +6274,24 @@ $kendo-list-no-data-text: $subtle-text !default;
         padding: 0;
         font-size: $kendo-list-font-size;
         line-height: $kendo-list-line-height;
+        display: flex;
+        flex-flow: column nowrap;
         outline: none;
+        position: relative;
+        overflow: hidden;
+    }
+
+
+    // List in popup
+    .k-popup > .k-list {
+        height: 100%;
+        border-width: 0;
     }
 
 
     // List header
-    .k-list-header {
+    // .k-list-header,
+    .k-list-group-sticky-header {
         padding: $kendo-list-header-padding-y $kendo-list-header-padding-x;
         border-width: 0;
         border-width: $kendo-list-header-border-width; // sass-lint:disable-line no-duplicate-properties
@@ -6282,6 +6300,7 @@ $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;
+        flex: none;
         overflow: hidden;
         text-overflow: ellipsis;
     }
@@ -6290,6 +6309,7 @@ $kendo-list-no-data-text: $subtle-text !default;
     // List content
     .k-list-content {
         border-color: inherit;
+        flex: 1 1 auto;
         overflow: hidden;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
@@ -6385,7 +6405,9 @@ $kendo-list-no-data-text: $subtle-text !default;
         overflow-y: scroll;
     }
     .k-virtual-list .k-list-item,
-    .k-virtual-list .k-list-group-item {
+    .k-virtual-list .k-list-group-item,
+    .k-virtual-content .k-list-item,
+    .k-virtual-content .k-list-group-item {
         position: absolute;
         width: 100%;
     }
@@ -6429,7 +6451,8 @@ $kendo-list-no-data-text: $subtle-text !default;
             font-size: $_font-size;
             line-height: $_line-height;
 
-            .k-list-header {
+            // .k-list-header,
+            .k-list-group-sticky-header {
                 padding: $_header-padding-y $_header-padding-x;
                 font-size: $_header-font-size;
                 line-height: $_header-line-height;
@@ -6481,7 +6504,8 @@ $kendo-list-no-data-text: $subtle-text !default;
 
 
     // List header
-    .k-list-header {
+    // .k-list-header,
+    .k-list-group-sticky-header {
         @include fill(
             $kendo-list-header-text,
             $kendo-list-header-bg,
@@ -7740,12 +7764,12 @@ $kendo-button-group-focus-shadow: null !default;
             z-index: 2;
         }
 
-        .k-group-start,
-        .k-button:first-child {
+        .k-group-start:not(:only-child),
+        .k-button:first-child:not(:only-child) {
             @include border-right-radius( 0 );
         }
-        .k-group-end,
-        .k-button:last-child {
+        .k-group-end:not(:only-child),
+        .k-button:last-child:not(:only-child) {
             @include border-left-radius( 0 );
         }
     }
@@ -8312,60 +8336,54 @@ $kendo-button-group-focus-shadow: null !default;
 // Component
 // #region @import "_variables.scss"; -> packages/classic/scss/input/_variables.scss
 // Input
+$kendo-input-default-width: 100% !default;
+
 $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
-$kendo-input-border-radius: $border-radius !default;
-$kendo-input-border-radius-sm: $border-radius !default;
-$kendo-input-border-radius-lg: $border-radius !default;
+$kendo-input-border-radius: null !default;
 
 $kendo-input-padding-x: $padding-x !default;
 $kendo-input-padding-y: $padding-y !default;
 $kendo-input-font-family: $font-family !default;
 $kendo-input-font-size: $font-size !default;
 $kendo-input-line-height: $line-height !default;
-$kendo-input-line-height-em: $kendo-input-line-height * 1em !default;
 
 $kendo-input-padding-x-sm: ($kendo-input-padding-x / 2) !default;
 $kendo-input-padding-y-sm: ($kendo-input-padding-y / 2) !default;
-$kendo-input-font-size-sm: $kendo-input-font-size !default;
-$kendo-input-line-height-sm: $line-height-sm !default;
+$kendo-input-font-size-sm: $font-size !default;
+$kendo-input-line-height-sm: $line-height-md !default;
 
 $kendo-input-padding-x-md: $kendo-input-padding-x !default;
 $kendo-input-padding-y-md: $kendo-input-padding-y !default;
-$kendo-input-font-size-md: $kendo-input-font-size !default;
-$kendo-input-line-height-md: $kendo-input-line-height !default;
+$kendo-input-font-size-md: $font-size !default;
+$kendo-input-line-height-md: $line-height-md !default;
 
 $kendo-input-padding-x-lg: ($kendo-input-padding-x * 1.5) !default;
 $kendo-input-padding-y-lg: ($kendo-input-padding-y * 1.5) !default;
-$kendo-input-font-size-lg: $kendo-input-font-size !default;
-$kendo-input-line-height-lg: $line-height-lg !default;
-
-$kendo-input-calc-height: calc( #{$kendo-input-line-height * 1em} + #{$kendo-input-padding-y * 2} + #{$kendo-input-border-height} ) !default;
-$kendo-input-calc-height-sm: calc( #{$kendo-input-line-height-sm * 1em} + #{$kendo-input-padding-y-sm * 2} + #{$kendo-input-border-height} ) !default;
-$kendo-input-calc-height-lg: calc( #{$kendo-input-line-height-lg * 1em} + #{$kendo-input-padding-y-lg * 2} + #{$kendo-input-border-height} ) !default;
-
-$kendo-input-inner-calc-height: calc( #{$kendo-input-line-height * 1em} + #{$kendo-input-padding-y * 2} ) !default;
-$kendo-input-inner-calc-height-sm: calc( #{$kendo-input-line-height-sm * 1em} + #{$kendo-input-padding-y-sm * 2} ) !default;
-$kendo-input-inner-calc-height-lg: calc( #{$kendo-input-line-height-lg * 1em} + #{$kendo-input-padding-y-lg * 2} ) !default;
+$kendo-input-font-size-lg: $font-size !default;
+$kendo-input-line-height-lg: $line-height-md !default;
 
 $kendo-input-sizes: (
     sm: (
         padding-x: $kendo-input-padding-x-sm,
         padding-y: $kendo-input-padding-y-sm,
         font-size: $kendo-input-font-size-sm,
-        line-height: $kendo-input-line-height-sm
+        line-height: $kendo-input-line-height-sm,
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} )
     ),
     md: (
         padding-x: $kendo-input-padding-x-md,
         padding-y: $kendo-input-padding-y-md,
         font-size: $kendo-input-font-size-md,
-        line-height: $kendo-input-line-height-md
+        line-height: $kendo-input-line-height-md,
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} )
     ),
     lg: (
         padding-x: $kendo-input-padding-x-lg,
         padding-y: $kendo-input-padding-y-lg,
         font-size: $kendo-input-font-size-lg,
-        line-height: $kendo-input-line-height-lg
+        line-height: $kendo-input-line-height-lg,
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} )
     )
 ) !default;
 
@@ -8398,6 +8416,7 @@ $kendo-input-clear-value-hover-opacity: 1 !default;
 $kendo-input-values-margin-y: map-get( $spacing, thin ) !default;
 $kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
 
+
 // Input actions
 $kendo-input-button-width: null !default;
 $kendo-input-button-border-width: 0px !default;
@@ -8405,11 +8424,6 @@ $kendo-input-spinner-width: null !default;
 $kendo-input-spinner-icon-offset: 2px !default;
 
 
-// Input icon
-$kendo-input-icon-width: calc( #{$icon-size} + #{$kendo-input-padding-y * 2} ) !default;
-$kendo-input-icon-height: calc( #{$kendo-input-line-height * $kendo-input-font-size} + #{$kendo-input-padding-y * 2} ) !default;
-
-
 // Input separator
 $kendo-input-separator-color: $kendo-input-text !default;
 $kendo-input-separator-opacity: .5 !default;
@@ -8430,7 +8444,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         @include border-radius( $kendo-input-border-radius );
         margin: 0;
         padding: 0;
-        width: 100%;
+        width: $kendo-input-default-width;
         min-width: 0;
         border-width: $kendo-input-border-width;
         border-style: solid;
@@ -8536,8 +8550,9 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     .k-icon-picker {
         .k-input-inner {
             padding: $kendo-input-padding-y;
-            width: $kendo-input-inner-calc-height;
-            height: $kendo-input-inner-calc-height;
+            // TODO we need better way
+            // width: $kendo-input-inner-calc-height;
+            // height: $kendo-input-inner-calc-height;
             justify-content: center;
         }
     }
@@ -8546,6 +8561,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     // Input prefix and suffix
     .k-input-prefix,
     .k-input-suffix {
+        border-color: inherit;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -8557,13 +8573,24 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     }
 
 
+    // Input separator
+    .k-input-separator {
+        margin: 0;
+        width: 0;
+        height: $icon-size;
+        border-width: 0 0 0 1px;
+        border-style: solid;
+        border-color: inherit;
+        align-self: center;
+    }
+
+
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
     .k-input-loading-icon {
-        width: $kendo-input-icon-width;
-        height: $kendo-input-icon-height;
         flex: none;
+        align-self: center;
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -8573,11 +8600,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
     // Clear value
     .k-clear-value {
-        width: $kendo-input-icon-width;
-        height: $kendo-input-icon-height;
         outline: 0;
         color: $kendo-input-clear-value-text;
         flex: none;
+        align-self: center;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -8651,6 +8677,24 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     }
 
 
+    // Legacy wrappers
+    .k-picker-wrap,
+    .k-dropdown-wrap,
+    .k-dateinput-wrap,
+    .k-multiselect-wrap,
+    .k-numeric-wrap {
+        width: 100%;
+        border-width: 0;
+        border-color: inherit;
+        box-sizing: border-box;
+        flex: 1 1 auto;
+        display: flex;
+        flex-flow: row nowrap;
+        overflow: hidden;
+        position: relative;
+    }
+
+
     // Fill mode
     .k-input-flat,
     .k-picker-flat {
@@ -8677,6 +8721,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         $_padding-y: map-get( $size-props, padding-y );
         $_font-size: map-get( $size-props, font-size );
         $_line-height: map-get( $size-props, line-height );
+        $_icon-size: map-get( $size-props, icon-size );
 
         .k-input-#{$size},
         .k-picker-#{$size} {
@@ -8686,8 +8731,22 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             .k-input-inner {
                 padding: $_padding-y $_padding-x;
             }
-        }
 
+            .k-input-icon,
+            .k-input-validation-icon,
+            .k-input-loading-icon,
+            .k-clear-value {
+                width: $_icon-size;
+                height: $_icon-size;
+            }
+
+            &.k-icon-picker .k-input-inner {
+                width: calc( #{$_line-height * 1em} );
+                height: calc( #{$_line-height * 1em} );
+                padding: $_padding-y;
+                box-sizing: content-box;
+            }
+        }
     }
 
 }
@@ -8763,7 +8822,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
         // Invalid
         &:invalid,
-        &.k-invalid {
+        &.k-invalid,
+        &.ng-invalid {
             @include fill( $border: $invalid-border );
 
             .k-input-validation-icon {
@@ -8811,7 +8871,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
         // Invalid
         &:invalid,
-        &.k-invalid {
+        &.k-invalid,
+        &.ng-invalid {
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
@@ -9620,6 +9681,10 @@ $kendo-table-selected-border: $grid-selected-border !default;
     .k-data-table {
         border-width: $kendo-table-border-width;
         border-style: solid;
+
+        .k-table {
+            table-layout: fixed;
+        }
     }
 
 
@@ -9681,7 +9746,7 @@ $kendo-table-selected-border: $grid-selected-border !default;
         width: 100%;
         max-width: none;
         border-width: 0;
-        display: table-row-group;
+        display: table;
         border-collapse: collapse;
         border-spacing: 0;
         table-layout: fixed;
@@ -9689,10 +9754,11 @@ $kendo-table-selected-border: $grid-selected-border !default;
         list-style: none;
         outline: none;
 
-        .k-table-row {
+        .k-table-row,
+        .k-table-group-row {
             width: 100%;
             box-sizing: border-box;
-            display: flex;
+            display: table-row;
             position: relative;
         }
         .k-table-row.k-first {
@@ -9704,6 +9770,26 @@ $kendo-table-selected-border: $grid-selected-border !default;
             vertical-align: middle;
         }
 
+        .k-table-group-row {
+
+            &::before {
+                content: ".";
+                padding: $kendo-table-cell-padding-y 0;
+                width: 0;
+                display: block;
+                overflow: hidden;
+            }
+
+            .k-table-th {
+                width: 100%;
+                border-color: inherit;
+                color: inherit;
+                background-color: inherit;
+                position: absolute;
+                top: 0;
+            }
+        }
+
         .k-table-spacer-td {
             padding: 0 !important; // sass-lint:disable-line no-important
             width: 0 !important; // sass-lint:disable-line no-important
@@ -9727,6 +9813,13 @@ $kendo-table-selected-border: $grid-selected-border !default;
     }
 
 
+    // Virtualization
+    .k-virtual-table .k-table-row {
+        position: absolute;
+        width: 100%;
+    }
+
+
     // Table scroller
     .k-table-scroller {
         position: relative;
@@ -9778,6 +9871,10 @@ $kendo-table-selected-border: $grid-selected-border !default;
         .k-table-#{$size} .k-table-list .k-table-group-td > span {
             padding: 0 ( $_cell-padding-x / 2 );
         }
+
+        .k-table-#{$size} .k-table-list .k-table-group-row::before {
+            padding: $_cell-padding-y 0;
+        }
     }
 
 
@@ -10076,6 +10173,9 @@ $kendo-avatar-theme-colors: $theme-colors !default;
 // #region @import "../icons/_index.scss"; -> packages/classic/scss/icons/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../button/_variables.scss"; -> packages/classic/scss/button/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Component
@@ -10125,50 +10225,50 @@ $kendo-chip-sizes: (
     lg: ( font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg, padding: $kendo-chip-padding-x-lg )
 ) !default;
 
+/// The base background of the chip.
+/// @group chip
+$kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text ) !default;
+
 /// Theme colors map for the chip.
 /// @group chip
 $kendo-chip-theme-colors: (
-    "base": $component-text,
+    "base": $kendo-chip-base-bg,
     "error": map-get( $theme-colors, "error" ),
     "info": map-get( $theme-colors, "info" ),
     "warning": map-get( $theme-colors, "warning" ),
     "success": map-get( $theme-colors, "success" )
 ) !default;
 
-/// The base background of the chip.
-/// @group chip
-$kendo-chip-base-bg: $component-text !default;
-
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: rgba( $kendo-chip-base-bg, .08 ) !default;
+$kendo-chip-solid-bg: try-tint( $kendo-chip-base-bg, 92% ) !default;
 /// The base text color of solid chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-chip-base-bg !default;
 /// The base border color of solid chip.
 /// @group chip
-$kendo-chip-solid-border: rgba( $kendo-chip-solid-bg, .3 ) !default;
+$kendo-chip-solid-border: try-tint( $kendo-chip-base-bg, 70% ) !default;
 /// The base shadow of solid chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px rgba( $kendo-chip-solid-bg, .16 ) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
 
 /// The base background color of focused solid chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: rgba( $kendo-chip-solid-bg, .08 ) !default;
+$kendo-chip-solid-focus-bg: try-tint( $kendo-chip-base-bg, 92% ) !default;
 /// The base text color of focused solid chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of hovered solid chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: rgba( $kendo-chip-solid-bg, .16 ) !default;
+$kendo-chip-solid-hover-bg: try-tint( $kendo-chip-base-bg, 84% ) !default;
 /// The base text color of hovered solid chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
 
 /// The base background color of selected solid chip.
 /// @group chip
-$kendo-chip-solid-selected-bg: rgba( $kendo-chip-solid-bg, .24 ) !default;
+$kendo-chip-solid-selected-bg: try-tint( $kendo-chip-base-bg, 76% ) !default;
 /// The base text color of selected solid chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;
@@ -10220,39 +10320,133 @@ $kendo-chip-list-sizes: (
         padding: $kendo-chip-padding-y $kendo-chip-padding-x;
         border-width: $kendo-chip-border-width;
         border-style: solid;
-        box-sizing: border-box;
+        outline: 0;
         font-family: $font-family;
         font-size: $kendo-chip-font-size;
         line-height: $kendo-chip-line-height;
         display: inline-flex;
-        justify-content: center;
+        flex-flow: row nowrap;
         align-items: center;
+        justify-content: center;
         gap: $kendo-chip-spacing;
         position: relative;
         overflow: hidden;
         cursor: pointer;
         user-select: none;
 
-        &:focus,
-        &.k-chip-focus {
-            outline: 0;
+        .k-selected-icon-wrapper {
+            display: none !important; // sass-lint:disable-line no-important
         }
     }
 
-    // Text
+
+    // Chip content
     .k-chip-content {
         min-width: 0;
-        display: inline-flex;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        overflow: hidden;
         flex: 1 1 auto;
+    }
+    .k-chip-content:first-child {
+        margin-inline-start: $kendo-chip-spacing;
+    }
+    .k-chip-content:last-child {
+        margin-inline-end: $kendo-chip-spacing;
+    }
+
+
+    // Chip text
+    .k-chip-text,
+    .k-chip-label {
         white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        flex: 1 1 auto;
     }
 
-    // Icon
-    .k-chip-icon,
-    .k-chip-remove-icon {
+
+    // Chip avatar
+    .k-chip-avatar {
+        border-radius: 50%;
+        background-size: cover;
+        background-position: center;
+        flex: none;
+    }
+
+
+    // Chip icon
+    .k-chip-icon {
         font-size: inherit;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+    }
+    .k-ie .k-chip-icon {
+        margin-right: $kendo-chip-spacing;
     }
 
+
+    // Actions
+    .k-chip-actions {
+        flex: none;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
+    }
+    .k-chip-action {
+        flex: none;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
+    }
+
+
+    // Legacy chip icons
+    .k-remove-icon {
+        font-size: inherit;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+    }
+    .k-ie .k-remove-icon {
+        margin-right: 0;
+        margin-left: $kendo-chip-spacing;
+    }
+
+
+    // Chip list
+    .k-chip-list {
+        min-width: 0px;
+        display: inline-flex;
+        flex-wrap: wrap;
+        align-items: center;
+        position: relative;
+    }
+
+
+    // RTL
+    .k-ie .k-chip.k-rtl,
+    .k-ie .k-rtl .k-chip,
+    .k-ie .k-chip[dir="rtl"] {
+        .k-chip-icon {
+            margin-right: 0;
+            margin-left: $kendo-chip-spacing;
+        }
+
+        .k-remove-icon {
+            margin-left: 0;
+            margin-right: $kendo-chip-spacing;
+        }
+    }
+
+
+
     // Sizes
     @each $size, $size-props in $kendo-chip-sizes {
 
@@ -10260,6 +10454,7 @@ $kendo-chip-list-sizes: (
         $_line-height: map-get( $size-props, line-height );
         $_padding: map-get( $size-props, padding );
         $_size: calc( #{$line-height-xs * 1em} + #{$_padding * 2} + #{$kendo-chip-border-width * 2} );
+        $_avatar-size: 1em;
 
         .k-chip-#{$size} {
             height: $_size;
@@ -10267,30 +10462,13 @@ $kendo-chip-list-sizes: (
             font-size: $_font-size;
             line-height: $_line-height;
         }
-    }
-
-    // Avatar Size
-    .k-chip-avatar {
-        width: 1em;
-        height: 1em;
-        flex-basis: 1em;
-    }
-    .k-chip-avatar .k-avatar-image > img {
-        vertical-align: top;
-    }
 
-}
-
-@include exports("chip/layout/list") {
+        .k-chip-avatar {
+            width: $_avatar-size;
+            height: $_avatar-size;
+            flex-basis: $_avatar-size;
+        }
 
-    // Chip List
-    .k-chip-list {
-        min-width: 0px;
-        display: inline-flex;
-        flex-wrap: wrap;
-        align-items: center;
-        position: relative;
-        box-sizing: border-box;
     }
 
     // Sizes
@@ -10307,7 +10485,7 @@ $kendo-chip-list-sizes: (
 // #endregion
 // #region @import "_theme.scss"; -> packages/classic/scss/chip/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/chip/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/chip/_theme.scss
-@include exports("chip/theme") {
+@include exports( "chip/theme" ) {
 
     // Solid
     @each $name, $color in $kendo-chip-theme-colors {
@@ -10337,28 +10515,29 @@ $kendo-chip-list-sizes: (
             } @else {
                 @include fill(
                     $color,
-                    rgba( $color, .08 ),
-                    rgba( $color, .3 )
+                    try-tint( $color, 92% ),
+                    try-tint( $color, 70% )
                 );
 
                 &:focus,
                 &.k-focus {
                     @include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
-                    @include fill( $bg: rgba( $color, .08 ) );
+                    @include fill( $bg: try-tint( $color, 92% ) );
                 }
 
                 &:hover,
                 &.k-hover {
-                    @include fill( $bg: rgba($color, .16 ) );
+                    @include fill( $bg: try-tint($color, 84% ) );
                 }
 
                 &.k-selected {
-                    @include fill( $bg: rgba( $color, .24 ) );
+                    @include fill( $bg: try-tint( $color, 76% ) );
                 }
             }
         }
     }
 
+
     // Outline
     @each $name, $color in $kendo-chip-theme-colors {
         .k-chip-outline-#{$name} {
@@ -10455,14 +10634,17 @@ $color-preview-no-color-text: $error !default;
 $color-preview-no-color-border: null !default;
 
 $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
+$color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/classic/scss/color-preview/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/color-preview/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/color-preview/_layout.scss
-@include exports("color-preview/layout") {
+@include exports( "color-preview/layout" ) {
 
     // Color Preview
     .k-color-preview {
+        width: 100%;
+        height: 100%;
         border-width: $color-preview-border-width;
         border-radius: $color-preview-border-radius;
         border-style: solid;
@@ -10471,14 +10653,23 @@ $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='h
         flex-wrap: nowrap;
         position: relative;
         overflow: hidden;
-    }
-    .k-color-preview::before {
-        content: "";
-        width: 100%;
-        height: 100%;
-        display: block;
-        position: relative;
-        z-index: -1;
+
+        > .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
@@ -10494,11 +10685,13 @@ $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='h
         display: flex;
         flex-flow: column nowrap;
         align-items: center;
+        justify-content: center;
         gap: 2px;
 
         .k-color-preview-mask {
             width: calc( #{$icon-size} - 2px );
             height: 2px;
+            position: static;
         }
 
         &::before {
@@ -10508,7 +10701,7 @@ $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='h
 
 
     // No Color
-    .k-no-color::after {
+    .k-no-color::before {
         content: "";
         width: 100%;
         height: 100%;
@@ -10524,7 +10717,7 @@ $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='h
 // #endregion
 // #region @import "_theme.scss"; -> packages/classic/scss/color-preview/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/color-preview/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/color-preview/_theme.scss
-@include exports("color-preview/theme") {
+@include exports( "color-preview/theme" ) {
 
     // Color Preview
     .k-color-preview {
@@ -10535,7 +10728,7 @@ $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='h
         );
 
         &::before {
-            background: url(map-get($data-uris, "alpha-slider-bgr.png"));
+            background: $color-preview-transparent-color-image;
             background-size: contain;
             background-position: 0;
         }
@@ -10547,10 +10740,11 @@ $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='h
     }
 
     // No Color
-    .k-no-color::after {
+    .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;
     }
 
 }
@@ -14443,11 +14637,13 @@ $slider-disabled-opacity: null !default;
         -webkit-tap-highlight-color: $rgba-transparent;
 
         .k-button-increase {
+            position: absolute;
             right: 0;
             top: 0;
         }
 
         .k-button-decrease {
+            position: absolute;
             left: 0;
             top: 0;
         }
@@ -15875,6 +16071,351 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
 // #endregion
 
+// #endregion
+// #region @import "timeselector/_index.scss"; -> packages/classic/scss/timeselector/_index.scss
+// #region @import "../core/_index.scss"; -> packages/classic/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../list/_index.scss"; -> packages/classic/scss/list/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../action-buttons/_index.scss"; -> packages/classic/scss/action-buttons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/classic/scss/timeselector/_variables.scss
+// Time selector
+$time-selector-border-width: 1px !default;
+$time-selector-font-family: $font-family !default;
+$time-selector-font-size: $font-size !default;
+$time-selector-line-height: $line-height !default;
+
+$time-selector-bg: $component-bg !default;
+$time-selector-text: $component-text !default;
+$time-selector-border: $component-border !default;
+
+$time-selector-header-padding-x: map-get( $spacing, 1 ) !default;
+$time-selector-header-padding-y: map-get( $spacing, 1 ) !default;
+$time-selector-header-border-width: 0px !default;
+
+$time-list-width: 4em !default;
+$time-list-height: 240px !default;
+
+$time-list-title-font-size: $font-size-sm !default;
+$time-list-title-line-height: 1.5 !default;
+$time-list-title-height: ( $time-list-title-font-size * $time-list-title-line-height) !default;
+$time-list-title-text: $subtle-text !default;
+$time-list-title-focus-text: $component-text !default;
+
+$time-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$time-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+
+$time-list-highlight-border-width: 1px 0px !default;
+$time-list-highlight-height: calc( #{$time-selector-font-size * $time-selector-line-height} + #{ $time-list-item-padding-y * 2} ) !default;
+$time-list-highlight-bg: $component-bg !default;
+$time-list-highlight-border: $component-border !default;
+
+$time-list-focused-bg: rgba(0, 0, 0, .04) !default;
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/classic/scss/timeselector/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/timeselector/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/timeselector/_layout.scss
+@include exports( "timeselector/layout" ) {
+
+    // Time selector
+    .k-timeselector {
+        border-width: $time-selector-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $time-selector-font-family;
+        font-size: $time-selector-font-size;
+        line-height: $time-selector-line-height;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        flex-flow: column nowrap;
+        user-select: none;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        .k-popup > & {
+            border-width: 0;
+        }
+    }
+
+
+    // Time selector header
+    .k-time-header,
+    .k-time-selector-header {
+        padding: $time-selector-header-padding-y $time-selector-header-padding-x;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex: 0 0 auto;
+
+        .k-title,
+        .k-time-selector-header-title {
+            padding: $kendo-button-padding-y $kendo-button-padding-x;
+            font-weight: bold;
+            display: inline-block;
+        }
+
+        .k-time-now {
+            border-width: 0;
+            line-height: inherit;
+            cursor: pointer;
+        }
+    }
+
+
+    // Time selector footer
+    // .k-time-footer {}
+    // .k-time-selector-footer {}
+
+
+    // Time list container
+    .k-time-list-container {
+        display: flex;
+        position: relative;
+        flex: 1 1 auto;
+    }
+
+
+    // Time list highlight
+    .k-time-highlight,
+    .k-time-list-highlight {
+        width: 100%;
+        height: $time-list-highlight-height;
+        border-width: $time-list-highlight-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        position: absolute;
+        top: calc( 50% + #{$time-list-title-height / 2});
+        left: 0;
+        right: 0;
+        transform: translateY(-50%);
+        z-index: 1;
+    }
+
+
+    // Time list wrapper
+    .k-time-list-wrapper {
+        min-width: $time-list-width;
+        height: $time-list-height;
+        box-sizing: content-box;
+        display: inline-flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        overflow: hidden;
+        position: relative;
+        text-align: center;
+        flex: 1 1 auto;
+
+        .k-title {
+            font-size: $time-list-title-font-size;
+            line-height: $time-list-title-line-height;
+            font-weight: bold;
+            text-align: center;
+            text-transform: capitalize;
+            display: block;
+        }
+
+        &.k-state-focused {
+            &::before,
+            &::after {
+                display: block;
+                content: " ";
+                position: absolute;
+                width: 100%;
+                left: 0;
+                pointer-events: none;
+                height: calc( 50% - #{$time-list-highlight-height / 2} );
+                box-sizing: border-box;
+                border-width: 0;
+                border-style: solid;
+            }
+
+            &::before {
+                top: $time-list-title-height;
+            }
+
+            &::after {
+                bottom: 0;
+            }
+        }
+    }
+
+
+    // Time list
+    .k-time-list {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: stretch;
+        flex: 1;
+        position: relative;
+        z-index: 1;
+        overflow: hidden;
+
+        &::before,
+        &::after {
+            display: block;
+            position: absolute;
+            content: " ";
+            height: 0;
+            line-height: 0;
+            z-index: 1;
+            width: 200%;
+            left: -50%;
+        }
+
+        &::before { top: 0; }
+        &::after { bottom: 0; }
+    }
+
+
+    // Time list content
+    .k-time-container,
+    .k-time-list-content {
+        position: relative;
+        flex: 1 1 auto;
+        display: block;
+        overflow-x: hidden;
+        overflow-y: scroll;
+
+        @include hide-scrollbar("right");
+
+        > ul {
+            height: auto;
+            width: $time-list-width;
+            margin: auto;
+        }
+
+        .k-rtl &
+        [dir="rtl"] & {
+            @include hide-scrollbar("left");
+        }
+
+        .k-scrollable-placeholder {
+            position: absolute;
+            width: 1px;
+            top: 0;
+            right: 0;
+        }
+    }
+
+
+    // Time list item
+    .k-time-list-item,
+    .k-time-list .k-item {
+        padding: $time-list-item-padding-y $time-list-item-padding-x;
+    }
+
+
+    // Time separator
+    .k-time-separator {
+        width: 0;
+        height: $time-list-highlight-height;
+        align-self: center;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        z-index: 11;
+        top: calc( #{$time-list-title-height / 2} );
+    }
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/classic/scss/timeselector/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/timeselector/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/timeselector/_theme.scss
+@include exports( "timeselector/theme" ) {
+
+    // Time selector
+    .k-timeselector {
+        @include fill(
+            $time-selector-text,
+            $time-selector-bg,
+            $time-selector-border
+        );
+    }
+
+
+    // Time selector header
+    .k-time-header,
+    .k-time-selector-header {
+
+        .k-time-now {
+            color: $link-text;
+        }
+        .k-time-now:hover {
+            color: $link-hover-text;
+        }
+    }
+
+
+    // Time list wrapper
+    .k-time-list-wrapper {
+
+        .k-title {
+            color: $time-list-title-text;
+        }
+
+        &.k-state-focused {
+            .k-title {
+                color: $time-list-title-focus-text;
+            }
+
+            &::before,
+            &::after {
+                background-color: $time-list-focused-bg;
+            }
+        }
+    }
+
+
+    // Time list
+    .k-time-list {
+        &::before,
+        &::after {
+            $shadow-size: 3em;
+            box-shadow: 0 0 $shadow-size ($shadow-size / 2) $time-selector-bg;
+        }
+
+        .k-item:hover {
+            color: $primary;
+        }
+    }
+
+    .k-time-container {
+        background: transparent;
+    }
+
+    .k-time-highlight {
+        @include fill(
+            $bg: $time-list-highlight-bg,
+            $border: $time-list-highlight-border
+        );
+    }
+
+}
+
+// #endregion
+
+// #endregion
+
 // #endregion
 
 
@@ -16797,10 +17338,7 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
 
 
 // Dependencies
-// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../utils/_flex.scss"; -> packages/classic/scss/utils/_flex.scss
+// #region @import "../input/_index.scss"; -> packages/classic/scss/input/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
@@ -16822,31 +17360,12 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
 
 // Component
 // #region @import "_variables.scss"; -> packages/classic/scss/colorpicker/_variables.scss
-// Colorpicker
-$colorpicker-font-family: $font-family !default;
-$colorpicker-font-size: $font-size !default;
-$colorpicker-line-height: $line-height !default;
-
-$colorpicker-bg: $kendo-button-bg !default;
-$colorpicker-text: $kendo-button-text !default;
-$colorpicker-border: $kendo-button-border !default;
-$colorpicker-gradient: $kendo-button-gradient !default;
-
-$colorpicker-hovered-bg: $kendo-button-hover-bg !default;
-$colorpicker-hovered-text: $kendo-button-hover-text !default;
-$colorpicker-hovered-border: $kendo-button-hover-border !default;
-$colorpicker-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$colorpicker-focused-bg: null !default;
-$colorpicker-focused-text: null !default;
-$colorpicker-focused-border: null !default;
-$colorpicker-focused-gradient: null !default;
-$colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
+// Color picker
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/classic/scss/colorpicker/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/colorpicker/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/colorpicker/_layout.scss
-@include exports("colorpicker/layout") {
+@include exports( "colorpicker/layout" ) {
 
     // Color picker
     .k-colorpicker {
@@ -16862,7 +17381,7 @@ $colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
 // #region @import "~@progress/kendo-theme-default/scss/colorpicker/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/colorpicker/_theme.scss
 @include exports( "colorpicker/theme" ) {
 
-    // Colorpicker
+    // Color picker
     .k-colorpicker {}
 
 }
@@ -16882,26 +17401,14 @@ $colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
 
 
 // Dependencies
-// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 // #region @import "../input/_index.scss"; -> packages/classic/scss/input/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../floating-label/_index.scss"; -> packages/classic/scss/floating-label/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../popup/_index.scss"; -> packages/classic/scss/popup/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../icons/_index.scss"; -> packages/classic/scss/icons/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 
 
 // Component
 // #region @import "_variables.scss"; -> packages/classic/scss/dateinput/_variables.scss
-// Dateinput
+// Date input
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/classic/scss/dateinput/_layout.scss
@@ -16937,19 +17444,13 @@ $colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
 
 
 // Dependencies
-// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 // #region @import "../input/_index.scss"; -> packages/classic/scss/input/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../floating-label/_index.scss"; -> packages/classic/scss/floating-label/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 // #region @import "../popup/_index.scss"; -> packages/classic/scss/popup/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../icons/_index.scss"; -> packages/classic/scss/icons/_index.scss
+// #region @import "../calendar/_index.scss"; -> packages/classic/scss/calendar/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 
@@ -16992,26 +17493,26 @@ $colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
 
 
 // Dependencies
-// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 // #region @import "../input/_index.scss"; -> packages/classic/scss/input/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../floating-label/_index.scss"; -> packages/classic/scss/floating-label/_index.scss
+// #region @import "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../popup/_index.scss"; -> packages/classic/scss/popup/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../icons/_index.scss"; -> packages/classic/scss/icons/_index.scss
+// #region @import "../list/_index.scss"; -> packages/classic/scss/list/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../timeselector/_index.scss"; -> packages/classic/scss/timeselector/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 
 
 // Component
 // #region @import "_variables.scss"; -> packages/classic/scss/timepicker/_variables.scss
-// Timepicker
+// Time picker
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/classic/scss/timepicker/_layout.scss
@@ -17047,33 +17548,40 @@ $colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
 
 
 // Dependencies
-// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 // #region @import "../input/_index.scss"; -> packages/classic/scss/input/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../floating-label/_index.scss"; -> packages/classic/scss/floating-label/_index.scss
+// #region @import "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../popup/_index.scss"; -> packages/classic/scss/popup/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../icons/_index.scss"; -> packages/classic/scss/icons/_index.scss
+// #region @import "../list/_index.scss"; -> packages/classic/scss/list/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../calendar/_index.scss"; -> packages/classic/scss/calendar/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../timeselector/_index.scss"; -> packages/classic/scss/timeselector/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../action-buttons/_index.scss"; -> packages/classic/scss/action-buttons/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 
 
 // Component
 // #region @import "_variables.scss"; -> packages/classic/scss/datetimepicker/_variables.scss
-// Datetimepicker
+// DateTime
+$datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/classic/scss/datetimepicker/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/datetimepicker/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/datetimepicker/_layout.scss
-@include exports("datetimepicker/layout") {
+@include exports( "datetimepicker/layout" ) {
 
-    // Date time picker
+    // Datetime picker
     .k-datetimepicker {}
 
 }
@@ -17083,9 +17591,9 @@ $colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
 // #endregion
 // #region @import "_theme.scss"; -> packages/classic/scss/datetimepicker/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/datetimepicker/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/datetimepicker/_theme.scss
-@include exports("datetimepicker/theme") {
+@include exports( "datetimepicker/theme" ) {
 
-    // Date time picker
+    // Datetime picker
     .k-datetimepicker {}
 
 }
@@ -17143,395 +17651,6 @@ $colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
 
 // #endregion
 
-// #endregion
-// #region @import "datetime/_index.scss"; -> packages/classic/scss/datetime/_index.scss
-// #region @import "../core/_index.scss"; -> packages/classic/scss/core/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Dependencies
-// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../action-buttons/_index.scss"; -> packages/classic/scss/action-buttons/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../input/_index.scss"; -> packages/classic/scss/input/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../floating-label/_index.scss"; -> packages/classic/scss/floating-label/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../calendar/_index.scss"; -> packages/classic/scss/calendar/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../popup/_index.scss"; -> packages/classic/scss/popup/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/classic/scss/datetime/_variables.scss
-// DateTime
-$time-highlight-size: 1px !default;
-
-$time-list-title-text: $subtle-text !default;
-$time-list-title-focus-text: $component-text !default;
-
-$time-list-highlight-bg: $component-bg !default;
-$time-list-highlight-border: $component-border !default;
-
-$time-list-focused-bg: rgba(0, 0, 0, .04) !default;
-
-$time-header-padding: null !default;
-$timepicker-header-height: 2em !default;
-
-$time-list-padding: $padding-y * 5 !default;
-$time-list-focus-size: 2px !default;
-$time-list-width: 4em !default;
-$time-list-height: 200px !default;
-
-$time-list-item-padding-x: $padding-x !default;
-$time-list-item-padding-y: $padding-y !default;
-
-$dateinput-text: null !default;
-
-$datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;
-
-$datetime-bg: $kendo-input-bg !default;
-$datetime-text: $kendo-input-text !default;
-$datetime-border: $kendo-input-border !default;
-
-$datetime-hovered-bg: $kendo-input-hover-bg !default;
-$datetime-hovered-text: $kendo-input-hover-text !default;
-$datetime-hovered-border: $kendo-input-hover-border !default;
-
-$datetime-focused-bg: $kendo-input-focus-bg !default;
-$datetime-focused-text: $kendo-input-focus-text !default;
-$datetime-focused-border: $kendo-input-focus-border !default;
-$datetime-focused-shadow: $kendo-input-focus-shadow !default;
-
-$datetime-select-bg: $kendo-button-bg !default;
-$datetime-select-text: $kendo-button-text !default;
-$datetime-select-border: $kendo-button-border !default;
-$datetime-select-gradient: $kendo-button-gradient !default;
-
-$datetime-select-hovered-bg: $kendo-button-hover-bg !default;
-$datetime-select-hovered-text: $kendo-button-hover-text !default;
-$datetime-select-hovered-border: $kendo-button-hover-border !default;
-$datetime-select-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$datetime-select-pressed-bg: $kendo-button-active-bg !default;
-$datetime-select-pressed-text: $kendo-button-active-text !default;
-$datetime-select-pressed-border: $kendo-button-active-border !default;
-$datetime-select-pressed-gradient: $kendo-button-active-gradient !default;
-
-// #endregion
-// #region @import "_layout.scss"; -> packages/classic/scss/datetime/_layout.scss
-// #region @import "~@progress/kendo-theme-default/scss/datetime/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/datetime/_layout.scss
-@include exports("datetime/layout") {
-
-    .k-datetime-container {
-
-        .k-datetime-wrap {
-            width: $datetime-width;
-            overflow: hidden;
-        }
-
-        .k-datetime-buttongroup {
-            padding: $kendo-button-padding-x;
-        }
-
-        .k-datetime-selector {
-            display: flex;
-            transition: transform .2s;
-        }
-
-        .k-datetime-calendar-wrap,
-        .k-datetime-time-wrap {
-            text-align: center;
-            flex: 0 0 $datetime-width;
-        }
-
-        .k-timeselector {
-            outline: none;
-        }
-
-        .k-time-list-container {
-            justify-content: center;
-        }
-
-        .k-time-tab {
-
-            .k-datetime-selector {
-                transform: translateX(-100%);
-            }
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            .k-time-tab {
-
-                .k-datetime-selector {
-                    transform: translateX(100%);
-                }
-            }
-        }
-    }
-
-    // Infinite timepicker
-    .k-timeselector {}
-
-
-    // Header
-    .k-time-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 2 * $padding-y $padding-x * 2;
-        line-height: $timepicker-header-height;
-
-        .k-title {
-            font-weight: bold;
-        }
-
-        .k-time-now {
-            border-width: 0;
-            line-height: inherit;
-            cursor: pointer;
-        }
-    }
-
-    // Content
-    .k-time-list-wrapper {
-        display: inline-block;
-        overflow: hidden;
-        box-sizing: content-box;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: relative;
-        padding: $time-list-padding 0;
-        text-align: center;
-        min-width: $time-list-width;
-        height: $time-list-height;
-        flex: 1 1 auto;
-
-        .k-title {
-            display: block;
-            text-align: center;
-            font-size: $font-size-xs;
-            position: absolute;
-            text-transform: capitalize;
-            font-weight: bold;
-            min-width: 100%;
-            height: 1.5em;
-            line-height: 1.5em;
-            margin-top: -$time-list-padding;
-            z-index: 12;
-        }
-
-        &.k-state-focused {
-            &::before,
-            &::after {
-                display: block;
-                content: " ";
-                position: absolute;
-                width: 100%;
-                left: 0;
-                pointer-events: none;
-                height: calc(50% - 1em);
-                box-sizing: border-box;
-                border-width: 0;
-                border-style: solid;
-            }
-
-            &::before {
-                top: 0;
-            }
-
-            &::after {
-                bottom: 0;
-            }
-        }
-    }
-
-    .k-time-container {
-        position: absolute;
-        display: block;
-        overflow-x: hidden;
-        overflow-y: scroll;
-        line-height: $line-height;
-        left: 0;
-        right: 0;
-        top: $time-list-padding;
-        bottom: $time-list-padding;
-
-        @include hide-scrollbar("right");
-
-        > ul {
-            height: auto;
-            width: $time-list-width;
-            margin: auto;
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            @include hide-scrollbar("left");
-        }
-    }
-
-    .k-time-list-container {
-        display: flex;
-        position: relative;
-    }
-
-    .k-time-list {
-        position: absolute;
-        display: flex;
-        z-index: 10;
-        outline: 0;
-        bottom: 0;
-        right: 0;
-        left: 0;
-        top: 0;
-
-        &::before,
-        &::after {
-            display: block;
-            position: absolute;
-            content: " ";
-            height: 0;
-            line-height: 0;
-            z-index: 1;
-            width: 200%;
-            left: -50%;
-        }
-
-        &::before { top: 0; }
-        &::after { bottom: 0; }
-    }
-
-    .k-time-list .k-item {
-        padding: $time-list-item-padding-y $time-list-item-padding-x;
-        min-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
-        line-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
-    }
-
-    .k-time-highlight {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        transform: translateY(-50%);
-        width: 100%;
-        height: $kendo-button-inner-calc-size;
-        z-index: 1;
-        border-width: $time-highlight-size 0;
-        border-style: solid;
-    }
-
-    .k-time-container .k-scrollable-placeholder {
-        position: absolute;
-        width: 1px;
-        top: 0;
-        right: 0;
-    }
-
-    .k-time-separator {
-        width: 0;
-        height: 100%;
-        display: inline-flex;
-        align-self: center;
-        justify-content: center;
-        z-index: 11;
-    }
-}
-
-// #endregion
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/classic/scss/datetime/_theme.scss
-// #region @import "~@progress/kendo-theme-default/scss/datetime/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/datetime/_theme.scss
-@include exports("datetime/theme") {
-
-    // Timepicker header
-    .k-time-header {
-
-        .k-time-now {
-            color: $link-text;
-            background: transparent;
-
-            &:hover,
-            &:focus {
-                color: $link-hover-text;
-            }
-        }
-    }
-
-
-    // Timepicker content
-    .k-time-list-wrapper {
-
-        .k-title {
-            color: $time-list-title-text;
-        }
-
-        &.k-state-focused {
-            .k-title {
-                color: $time-list-title-focus-text;
-            }
-
-            &::before,
-            &::after {
-                background-color: $time-list-focused-bg;
-            }
-        }
-    }
-
-    .k-time-list {
-        &::before,
-        &::after {
-            $shadow-size: 3em;
-            box-shadow: 0 0 $shadow-size ($shadow-size / 2) $popup-bg;
-        }
-
-        .k-item:hover {
-            color: $primary;
-        }
-    }
-
-    .k-time-container {
-        background: transparent;
-    }
-
-    .k-time-highlight {
-        @include fill(
-            $bg: $time-list-highlight-bg,
-            $border: $time-list-highlight-border
-        );
-    }
-
-    .k-datetime-container {
-        .k-date-tab {
-
-            .k-datetime-buttongroup,
-            .k-datetime-selector {
-                background-color: $component-bg;
-            }
-        }
-    }
-
-}
-
-// #endregion
-
-// #endregion
-
 // #endregion
 // #region @import "dropdowngrid/_index.scss"; -> packages/classic/scss/dropdowngrid/_index.scss
 // #region @import "../core/_index.scss"; -> packages/classic/scss/core/_index.scss
@@ -18068,52 +18187,148 @@ $dropdownlist-focused-shadow: $kendo-input-focus-shadow !default;
 // Component
 // #region @import "_variables.scss"; -> packages/classic/scss/treeview/_variables.scss
 // Treeview
-$treeview-padding-x: 0px !default;
-$treeview-padding-y: 0px !default;
-$treeview-font-family: $font-family !default;
-$treeview-font-size: $font-size !default;
-$treeview-line-height: $line-height !default;
-
-$treeview-indent: 16px !default;
-
-$treeview-item-padding-x: $nav-item-padding-x !default;
-$treeview-item-padding-y: $nav-item-padding-y !default;
-$treeview-item-border-width: 0px !default;
-$treeview-item-border-radius: $border-radius !default;
-
-$treeview-bg: null !default;
-$treeview-text: $component-text !default;
-$treeview-border: null !default;
-
-$treeview-item-hovered-bg: $hovered-bg !default;
-$treeview-item-hovered-text: $hovered-text !default;
-$treeview-item-hovered-border: $hovered-border !default;
-$treeview-item-hovered-gradient: $hovered-gradient !default;
-
-$treeview-item-selected-bg: $selected-bg !default;
-$treeview-item-selected-text: $selected-text !default;
-$treeview-item-selected-border: $selected-border !default;
-$treeview-item-selected-gradient: $selected-gradient !default;
 
-$treeview-item-focused-shadow: $focused-shadow !default;
-$treeview-item-selected-focused-shadow: null !default;
-
-$treeview-loadmore-checkboxes-padding-x: calc( #{$icon-spacing} + #{map-get( $kendo-checkbox-sizes, "md" )} + #{$treeview-indent} ) !default;
-$treeview-loadmore-checkboxes-icon-indent: calc( -1 * (#{$icon-spacing} + #{$treeview-indent}) ) !default;
-$treeview-loadmore-checkboxes-icon-margin-x: $icon-spacing !default;
-
-$treeview-loadmore-bg: transparent !default;
-$treeview-loadmore-text: $primary !default;
-$treeview-loadmore-border: null !default;
-
-$treeview-loadmore-hover-bg: transparent !default;
-$treeview-loadmore-hover-text: $primary-darker !default;
-$treeview-loadmore-hover-border: null !default;
+/// The sizes of the treeview.
+/// @group treeview
+$kendo-treeview-sizes: (
+    sm: (
+        font-size: map-get( $spacing, 3),
+        line-height: $line-height,
+        item-padding-x: map-get( $spacing, thin ),
+        item-padding-y: map-get( $spacing, 1 )
+    ),
+    md: (
+        font-size: $font-size,
+        line-height: $line-height,
+        item-padding-x: map-get( $spacing, 1 ),
+        item-padding-y: map-get( $spacing, 2 )
+    ),
+    lg: (
+        font-size: map-get( $spacing, 4),
+        line-height: $line-height,
+        item-padding-x: map-get( $spacing, 2 ),
+        item-padding-y: map-get( $spacing, 3 )
+    )
+) !default;
 
-$treeview-loadmore-focus-bg: transparent !default;
-$treeview-loadmore-focus-text: $primary !default;
-$treeview-loadmore-focus-border: null !default;
-$treeview-loadmore-focus-shadow: none !default;
+/// The horizontal padding of the treeview.
+/// @group treeview
+$kendo-treeview-padding-x: 0px !default;
+/// The vertical padding of the treeview.
+/// @group treeview
+$kendo-treeview-padding-y: 0px !default;
+/// The font family of the treeview.
+/// @group treeview
+$kendo-treeview-font-family: $font-family !default;
+/// The font size of the treeview.
+/// @group treeview
+$kendo-treeview-font-size: $font-size !default;
+/// The line height of the treeview.
+/// @group treeview
+$kendo-treeview-line-height: $line-height !default;
+
+/// The indent of the treeview item.
+/// @group treeview
+$kendo-treeview-indent: 16px !default;
+
+/// The horizontal padding of the treeview item.
+/// @group treeview
+$kendo-treeview-item-padding-x: $nav-item-padding-x !default;
+/// The vertical padding of the treeview item.
+/// @group treeview
+$kendo-treeview-item-padding-y: $nav-item-padding-y !default;
+/// The border width of the treeview item.
+/// @group treeview
+$kendo-treeview-item-border-width: 0px !default;
+/// The border radius of the treeview item.
+/// @group treeview
+$kendo-treeview-item-border-radius: $border-radius !default;
+
+/// The background of the treeview.
+/// @group treeview
+$kendo-treeview-bg: null !default;
+/// The text color of the treeview.
+/// @group treeview
+$kendo-treeview-text: $component-text !default;
+/// The border color of the treeview.
+/// @group treeview
+$kendo-treeview-border: null !default;
+
+/// The background of a hovered treeview item.
+/// @group treeview
+$kendo-treeview-item-hovered-bg: $hovered-bg !default;
+/// The text color of a hovered treeview item.
+/// @group treeview
+$kendo-treeview-item-hovered-text: $hovered-text !default;
+/// The border of a hovered treeview item.
+/// @group treeview
+$kendo-treeview-item-hovered-border: $hovered-border !default;
+/// The gradient of a hovered treeview item.
+/// @group treeview
+$kendo-treeview-item-hovered-gradient: $hovered-gradient !default;
+
+/// The background of a selected treeview item.
+/// @group treeview
+$kendo-treeview-item-selected-bg: $selected-bg !default;
+/// The text color of a selected treeview item.
+/// @group treeview
+$kendo-treeview-item-selected-text: $selected-text !default;
+/// The border of a selected treeview item.
+/// @group treeview
+$kendo-treeview-item-selected-border: $selected-border !default;
+/// The gradient of a selected treeview item.
+/// @group treeview
+$kendo-treeview-item-selected-gradient: $selected-gradient !default;
+
+/// The shadow of a focused treeview item.
+/// @group treeview
+$kendo-treeview-item-focused-shadow: $focused-shadow !default;
+/// The shadow of a selected and focused treeview item.
+/// @group treeview
+$kendo-treeview-item-selected-focused-shadow: null !default;
+
+/// The horizontal padding of the load more checkboxes.
+/// @group treeview
+$kendo-treeview-loadmore-checkboxes-padding-x: calc( #{$icon-spacing} + #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-treeview-indent} ) !default;
+/// The icon indent of the load more checkboxes.
+/// @group treeview
+$kendo-treeview-loadmore-checkboxes-icon-indent: calc( -1 * (#{$icon-spacing} + #{$kendo-treeview-indent}) ) !default;
+/// The horizontal margin of the load more checkboxes.
+/// @group treeview
+$kendo-treeview-loadmore-checkboxes-icon-margin-x: $icon-spacing !default;
+
+/// The background of load more.
+/// @group treeview
+$kendo-treeview-loadmore-bg: transparent !default;
+/// The text color of load more.
+/// @group treeview
+$kendo-treeview-loadmore-text: $primary !default;
+/// The border of load more.
+/// @group treeview
+$kendo-treeview-loadmore-border: null !default;
+
+/// The background of a hovered load more.
+/// @group treeview
+$kendo-treeview-loadmore-hover-bg: transparent !default;
+/// The text color of a hovered load more.
+/// @group treeview
+$kendo-treeview-loadmore-hover-text: $primary-darker !default;
+/// The border of a hovered load more.
+/// @group treeview
+$kendo-treeview-loadmore-hover-border: null !default;
+
+/// The background of a focused load more.
+/// @group treeview
+$kendo-treeview-loadmore-focus-bg: transparent !default;
+/// The text color of a focused load more.
+/// @group treeview
+$kendo-treeview-loadmore-focus-text: $primary !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;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/classic/scss/treeview/_layout.scss
@@ -18122,14 +18337,12 @@ $treeview-loadmore-focus-shadow: none !default;
 
     // Base
     .k-treeview {
-        padding: $treeview-padding-y $treeview-padding-x;
+        padding: $kendo-treeview-padding-y $kendo-treeview-padding-x;
         border-width: 0;
         background: none;
         box-sizing: border-box;
         outline: 0;
-        font-family: $treeview-font-family;
-        font-size: $treeview-font-size;
-        line-height: $treeview-line-height;
+        font-family: $kendo-treeview-font-family;
         display: block;
         cursor: default;
         overflow: auto;
@@ -18137,15 +18350,15 @@ $treeview-loadmore-focus-shadow: none !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        > .k-group {
+        > .k-treeview-group {
             outline: 0;
             -webkit-touch-callout: none;
             -webkit-tap-highlight-color: $rgba-transparent;
         }
 
         .k-content,
-        > .k-group,
-        .k-item > .k-group {
+        > .k-treeview-group,
+        .k-treeview-item > .k-treeview-group {
             margin: 0;
             padding: 0;
             background: none;
@@ -18158,9 +18371,9 @@ $treeview-loadmore-focus-shadow: none !default;
         }
 
         // Wrappers
-        .k-top,
-        .k-mid,
-        .k-bot {
+        .k-treeview-top,
+        .k-treeview-mid,
+        .k-treeview-bot {
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -18168,20 +18381,19 @@ $treeview-loadmore-focus-shadow: none !default;
         }
 
         // Items
-        .k-item {
+        .k-treeview-item {
             outline-style: none;
             margin: 0;
-            padding: 0 0 0 $treeview-indent;
+            padding: 0 0 0 $kendo-treeview-indent;
             border-width: 0;
             display: block;
         }
 
         // Link
-        .k-in {
-            @include border-radius( $treeview-item-border-radius );
+        .k-treeview-leaf {
+            @include border-radius( $kendo-treeview-item-border-radius );
             margin: 0;
-            padding: $treeview-item-padding-y $treeview-item-padding-x;
-            border: $treeview-item-border-width solid transparent;
+            border: $kendo-treeview-item-border-width solid transparent;
             text-decoration: none;
             display: inline-flex;
             align-items: center;
@@ -18189,7 +18401,7 @@ $treeview-loadmore-focus-shadow: none !default;
             vertical-align: middle;
             position: relative;
         }
-        .k-in.k-state-focused {
+        .k-treeview-leaf.k-state-focused {
             z-index: 1;
         }
 
@@ -18205,18 +18417,18 @@ $treeview-loadmore-focus-shadow: none !default;
             }
         }
         .k-treeview-load-more-checkboxes-container {
-            padding-left: $treeview-loadmore-checkboxes-padding-x;
+            padding-left: $kendo-treeview-loadmore-checkboxes-padding-x;
 
             .k-i-loading {
-                margin-left: $treeview-loadmore-checkboxes-icon-indent;
-                margin-right: $treeview-loadmore-checkboxes-icon-margin-x;
+                margin-left: $kendo-treeview-loadmore-checkboxes-icon-indent;
+                margin-right: $kendo-treeview-loadmore-checkboxes-icon-margin-x;
             }
         }
 
         // Expand / collapse
         .k-i-expand,
         .k-i-collapse {
-            margin-left: -$treeview-indent;
+            margin-left: -$kendo-treeview-indent;
             cursor: pointer;
 
             + .k-checkbox-wrapper {
@@ -18238,30 +18450,34 @@ $treeview-loadmore-focus-shadow: none !default;
         }
 
         // Other content
-        .k-in .k-icon,
-        .k-in .k-image,
-        .k-in .k-sprite {
+        .k-treeview-leaf .k-icon,
+        .k-treeview-leaf .k-image,
+        .k-treeview-leaf .k-sprite {
             margin-right: $icon-spacing;
         }
     }
 
+    .k-treeview-toggle {}
+
+    .k-treeview-leaf-text {}
+
     // RTL
     .k-rtl .k-treeview,
     .k-treeview[dir="rtl"] {
 
         // Items
-        .k-item {
+        .k-treeview-item {
             padding-left: 0;
-            padding-right: $treeview-indent;
+            padding-right: $kendo-treeview-indent;
         }
 
         .k-treeview-load-more-checkboxes-container {
             padding-left: 0;
-            padding-right: $treeview-loadmore-checkboxes-padding-x;
+            padding-right: $kendo-treeview-loadmore-checkboxes-padding-x;
 
             .k-i-loading {
-                margin-left: $treeview-loadmore-checkboxes-icon-margin-x;
-                margin-right: $treeview-loadmore-checkboxes-icon-indent;
+                margin-left: $kendo-treeview-loadmore-checkboxes-icon-margin-x;
+                margin-right: $kendo-treeview-loadmore-checkboxes-icon-indent;
             }
         }
 
@@ -18269,7 +18485,7 @@ $treeview-loadmore-focus-shadow: none !default;
         .k-i-expand,
         .k-i-collapse {
             margin-left: 0;
-            margin-right: -$treeview-indent;
+            margin-right: -$kendo-treeview-indent;
 
             + .k-checkbox-wrapper {
                 margin-right: $icon-spacing;
@@ -18283,13 +18499,28 @@ $treeview-loadmore-focus-shadow: none !default;
         }
 
         // Other content
-        .k-in .k-icon,
-        .k-in .k-image,
-        .k-in .k-sprite {
+        .k-treeview-leaf .k-icon,
+        .k-treeview-leaf .k-image,
+        .k-treeview-leaf .k-sprite {
             margin-left: $icon-spacing;
             margin-right: 0;
         }
+    }
+
+    @each $size, $size-props in $kendo-treeview-sizes {
+        $_font-size: map-get( $size-props, font-size);
+        $_line-height: map-get( $size-props, line-height);
+        $_item-padding-x: map-get( $size-props, item-padding-x);
+        $_item-padding-y: map-get( $size-props, item-padding-y);
 
+        .k-treeview-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+            .k-treeview-leaf {
+                padding: $_item-padding-x $_item-padding-y;
+            }
+        }
     }
 }
 
@@ -18303,70 +18534,69 @@ $treeview-loadmore-focus-shadow: none !default;
     // Appearance
     .k-treeview {
         @include fill(
-            $treeview-text,
-            $treeview-bg,
-            $treeview-border
+            $kendo-treeview-text,
+            $kendo-treeview-bg,
+            $kendo-treeview-border
         );
 
 
         // Item
-        .k-in {}
+        .k-treeview-leaf {}
 
 
         // Interactive states
-        .k-in:hover,
-        .k-in.k-state-hover {
+        .k-treeview-leaf:hover,
+        .k-treeview-leaf.k-hover {
             @include fill(
-                $treeview-item-hovered-text,
-                $treeview-item-hovered-bg,
-                $treeview-item-hovered-border,
-                $treeview-item-hovered-gradient
+                $kendo-treeview-item-hovered-text,
+                $kendo-treeview-item-hovered-bg,
+                $kendo-treeview-item-hovered-border,
+                $kendo-treeview-item-hovered-gradient
             );
         }
-        .k-in.k-state-selected {
+        .k-treeview-leaf.k-selected {
             @include fill(
-                $treeview-item-selected-text,
-                $treeview-item-selected-bg,
-                $treeview-item-selected-border,
-                $treeview-item-selected-gradient
+                $kendo-treeview-item-selected-text,
+                $kendo-treeview-item-selected-bg,
+                $kendo-treeview-item-selected-border,
+                $kendo-treeview-item-selected-gradient
             );
         }
-        .k-in.k-state-focused {
-            @include box-shadow( $treeview-item-focused-shadow );
+        .k-treeview-leaf.k-focus {
+            @include box-shadow( $kendo-treeview-item-focused-shadow );
         }
-        .k-in.k-state-selected.k-state-focused {
-            @include box-shadow( $treeview-item-selected-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(
-                $treeview-loadmore-text,
-                $treeview-loadmore-bg,
-                $treeview-loadmore-border
+                $kendo-treeview-loadmore-text,
+                $kendo-treeview-loadmore-bg,
+                $kendo-treeview-loadmore-border
             );
         }
 
         .k-treeview-load-more-button:hover,
-        .k-treeview-load-more-button.k-state-hover {
+        .k-treeview-load-more-button.k-hover {
             @include fill(
-                $treeview-loadmore-hover-text,
-                $treeview-loadmore-hover-bg,
-                $treeview-loadmore-hover-border
+                $kendo-treeview-loadmore-hover-text,
+                $kendo-treeview-loadmore-hover-bg,
+                $kendo-treeview-loadmore-hover-border
             );
         }
 
         .k-treeview-load-more-button:focus,
-        .k-treeview-load-more-button.k-state-focused {
+        .k-treeview-load-more-button.k-focus {
             @include fill(
-                $treeview-loadmore-focus-text,
-                $treeview-loadmore-focus-bg,
-                $treeview-loadmore-focus-border
+                $kendo-treeview-loadmore-focus-text,
+                $kendo-treeview-loadmore-focus-bg,
+                $kendo-treeview-loadmore-focus-border
             );
-            @include box-shadow( $treeview-loadmore-focus-shadow );
+            @include box-shadow( $kendo-treeview-loadmore-focus-shadow );
         }
     }
-
 }
 
 // #endregion
@@ -19015,7 +19245,8 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
         }
 
         .k-switch-#{$size}[dir="rtl"],
-        [dir="rtl"] .k-switch-#{$size} {
+        [dir="rtl"] .k-switch-#{$size},
+        .k-rtl .k-switch-#{$size} {
 
             .k-switch-label-on {
                 left: auto;
@@ -19038,7 +19269,8 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
 
     // RTL
     .k-switch[dir="rtl"],
-    [dir="rtl"] .k-switch {
+    [dir="rtl"] .k-switch,
+    .k-rtl .k-switch {
 
         .k-switch-thumb {
             transform: translate( 50%, -50% );
@@ -25928,6 +26160,11 @@ $panelbar-item-selected-hovered-focused-text: null !default;
 $panelbar-item-selected-hovered-focused-border: null !default;
 $panelbar-item-selected-hovered-focused-gradient: null !default;
 
+$panelbar-header-expanded-bg: null !default;
+$panelbar-header-expanded-text: null !default;
+$panelbar-header-expanded-border: null !default;
+$panelbar-header-expanded-gradient: null !default;
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/classic/scss/panelbar/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/panelbar/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/panelbar/_layout.scss
@@ -26124,6 +26361,15 @@ $panelbar-item-selected-hovered-focused-gradient: null !default;
         > .k-item,
         > .k-panelbar-header {
 
+            &.k-state-expanded.k-level-0 > .k-link {
+                @include fill(
+                    $panelbar-header-expanded-text,
+                    $panelbar-header-expanded-bg,
+                    $panelbar-header-expanded-border,
+                    $panelbar-header-expanded-gradient
+                );
+            }
+
             // Normal
             > .k-link {
                 @include fill(
@@ -26160,7 +26406,6 @@ $panelbar-item-selected-hovered-focused-gradient: null !default;
                     $panelbar-header-focused-border,
                     $panelbar-header-focused-gradient
                 );
-
                 box-shadow: $panelbar-header-focused-shadow;
             }
 
@@ -26257,7 +26502,6 @@ $panelbar-item-selected-hovered-focused-gradient: null !default;
                     $panelbar-item-focused-border,
                     $panelbar-item-focused-gradient
                 );
-
                 box-shadow: $panelbar-item-focused-shadow;
             }
 
@@ -27478,7 +27722,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 // #region @import "../autocomplete/_index.scss"; -> packages/classic/scss/autocomplete/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../datetime/_index.scss"; -> packages/classic/scss/datetime/_index.scss
+// #region @import "../datetimepicker/_index.scss"; -> packages/classic/scss/datetimepicker/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../dropdownlist/_index.scss"; -> packages/classic/scss/dropdownlist/_index.scss
@@ -27518,7 +27762,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 // #region @import "~@progress/kendo-theme-default/scss/grid/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/grid/_layout.scss
 @include exports("grid/layout") {
 
-    $filter-rows-span-size: calc( #{$line-height-em} + #{$kendo-input-padding-y * 2} + #{$kendo-input-border-width * 2}) !default;
+    // TODO: see why we need this variable
+    // $filter-rows-span-size: calc( #{$line-height-em} + #{$kendo-input-padding-y-md * 2} + #{$kendo-input-border-width * 2}) !default;
+    $filter-rows-span-size: null !default;
 
     $grid-group-dropclue-size: 6px;
     $grid-group-dropclue-line-size: $grid-group-dropclue-size / 3;
@@ -28017,10 +28263,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
     }
 
-    .k-group-indicator {
-        margin-right: ( $grid-group-indicator-gap / 2 );
-    }
-
     .k-group-indicator + .k-group-indicator {
         margin-left: ( $grid-group-indicator-gap / 2 );
     }
@@ -28272,17 +28514,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             gap: ( $grid-cell-padding-y / 2 );
             flex: 1 1 auto;
 
-            > .k-widget,
-            > .k-textbox {
-                width: 100%;
-            }
-
-            .k-colorpicker,
-            .k-dropdown-operator {
-                width: min-content;
-                flex: none;
-            }
-
             > .k-button {
                 flex: none;
             }
@@ -29701,7 +29932,7 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 // #region @import "../combobox/_index.scss"; -> packages/classic/scss/combobox/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../datetime/_index.scss"; -> packages/classic/scss/datetime/_index.scss
+// #region @import "../datetimepicker/_index.scss"; -> packages/classic/scss/datetimepicker/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../dropdownlist/_index.scss"; -> packages/classic/scss/dropdownlist/_index.scss
@@ -31062,9 +31293,6 @@ $pivotgrid-configurator-content-padding-y: 0px !default;
 $pivotgrid-configurator-fields-margin-x: 0px !default;
 $pivotgrid-configurator-fields-margin-y: ( $pivotgrid-spacer / 2 ) !default;
 
-$pivotgrid-configurator-actions-padding-x: ( $pivotgrid-spacer / 2 ) !default;
-$pivotgrid-configurator-actions-padding-y: ( $pivotgrid-spacer * .75 ) !default;
-
 $pivotgrid-configurator-vertical-width: 320px !default;
 $pivotgrid-configurator-horizontal-height: 420px !default;
 
@@ -31383,6 +31611,14 @@ $pivotgrid-remove-text: null !default;
             }
         }
 
+        // Rows, Cols and Filters
+        .k-row-fields,
+        .k-column-fields,
+        .k-filter-fields {
+            margin-top: $pivotgrid-configurator-fields-margin-y;
+            flex-wrap: wrap;
+        }
+
         // Values
         .k-value-fields {
             margin: $pivotgrid-configurator-fields-margin-y $pivotgrid-configurator-fields-margin-x;
@@ -31409,20 +31645,12 @@ $pivotgrid-remove-text: null !default;
             text-align: center;
         }
 
-        .k-chip-content {
-            padding-inline-end: map-get($spacing, 1);
-        }
-
         .k-treeview {
             padding: $pivotgrid-treeview-padding-y $pivotgrid-treeview-padding-x;
             overflow: auto;
         }
     }
 
-    .k-pivotgrid-configurator-actions {
-        padding: $pivotgrid-configurator-actions-padding-y $pivotgrid-configurator-actions-padding-x;
-    }
-
 
     // Calculated field
     .k-calculated-field {
@@ -32283,7 +32511,7 @@ $treelist-footer-row-border-width: 1px !default;
 // #region @import "../checkbox/_index.scss"; -> packages/classic/scss/checkbox/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../datetime/_index.scss"; -> packages/classic/scss/datetime/_index.scss
+// #region @import "../datetimepicker/_index.scss"; -> packages/classic/scss/datetimepicker/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../dropdownlist/_index.scss"; -> packages/classic/scss/dropdownlist/_index.scss
@@ -32370,7 +32598,9 @@ $filter-preview-operator-text: $subtle-text !default;
             }
         }
 
-        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
+        // The second selector targets the Angular rendering
+        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
             content: "";
             position: absolute;
             width: $filter-line-size;
@@ -32379,9 +32609,12 @@ $filter-preview-operator-text: $subtle-text !default;
             left: -$filter-padding-x;
         }
 
+        // The forth and fifth selectors targets the Angular rendering
         .k-filter-group-main::before,
         .k-filter-group-main > .k-filter-toolbar::before,
         .k-filter-group-main > .k-filter-toolbar::after,
+        .k-filter-group-main > * > .k-filter-toolbar::before,
+        .k-filter-group-main > * > .k-filter-toolbar::after,
         .k-filter-lines .k-filter-item:last-child::before {
             display: none;
         }
@@ -32411,7 +32644,9 @@ $filter-preview-operator-text: $subtle-text !default;
                 }
             }
 
-            .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
+            // The second selector targets the Angular rendering
+            .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+            .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
                 left: auto;
                 right: -$filter-padding-x;
             }
@@ -32437,9 +32672,11 @@ $filter-preview-operator-text: $subtle-text !default;
             color: $filter-preview-operator-text;
         }
 
+        // The last selector targets the Angular rendering
         .k-filter-item::before,
         .k-filter-toolbar::before,
-        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
+        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
             background-color: $component-border;
         }
     }
@@ -33011,8 +33248,6 @@ $taskboard-column-cards-padding-y: null !default;
 $taskboard-column-cards-padding-x: null !default;
 $taskboard-column-cards-gap: ( $taskboard-spacer / 2 ) !default;
 
-$taskboard-column-new-calc-height: calc( #{$kendo-input-calc-height} + #{$taskboard-column-header-padding-y * 2} ) !default;
-
 $taskboard-pane-width: $taskboard-column-width !default;
 $taskboard-pane-padding-y: null !default;
 $taskboard-pane-padding-x: null !default;
@@ -33151,7 +33386,8 @@ $taskboard-drag-placeholder-border: $component-border !default;
 
     // Edit/New Columns
     .k-taskboard-column-new {
-        max-height: $taskboard-column-new-calc-height;
+        // TODO: we need better way
+        // max-height: $taskboard-column-new-calc-height;
     }
 
     .k-taskboard-column-new,
@@ -34596,7 +34832,7 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
 // #region @import "../validator/_index.scss"; -> packages/classic/scss/validator/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../datetime/_index.scss"; -> packages/classic/scss/datetime/_index.scss
+// #region @import "../datetimepicker/_index.scss"; -> packages/classic/scss/datetimepicker/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../numerictextbox/_index.scss"; -> packages/classic/scss/numerictextbox/_index.scss
@@ -35836,7 +36072,7 @@ $gantt-offset-resize-handler-top: 50% !default;
 // #region @import "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../datetime/_index.scss"; -> packages/classic/scss/datetime/_index.scss
+// #region @import "../datetimepicker/_index.scss"; -> packages/classic/scss/datetimepicker/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../dropdownlist/_index.scss"; -> packages/classic/scss/dropdownlist/_index.scss
@@ -39294,7 +39530,7 @@ $scrollview-transition-timing-function: ease-in-out !default;
 
     kendo-scrollview.k-scrollview-wrap,
     kendo-scrollview.k-scrollview,
-    .k-widget.k-scrollview {
+    .k-scrollview {
         border-width: $scrollview-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -39353,6 +39589,11 @@ $scrollview-transition-timing-function: ease-in-out !default;
             width: calc( 100% / var(--kendo-scrollview-views, 1) );
             flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
         }
+
+        [dir="rtl"] &,
+        .k-rtl & {
+            transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
+        }
     }