@progress/kendo-theme-default 4.43.1-dev.1 → 4.43.1-dev.2

package/dist/all.scss

@@ -3336,8 +3336,7 @@ $display4-letter-spacing: null !default;
         sm: ( map-get( $spacing, 1 ) / 4 ),
         md: ( map-get( $spacing, 1 ) / 2 ),
         lg: map-get( $spacing, 1 ),
-        circle: 50%,
-        pill: 9999px
+        full: 9999px
     ) !default;
 
 
@@ -6997,6 +6996,21 @@ $picker-select-calc-size: $input-inner-calc-height !default;
 $picker-select-calc-size-sm: $input-inner-calc-height-sm !default;
 $picker-select-calc-size-lg: $input-inner-calc-height-lg !default;
 
+$picker-select-bg: $button-bg !default;
+$picker-select-text: $button-text !default;
+$picker-select-border: $button-border !default;
+$picker-select-gradient: $button-gradient !default;
+
+$picker-select-hovered-bg: $button-hovered-bg !default;
+$picker-select-hovered-text: $button-hovered-text !default;
+$picker-select-hovered-border: $button-hovered-border !default;
+$picker-select-hovered-gradient: $button-hovered-gradient !default;
+
+$picker-select-pressed-bg: $button-active-bg !default;
+$picker-select-pressed-text: $button-active-text !default;
+$picker-select-pressed-border: $button-active-border !default;
+$picker-select-pressed-gradient: $button-active-gradient !default;
+
 
 // Spinner
 $spinner-width: $button-inner-calc-size !default;
@@ -7063,25 +7077,6 @@ $input-separator-opacity: .5 !default;
     }
 
 
-    // TODO: Deprecate
-    // Input spacing
-    .k-space-left,
-    .k-space-right {
-        > input {
-            flex-grow: 1;
-        }
-
-        > .k-icon {
-            left: 3px;
-            margin: 3px 6px;
-        }
-    }
-
-    .k-textbox.k-space-left {
-        flex-direction: row-reverse;
-    }
-
-
     // Input prefix and suffix
     .k-input-prefix,
     .k-input-suffix {
@@ -7127,6 +7122,8 @@ $input-separator-opacity: .5 !default;
         }
     }
 
+
+    // Input separator
     .k-input-separator {
         margin: 0;
         width: 0;
@@ -7135,6 +7132,7 @@ $input-separator-opacity: .5 !default;
         border-style: solid;
     }
 
+
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
@@ -7174,16 +7172,31 @@ $input-separator-opacity: .5 !default;
         flex-flow: row nowrap;
     }
 
-    .k-text-disabled {
-        @include disabled( $disabled-styling );
-    }
-
-}
-
 
+    // 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;
+    }
+    .k-multiselect-wrap {
+        display: block;
+    }
 
 
-@include exports("input/layout/jQuery-label") {
+    .k-text-disabled {
+        @include disabled( $disabled-styling );
+    }
 
 }
 
@@ -8108,6 +8121,10 @@ $table-selected-border: $grid-selected-border !default;
     .k-data-table {
         border-width: $table-border-width;
         border-style: solid;
+
+        .k-table {
+            table-layout: fixed;
+        }
     }
 
 
@@ -8169,7 +8186,7 @@ $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;
@@ -8177,10 +8194,11 @@ $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 {
@@ -8192,6 +8210,26 @@ $table-selected-border: $grid-selected-border !default;
             vertical-align: middle;
         }
 
