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

package/dist/all.scss

@@ -5919,11 +5919,22 @@ $message-box-link-text-decoration: underline !default;
 // #region @import "../common/_index.scss"; -> packages/default/scss/common/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../checkbox/_index.scss"; -> packages/default/scss/checkbox/_index.scss
+// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
-// Component
-// #region @import "_variables.scss"; -> packages/default/scss/list/_variables.scss
+// Dependencies
+// #region @import "../typography/_variables.scss"; -> packages/default/scss/typography/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../list/_variables.scss"; -> packages/default/scss/list/_variables.scss
 // List
+$list-font-size: $font-size !default;
+$list-line-height: $line-height !default;
+$list-line-height-em: $line-height-em !default;
+
 $list-item-padding-x: $padding-x !default;
 $list-item-padding-y: $padding-y !default;
 
@@ -5942,9 +5953,486 @@ $list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
 $list-container-no-data-text: $subtle-text !default;
 
 // #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/checkbox/_variables.scss
+// Checkbox
+$checkbox-size: map-get( $spacing, 4 ) !default;
+$checkbox-radius: map-get( $spacing, thin ) !default;
+$checkbox-border-width: 1px !default;
+$checkbox-line-height: calc( #{$checkbox-size} + #{$checkbox-border-width} ) !default;
+
+$checkbox-bg: $white !default;
+$checkbox-text: transparent !default;
+$checkbox-border: $base-border !default;
+
+$checkbox-hovered-bg: null !default;
+$checkbox-hovered-text: null !default;
+$checkbox-hovered-border: null !default;
+
+$checkbox-checked-bg: $primary !default;
+$checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
+$checkbox-checked-border: $checkbox-checked-bg !default;
+
+$checkbox-indeterminate-bg: $checkbox-bg !default;
+$checkbox-indeterminate-text: $checkbox-checked-bg !default;
+$checkbox-indeterminate-border: $checkbox-border !default;
+
+$checkbox-focused-border: null !default;
+$checkbox-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
+$checkbox-focused-checked-border: null !default;
+$checkbox-focused-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
+
+$checkbox-disabled-bg: null !default;
+$checkbox-disabled-text: null !default;
+$checkbox-disabled-border: null !default;
+
+$checkbox-disabled-checked-bg: null !default;
+$checkbox-disabled-checked-text: null !default;
+$checkbox-disabled-checked-border: null !default;
+
+$checkbox-invalid-bg: null !default;
+$checkbox-invalid-text: $invalid-text !default;
+$checkbox-invalid-border: $invalid-border !default;
+
+
+// Checkbox indicator
+$checkbox-icon-type: glyph !default;
+
+$checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
+$checkbox-glyph-size: 12px !default;
+$checkbox-checked-glyph: "\e118" !default;
+$checkbox-indeterminate-glyph: "\e121" !default;
+
+$checkbox-checked-image: null !default;
+$checkbox-indeterminate-image: null !default;
+
+$checkbox-marker-checked-width: ( $checkbox-size / 2 ) !default;
+$checkbox-marker-checked-height: ( $checkbox-size / 2 ) !default;
+$checkbox-marker-indeterminate-width: ( $checkbox-size / 2 ) !default;
+$checkbox-marker-indeterminate-height: ( $checkbox-size / 2 ) !default;
+
+
+// Checkbox label
+$checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+
+
+// Checkbox list
+$checkbox-list-margin: 0px !default;
+$checkbox-list-padding: 0px !default;
+$checkbox-list-item-padding-x: 0px !default;
+$checkbox-list-item-padding-y: $list-item-padding-y !default;
+$checkbox-list-horizontal-item-margin-x: 32px !default;
+
+
+// Checkbox ripple
+$checkbox-ripple-size: $checkbox-size * 3 !default;
+$checkbox-ripple-margin: calc(-1 * (#{$checkbox-size} + 2 * #{$checkbox-border-width})) !default;
+$checkbox-ripple-opacity: .3 !default;
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/checkbox/_layout.scss
+@include exports( "checkbox/layout" ) {
+
+    // Checkbox
+    .k-checkbox {
+        @include border-radius( $checkbox-radius );
+        margin: 0;
+        padding: 0;
+        width: $checkbox-size;
+        height: $checkbox-size;
+        line-height: initial;
+        border-width: $checkbox-border-width;
+        border-style: solid;
+        outline: 0;
+        box-sizing: border-box;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: inline-block;
+        flex: none;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+        -webkit-appearance: none;
+    }
+
+    // Checkbox indicator
+    .k-checkbox::before {
+        @if $checkbox-icon-type == "glyph" {
+            content: $checkbox-checked-glyph;
+            width: $checkbox-glyph-size;
+            height: $checkbox-glyph-size;
+            font-size: $checkbox-glyph-size;
+            font-family: $checkbox-glyph-font-family;
+            line-height: 1;
+            transform: scale(0) translate(-50%, -50%);
+            overflow: hidden;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+
+        @if $checkbox-icon-type == "marker" {
+            content: "";
+            width: $checkbox-marker-checked-width;
+            height: $checkbox-marker-checked-height;
+            background-color: currentColor;
+            transform: scale(0) translate(-50%, -50%);
+            overflow: hidden;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+    }
+
+
+    // Checked state
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
+        @if $checkbox-icon-type == "image" {
+            background-image: $checkbox-checked-image;
+        }
+
+        @if $checkbox-icon-type == "glyph" {
+            &::before {
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+
+        @if $checkbox-icon-type == "marker" {
+            &::before {
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+    }
+
+
+    // Indeterminate state
+    .k-checkbox:indeterminate,
+    .k-checkbox.k-indeterminate,
+    .k-checkbox.k-state-indeterminate {
+        @if $checkbox-icon-type == "image" {
+            background-image: $checkbox-indeterminate-image;
+        }
+
+        @if $checkbox-icon-type == "glyph" {
+            &::before {
+                content: $checkbox-indeterminate-glyph;
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+
+        @if $checkbox-icon-type == "marker" {
+            &::before {
+                width: $checkbox-maker-indeterminate-width;
+                height: $checkbox-marker-indeterminate-height;
+                transform: scale(1) translate(-50%, -50%);
+            }
+        }
+    }
+
+
+    // Disabled state
+    .k-checkbox:disabled,
+    .k-checkbox.k-disabled,
+    .k-checkbox:disabled + .k-checkbox-label,
+    .k-checkbox.k-disabled + .k-checkbox-label {
+        @include disabled( $disabled-styling );
+    }
+
+    // Checkbox label
+    .k-checkbox-label {
+        margin: 0;
+        padding: 0;
+        line-height: $checkbox-line-height;
+        display: inline-flex;
+        align-items: flex-start;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+
+        .k-label {
+            cursor: pointer;
+        }
+
+        .k-ripple {
+            top: $checkbox-size / 2;
+            left: $checkbox-size / 2;
+            right: auto;
+            bottom: auto;
+            width: $checkbox-size * 5 / 2;
+            height: $checkbox-size * 5 / 2;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+
+            // Hide ripple temporarily
+            visibility: hidden !important; // sass-lint:disable-line no-important
+        }
+
+        .k-ripple-blob {
+            // sass-lint:disable-block no-important
+            // use !important until ripple can apply these styles from the script
+            top: 50% !important;
+            left: 50% !important;
+            width: 200% !important;
+            height: 200% !important;
+        }
+    }
+    .k-checkbox + .k-checkbox-label {
+        display: inline;
+    }
+    .k-checkbox + .k-checkbox-label,
+    .k-checkbox-label + .k-checkbox {
+        margin-left: $checkbox-label-margin-x;
+    }
+    .k-checkbox-label > .k-checkbox {
+        margin-right: $checkbox-label-margin-x;
+        flex-shrink: 0;
+    }
+    kendo-label.k-checkbox-label > .k-checkbox:last-child {
+        margin-right: 0;
+    }
+    kendo-label.k-checkbox-label > .k-label:first-child {
+        margin-right: $checkbox-label-margin-x;
+    }
+    kendo-label.k-checkbox-label > .k-label {
+        display: inline;
+    }
+
+
+    // Empty label
+    .k-checkbox-label:empty {
+        display: none !important; // sass-lint:disable-line no-important
+    }
+
+
+    // Label with no text
+    .k-checkbox-label.k-no-text {
+        min-width: 1px;
+    }
+
+
+    // Checkbox list
+    .k-checkbox-list {
+        margin: $checkbox-list-margin;
+        padding: $checkbox-list-padding;
+        list-style: none;
+
+        .k-checkbox-item {
+            padding: $checkbox-list-item-padding-y $checkbox-list-item-padding-x;
+        }
+    }
+
+    .k-list-horizontal {
+        .k-checkbox-item {
+            display: inline-block;
+            margin: 0 $checkbox-list-horizontal-item-margin-x 0 0;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+
+
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+        .k-checkbox + .k-checkbox-label,
+        .k-checkbox-label + .k-checkbox {
+            margin-left: 0;
+            margin-right: $checkbox-label-margin-x;
+        }
+        .k-checkbox-label > .k-checkbox {
+            margin-right: 0;
+            margin-left: $checkbox-label-margin-x;
+        }
+        kendo-label.k-checkbox-label > .k-checkbox:last-child {
+            margin-left: 0;
+        }
+        kendo-label.k-checkbox-label > .k-label:first-child {
+            margin-right: 0;
+            margin-left: $checkbox-label-margin-x;
+        }
+
+        .k-list-horizontal {
+            .k-checkbox-item {
+                margin-right: 0;
+                margin-left: $checkbox-list-horizontal-item-margin-x;
+
+                &:last-child {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+
+    .k-ripple-container {
+        .k-checkbox::after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: $checkbox-ripple-size;
+            height: $checkbox-ripple-size;
+            margin-left: $checkbox-ripple-margin;
+            margin-top: $checkbox-ripple-margin;
+            border-radius: 100%;
+            z-index: 1;
+            transform: scale(0);
+        }
+
+        .k-checkbox:disabled::after,
+        .k-checkbox.k-disabled::after {
+            display: none;
+        }
+    }
+
+}
+
+
+
+
+@include exports( "checkbox/layout/edge" ) {
+
+    .k-checkbox::-ms-check {
+        border-width: 1px;
+        border-color: inherit;
+        color: inherit;
+        background-color: inherit;
+    }
+
+}
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/default/scss/checkbox/_theme.scss
+@include exports("checkbox/theme") {
+
+    // Checkbox
+    .k-checkbox {
+        @include fill(
+            $checkbox-text,
+            $checkbox-bg,
+            $checkbox-border
+        );
+    }
+
+
+    // Hover state
+    .k-checkbox:hover,
+    .k-checkbox.k-state-hover {
+        @include fill(
+            $checkbox-hovered-text,
+            $checkbox-hovered-bg,
+            $checkbox-hovered-border
+        );
+    }
+
+
+    // Focus state
+    .k-checkbox:focus,
+    .k-checkbox.k-state-focus {
+        @include fill( $border: $checkbox-focused-border );
+        @include box-shadow( $checkbox-focused-shadow );
+    }
+
+
+    // Indeterminate
+    .k-checkbox:indeterminate,
+    .k-checkbox.k-state-indeterminate,
+    .k-checkbox.k-indeterminate {
+        @include fill(
+            $checkbox-indeterminate-text,
+            $checkbox-indeterminate-bg,
+            $checkbox-indeterminate-border
+        );
+    }
+
+
+    // Checked
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
+        @include fill(
+            $checkbox-checked-text,
+            $checkbox-checked-bg,
+            $checkbox-checked-border
+        );
+    }
+    .k-checkbox:checked:focus,
+    .k-checkbox.k-checked.k-state-focus {
+        @include fill( $border: $checkbox-focused-checked-border );
+        @include box-shadow( $checkbox-focused-checked-shadow );
+    }
+
+
+    // Disabled
+    .k-checkbox:disabled,
+    .k-checkbox.k-disabled {
+        @include fill(
+            $checkbox-disabled-text,
+            $checkbox-disabled-bg,
+            $checkbox-disabled-border
+        );
+    }
+    .k-checkbox:checked:disabled,
+    .k-checkbox:indeterminate:disabled,
+    .k-checkbox.k-state-indeterminate:disabled,
+    .k-checkbox.k-checked.k-disabled,
+    .k-checkbox.k-indeterminate.k-disabled {
+        @include fill(
+            $checkbox-disabled-checked-text,
+            $checkbox-disabled-checked-bg,
+            $checkbox-disabled-checked-border
+        );
+    }
+
+
+    // Invalid
+    .k-checkbox.k-invalid,
+    .k-checkbox.k-state-invalid,
+    .k-checkbox.ng-invalid.ng-touched,
+    .k-checkbox.ng-invalid.ng-dirty {
+        @include fill( $border: $checkbox-invalid-border );
+    }
+    .k-checkbox.k-invalid + .k-checkbox-label,
+    .k-checkbox.k-state-invalid + .k-checkbox-label,
+    .k-checkbox.ng-invalid.ng-touched + .k-checkbox-label,
+    .k-checkbox.ng-invalid.ng-dirty + .k-checkbox-label {
+        @include fill( $color: $checkbox-invalid-text );
+    }
+
+
+    // Ripple
+    .k-ripple-container {
+        .k-checkbox::after {
+            background: $checkbox-checked-bg;
+            opacity: $checkbox-ripple-opacity;
+        }
+    }
+
+}
+
+// #endregion
+
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/list/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/list/_layout.scss
 @include exports( "list/layout" ) {
 
+    .k-list,
+    .k-list-container {
+        font-size: $list-font-size;
+        line-height: $list-line-height;
+    }
+
     // Layout
     .k-list-scroller {
         position: relative;
@@ -5959,7 +6447,7 @@ $list-container-no-data-text: $subtle-text !default;
 
     .k-list__group-header { // sass-lint:disable-line class-name-format
         padding: $list-item-padding-y $list-item-padding-x;
-        min-height: $line-height-em;
+        min-height: $list-line-height-em;
         border-bottom-width: 1px;
         border-bottom-style: solid;
         font-size: $font-size;
@@ -6001,8 +6489,8 @@ $list-container-no-data-text: $subtle-text !default;
 
     .k-list__item { // sass-lint:disable-line class-name-format
         padding: $list-item-padding-y $list-item-padding-x;
-        min-height: $line-height-em;
-        line-height: $line-height-em;
+        min-height: $list-line-height-em;
+        line-height: $list-line-height;
         white-space: normal;
         display: flex;
         align-items: center;
@@ -6015,6 +6503,12 @@ $list-container-no-data-text: $subtle-text !default;
         transition-timing-function: ease;
         outline: none;
 
+        .k-checkbox {
+            margin-top: calc( ( #{$list-line-height-em} - #{$checkbox-size} ) / 2 );
+            font-size: inherit;
+            align-self: flex-start;
+        }
+
         &.k-first::before {
             content: "";
             display: block;
@@ -6927,7 +7421,7 @@ $clear-button-focused-opacity: .1 !default;
 // #region @import "_variables.scss"; -> packages/default/scss/input/_variables.scss
 // Input
 
-$input-default-width: 12.4em !default;
+$input-default-width: 200px !default;
 
 $input-border-width: 1px !default;
 $input-border-height: ( $input-border-width * 2 ) !default;
@@ -7463,228 +7957,150 @@ $floating-label-focus-text: null !default;
 
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/combobox/_variables.scss
-// Comboboxes
-$combobox-select-padding-x: 0px !default;
-$combobox-select-padding-y: 0px !default;
-$combobox-select-width: $button-inner-calc-size !default;
-
-$combobox-bg: $input-bg !default;
-$combobox-text: $input-text !default;
-$combobox-border: $input-border !default;
-
-$combobox-hovered-bg: $input-hovered-bg !default;
-$combobox-hovered-text: $input-hovered-text !default;
-$combobox-hovered-border: $input-hovered-border !default;
-
-$combobox-focused-bg: $input-focused-bg !default;
-$combobox-focused-text: $input-focused-text !default;
-$combobox-focused-border: $input-focused-border !default;
-$combobox-focused-shadow: $input-focused-shadow !default;
-
-$combobox-select-bg: $button-bg !default;
-$combobox-select-text: $button-text !default;
-$combobox-select-border: $button-border !default;
-$combobox-select-gradient: $button-gradient !default;
-
-$combobox-select-hovered-bg: $button-hovered-bg !default;
-$combobox-select-hovered-text: $button-hovered-text !default;
-$combobox-select-hovered-border: $button-hovered-border !default;
-$combobox-select-hovered-gradient: $button-hovered-gradient !default;
-
-$combobox-select-pressed-bg: $button-active-bg !default;
-$combobox-select-pressed-text: $button-active-text !default;
-$combobox-select-pressed-border: $button-active-border !default;
-$combobox-select-pressed-gradient: $button-active-gradient !default;
+// Combobox
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/combobox/_layout.scss
-@include exports("combobox/layout") {
+@include exports( "combobox/layout" ) {
 
     // Combobox
     .k-combobox {
+        @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-dropdown-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-flow: row nowrap;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            outline: 0;
-            cursor: initial;
-            overflow: hidden;
-        }
-
 
         // Input
         .k-input {}
 
+
+        // Loading icon
+        .k-i-loading {
+            width: $input-icon-width;
+            height: $input-icon-height;
+        }
+
+
         // Select
         .k-select {
-            padding: $combobox-select-padding-y $combobox-select-padding-x;
-            width: if( $use-picker-select-width, $combobox-select-width, null );
+            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;
-            box-sizing: border-box;
             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;
         }
-
-        &[dir="rtl"],
-        .k-rtl & {
-            text-align: right;
-        }
     }
+
 }
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/combobox/_theme.scss
-@include exports("combobox/theme") {
+@include exports( "combobox/theme" ) {
 
     .k-combobox {
-
-        // Normal state
-        .k-dropdown-wrap {
-            @include fill(
-                $combobox-text,
-                $combobox-bg,
-                $combobox-border
-            );
-
-            // 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-select {
-            @include fill(
-                $combobox-select-text,
-                $combobox-select-bg,
-                $combobox-select-border,
-                $combobox-select-gradient
-            );
-        }
+        @include fill(
+            $input-text,
+            $input-bg,
+            $input-border
+        );
 
         // Hover state
-        > :hover,
-        .k-state-hover {
+        &:hover,
+        &.k-state-hover {
             @include fill(
-                $combobox-hovered-text,
-                $combobox-hovered-bg,
-                $combobox-hovered-border
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
             );
         }
-        .k-select:hover {
+
+        // Focus state
+        &:focus,
+        &.k-state-focus {
             @include fill(
-                $combobox-select-hovered-text,
-                $combobox-select-hovered-bg,
-                $combobox-select-hovered-border,
-                $combobox-select-hovered-gradient
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
+            @include box-shadow( $input-focused-shadow );
         }
-
-        // Focus state
-        > .k-state-focused {
+        &:focus-within {
             @include fill(
-                $combobox-focused-text,
-                $combobox-focused-bg,
-                $combobox-focused-border
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
-            @include box-shadow($combobox-focused-shadow);
+            @include box-shadow( $input-focused-shadow );
         }
 
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-dropdown-wrap {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
 
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
 
-    // Universal rendering
-    .k-combobox {
-        &.k-state-hover {
-            .k-dropdown-wrap {
-                @include fill(
-                    $combobox-hovered-text,
-                    $combobox-hovered-bg,
-                    $combobox-hovered-border
-                );
+            .k-input-validation-icon {
+                color: $invalid-text;
             }
-        }
 
-        &.k-state-focus {
-            .k-dropdown-wrap {
-                @include fill(
-                    $combobox-focused-text,
-                    $combobox-focused-bg,
-                    $combobox-focused-border
-                );
-                @include box-shadow($combobox-focused-shadow);
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
             }
         }
 
-        &.k-invalid {
-            .k-dropdown-wrap {
-                border-color: $invalid-border;
 
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-            }
+        // Select
+        .k-select {
+            @include fill(
+                $picker-select-text,
+                $picker-select-bg,
+                $picker-select-border,
+                $picker-select-gradient
+            );
         }
-
-        &.k-invalid.k-state-focus {
-            .k-dropdown-wrap {
-                @include box-shadow($invalid-shadow);
-            }
+        .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
+            );
         }
     }
 
@@ -7956,14 +8372,14 @@ $grid-filter-menu-check-all-border-bottom-width: 1px !default;
 $grid-filter-menu-item-spacing-x: map-get( $spacing, 2 ) !default;
 $grid-filter-menu-item-spacing-y: $grid-filter-menu-item-spacing-x !default;
 
-$grid-column-menu-popup-padding-x: 0 !default;
-$grid-column-menu-popup-padding-y: $padding-y-sm !default;
+$grid-column-menu-popup-padding-x: null !default;
+$grid-column-menu-popup-padding-y: null !default;
 
-$grid-column-menu-item-padding-x: $padding-x !default;
-$grid-column-menu-item-padding-y: $padding-y !default;
+$grid-column-menu-item-padding-x: $menu-popup-item-padding-x !default;
+$grid-column-menu-item-padding-y: $menu-popup-item-padding-y !default;
 
-$grid-column-menu-list-item-padding-x: $padding-x !default;
-$grid-column-menu-list-item-padding-y: $padding-y-sm !default;
+$grid-column-menu-list-item-padding-x: $list-item-padding-x !default;
+$grid-column-menu-list-item-padding-y: $list-item-padding-y !default;
 
 $grid-column-menu-items-wrap-padding-x: 0 !default;
 $grid-column-menu-items-wrap-padding-y: $padding-y-lg !default;
@@ -9711,6 +10127,7 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
     .k-color-preview {
         border-width: $color-preview-border-width;
         border-radius: $color-preview-border-radius;
+        box-sizing: border-box;
         border-style: solid;
         display: inline-flex;
         flex-direction: row;
@@ -9718,21 +10135,62 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
         position: relative;
         overflow: hidden;
     }
-    .k-color-preview::before {
-        content: "";
+
+
+    // Current Color
+    .k-coloreditor-current-color {
+        cursor: pointer;
+    }
+
+
+    // Icon color preview
+    .k-icon-color-preview {
+        border-width: 0;
+        border-radius: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: center;
+        gap: 2px;
+
+        .k-color-preview-mask {
+            width: calc( #{$icon-size} - 2px );
+            height: 2px;
+        }
+    }
+
+
+    // Color Preview Mask
+    .k-color-preview-mask {
         width: 100%;
         height: 100%;
-        display: block;
         position: relative;
+    }
+    .k-color-preview-mask::before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
         z-index: -1;
+        background: $color-preview-transparent-color-image;
+        background-size: contain;
+        background-position: 0 0;
     }
 
-    // Current Color
-    .k-coloreditor-current-color {
-        cursor: pointer;
-    }
 
     // No Color
+    .k-no-color .k-color-preview-mask::before {
+        content: "";
+        background-color: $color-preview-no-color-bg;
+        background-image: $color-preview-no-color-image;
+        background-size: 100% 100%;
+        background-position: 0 0;
+    }
+
+
+    // No Color (legacy)
     .k-no-color::before {
         content: "";
         width: 100%;
@@ -9756,12 +10214,6 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
             $color-preview-border
         );
 
-        &::before {
-            background: $color-preview-transparent-color-image;
-            background-size: contain;
-            background-position: 0;
-        }
-
         &:hover,
         &.k-state-hover,
         &.k-hover {
@@ -9769,14 +10221,6 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
         }
     }
 
-    // No Color
-    .k-no-color::before {
-        background-color: $color-preview-no-color-bg;
-        background-image: $color-preview-no-color-image;
-        background-size: 100% 100%;
-        background-position: 0 0;
-    }
-
 }
 
 // #endregion
@@ -10973,7 +11417,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
     .k-button {
 
         &::after {
-            @include border-radius( $button-border-radius );
+            @include border-radius( inherit );
             content: "";
             opacity: 0;
             display: none;
@@ -10996,12 +11440,6 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
     .k-ie {
 
-        .k-button,
-        .k-button-group {
-            display: inline-block;
-            overflow: visible; // IE9
-        }
-
         .k-button-icontext {
 
             .k-icon,
@@ -11452,12 +11890,26 @@ $tooltip-error-border: $tooltip-error-bg !default;
             flex: 1 0 0%;
         }
 
+
         // Template
         .k-toolbar-template {
             align-self: center;
             align-items: center;
         }
 
+
+        // Child components
+        .k-textbox,
+        .k-combobox,
+        .k-dropdown,
+        .k-searchbox,
+        .k-numerictextbox,
+        .k-datepicker,
+        .k-timepicker,
+        .k-datetimepicker {
+            width: 10em;
+        }
+
     }
 
 
@@ -11472,6 +11924,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
     // Angular specific
     kendo-toolbar-renderer {
+        display: inline-block;
         border-color: inherit;
     }
 
@@ -12026,10 +12479,6 @@ $fieldset-legend-border: null !default;
             display: inline-flex;
             width: 100%;
         }
-
-        .k-editor .k-dropdown {
-            width: $input-default-width;
-        }
     }
 
     // Form Buttons Container
@@ -13027,479 +13476,8 @@ $textarea-invalid-focus-shadow: $invalid-shadow !default;
 
 // #endregion
 // #region @import "checkbox/_index.scss"; -> packages/default/scss/checkbox/_index.scss
-// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-
-
-// Dependencies
-// #region @import "../list/_variables.scss"; -> packages/default/scss/list/_variables.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/default/scss/checkbox/_variables.scss
-// Checkbox
-$checkbox-size: map-get( $spacing, 4 ) !default;
-$checkbox-radius: map-get( $spacing, thin ) !default;
-$checkbox-border-width: 1px !default;
-$checkbox-line-height: calc( #{$checkbox-size} + #{$checkbox-border-width} ) !default;
-
-$checkbox-bg: $white !default;
-$checkbox-text: transparent !default;
-$checkbox-border: $base-border !default;
-
-$checkbox-hovered-bg: null !default;
-$checkbox-hovered-text: null !default;
-$checkbox-hovered-border: null !default;
-
-$checkbox-checked-bg: $primary !default;
-$checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
-$checkbox-checked-border: $checkbox-checked-bg !default;
-
-$checkbox-indeterminate-bg: $checkbox-bg !default;
-$checkbox-indeterminate-text: $checkbox-checked-bg !default;
-$checkbox-indeterminate-border: $checkbox-border !default;
-
-$checkbox-focused-border: null !default;
-$checkbox-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
-$checkbox-focused-checked-border: null !default;
-$checkbox-focused-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
-
-$checkbox-disabled-bg: null !default;
-$checkbox-disabled-text: null !default;
-$checkbox-disabled-border: null !default;
-
-$checkbox-disabled-checked-bg: null !default;
-$checkbox-disabled-checked-text: null !default;
-$checkbox-disabled-checked-border: null !default;
-
-$checkbox-invalid-bg: null !default;
-$checkbox-invalid-text: $invalid-text !default;
-$checkbox-invalid-border: $invalid-border !default;
-
-
-// Checkbox indicator
-$checkbox-icon-type: glyph !default;
-
-$checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-$checkbox-glyph-size: 12px !default;
-$checkbox-checked-glyph: "\e118" !default;
-$checkbox-indeterminate-glyph: "\e121" !default;
-
-$checkbox-checked-image: null !default;
-$checkbox-indeterminate-image: null !default;
-
-$checkbox-marker-checked-width: ( $checkbox-size / 2 ) !default;
-$checkbox-marker-checked-height: ( $checkbox-size / 2 ) !default;
-$checkbox-marker-indeterminate-width: ( $checkbox-size / 2 ) !default;
-$checkbox-marker-indeterminate-height: ( $checkbox-size / 2 ) !default;
-
-
-// Checkbox label
-$checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
-
-
-// Checkbox list
-$checkbox-list-margin: 0px !default;
-$checkbox-list-padding: 0px !default;
-$checkbox-list-item-padding-x: 0px !default;
-$checkbox-list-item-padding-y: $list-item-padding-y !default;
-$checkbox-list-horizontal-item-margin-x: 32px !default;
-
-
-// Checkbox ripple
-$checkbox-ripple-size: $checkbox-size * 3 !default;
-$checkbox-ripple-margin: calc(-1 * (#{$checkbox-size} + 2 * #{$checkbox-border-width})) !default;
-$checkbox-ripple-opacity: .3 !default;
-
-// #endregion
-// #region @import "_layout.scss"; -> packages/default/scss/checkbox/_layout.scss
-@include exports( "checkbox/layout" ) {
-
-    // Checkbox
-    .k-checkbox {
-        @include border-radius( $checkbox-radius );
-        margin: 0;
-        padding: 0;
-        width: $checkbox-size;
-        height: $checkbox-size;
-        line-height: initial;
-        border-width: $checkbox-border-width;
-        border-style: solid;
-        outline: 0;
-        box-sizing: border-box;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        display: inline-block;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-        -webkit-appearance: none;
-    }
-
-    // Checkbox indicator
-    .k-checkbox::before {
-        @if $checkbox-icon-type == "glyph" {
-            content: $checkbox-checked-glyph;
-            width: $checkbox-glyph-size;
-            height: $checkbox-glyph-size;
-            font-size: $checkbox-glyph-size;
-            font-family: $checkbox-glyph-font-family;
-            line-height: 1;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-
-        @if $checkbox-icon-type == "marker" {
-            content: "";
-            width: $checkbox-marker-checked-width;
-            height: $checkbox-marker-checked-height;
-            background-color: currentColor;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-    }
-
-
-    // Checked state
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
-        @if $checkbox-icon-type == "image" {
-            background-image: $checkbox-checked-image;
-        }
-
-        @if $checkbox-icon-type == "glyph" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-
-        @if $checkbox-icon-type == "marker" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-    }
-
-
-    // Indeterminate state
-    .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate,
-    .k-checkbox.k-state-indeterminate {
-        @if $checkbox-icon-type == "image" {
-            background-image: $checkbox-indeterminate-image;
-        }
-
-        @if $checkbox-icon-type == "glyph" {
-            &::before {
-                content: $checkbox-indeterminate-glyph;
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-
-        @if $checkbox-icon-type == "marker" {
-            &::before {
-                width: $checkbox-maker-indeterminate-width;
-                height: $checkbox-marker-indeterminate-height;
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-    }
-
-
-    // Disabled state
-    .k-checkbox:disabled,
-    .k-checkbox.k-disabled,
-    .k-checkbox:disabled + .k-checkbox-label,
-    .k-checkbox.k-disabled + .k-checkbox-label {
-        @include disabled( $disabled-styling );
-    }
-
-    // Checkbox label
-    .k-checkbox-label {
-        margin: 0;
-        padding: 0;
-        line-height: $checkbox-line-height;
-        display: inline-flex;
-        align-items: flex-start;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-
-        .k-label {
-            cursor: pointer;
-        }
-
-        .k-ripple {
-            top: $checkbox-size / 2;
-            left: $checkbox-size / 2;
-            right: auto;
-            bottom: auto;
-            width: $checkbox-size * 5 / 2;
-            height: $checkbox-size * 5 / 2;
-            transform: translate(-50%, -50%);
-            border-radius: 50%;
-
-            // Hide ripple temporarily
-            visibility: hidden !important; // sass-lint:disable-line no-important
-        }
-
-        .k-ripple-blob {
-            // sass-lint:disable-block no-important
-            // use !important until ripple can apply these styles from the script
-            top: 50% !important;
-            left: 50% !important;
-            width: 200% !important;
-            height: 200% !important;
-        }
-    }
-    .k-checkbox + .k-checkbox-label {
-        display: inline;
-    }
-    .k-checkbox + .k-checkbox-label,
-    .k-checkbox-label + .k-checkbox {
-        margin-left: $checkbox-label-margin-x;
-    }
-    .k-checkbox-label > .k-checkbox {
-        margin-right: $checkbox-label-margin-x;
-        flex-shrink: 0;
-    }
-    kendo-label.k-checkbox-label > .k-checkbox:last-child {
-        margin-right: 0;
-    }
-    kendo-label.k-checkbox-label > .k-label:first-child {
-        margin-right: $checkbox-label-margin-x;
-    }
-    kendo-label.k-checkbox-label > .k-label {
-        display: inline;
-    }
-
-
-    // Empty label
-    .k-checkbox-label:empty {
-        display: none;
-    }
-
-
-    // Label with no text
-    .k-checkbox-label.k-no-text {
-        min-width: 1px;
-    }
-
-
-    // Checkbox list
-    .k-checkbox-list {
-        margin: $checkbox-list-margin;
-        padding: $checkbox-list-padding;
-        list-style: none;
-
-        .k-checkbox-item {
-            padding: $checkbox-list-item-padding-y $checkbox-list-item-padding-x;
-        }
-    }
-
-    .k-list-horizontal {
-        .k-checkbox-item {
-            display: inline-block;
-            margin: 0 $checkbox-list-horizontal-item-margin-x 0 0;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-    }
-
-
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        .k-checkbox + .k-checkbox-label,
-        .k-checkbox-label + .k-checkbox {
-            margin-left: 0;
-            margin-right: $checkbox-label-margin-x;
-        }
-        .k-checkbox-label > .k-checkbox {
-            margin-right: 0;
-            margin-left: $checkbox-label-margin-x;
-        }
-        kendo-label.k-checkbox-label > .k-checkbox:last-child {
-            margin-left: 0;
-        }
-        kendo-label.k-checkbox-label > .k-label:first-child {
-            margin-right: 0;
-            margin-left: $checkbox-label-margin-x;
-        }
-
-        .k-list-horizontal {
-            .k-checkbox-item {
-                margin-right: 0;
-                margin-left: $checkbox-list-horizontal-item-margin-x;
-
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
-    }
-
-    .k-ripple-container {
-        .k-checkbox::after {
-            content: "";
-            display: block;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: $checkbox-ripple-size;
-            height: $checkbox-ripple-size;
-            margin-left: $checkbox-ripple-margin;
-            margin-top: $checkbox-ripple-margin;
-            border-radius: 100%;
-            z-index: 1;
-            transform: scale(0);
-        }
-
-        .k-checkbox:disabled::after,
-        .k-checkbox.k-disabled::after {
-            display: none;
-        }
-    }
-
-}
-
-
-
-
-@include exports( "checkbox/layout/edge" ) {
-
-    .k-checkbox::-ms-check {
-        border-width: 1px;
-        border-color: inherit;
-        color: inherit;
-        background-color: inherit;
-    }
-
-}
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/default/scss/checkbox/_theme.scss
-@include exports("checkbox/theme") {
-
-    // Checkbox
-    .k-checkbox {
-        @include fill(
-            $checkbox-text,
-            $checkbox-bg,
-            $checkbox-border
-        );
-    }
-
-
-    // Hover state
-    .k-checkbox:hover,
-    .k-checkbox.k-state-hover {
-        @include fill(
-            $checkbox-hovered-text,
-            $checkbox-hovered-bg,
-            $checkbox-hovered-border
-        );
-    }
-
-
-    // Focus state
-    .k-checkbox:focus,
-    .k-checkbox.k-state-focus {
-        @include fill( $border: $checkbox-focused-border );
-        @include box-shadow( $checkbox-focused-shadow );
-    }
-
-
-    // Indeterminate
-    .k-checkbox:indeterminate,
-    .k-checkbox.k-state-indeterminate,
-    .k-checkbox.k-indeterminate {
-        @include fill(
-            $checkbox-indeterminate-text,
-            $checkbox-indeterminate-bg,
-            $checkbox-indeterminate-border
-        );
-    }
-
-
-    // Checked
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
-        @include fill(
-            $checkbox-checked-text,
-            $checkbox-checked-bg,
-            $checkbox-checked-border
-        );
-    }
-    .k-checkbox:checked:focus,
-    .k-checkbox.k-checked.k-state-focus {
-        @include fill( $border: $checkbox-focused-checked-border );
-        @include box-shadow( $checkbox-focused-checked-shadow );
-    }
-
-
-    // Disabled
-    .k-checkbox:disabled,
-    .k-checkbox.k-disabled {
-        @include fill(
-            $checkbox-disabled-text,
-            $checkbox-disabled-bg,
-            $checkbox-disabled-border
-        );
-    }
-    .k-checkbox:checked:disabled,
-    .k-checkbox:indeterminate:disabled,
-    .k-checkbox.k-state-indeterminate:disabled,
-    .k-checkbox.k-checked.k-disabled,
-    .k-checkbox.k-indeterminate.k-disabled {
-        @include fill(
-            $checkbox-disabled-checked-text,
-            $checkbox-disabled-checked-bg,
-            $checkbox-disabled-checked-border
-        );
-    }
-
-
-    // Invalid
-    .k-checkbox.k-invalid,
-    .k-checkbox.k-state-invalid,
-    .k-checkbox.ng-invalid.ng-touched,
-    .k-checkbox.ng-invalid.ng-dirty {
-        @include fill( $border: $checkbox-invalid-border );
-    }
-    .k-checkbox.k-invalid + .k-checkbox-label,
-    .k-checkbox.k-state-invalid + .k-checkbox-label,
-    .k-checkbox.ng-invalid.ng-touched + .k-checkbox-label,
-    .k-checkbox.ng-invalid.ng-dirty + .k-checkbox-label {
-        @include fill( $color: $checkbox-invalid-text );
-    }
-
-
-    // Ripple
-    .k-ripple-container {
-        .k-checkbox::after {
-            background: $checkbox-checked-bg;
-            opacity: $checkbox-ripple-opacity;
-        }
-    }
-
-}
-
-// #endregion
-
-// #endregion
 // #region @import "listbox/_index.scss"; -> packages/default/scss/listbox/_index.scss
 // #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
 // File already imported_once. Skipping output.
@@ -14022,6 +14000,9 @@ $progressbar-chunk-border: $body-bg !default;
 
 
 // Dependencies
+// #region @import "../typography/_variables.scss"; -> packages/default/scss/typography/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
 // #region @import "../list/_variables.scss"; -> packages/default/scss/list/_variables.scss
 // File already imported_once. Skipping output.
 // #endregion
@@ -14122,6 +14103,7 @@ $radio-ripple-opacity: .3 !default;
         background-repeat: no-repeat;
         background-size: contain;
         display: inline-block;
+        flex: none;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
@@ -14207,7 +14189,7 @@ $radio-ripple-opacity: .3 !default;
 
         // Hide empty label
         &:empty {
-            display: none;
+            display: none !important; // sass-lint:disable-line no-important
         }
 
         .k-ripple {
@@ -16404,19 +16386,19 @@ $autocomplete-disabled-shadow: null !default;
         width: $input-default-width;
         border-width: $input-border-width;
         border-style: solid;
-        outline: 0;
         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;
-        align-items: stretch;
         vertical-align: middle;
-        transition: all .1s ease; // sass-lint:disable-block no-transition-all
         position: relative;
-        cursor: default;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
@@ -17444,9 +17426,9 @@ $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
 $coloreditor-header-actions-gap: ( $coloreditor-spacer / 1.5 ) !default;
 
-$coloreditor-preview-gap: ( $coloreditor-spacer / 4 ) !default;
-$coloreditor-color-preview-width: 34px !default;
-$coloreditor-color-preview-height: 14px !default;
+$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-color-preview-width: 32px !default;
+$coloreditor-color-preview-height: 12px !default;
 
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
@@ -17482,8 +17464,12 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
     }
 
     .k-coloreditor-preview {
-        position: relative;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        justify-content: center;
         gap: $coloreditor-preview-gap;
+        position: relative;
         z-index: 1;
     }
     .k-coloreditor-preview .k-color-preview {
@@ -17636,6 +17622,12 @@ $colorpicker-focused-shadow: $button-focused-shadow !default;
             position: relative;
             overflow: hidden;
         }
+        .k-color-preview {
+            margin: $button-padding-y;
+            width: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
+            height: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
+            z-index: 1;
+        }
 
         .k-tool-icon {
             padding: $button-padding-y;
@@ -18595,6 +18587,7 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
 // Component
 // #region @import "_layout.scss"; -> packages/default/scss/dropdowngrid/_layout.scss
 @include exports("dropdowngrid/layout") {
+
     .k-dropdowngrid-popup {
         overflow: hidden;
     }
@@ -18944,70 +18937,55 @@ $dropdownlist-focused-shadow: $input-focused-shadow !default;
 
     // Dropdown list
     .k-dropdown {
+        @include border-radius( $input-border-radius );
         width: $input-default-width;
-        border-width: 0;
-        outline: 0;
-        background: none;
+        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;
         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-dropdown-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            display: flex;
-            flex-flow: row nowrap;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: pointer;
-            outline: 0;
-            overflow: hidden;
-
 
-            // Input
-            .k-input {}
+        // Input
+        .k-input {}
 
 
-            // Select
-            .k-select {
-                padding: $picker-select-padding-y $picker-select-padding-x;
-                width: if( $use-picker-select-width, $button-inner-calc-size, null );
-                border-width: 0;
-                border-inline-start-width: $picker-select-border-width;
-                border-color: transparent;
-                box-sizing: border-box;
-                border-style: solid;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex: 0 0 auto;
-                text-align: center;
-                cursor: pointer;
-            }
+        // Loading icon
+        .k-i-loading {
+            width: $input-icon-width;
+            height: $input-icon-height;
         }
 
-    }
-
-
-    // RTL
 
-    .k-dropdown.k-rtl,
-    .k-dropdown[dir="rtl"],
-    .k-rtl .k-dropdown,
-    [dir="rtl"] .k-dropdown {
-        text-align: right;
+        // 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;
+            border-color: transparent;
+            box-sizing: border-box;
+            outline: 0;
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            justify-content: center;
+            flex: 0 0 auto;
+            cursor: pointer;
+        }
     }
 
 
@@ -19016,16 +18994,13 @@ $dropdownlist-focused-shadow: $input-focused-shadow !default;
     .k-dropdown-operator {
         width: auto;
 
-        .k-dropdown-wrap {
-            .k-input {
-                display: none;
-            }
-            .k-select {
-                width: $button-inner-calc-size;
-                height: $button-inner-calc-size;
-            }
+        .k-input {
+            display: none;
+        }
+        .k-select {
+            width: $button-inner-calc-size;
+            height: $button-inner-calc-size;
         }
-
     }
 
 
@@ -19049,79 +19024,8 @@ $dropdownlist-focused-shadow: $input-focused-shadow !default;
 // #region @import "_theme.scss"; -> packages/default/scss/dropdownlist/_theme.scss
 @include exports( "dropdownlist/theme" ) {
 
+    // Dropdown list
     .k-dropdown {
-
-        .k-dropdown-wrap {
-            @include fill(
-                $dropdownlist-text,
-                $dropdownlist-bg,
-                $dropdownlist-border,
-                $dropdownlist-gradient
-            );
-
-            // Hover state
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $dropdownlist-hovered-text,
-                    $dropdownlist-hovered-bg,
-                    $dropdownlist-hovered-border,
-                    $dropdownlist-hovered-gradient
-                );
-            }
-
-            &.k-state-active {}
-
-            // Focused state
-            &.k-state-focused {
-                @include fill(
-                    $dropdownlist-focused-text,
-                    $dropdownlist-focused-bg,
-                    $dropdownlist-focused-border,
-                    $dropdownlist-focused-gradient
-                );
-                @include box-shadow($dropdownlist-focused-shadow);
-            }
-
-            // 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);
-                }
-            }
-        }
-
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            > .k-dropdown-wrap {
-                border-color: $invalid-border;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-    }
-
-    // Native select
-    select.k-dropdown {
         @include fill(
             $dropdownlist-text,
             $dropdownlist-bg,
@@ -19130,7 +19034,8 @@ $dropdownlist-focused-shadow: $input-focused-shadow !default;
         );
 
         // Hover state
-        &:hover {
+        &:hover,
+        &.k-state-hover {
             @include fill(
                 $dropdownlist-hovered-text,
                 $dropdownlist-hovered-bg,
@@ -19139,8 +19044,18 @@ $dropdownlist-focused-shadow: $input-focused-shadow !default;
             );
         }
 
-        // Focused state
-        &:focus {
+        // Focus state
+        &:focus,
+        &.k-state-focus {
+            @include fill(
+                $dropdownlist-focused-text,
+                $dropdownlist-focused-bg,
+                $dropdownlist-focused-border,
+                $dropdownlist-focused-gradient
+            );
+            @include box-shadow($dropdownlist-focused-shadow);
+        }
+        &:focus-within {
             @include fill(
                 $dropdownlist-focused-text,
                 $dropdownlist-focused-bg,
@@ -19149,6 +19064,24 @@ $dropdownlist-focused-shadow: $input-focused-shadow !default;
             );
             @include box-shadow($dropdownlist-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);
+            }
+        }
+
     }
 
 }
@@ -19987,87 +19920,103 @@ $dropdowntree-filter-spacer: $dropdowntree-popup-spacer-y !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/maskedtextbox/_layout.scss
-@include exports("maskedtextbox/layout") {
+@include exports( "maskedtextbox/layout" ) {
 
     // Masked textbox
     .k-maskedtextbox {
+        @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;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        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-textbox {
-            flex: 1 0 0%;
-            min-width: 0;
-
-            &.k-state-invalid {
-                transition: none;
-            }
-        }
-
-        .k-i-warning {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: $padding-x;
-        }
 
-        &[dir="rtl"],
-        .k-rtl & {
-            text-align: right;
+        // Input
+        .k-input {}
 
-            .k-i-warning {
-                right: auto;
-                left: $padding-x;
-            }
-        }
 
-        ::-ms-clear {
-            display: none;
+        // Loading icon
+        .k-i-loading {
+            width: $input-icon-width;
+            height: $input-icon-height;
         }
     }
+
 }
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/maskedtextbox/_theme.scss
-@include exports("maskedtextbox/theme") {
+@include exports( "maskedtextbox/theme" ) {
 
+    // Masked textbox
     .k-maskedtextbox {
+        @include fill(
+            $input-text,
+            $input-bg,
+            $input-border
+        );
 
-        .k-i-warning {
-            color: $error;
+        // Hover state
+        &:hover,
+        &.k-state-hover {
+            @include fill(
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
+            );
         }
 
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-textbox {
-                border-color: $invalid-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,
-            &.k-state-focused {
-                .k-textbox {
-                    @include box-shadow($invalid-shadow);
-                }
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
             }
         }
     }
+
 }
 
 // #endregion
@@ -21656,6 +21605,19 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
             border-width: 0 0 0 1px;
             display: inline-block;
         }
+
+
+        // Appbar child components
+        .k-textbox,
+        .k-combobox,
+        .k-dropdown,
+        .k-searchbox,
+        .k-numerictextbox,
+        .k-datepicker,
+        .k-timepicker,
+        .k-datetimepicker {
+            width: 10em;
+        }
     }
 
     .k-appbar-static {
@@ -31306,14 +31268,10 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             width: auto;
             min-width: $form-line-height * 1em;
         }
-        [data-tool="fontSize"] {
-            width: 5 * $spacer;
-        }
-        [data-tool="fontFamily"] {
-            width: 6 * $spacer;
-        }
-        [data-tool="format"] {
-            width: 4 * $spacer;
+
+        .k-combobox,
+        .k-dropdown {
+            width: 5em;
         }
     }
 
@@ -35100,6 +35058,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
     }
 
     // Toolbar
+    .k-editor-toolbar,
     .k-editor > .k-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
         flex-shrink: 0;
@@ -35127,13 +35086,14 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             top: 0;
             right: 0;
             visibility: hidden;
-        }
-        .k-overflow-anchor {
-            border-width: 0;
-            padding: $toolbar-padding-y;
-            width: $toolbar-inner-calc-size;
-            height: $toolbar-inner-calc-size;
-            position: relative;
+
+            .k-overflow-anchor {
+                border-width: 0;
+                padding: $toolbar-padding-y;
+                width: $toolbar-inner-calc-size;
+                height: $toolbar-inner-calc-size;
+                position: relative;
+            }
         }
 
         .k-editor-export {
@@ -35251,15 +35211,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
         }
     }
 
-    .k-editor-widget .k-colorpicker {}
-
-    .k-rtl .k-editor .k-editor-widget .k-dropdown-wrap {
-        padding-left: 0;
-
-        .k-select {
-            border-width: 0;
-        }
-    }
 
     // Find and replace dialog
     .k-editor-find-replace {
@@ -35837,6 +35788,7 @@ $imageeditor-content-border-width: 1px !default;
 
 $imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
 $imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
+$imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
 
 $imageeditor-crop-border-width: 1px !default;
 $imageeditor-crop-border-style: dashed !default;
@@ -35918,16 +35870,16 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
 
     // Action Pane
     .k-imageeditor-action-pane {
+        padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
+        width: $imageeditor-action-pane-width;
         border-width: 0;
         border-left-width: $imageeditor-content-border-width;
         border-style: solid;
         border-color: inherit;
-        flex-shrink: 0;
+        box-sizing: border-box;
+        flex: none;
         overflow-y: auto;
     }
-    .k-imageeditor-action-pane > .k-form {
-        padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
-    }
 
 
     // Crop Tool
@@ -36017,10 +35969,6 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
             flex-direction: row;
             align-self: flex-start;
         }
-
-        .k-imageeditor-action-pane {
-            flex: 0 0 auto;
-        }
     }
 
 }
@@ -38580,7 +38528,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         .k-widget.k-recur-month,
         .k-widget.k-recur-weekday,
         .k-widget.k-recur-weekday-offset {
-            width: 9em;
+            width: 10em;
         }
 
     }
@@ -39969,6 +39917,11 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
         width: 100% !important;
         // sass-lint:enable no-important
         box-shadow: none;
+
+
+        .k-dropdown {
+            width: auto;
+        }
     }
     .k-mediaplayer-time-wrap {
         flex: 1;
@@ -42315,35 +42268,32 @@ $map-marker-fill: $primary !default;
 
         // Buttons
         .k-button {
-            margin: 0;
             padding: 0;
             width: auto;
             height: auto;
-            border-radius: 100%;
             line-height: 1;
             box-shadow: none;
             position: absolute;
-
-            &:not(:hover) {
-                border-color: transparent;
-                background: none;
-            }
         }
+        .k-navigator-n,
         .k-navigator-up {
             transform: translateX(-50%);
             top: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-e,
         .k-navigator-right {
             transform: translateY(-50%);
             right: $map-navigator-padding;
             top: 50%;
         }
+        .k-navigator-s,
         .k-navigator-down {
             transform: translateX(-50%);
             bottom: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-w,
         .k-navigator-left {
             transform: translateY(-50%);
             left: $map-navigator-padding;