+        .k-table-group-row {
+
+            &::before {
+                content: ".";
+                padding: $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
@@ -8216,6 +8254,13 @@ $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;
@@ -8805,11 +8850,12 @@ $badge-dot-size-lg: 12px !default;
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/chip/_variables.scss
 // Chip
-$chips-margin: 8px !default;
+$chip-list-gap: 8px !default;
 
-$chip-padding-x: 0px !default;
+$chip-padding-x: 4px !default;
 $chip-padding-y: 4px !default;
 $chip-height: 24px !default;
+$chip-gap: $icon-spacing !default;
 $chip-border-radius: $chip-height / 2 !default;
 $chip-font-size: 14px !default;
 
@@ -8818,10 +8864,7 @@ $chip-selected-icon-offset: 4px !default;
 $chip-selected-icon-no-icon-offset: $chip-selected-icon-offset !default;
 $chip-selected-icon-font-size: $chip-font-size !default;
 
-$chip-content-padding-x: 8px !default;
-
 $chip-icons-size: 16px !default;
-$chip-icon-margin: 4px !default;
 $chip-remove-icon-margin: 8px !default;
 $chip-remove-icon-font-size: 14px !default;
 
@@ -8837,7 +8880,9 @@ $chip-solid-hover-bg: rgba( $chip-base-bg, .16 ) !default;
 $chip-solid-hover-text: null !default;
 $chip-solid-hover-border: null !default;
 
-$chip-solid-focus-bg: $chip-solid-bg !default;
+$chip-solid-focus-bg: null !default;
+$chip-solid-focus-text: null !default;
+$chip-solid-focus-border: null !default;
 $chip-solid-focus-shadow: 0 0 0 2px rgba( $chip-base-bg, .16 ) !default;
 
 $chip-solid-selected-bg: rgba( $chip-base-bg, .24 ) !default;
@@ -8923,6 +8968,7 @@ $chip-outline-focus-shadow: 0 0 0 2px rgba( $black, .08 ) !default;
 
 $chip-outline-selected-bg: $chip-outline-hover-bg !default;
 $chip-outline-selected-text: $chip-outline-hover-text !default;
+$chip-outline-selected-border: null !default;
 
 $chip-outline-success-bg: null !default;
 $chip-outline-success-text: $success !default;
@@ -8988,9 +9034,6 @@ $chip-outline-info-selected-bg: $chip-outline-info-hover-bg !default;
 $chip-outline-info-selected-text: $chip-outline-info-hover-text !default;
 $chip-outline-info-selected-border: null !default;
 
-$chip-multiple-selected-icon-bg: rgba( black, .44 ) !default;
-$chip-multiple-selected-icon-text: #ffffff !default;
-
 $chip-primary-focus-shadow: 0 0 0 2px rgba( $primary, .16 ) !default;
 $chip-secondary-focus-shadow: 0 0 0 2px rgba( $secondary, .16 ) !default;
 $chip-info-focus-shadow: 0 0 0 2px rgba( $info, .16 ) !default;
@@ -9002,172 +9045,152 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
 // #region @import "_layout.scss"; -> packages/default/scss/chip/_layout.scss
 @include exports("chip/layout") {
 
-    .k-chip-list {
-        display: inline-flex;
-
-        > * {
-            margin-right: $chips-margin;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-    }
-
-    .k-selection-single {
-        .k-selected-icon-wrapper {
-            display: none;
-        }
-    }
-
-    .k-selection-multiple {
-        .k-selected-icon-wrapper {
-            width: 0;
-            height: $chip-selected-icon-size;
-            position: relative;
-            left: $chip-selected-icon-offset;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            visibility: hidden;
-            z-index: 1;
-        }
-
-        .k-selected-icon {
-            font-size: $chip-selected-icon-font-size;
-        }
-
-        .k-chip.k-state-selected .k-selected-icon-wrapper,
-        .k-chip.k-selected .k-selected-icon-wrapper {
-            width: $chip-selected-icon-size;
-            visibility: visible;
-        }
-
-        > .k-chip-has-icon {
-            .k-selected-icon-wrapper {
-                border-radius: 50%;
-                position: absolute;
-            }
-        }
-
-        :not(.k-chip-has-icon) {
-            .k-selected-icon-wrapper {
-                left: $chip-selected-icon-no-icon-offset;
-                opacity: 0;
-                transition: width .2s, opacity .2s;
-            }
-
-            &.k-state-selected .k-selected-icon-wrapper,
-            &.k-selected .k-selected-icon-wrapper {
-                opacity: 1;
-            }
-        }
-    }
-
     .k-chip {
-        overflow: hidden;
-        padding: $chip-padding-y $chip-padding-x;
         height: $chip-height;
+        padding: $chip-padding-y $chip-padding-x;
         border-radius: $chip-border-radius;
-        position: relative;
         box-sizing: border-box;
         border-width: 1px;
         border-style: solid;
+        outline: 0;
+        font-size: $chip-font-size;
         display: inline-flex;
+        flex-flow: row nowrap;
         align-items: center;
         justify-content: center;
-        font-size: $chip-font-size;
+        gap: $chip-gap;
+        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
         }
     }
 
+
+    // Chip content
     .k-chip-content {
         min-width: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
         overflow: hidden;
-        text-overflow: ellipsis;
+        flex: 1 1 auto;
+    }
+    .k-chip-content:first-child {
+        margin-inline-start: $chip-gap;
+    }
+    .k-chip-content:last-child {
+        margin-inline-end: $chip-gap;
+    }
+
+
+    // Chip text
+    .k-chip-text,
+    .k-chip-label {
         white-space: nowrap;
-        padding: 0 $chip-content-padding-x;
+        text-overflow: ellipsis;
+        overflow: hidden;
         flex: 1 1 auto;
     }
 
-    .k-chip-icon,
-    .k-remove-icon {
+
+    // Chip avatar
+    .k-chip-avatar {
+        width: $chip-avatar-size;
+        height: $chip-avatar-size;
+        border-radius: 50%;
+        background-size: cover;
+        background-position: center;
+        flex: none;
+    }
+
+
+    // Chip icon
+    .k-chip-icon {
         width: $chip-icons-size;
         height: $chip-icons-size;
         display: flex;
         align-items: center;
         justify-content: center;
-        flex: 1 0 auto;
+        flex: none;
+    }
+    .k-ie .k-chip-icon {
+        margin-right: $chip-gap;
     }
 
-    .k-chip-icon {
-        margin-left: $chip-icon-margin;
+
+    // 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 {
-        margin-right: $chip-remove-icon-margin;
+        width: $chip-icons-size;
+        height: $chip-icons-size;
         font-size: $chip-remove-icon-font-size;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
     }
-
-    .k-chip-avatar {
-        width: $chip-avatar-size;
-        height: $chip-avatar-size;
-        border-radius: 50%;
-        background-size: cover;
-        background-position: center;
+    .k-ie .k-remove-icon {
+        margin-right: 0;
+        margin-left: $chip-gap;
     }
 
-}
 
+    // Chip list
+    .k-chip-list {
+        display: inline-flex;
+        gap: $chip-list-gap;
+    }
+    .k-ie .k-chip-list > * {
+        margin-right: $chip-list-gap;
+    }
+    .k-ie .k-chip-list > :last-child {
+        margin-right: 0;
+    }
 
-@include exports("chip/layout/rtl") {
 
-    .k-chip-list {
-        &[dir="rtl"],
-        .k-rtl &,
-        &.k-rtl {
-            > * {
-                margin-right: 0;
-                margin-left: $chips-margin;
+    // 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: $chip-gap;
+        }
 
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
+        .k-remove-icon {
+            margin-left: 0;
+            margin-right: $chip-gap;
         }
     }
+    .k-ie .k-chip-list.k-rtl,
+    .k-ie .k-rtl .k-chip-list,
+    .k-ie .k-chip-list[dir="rtl"] {
+        > * {
+            margin-right: 0;
+            margin-left: $chip-list-gap;
 
-    .k-chip {
-        &[dir="rtl"],
-        .k-rtl &,
-        &.k-rtl {
-            .k-chip-icon {
+            &:last-child {
                 margin-left: 0;
-                margin-right: $chip-icon-margin;
-            }
-
-            .k-remove-icon {
-                margin-right: 0;
-                margin-left: $chip-remove-icon-margin;
-            }
-
-            .k-selection-multiple & {
-                .k-selected-icon-wrapper {
-                    left: 0;
-                    right: $chip-selected-icon-offset;
-                }
-
-                &:not(.k-chip-has-icon) {
-                    .k-selected-icon-wrapper {
-                        left: 0;
-                        right: $chip-selected-icon-no-icon-offset;
-                    }
-                }
             }
         }
     }
@@ -9176,17 +9199,9 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/chip/_theme.scss
-@include exports("chip/theme") {
+@include exports( "chip/theme" ) {
 
-    .k-selection-multiple .k-chip-has-icon.k-state-selected .k-selected-icon-wrapper,
-    .k-selection-multiple .k-chip-has-icon.k-selected .k-selected-icon-wrapper {
-        @include fill(
-            $color: $chip-multiple-selected-icon-text,
-            $bg: $chip-multiple-selected-icon-bg
-        );
-    }
-
-    // Solid
+    // Chip solid
     .k-chip-solid {
         @include fill(
             $chip-solid-text,
@@ -9195,179 +9210,182 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
         );
 
         &:hover,
-        &.k-state-hover,
-        &.k-hover {
+        &.k-hover,
+        &.k-state-hover {
             @include fill(
-                $bg: $chip-solid-hover-bg,
-                $border: $chip-solid-hover-border
+                $chip-solid-hover-text,
+                $chip-solid-hover-bg,
+                $chip-solid-hover-border
             );
         }
 
         &:focus,
-        &.k-state-focus,
-        &.k-focus {
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-solid-focus-text,
+                $chip-solid-focus-bg,
+                $chip-solid-focus-border
+            );
             @include box-shadow( $chip-solid-focus-shadow );
-            @include fill( $bg: $chip-solid-focus-bg );
         }
 
-        &.k-state-selected,
-        &.k-selected {
+        &.k-selected,
+        &.k-state-selected {
             @include fill(
-                $bg: $chip-solid-selected-bg,
-                $border: $chip-solid-selected-border
+                $chip-solid-selected-text,
+                $chip-solid-selected-bg,
+                $chip-solid-selected-border
             );
         }
+    }
+    .k-chip-solid.k-chip-success {
+        @include fill(
+            $chip-solid-success-text,
+            $chip-solid-success-bg,
+            $chip-solid-success-border
+        );
 
-        &.k-chip-success {
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
             @include fill(
-                $chip-solid-success-text,
-                $chip-solid-success-bg,
-                $chip-solid-success-border
+                $chip-solid-success-hover-text,
+                $chip-solid-success-hover-bg,
+                $chip-solid-success-hover-border
             );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-solid-success-hover-text,
-                    $chip-solid-success-hover-bg,
-                    $chip-solid-success-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-solid-success-focus-text,
-                    $chip-solid-success-focus-bg,
-                    $chip-solid-success-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-solid-success-selected-text,
-                    $chip-solid-success-selected-bg,
-                    $chip-solid-success-selected-border
-                );
-            }
         }
 
-
-        &.k-chip-warning {
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
             @include fill(
-                $chip-solid-warning-text,
-                $chip-solid-warning-bg,
-                $chip-solid-warning-border
+                $chip-solid-success-focus-text,
+                $chip-solid-success-focus-bg,
+                $chip-solid-success-focus-border
             );
+        }
 
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-solid-warning-hover-text,
-                    $chip-solid-warning-hover-bg,
-                    $chip-solid-warning-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-solid-warning-focus-text,
-                    $chip-solid-warning-focus-bg,
-                    $chip-solid-warning-focus-border
-                );
-            }
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-solid-success-selected-text,
+                $chip-solid-success-selected-bg,
+                $chip-solid-success-selected-border
+            );
+        }
+    }
+    .k-chip-solid.k-chip-warning {
+        @include fill(
+            $chip-solid-warning-text,
+            $chip-solid-warning-bg,
+            $chip-solid-warning-border
+        );
 
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-solid-warning-selected-text,
-                    $chip-solid-warning-selected-bg,
-                    $chip-solid-warning-selected-border
-                );
-            }
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
+            @include fill(
+                $chip-solid-warning-hover-text,
+                $chip-solid-warning-hover-bg,
+                $chip-solid-warning-hover-border
+            );
         }
 
-        &.k-chip-error {
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
             @include fill(
-                $chip-solid-error-text,
-                $chip-solid-error-bg,
-                $chip-solid-error-border
+                $chip-solid-warning-focus-text,
+                $chip-solid-warning-focus-bg,
+                $chip-solid-warning-focus-border
             );
+        }
 
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-solid-error-hover-text,
-                    $chip-solid-error-hover-bg,
-                    $chip-solid-error-hover-border
-                );
-            }
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-solid-warning-selected-text,
+                $chip-solid-warning-selected-bg,
+                $chip-solid-warning-selected-border
+            );
+        }
+    }
+    .k-chip-solid.k-chip-error {
+        @include fill(
+            $chip-solid-error-text,
+            $chip-solid-error-bg,
+            $chip-solid-error-border
+        );
 
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-solid-error-focus-text,
-                    $chip-solid-error-focus-bg,
-                    $chip-solid-error-focus-border
-                );
-            }
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
+            @include fill(
+                $chip-solid-error-hover-text,
+                $chip-solid-error-hover-bg,
+                $chip-solid-error-hover-border
+            );
+        }
 
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-solid-error-selected-text,
-                    $chip-solid-error-selected-bg,
-                    $chip-solid-error-selected-border
-                );
-            }
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-solid-error-focus-text,
+                $chip-solid-error-focus-bg,
+                $chip-solid-error-focus-border
+            );
         }
 
-        &.k-chip-info {
+        &.k-selected,
+        &.k-state-selected {
             @include fill(
-                $chip-solid-info-text,
-                $chip-solid-info-bg,
-                $chip-solid-info-border
+                $chip-solid-error-selected-text,
+                $chip-solid-error-selected-bg,
+                $chip-solid-error-selected-border
             );
+        }
+    }
+    .k-chip-solid.k-chip-info {
+        @include fill(
+            $chip-solid-info-text,
+            $chip-solid-info-bg,
+            $chip-solid-info-border
+        );
 
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-solid-info-hover-text,
-                    $chip-solid-info-hover-bg,
-                    $chip-solid-info-hover-border
-                );
-            }
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
+            @include fill(
+                $chip-solid-info-hover-text,
+                $chip-solid-info-hover-bg,
+                $chip-solid-info-hover-border
+            );
+        }
 
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-solid-info-focus-text,
-                    $chip-solid-info-focus-bg,
-                    $chip-solid-info-focus-border
-                );
-            }
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-solid-info-focus-text,
+                $chip-solid-info-focus-bg,
+                $chip-solid-info-focus-border
+            );
+        }
 
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-solid-info-selected-text,
-                    $chip-solid-info-selected-bg,
-                    $chip-solid-info-selected-border
-                );
-            }
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-solid-info-selected-text,
+                $chip-solid-info-selected-bg,
+                $chip-solid-info-selected-border
+            );
         }
     }
 
+
+    // Outline chip
     .k-chip-outline {
         @include fill(
             $chip-outline-text,
@@ -9376,8 +9394,8 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
         );
 
         &:hover,
-        &.k-state-hover,
-        &.k-hover {
+        &.k-hover,
+        &.k-state-hover {
             @include fill(
                 $chip-outline-hover-text,
                 $chip-outline-hover-bg,
@@ -9386,177 +9404,171 @@ $chip-error-focus-shadow: 0 0 0 2px rgba( $error, .16 ) !default;
         }
 
         &:focus,
-        &.k-state-focus,
-        &.k-focus {
-            @include box-shadow( $chip-outline-focus-shadow );
+        &.k-focus,
+        &.k-state-focus {
             @include fill(
                 $chip-outline-focus-text,
                 $chip-outline-focus-bg,
                 $chip-outline-focus-border
             );
+            @include box-shadow( $chip-outline-focus-shadow );
         }
 
-        &.k-state-selected,
-        &.k-selected {
+        &.k-selected,
+        &.k-state-selected {
             @include fill(
                 $color: $chip-outline-selected-text,
                 $bg: $chip-outline-selected-bg
             );
         }
+    }
+    .k-chip-outline.k-chip-success {
+        @include fill(
+            $chip-outline-success-text,
+            $chip-outline-success-bg,
+            $chip-outline-success-border
+        );
 
-        &.k-chip-success {
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
             @include fill(
-                $chip-outline-success-text,
-                $chip-outline-success-bg,
-                $chip-outline-success-border
+                $chip-outline-success-hover-text,
+                $chip-outline-success-hover-bg,
+                $chip-outline-success-hover-border
             );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-outline-success-hover-text,
-                    $chip-outline-success-hover-bg,
-                    $chip-outline-success-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-outline-success-focus-text,
-                    $chip-outline-success-focus-bg,
-                    $chip-outline-success-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-outline-success-selected-text,
-                    $chip-outline-success-selected-bg,
-                    $chip-outline-success-selected-border
-                );
-            }
         }
 
-        &.k-chip-warning {
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
             @include fill(
-                $chip-outline-warning-text,
-                $chip-outline-warning-bg,
-                $chip-outline-warning-border
+                $chip-outline-success-focus-text,
+                $chip-outline-success-focus-bg,
+                $chip-outline-success-focus-border
             );
-
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-outline-warning-hover-text,
-                    $chip-outline-warning-hover-bg,
-                    $chip-outline-warning-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-outline-warning-focus-text,
-                    $chip-outline-warning-focus-bg,
-                    $chip-outline-warning-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-outline-warning-selected-text,
-                    $chip-outline-warning-selected-bg,
-                    $chip-outline-warning-selected-border
-                );
-            }
         }
 
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-outline-success-selected-text,
+                $chip-outline-success-selected-bg,
+                $chip-outline-success-selected-border
+            );
+        }
+    }
+    .k-chip-outline.k-chip-warning {
+        @include fill(
+            $chip-outline-warning-text,
+            $chip-outline-warning-bg,
+            $chip-outline-warning-border
+        );
 
-        &.k-chip-error {
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
             @include fill(
-                $chip-outline-error-text,
-                $chip-outline-error-bg,
-                $chip-outline-error-border
+                $chip-outline-warning-hover-text,
+                $chip-outline-warning-hover-bg,
+                $chip-outline-warning-hover-border
             );
+        }
 
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-outline-error-hover-text,
-                    $chip-outline-error-hover-bg,
-                    $chip-outline-error-hover-border
-                );
-            }
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-outline-warning-focus-text,
+                $chip-outline-warning-focus-bg,
+                $chip-outline-warning-focus-border
+            );
+        }
 
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-outline-error-focus-text,
-                    $chip-outline-error-focus-bg,
-                    $chip-outline-error-focus-border
-                );
-            }
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-outline-warning-selected-text,
+                $chip-outline-warning-selected-bg,
+                $chip-outline-warning-selected-border
+            );
+        }
+    }
+    .k-chip-outline.k-chip-error {
+        @include fill(
+            $chip-outline-error-text,
+            $chip-outline-error-bg,
+            $chip-outline-error-border
+        );
 
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-outline-error-selected-text,
-                    $chip-outline-error-selected-bg,
-                    $chip-outline-error-selected-border
-                );
-            }
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
+            @include fill(
+                $chip-outline-error-hover-text,
+                $chip-outline-error-hover-bg,
+                $chip-outline-error-hover-border
+            );
         }
 
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-outline-error-focus-text,
+                $chip-outline-error-focus-bg,
+                $chip-outline-error-focus-border
+            );
+        }
 
-        &.k-chip-info {
+        &.k-selected,
+        &.k-state-selected {
             @include fill(
-                $chip-outline-info-text,
-                $chip-outline-info-bg,
-                $chip-outline-info-border
+                $chip-outline-error-selected-text,
+                $chip-outline-error-selected-bg,
+                $chip-outline-error-selected-border
             );
+        }
+    }
+    .k-chip-outline.k-chip-info {
+        @include fill(
+            $chip-outline-info-text,
+            $chip-outline-info-bg,
+            $chip-outline-info-border
+        );
 
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-outline-info-hover-text,
-                    $chip-outline-info-hover-bg,
-                    $chip-outline-info-hover-border
-                );
-            }
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
+            @include fill(
+                $chip-outline-info-hover-text,
+                $chip-outline-info-hover-bg,
+                $chip-outline-info-hover-border
+            );
+        }
 
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-outline-info-focus-text,
-                    $chip-outline-info-focus-bg,
-                    $chip-outline-info-focus-border
-                );
-            }
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-outline-info-focus-text,
+                $chip-outline-info-focus-bg,
+                $chip-outline-info-focus-border
+            );
+        }
 
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-outline-info-selected-text,
-                    $chip-outline-info-selected-bg,
-                    $chip-outline-info-selected-border
-                );
-            }
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-outline-info-selected-text,
+                $chip-outline-info-selected-bg,
+                $chip-outline-info-selected-border
+            );
         }
     }
 
 
-    // Chip colors
+    // Focus state
     .k-chip-info {
         &:focus,
         &.k-state-focus,
@@ -9620,11 +9632,12 @@ $color-preview-no-color-bg: $white !default;
 $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-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-no-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/color-preview/_layout.scss
-@include exports("color-preview/layout") {
+@include exports( "color-preview/layout" ) {
 
     // Color Preview
     .k-color-preview {
@@ -9665,7 +9678,7 @@ $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='h
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/color-preview/_theme.scss
-@include exports("color-preview/theme") {
+@include exports( "color-preview/theme" ) {
 
     // Color Preview
     .k-color-preview {
@@ -9692,7 +9705,8 @@ $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='h
     .k-no-color::after {
         background-color: $color-preview-no-color-bg;
         background-image: $color-preview-no-color-image;
-        background-size: 100% 100%;
+        background-size: contain;
+        background-position: 0 0;
     }
 
 }
@@ -15913,25 +15927,343 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
 }
 
+// #endregion
 
+// #endregion
+// #region @import "timeselector/_index.scss"; -> packages/default/scss/timeselector/_index.scss
+// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
-@include exports( "daterangepicker/theme" ) {
+// Dependencies
+// #region @import "../list/_index.scss"; -> packages/default/scss/list/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../action-buttons/_index.scss"; -> packages/default/scss/action-buttons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../button/_index.scss"; -> packages/default/scss/button/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-    // jQuery DateRangePicker
-    .k-daterangepicker {
-        // Invalid
-        &.k-state-invalid {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
 
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
+// Component
+// #region @import "_variables.scss"; -> packages/default/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: $list-item-padding-x !default;
+$time-list-item-padding-y: $list-item-padding-y !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/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: $button-padding-y $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
+// #region @import "_theme.scss"; -> packages/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
@@ -17196,51 +17528,41 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/colorpicker/_layout.scss
-@include exports("colorpicker/layout") {
+@include exports( "colorpicker/layout" ) {
 
-    // Colorpicker
+    // Color picker
     .k-colorpicker {
+        @include border-radius( $input-border-radius );
         width: auto;
-        border-width: 0;
+        border-width: 1px;
+        border-style: solid;
         box-sizing: border-box;
         outline: 0;
         font-family: $colorpicker-font-family;
         font-size: $colorpicker-font-size;
         line-height: $colorpicker-line-height;
-        background: none;
-        text-align: left;
+        text-align: start;
+        white-space: nowrap;
         display: inline-flex;
+        flex-flow: row nowrap;
         vertical-align: middle;
         position: relative;
-        overflow: visible;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
         .k-selected-color {
-            padding: $button-padding-y;
-            width: $button-inner-calc-size;
-            height: $button-inner-calc-size;
-            border-width: 0;
+            margin: $button-padding-y;
+            width: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
+            height: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
+            border-width: 1px;
             border-style: solid;
-            border-color: inherit;
             box-sizing: border-box;
+            background-clip: content-box;
             line-height: 0;
             position: relative;
             overflow: hidden;
-
-            .k-i-line {
-                border-top: 1px solid $error;
-                width: 200%;
-                height: 200%;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-33%, -33%) rotateZ(45deg);
-                transform-origin: 0 0;
-            }
-            .k-i-line::before {
-                display: none;
-            }
         }
 
         .k-tool-icon {
@@ -17272,22 +17594,6 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
             }
         }
 
-        .k-picker-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            display: flex;
-            flex-direction: row;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            overflow: hidden;
-            cursor: default;
-            outline: 0;
-        }
-
 
         // Input
         .k-input {}
@@ -17297,19 +17603,17 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
         .k-select {
             padding: $picker-select-padding-y $picker-select-padding-x;
             width: if( $use-picker-select-width, $button-inner-calc-size, null );
+            height: $button-inner-calc-size;
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
-            border-color: inherit;
+            border-color: transparent;
             box-sizing: border-box;
             display: flex;
             align-items: center;
             justify-content: center;
             flex: 0 0 auto;
-            text-align: center;
             cursor: pointer;
-
-            .k-icon {}
         }
 
     }
@@ -17328,37 +17632,22 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
 // #region @import "_theme.scss"; -> packages/default/scss/colorpicker/_theme.scss
 @include exports( "colorpicker/theme" ) {
 
+    // Color picker
     .k-colorpicker {
+        @include fill(
+            $colorpicker-text,
+            $colorpicker-bg,
+            $colorpicker-border,
+            $colorpicker-gradient
+        );
 
-        // Normal state
-        .k-picker-wrap {
-            @include fill(
-                $colorpicker-text,
-                $colorpicker-bg,
-                $colorpicker-border,
-                $colorpicker-gradient
-            );
-
-            // Invalid state
-            &.k-invalid,
-            &.k-invalid:hover,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
+        .k-selected-color {
+            border-color: $component-border;
         }
 
         // Hover state
-        > :hover,
-        > .k-state-hover {
+        &:hover,
+        &.k-state-hover {
             @include fill(
                 $colorpicker-hovered-text,
                 $colorpicker-hovered-bg,
@@ -17367,12 +17656,18 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
             );
         }
 
-        &.k-state-active {}
-
         // Focus state
-        .k-state-focused,
-        .k-state-focus,
-        .k-focus {
+        &:focus,
+        &.k-state-focus {
+            @include fill(
+                $colorpicker-focused-text,
+                $colorpicker-focused-bg,
+                $colorpicker-focused-border,
+                $colorpicker-focused-gradient
+            );
+            @include box-shadow($colorpicker-focused-shadow);
+        }
+        &:focus-within {
             @include fill(
                 $colorpicker-focused-text,
                 $colorpicker-focused-bg,
@@ -17382,20 +17677,20 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
             @include box-shadow($colorpicker-focused-shadow);
         }
 
+
         // Invalid state
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-picker-wrap {
-                border-color: $invalid-border;
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
 
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
 
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
             }
         }
 
@@ -17409,127 +17704,48 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
 // #region @import "combobox/_index.scss"; -> packages/default/scss/combobox/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "datetime/_index.scss"; -> packages/default/scss/datetime/_index.scss
+// #region @import "dateinput/_index.scss"; -> packages/default/scss/dateinput/_index.scss
 // #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 
 
 // Dependencies
-// #region @import "../common/_index.scss"; -> packages/default/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../action-buttons/_index.scss"; -> packages/default/scss/action-buttons/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 // #region @import "../input/_index.scss"; -> packages/default/scss/input/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../floating-label/_index.scss"; -> packages/default/scss/floating-label/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../calendar/_index.scss"; -> packages/default/scss/calendar/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../popup/_index.scss"; -> packages/default/scss/popup/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 
 
 // Component
-// #region @import "_variables.scss"; -> packages/default/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: $input-bg !default;
-$datetime-text: $input-text !default;
-$datetime-border: $input-border !default;
-
-$datetime-hovered-bg: $input-hovered-bg !default;
-$datetime-hovered-text: $input-hovered-text !default;
-$datetime-hovered-border: $input-hovered-border !default;
-
-$datetime-focused-bg: $input-focused-bg !default;
-$datetime-focused-text: $input-focused-text !default;
-$datetime-focused-border: $input-focused-border !default;
-$datetime-focused-shadow: $input-focused-shadow !default;
-
-$datetime-select-bg: $button-bg !default;
-$datetime-select-text: $button-text !default;
-$datetime-select-border: $button-border !default;
-$datetime-select-gradient: $button-gradient !default;
-
-$datetime-select-hovered-bg: $button-hovered-bg !default;
-$datetime-select-hovered-text: $button-hovered-text !default;
-$datetime-select-hovered-border: $button-hovered-border !default;
-$datetime-select-hovered-gradient: $button-hovered-gradient !default;
-
-$datetime-select-pressed-bg: $button-active-bg !default;
-$datetime-select-pressed-text: $button-active-text !default;
-$datetime-select-pressed-border: $button-active-border !default;
-$datetime-select-pressed-gradient: $button-active-gradient !default;
+// #region @import "_variables.scss"; -> packages/default/scss/dateinput/_variables.scss
+// Date input
 
 // #endregion
-// #region @import "_layout.scss"; -> packages/default/scss/datetime/_layout.scss
-@include exports("datetime/layout") {
+// #region @import "_layout.scss"; -> packages/default/scss/dateinput/_layout.scss
+@include exports( "dateinput/layout" ) {
 
-    // Dateinput
+    // Date input
     .k-dateinput {
+        @include border-radius( $input-border-radius );
         width: $input-default-width;
-        border-width: 0;
+        border-width: $input-border-width;
+        border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        background: none;
         font-family: $input-font-family;
         font-size: $input-font-size;
         line-height: $input-line-height;
-        text-align: left;
+        text-align: start;
         white-space: nowrap;
         display: inline-flex;
+        flex-flow: row nowrap;
         vertical-align: middle;
         position: relative;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        .k-dateinput-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: default;
-            outline: 0;
-            display: flex;
-            flex-flow: row nowrap;
-            overflow: hidden;
-        }
-
 
         // Input
         .k-input {}
@@ -17574,63 +17790,332 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
         }
 
 
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-        }
-
-
-        // Nested dateinput
+        // Nested date input
         .k-picker-wrap & {
             margin: 0 !important; // sass-lint:disable-line no-important
+            padding: 0 !important; // sass-lint:disable-line no-important
             width: 100%;
+            border-radius: 0 !important; // sass-lint:disable-line no-important
+            border-width: 0; // sass-lint:disable-line no-important
+            box-shadow: none !important; // sass-lint:disable-line no-important
             flex: 1 1 auto;
+        }
+    }
+
+}
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/default/scss/dateinput/_theme.scss
+@include exports( "dateinput/theme" ) {
+
+    .k-dateinput {
+        @include fill(
+            $input-text,
+            $input-bg,
+            $input-border
+        );
+
+        // Hover state
+        &:hover,
+        &.k-state-hover {
+            @include fill(
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
+            );
+        }
+
+        // Focus state
+        &:focus,
+        &.k-state-focus {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+        &:focus-within {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+
+
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
 
-            .k-dateinput-wrap {
-                border-radius: 0 !important; // sass-lint:disable-line no-important
-                border-width: 0; // sass-lint:disable-line no-important
-                box-shadow: none !important; // sass-lint:disable-line no-important
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
             }
         }
+
+
+        // Spinner
+        .k-select {
+            @include fill(
+                $picker-select-text,
+                $picker-select-bg,
+                $picker-select-border,
+                $picker-select-gradient
+            );
+        }
+        .k-link:hover,
+        .k-link.k-state-hover {
+            @include fill(
+                $picker-select-hovered-text,
+                $picker-select-hovered-bg,
+                $picker-select-hovered-border,
+                $picker-select-hovered-gradient
+            );
+        }
+        .k-link:active,
+        .k-link.k-state-active {
+            @include fill(
+                $picker-select-pressed-text,
+                $picker-select-pressed-bg,
+                $picker-select-pressed-border,
+                $picker-select-pressed-gradient
+            );
+        }
     }
 
+}
 
-    // Datepicker / timepicker
-    .k-datepicker,
-    .k-timepicker {
+// #endregion
+
+// #endregion
+// #region @import "datepicker/_index.scss"; -> packages/default/scss/datepicker/_index.scss
+// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../input/_index.scss"; -> packages/default/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../popup/_index.scss"; -> packages/default/scss/popup/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../calendar/_index.scss"; -> packages/default/scss/calendar/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/datepicker/_variables.scss
+// Datepicker
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/datepicker/_layout.scss
+@include exports( "datepicker/layout" ) {
+
+    // Date picker
+    .k-datepicker {
+        @include border-radius( $input-border-radius );
         width: $input-default-width;
-        border-width: 0;
+        border-width: $input-border-width;
+        border-style: solid;
         box-sizing: border-box;
         outline: 0;
         font-family: $input-font-family;
         font-size: $input-font-size;
         line-height: $input-line-height;
+        text-align: start;
         white-space: nowrap;
-        background: none;
         display: inline-flex;
+        flex-flow: row nowrap;
         vertical-align: middle;
         position: relative;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        // Wrapper
-        .k-picker-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: $input-border-width;
+
+        // Input
+        .k-input {}
+
+
+        // Select
+        .k-select {
+            padding: $picker-select-padding-y $picker-select-padding-x;
+            width: if( $use-picker-select-width, $spinner-width, null );
+            border-width: 0;
+            border-inline-start-width: $picker-select-border-width;
             border-style: solid;
             box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
             outline: 0;
-            overflow: hidden;
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            justify-content: center;
+            flex: 0 0 auto;
+            cursor: pointer;
+        }
+    }
+
+}
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/default/scss/datepicker/_theme.scss
+@include exports( "datepicker/theme" ) {
+
+    // Date picker
+    .k-datepicker {
+        @include fill(
+            $input-text,
+            $input-bg,
+            $input-border
+        );
+
+        // Hover state
+        &:hover,
+        &.k-state-hover {
+            @include fill(
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
+            );
         }
 
+        // Focus state
+        &:focus,
+        &.k-state-focus {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+        &:focus-within {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+
+
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+
+
+        // Spinner
+        .k-select {
+            @include fill(
+                $picker-select-text,
+                $picker-select-bg,
+                $picker-select-border,
+                $picker-select-gradient
+            );
+        }
+        .k-select:hover,
+        .k-select.k-state-hover {
+            @include fill(
+                $picker-select-hovered-text,
+                $picker-select-hovered-bg,
+                $picker-select-hovered-border,
+                $picker-select-hovered-gradient
+            );
+        }
+        .k-select:active,
+        .k-select.k-state-active {
+            @include fill(
+                $picker-select-pressed-text,
+                $picker-select-pressed-bg,
+                $picker-select-pressed-border,
+                $picker-select-pressed-gradient
+            );
+        }
+    }
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "timepicker/_index.scss"; -> packages/default/scss/timepicker/_index.scss
+// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../input/_index.scss"; -> packages/default/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../button/_index.scss"; -> packages/default/scss/button/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../popup/_index.scss"; -> packages/default/scss/popup/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../list/_index.scss"; -> packages/default/scss/list/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../timeselector/_index.scss"; -> packages/default/scss/timeselector/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/timepicker/_variables.scss
+// Time picker
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/timepicker/_layout.scss
+@include exports( "timepicker/layout" ) {
+
+    // Time picker
+    .k-timepicker {
+        @include border-radius( $input-border-radius );
+        width: $input-default-width;
+        border-width: $input-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $input-font-family;
+        font-size: $input-font-size;
+        line-height: $input-line-height;
+        text-align: start;
+        white-space: nowrap;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        vertical-align: middle;
+        position: relative;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
 
         // Input
         .k-input {}
@@ -17639,64 +18124,177 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
         // Select
         .k-select {
             padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $picker-select-calc-size, null );
+            width: if( $use-picker-select-width, $spinner-width, null );
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
             box-sizing: border-box;
             outline: 0;
             display: flex;
+            flex-flow: row nowrap;
             align-items: center;
             justify-content: center;
             flex: 0 0 auto;
-            text-align: center;
             cursor: pointer;
         }
+    }
 
+}
 
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
+// #endregion
+// #region @import "_theme.scss"; -> packages/default/scss/timepicker/_theme.scss
+@include exports( "timepicker/theme" ) {
+
+    // Time picker
+    .k-timepicker {
+        @include fill(
+            $input-text,
+            $input-bg,
+            $input-border
+        );
+
+        // Hover state
+        &:hover,
+        &.k-state-hover {
+            @include fill(
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
+            );
+        }
+
+        // Focus state
+        &:focus,
+        &.k-state-focus {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+        &:focus-within {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+
+
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+
+
+        // Spinner
+        .k-select {
+            @include fill(
+                $picker-select-text,
+                $picker-select-bg,
+                $picker-select-border,
+                $picker-select-gradient
+            );
+        }
+        .k-select:hover,
+        .k-select.k-state-hover {
+            @include fill(
+                $picker-select-hovered-text,
+                $picker-select-hovered-bg,
+                $picker-select-hovered-border,
+                $picker-select-hovered-gradient
+            );
+        }
+        .k-select:active,
+        .k-select.k-state-active {
+            @include fill(
+                $picker-select-pressed-text,
+                $picker-select-pressed-bg,
+                $picker-select-pressed-border,
+                $picker-select-pressed-gradient
+            );
         }
     }
 
+}
+
+// #endregion
 
-    // Datetimepicker
+// #endregion
+// #region @import "datetimepicker/_index.scss"; -> packages/default/scss/datetimepicker/_index.scss
+// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../input/_index.scss"; -> packages/default/scss/input/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../button/_index.scss"; -> packages/default/scss/button/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../popup/_index.scss"; -> packages/default/scss/popup/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../list/_index.scss"; -> packages/default/scss/list/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../calendar/_index.scss"; -> packages/default/scss/calendar/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../timeselector/_index.scss"; -> packages/default/scss/timeselector/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../action-buttons/_index.scss"; -> packages/default/scss/action-buttons/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/datetimepicker/_variables.scss
+// DateTime
+$datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/datetimepicker/_layout.scss
+@include exports( "datetimepicker/layout" ) {
+
+    // Datetime picker
     .k-datetimepicker {
+        @include border-radius( $input-border-radius );
         width: $input-default-width;
-        border-width: 0;
+        border-width: $input-border-width;
+        border-style: solid;
         box-sizing: border-box;
         outline: 0;
         font-family: $input-font-family;
         font-size: $input-font-size;
         line-height: $input-line-height;
-        text-align: left;
+        text-align: start;
         white-space: nowrap;
-        background: none;
         display: inline-flex;
+        flex-flow: row nowrap;
         vertical-align: middle;
         position: relative;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        // Wrappers
-        .k-picker-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
-            outline: 0;
-            overflow: hidden;
-        }
-
 
         // Input
         .k-input {}
@@ -17728,50 +18326,55 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
             justify-content: center;
             box-sizing: border-box;
         }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-        }
     }
 
+
+    // Datetime popup
+    .k-datetime-popup,
     .k-datetime-container {
 
+        // Wrap
         .k-datetime-wrap {
             width: $datetime-width;
             overflow: hidden;
         }
+        .k-date-tab {
+            .k-datetime-selector {
+                transform: translateX(0);
+            }
+        }
+        .k-time-tab {
+            .k-datetime-selector {
+                transform: translateX(-100%);
+            }
+        }
 
+        // Datetime button group
         .k-datetime-buttongroup {
-            padding: $button-padding-x;
+            padding: $actions-padding-y $actions-padding-x;
         }
 
+        // Datetime selector
         .k-datetime-selector {
             display: flex;
             transition: transform .2s;
         }
 
+        // Inner wraps
         .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;
+        // Calendar
+        .k-datetime-calendar-wrap .k-calendar {
+            border-width: 0;
         }
 
-        .k-time-tab {
-
-            .k-datetime-selector {
-                transform: translateX(-100%);
-            }
+        // Time
+        .k-datetime-time-wrap .k-timeselector {
+            border-width: 0;
         }
 
         .k-rtl &,
@@ -17787,258 +18390,83 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
         }
     }
 
-    // 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: $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
-// #region @import "_theme.scss"; -> packages/default/scss/datetime/_theme.scss
-@include exports("datetime/theme") {
-
-    // Common
-    .k-datepicker,
-    .k-timepicker,
-    .k-datetimepicker,
-    .k-dateinput {
-
-        .k-select {
-            @include fill(
-                $datetime-select-text,
-                $datetime-select-bg,
-                $datetime-select-border,
-                $datetime-select-gradient
-            );
-        }
-
-        .k-i-warning {
-            color: $error;
-        }
-    }
+// #region @import "_theme.scss"; -> packages/default/scss/datetimepicker/_theme.scss
+@include exports( "datetimepicker/theme" ) {
 
-
-    .k-datepicker .k-picker-wrap,
-    .k-timepicker .k-picker-wrap,
-    .k-datetimepicker .k-picker-wrap,
-    .k-dateinput .k-dateinput-wrap {
+    // Datetime picker
+    .k-datetimepicker {
         @include fill(
-            $datetime-text,
-            $datetime-bg,
-            $datetime-border
+            $input-text,
+            $input-bg,
+            $input-border
         );
 
-        // Hovered state
+        // Hover state
         &:hover,
         &.k-state-hover {
             @include fill(
-                $datetime-hovered-text,
-                $datetime-hovered-bg,
-                $datetime-hovered-border
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
             );
         }
 
-        // Selected state
-        &.k-state-focused,
-        &.k-state-active {
+        // Focus state
+        &:focus,
+        &.k-state-focus {
             @include fill(
-                $datetime-focused-text,
-                $datetime-focused-bg,
-                $datetime-focused-border
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
-            @include box-shadow($datetime-focused-shadow);
+            @include box-shadow( $input-focused-shadow );
         }
-    }
-
-    .k-datepicker,
-    .k-timepicker {
-
-        .k-select:hover,
-        .k-select.k-state-hover {
+        &:focus-within {
             @include fill(
-                $datetime-select-hovered-text,
-                $datetime-select-hovered-bg,
-                $datetime-select-hovered-border,
-                $datetime-select-hovered-gradient
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
+            @include box-shadow( $input-focused-shadow );
         }
-    }
 
 
-    .k-dateinput,
-    .k-datetimepicker {
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
 
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+
+
+        // Select
+        .k-select {
+            @include fill(
+                $picker-select-text,
+                $picker-select-bg,
+                $picker-select-border,
+                $picker-select-gradient
+            );
+        }
         .k-link:hover,
         .k-link.k-state-hover {
             @include fill(
-                $datetime-select-hovered-text,
-                $datetime-select-hovered-bg,
-                $datetime-select-hovered-border,
-                $datetime-select-hovered-gradient
+                $picker-select-hovered-text,
+                $picker-select-hovered-bg,
+                $picker-select-hovered-border,
+                $picker-select-hovered-gradient
             );
         }
 
@@ -18046,239 +18474,14 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
         .k-link.k-state-active,
         .k-link.k-state-selected {
             @include fill(
-                $datetime-select-pressed-text,
-                $datetime-select-pressed-bg,
-                $datetime-select-pressed-border,
-                $datetime-select-pressed-gradient
+                $picker-select-pressed-text,
+                $picker-select-pressed-bg,
+                $picker-select-pressed-border,
+                $picker-select-pressed-gradient
             );
         }
     }
 
-
-    // Timepicker
-    .k-timepicker {}
-
-
-    // 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;
-            }
-        }
-    }
-
-    .k-datepicker,
-    .k-datetimepicker,
-    .k-timepicker {
-        .k-picker-wrap {
-            // Invalid
-            &.k-invalid,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-picker-wrap {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
-    .k-dateinput {
-        .k-dateinput-wrap {
-            // Invalid
-            &.k-invalid,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
-
-    // Universal rendering
-    .k-datepicker {
-        &.k-state-hover {
-            .k-picker-wrap {
-                @include fill(
-                    $datetime-hovered-text,
-                    $datetime-hovered-bg,
-                    $datetime-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-picker-wrap {
-                @include fill(
-                    $datetime-focused-text,
-                    $datetime-focused-bg,
-                    $datetime-focused-border
-                );
-                @include box-shadow($datetime-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-picker-wrap {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-picker-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-
-    .k-dateinput,
-    .k-daterangepicker {
-        &.k-state-hover {
-            .k-dateinput-wrap {
-                @include fill(
-                    $datetime-hovered-text,
-                    $datetime-hovered-bg,
-                    $datetime-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-dateinput-wrap {
-                @include fill(
-                    $datetime-focused-text,
-                    $datetime-focused-bg,
-                    $datetime-focused-border
-                );
-                @include box-shadow($datetime-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-dateinput-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-
 }
 
 // #endregion
@@ -27084,6 +27287,10 @@ $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/default/scss/panelbar/_layout.scss
@@ -27277,6 +27484,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(
@@ -27313,7 +27529,6 @@ $panelbar-item-selected-hovered-focused-gradient: null !default;
                     $panelbar-header-focused-border,
                     $panelbar-header-focused-gradient
                 );
-
                 box-shadow: $panelbar-header-focused-shadow;
             }
 
@@ -27410,7 +27625,6 @@ $panelbar-item-selected-hovered-focused-gradient: null !default;
                     $panelbar-item-focused-border,
                     $panelbar-item-focused-gradient
                 );
-
                 box-shadow: $panelbar-item-focused-shadow;
             }
 
@@ -28633,7 +28847,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 // #region @import "../autocomplete/_index.scss"; -> packages/default/scss/autocomplete/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../datetime/_index.scss"; -> packages/default/scss/datetime/_index.scss
+// #region @import "../datetimepicker/_index.scss"; -> packages/default/scss/datetimepicker/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../dropdownlist/_index.scss"; -> packages/default/scss/dropdownlist/_index.scss
@@ -29177,10 +29391,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 );
     }
@@ -30847,7 +31057,7 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 // #region @import "../combobox/_index.scss"; -> packages/default/scss/combobox/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../datetime/_index.scss"; -> packages/default/scss/datetime/_index.scss
+// #region @import "../datetimepicker/_index.scss"; -> packages/default/scss/datetimepicker/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../dropdownlist/_index.scss"; -> packages/default/scss/dropdownlist/_index.scss
@@ -32233,9 +32443,6 @@ $pivotgrid-configurator-content-padding-y: 2px !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;
 
@@ -32559,14 +32766,6 @@ $pivotgrid-remove-text: null !default;
         .k-filter-fields {
             margin-top: $pivotgrid-configurator-fields-margin-y;
             flex-wrap: wrap;
-
-            > * {
-                margin-bottom: $pivotgrid-configurator-fields-margin-y;
-            }
-
-            > *:last-child {
-                margin-bottom: 0;
-            }
         }
 
         // Values
@@ -32595,20 +32794,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 {
@@ -33479,7 +33670,7 @@ $treelist-footer-row-border-width: 1px !default;
 // #region @import "../checkbox/_index.scss"; -> packages/default/scss/checkbox/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../datetime/_index.scss"; -> packages/default/scss/datetime/_index.scss
+// #region @import "../datetimepicker/_index.scss"; -> packages/default/scss/datetimepicker/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../dropdownlist/_index.scss"; -> packages/default/scss/dropdownlist/_index.scss
@@ -33569,7 +33760,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;
@@ -33578,9 +33771,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;
         }
@@ -33610,7 +33806,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;
             }
@@ -33633,9 +33831,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;
         }
     }
@@ -35833,7 +36033,7 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
 // #region @import "../validator/_index.scss"; -> packages/default/scss/validator/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../datetime/_index.scss"; -> packages/default/scss/datetime/_index.scss
+// #region @import "../datetimepicker/_index.scss"; -> packages/default/scss/datetimepicker/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../numerictextbox/_index.scss"; -> packages/default/scss/numerictextbox/_index.scss
@@ -37067,7 +37267,7 @@ $gantt-offset-resize-handler-top: 50% !default;
 // #region @import "../button/_index.scss"; -> packages/default/scss/button/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../datetime/_index.scss"; -> packages/default/scss/datetime/_index.scss
+// #region @import "../datetimepicker/_index.scss"; -> packages/default/scss/datetimepicker/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../dropdownlist/_index.scss"; -> packages/default/scss/dropdownlist/_index.scss
@@ -40804,7 +41004,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;
@@ -40863,6 +41063,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) ) );
+        }
     }