@progress/kendo-theme-bootstrap 5.4.2-dev.3 → 5.4.2-dev.6

package/dist/all.css

@@ -13733,31 +13733,17 @@ textarea.k-input-inner {
 
 .k-input-flat,
 .k-picker-flat {
-    border-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
     border-width: 1px 0;
     border-top-color: transparent !important;
     background-image: none !important;
 }
 
-.k-input-flat:focus, .k-input-flat.k-focus,
-.k-picker-flat:focus,
-.k-picker-flat.k-focus {
-    border-radius: 0.25rem 0.25rem 0px 0px !important;
-}
-
-.k-input-flat:focus-within,
-.k-picker-flat:focus-within {
-    border-radius: 0.25rem 0.25rem 0px 0px !important;
-}
-
 .k-input-outline {
     background: none !important;
 }
 
-.k-picker.k-picker-flat {
-    border-radius: 0.25rem 0.25rem 0px 0px !important;
-}
-
 .k-input-sm,
 .k-picker-sm {
     font-size: 1rem;
@@ -13986,78 +13972,78 @@ textarea.k-input-inner {
     transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
-.k-input {
+.k-input-solid {
     border-color: #ced4da;
     color: #495057;
     background-color: #ffffff;
 }
 
-.k-input:focus, .k-input.k-focus {
+.k-input-solid:focus, .k-input-solid.k-focus {
     border-color: #86b7fe;
     color: #495057;
     background-color: #ffffff;
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
-.k-input:focus-within {
+.k-input-solid:focus-within {
     border-color: #86b7fe;
     color: #495057;
     background-color: #ffffff;
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
-.k-input.k-invalid, .k-input.ng-invalid.ng-touched, .k-input.ng-invalid.ng-dirty {
+.k-input-solid.k-invalid, .k-input-solid.ng-invalid.ng-touched, .k-input-solid.ng-invalid.ng-dirty {
     border-color: #dc3545;
 }
 
-.k-input.k-invalid .k-input-validation-icon, .k-input.ng-invalid.ng-touched .k-input-validation-icon, .k-input.ng-invalid.ng-dirty .k-input-validation-icon {
+.k-input-solid.k-invalid .k-input-validation-icon, .k-input-solid.ng-invalid.ng-touched .k-input-validation-icon, .k-input-solid.ng-invalid.ng-dirty .k-input-validation-icon {
     color: #dc3545;
 }
 
-.k-input.k-invalid:focus, .k-input.k-invalid.k-focus, .k-input.ng-invalid.ng-touched:focus, .k-input.ng-invalid.ng-touched.k-focus, .k-input.ng-invalid.ng-dirty:focus, .k-input.ng-invalid.ng-dirty.k-focus {
+.k-input-solid.k-invalid:focus, .k-input-solid.k-invalid.k-focus, .k-input-solid.ng-invalid.ng-touched:focus, .k-input-solid.ng-invalid.ng-touched.k-focus, .k-input-solid.ng-invalid.ng-dirty:focus, .k-input-solid.ng-invalid.ng-dirty.k-focus {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
-.k-input.k-invalid:focus-within, .k-input.ng-invalid.ng-touched:focus-within, .k-input.ng-invalid.ng-dirty:focus-within {
+.k-input-solid.k-invalid:focus-within, .k-input-solid.ng-invalid.ng-touched:focus-within, .k-input-solid.ng-invalid.ng-dirty:focus-within {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
-.k-picker {
+.k-picker-solid {
     border-color: #e4e7eb;
     color: #212529;
     background-color: #e4e7eb;
 }
 
-.k-picker:hover, .k-picker.k-hover {
+.k-picker-solid:hover, .k-picker-solid.k-hover {
     border-color: #c7cdd5;
     background-color: #ced3db;
 }
 
-.k-picker:focus, .k-picker.k-focus {
+.k-picker-solid:focus, .k-picker-solid.k-focus {
     border-color: #bfc6d0;
     background-color: #c7cdd5;
     box-shadow: 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
 }
 
-.k-picker:focus-within {
+.k-picker-solid:focus-within {
     border-color: #bfc6d0;
     background-color: #c7cdd5;
     box-shadow: 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
 }
 
-.k-picker.k-invalid, .k-picker.ng-invalid.ng-touched, .k-picker.ng-invalid.ng-dirty {
+.k-picker-solid.k-invalid, .k-picker-solid.ng-invalid.ng-touched, .k-picker-solid.ng-invalid.ng-dirty {
     border-color: #dc3545;
 }
 
-.k-picker.k-invalid .k-input-validation-icon, .k-picker.ng-invalid.ng-touched .k-input-validation-icon, .k-picker.ng-invalid.ng-dirty .k-input-validation-icon {
+.k-picker-solid.k-invalid .k-input-validation-icon, .k-picker-solid.ng-invalid.ng-touched .k-input-validation-icon, .k-picker-solid.ng-invalid.ng-dirty .k-input-validation-icon {
     color: #dc3545;
 }
 
-.k-picker.k-invalid:focus, .k-picker.k-invalid.k-focus, .k-picker.ng-invalid.ng-touched:focus, .k-picker.ng-invalid.ng-touched.k-focus, .k-picker.ng-invalid.ng-dirty:focus, .k-picker.ng-invalid.ng-dirty.k-focus {
+.k-picker-solid.k-invalid:focus, .k-picker-solid.k-invalid.k-focus, .k-picker-solid.ng-invalid.ng-touched:focus, .k-picker-solid.ng-invalid.ng-touched.k-focus, .k-picker-solid.ng-invalid.ng-dirty:focus, .k-picker-solid.ng-invalid.ng-dirty.k-focus {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
-.k-picker.k-invalid:focus-within, .k-picker.ng-invalid.ng-touched:focus-within, .k-picker.ng-invalid.ng-dirty:focus-within {
+.k-picker-solid.k-invalid:focus-within, .k-picker-solid.ng-invalid.ng-touched:focus-within, .k-picker-solid.ng-invalid.ng-dirty:focus-within {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
@@ -14079,6 +14065,16 @@ textarea.k-input-inner {
     border-color: inherit;
 }
 
+.k-input-outline:focus, .k-input-outline.k-focus {
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.k-input-outline:focus-within {
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
 .k-input-outline.k-invalid, .k-input-outline.ng-invalid.ng-touched, .k-input-outline.ng-invalid.ng-dirty {
     border-color: #dc3545;
 }
@@ -14096,28 +14092,22 @@ textarea.k-input-inner {
 }
 
 .k-picker-outline {
-    border-color: #212529;
+    border-color: rgba(33, 37, 41, 0.5);
     color: #212529;
-    background-color: transparent;
 }
 
 .k-picker-outline:hover, .k-picker-outline.k-hover {
     border-color: #212529;
-    color: #ffffff;
+    color: white;
     background-color: #212529;
 }
 
 .k-picker-outline:focus, .k-picker-outline.k-focus {
-    border-color: #212529;
-    color: #212529;
-    background-color: transparent;
     box-shadow: 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
 }
 
-.k-picker-outline:focus:hover, .k-picker-outline:focus.k-hover, .k-picker-outline.k-focus:hover, .k-picker-outline.k-focus.k-hover {
-    border-color: #212529;
-    color: #ffffff;
-    background-color: #212529;
+.k-picker-outline:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
 }
 
 .k-picker-outline.k-invalid, .k-picker-outline.ng-invalid.ng-touched, .k-picker-outline.ng-invalid.ng-dirty {
@@ -14137,11 +14127,18 @@ textarea.k-input-inner {
 }
 
 .k-input-flat {
-    background-color: transparent;
+    border-color: #ced4da;
+    color: #495057;
 }
 
 .k-input-flat:focus, .k-input-flat.k-focus {
-    border-color: #0d6efd;
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.k-input-flat:focus-within {
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
 .k-input-flat.k-invalid, .k-input-flat.ng-invalid.ng-touched, .k-input-flat.ng-invalid.ng-dirty {
@@ -14161,7 +14158,8 @@ textarea.k-input-inner {
 }
 
 .k-picker-flat {
-    background-color: transparent;
+    border-color: #e4e7eb;
+    color: #212529;
 }
 
 .k-picker-flat:hover, .k-picker-flat.k-hover {
@@ -14169,13 +14167,11 @@ textarea.k-input-inner {
 }
 
 .k-picker-flat:focus, .k-picker-flat.k-focus {
-    border-color: #bfc6d0;
-    background-color: transparent;
     box-shadow: 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
 }
 
-.k-picker-flat:focus:hover, .k-picker-flat:focus.k-hover, .k-picker-flat.k-focus:hover, .k-picker-flat.k-focus.k-hover {
-    background-color: rgba(33, 37, 41, 0.08);
+.k-picker-flat:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
 }
 
 .k-picker-flat.k-invalid, .k-picker-flat.ng-invalid.ng-touched, .k-picker-flat.ng-invalid.ng-dirty {
@@ -17889,6 +17885,16 @@ kendo-label > .k-label {
     flex: 0 0 1px;
 }
 
+.k-slider .k-slider-track-wrap .k-tick-horizontal {
+    width: 1px;
+    min-height: 100%;
+}
+
+.k-slider .k-slider-track-wrap .k-tick-vertical {
+    width: 100%;
+    min-height: 1px;
+}
+
 .k-slider .k-slider-track-wrap .k-draghandle {
     position: absolute;
 }
@@ -19450,6 +19456,9 @@ kendo-label > .k-label {
 }
 
 .k-colorgradient-inputs .k-input-inner {
+    padding-inline-start: 2px;
+    padding-inline-end: 2px;
+    text-align: center;
     text-overflow: clip;
 }
 
@@ -22063,6 +22072,7 @@ kendo-drawer .k-drawer-wrapper {
 
 .k-drawer {
     height: 100%;
+    max-width: 100%;
     border-width: 0;
     border-style: solid;
     box-sizing: border-box;
@@ -22207,6 +22217,33 @@ kendo-drawer .k-drawer-wrapper {
     padding: 0 1rem;
     display: inline-block;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.k-drawer-item .k-drawer-toggle {
+    margin-inline-start: auto;
+    cursor: pointer;
+}
+
+.k-drawer-item.k-level-1 {
+    padding-inline-start: 1rem;
+}
+
+.k-drawer-item.k-level-2 {
+    padding-inline-start: 2rem;
+}
+
+.k-drawer-item.k-level-3 {
+    padding-inline-start: 3rem;
+}
+
+.k-drawer-item.k-level-4 {
+    padding-inline-start: 4rem;
+}
+
+.k-drawer-item.k-level-5 {
+    padding-inline-start: 5rem;
 }
 
 .k-drawer-separator {

package/dist/all.scss

@@ -889,42 +889,6 @@ $_kendo-imported-modules: ();
 
 // #endregion
 
-// Other
-// #region @import "_input-ripple.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/core/mixins/_input-ripple.scss
-@mixin input-ripple() {
-    $height: 2 * $kendo-input-border-width;
-
-    &::after {
-        display: block;
-        z-index: 2;
-        content: "";
-        position: absolute;
-        bottom: calc( 1px - #{$height} );
-        left: 0;
-        right: 0;
-        height: $height;
-        margin: auto;
-        opacity: 0;
-        transform: scaleX(.5);
-        transition: transform .3s;
-        background-color: $primary;
-    }
-
-    &.k-state-focused::after ,
-    &.k-focus::after {
-        opacity: 1;
-        transform: scaleX(1);
-    }
-
-
-    &.k-state-invalid::after ,
-    &.k-invalid::after {
-        background-color: $error;
-        transition: none;
-    }
-}
-
-// #endregion
 
 // #endregion
 
@@ -11076,18 +11040,21 @@ $kendo-input-outline-hover-border: null !default;
 
 $kendo-input-outline-focus-bg: null !default;
 $kendo-input-outline-focus-text: null !default;
-$kendo-input-outline-focus-border: null !default;
-$kendo-input-outline-focus-shadow: null !default;
+$kendo-input-outline-focus-border: $kendo-input-focus-border !default;
+$kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
 
-$kendo-input-flat-bg: transparent !default;
-$kendo-input-flat-text: null !default;
-$kendo-input-flat-border: null !default;
+$kendo-input-flat-bg: null !default;
+$kendo-input-flat-text: $kendo-input-text !default;
+$kendo-input-flat-border: $kendo-input-border !default;
+
+$kendo-input-flat-hover-bg: null !default;
+$kendo-input-flat-hover-text: null !default;
+$kendo-input-flat-hover-border: $kendo-input-hover-border !default;
 
 $kendo-input-flat-focus-bg: null !default;
 $kendo-input-flat-focus-text: null !default;
-$kendo-input-flat-focus-border: $primary !default;
-
-$kendo-input-flat-border-radius: $kendo-border-radius $kendo-border-radius 0px 0px !default;
+$kendo-input-flat-focus-border: $kendo-input-focus-border !default;
+$kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
@@ -11113,37 +11080,37 @@ $kendo-picker-disabled-border: null !default;
 $kendo-picker-disabled-gradient: null !default;
 $kendo-picker-disabled-shadow: null !default;
 
-$kendo-picker-outline-bg: transparent !default;
+$kendo-picker-outline-bg: null !default;
 $kendo-picker-outline-text: $kendo-button-text !default;
-$kendo-picker-outline-border: $kendo-picker-outline-text !default;
+$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
 
-$kendo-picker-outline-hover-bg: $kendo-button-text !default;
-$kendo-picker-outline-hover-text: $body-bg !default;
+$kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
+$kendo-picker-outline-hover-text: contrast-wcag( $kendo-picker-outline-hover-bg ) !default;
 $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
 
-$kendo-picker-outline-focus-bg: transparent !default;
-$kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
-$kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
+$kendo-picker-outline-focus-bg: null !default;
+$kendo-picker-outline-focus-text: null !default;
+$kendo-picker-outline-focus-border: null !default;
 $kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
 
-$kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
-$kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
-$kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
+$kendo-picker-outline-hover-focus-bg: null !default;
+$kendo-picker-outline-hover-focus-text: null !default;
+$kendo-picker-outline-hover-focus-border: null !default;
 
-$kendo-picker-flat-bg: transparent !default;
-$kendo-picker-flat-text: null !default;
-$kendo-picker-flat-border: null !default;
+$kendo-picker-flat-bg: null !default;
+$kendo-picker-flat-text: $kendo-button-text !default;
+$kendo-picker-flat-border: $kendo-button-border !default;
 
 $kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .08 ) !default;
 $kendo-picker-flat-hover-text: null !default;
 $kendo-picker-flat-hover-border: null !default;
 
-$kendo-picker-flat-focus-bg: transparent !default;
+$kendo-picker-flat-focus-bg: null !default;
 $kendo-picker-flat-focus-text: null !default;
-$kendo-picker-flat-focus-border: $kendo-picker-focus-border !default;
+$kendo-picker-flat-focus-border: null !default;
 $kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;
 
-$kendo-picker-flat-hover-focus-bg: rgba( $kendo-button-text, .08 ) !default;
+$kendo-picker-flat-hover-focus-bg: null !default;
 $kendo-picker-flat-hover-focus-text: null !default;
 $kendo-picker-flat-hover-focus-border: null !default;
 
@@ -11521,28 +11488,16 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     // Fill mode
     .k-input-flat,
     .k-picker-flat {
-        @include border-radius( 0 !important ); // sass-lint:disable-line no-important
+        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
         border-width: $kendo-input-border-width 0;
         border-top-color: transparent !important; // sass-lint:disable-line no-important
         background-image: none !important; // sass-lint:disable-line no-important
-
-        &:focus,
-        &.k-focus {
-            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-        }
-        &:focus-within {
-            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-        }
     }
 
     .k-input-outline {
         background: none !important; // sass-lint:disable-line no-important
     }
 
-    .k-picker.k-picker-flat {
-        @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-    }
-
 
     // Sizing
     @each $size, $size-props in $kendo-input-sizes {
@@ -11664,7 +11619,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 @include exports( "input/theme" ) {
 
     // Solid input
-    .k-input {
+    .k-input-solid {
         @include fill(
             $kendo-input-text,
             $kendo-input-bg,
@@ -11701,7 +11656,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include box-shadow( $kendo-input-focus-shadow );
         }
 
-        //Disabled
+        // Disabled
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -11718,7 +11673,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -11726,10 +11681,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
 
@@ -11737,7 +11692,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
 
     // Solid picker
-    .k-picker {
+    .k-picker-solid {
         @include fill(
             $kendo-picker-text,
             $kendo-picker-bg,
@@ -11778,7 +11733,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include box-shadow( $kendo-picker-focus-shadow );
         }
 
-        //Disabled
+        // Disabled
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -11811,7 +11766,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
-    // Outline
+
+    // Outline input
     .k-input-outline {
         @include fill (
             $kendo-input-outline-text,
@@ -11832,6 +11788,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
            }
         }
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -11841,6 +11798,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -11850,12 +11808,33 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
              );
             @include box-shadow ( $kendo-input-outline-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-input-outline-focus-text,
+                $kendo-input-outline-focus-bg,
+                $kendo-input-outline-focus-border
+             );
+            @include box-shadow ( $kendo-input-outline-focus-shadow );
+        }
+
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-input-disabled-text,
+                $kendo-input-disabled-bg,
+                $kendo-input-disabled-border,
+                $kendo-input-disabled-gradient
+            );
+            @include box-shadow( $kendo-input-disabled-shadow );
+        }
 
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -11863,15 +11842,17 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
 
     }
 
+
+    // Outline picker
     .k-picker-outline {
         @include fill (
             $kendo-picker-outline-text,
@@ -11879,6 +11860,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             $kendo-picker-outline-border
         );
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -11888,6 +11870,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -11897,6 +11880,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
             @include box-shadow ( $kendo-picker-outline-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-picker-outline-focus-text,
+                $kendo-picker-outline-focus-bg,
+                $kendo-picker-outline-focus-border
+            );
+            @include box-shadow ( $kendo-picker-outline-focus-shadow );
+        }
 
         &:focus:hover,
         &:focus.k-hover,
@@ -11909,11 +11900,24 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-picker-disabled-text,
+                $kendo-picker-disabled-bg,
+                $kendo-picker-disabled-border,
+                $kendo-picker-disabled-gradient
+            );
+            @include box-shadow( $kendo-picker-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -11921,15 +11925,16 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
     }
 
-    // Flat
+
+    // Flat input
     .k-input-flat {
         @include fill (
             $kendo-input-flat-text,
@@ -11937,6 +11942,17 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             $kendo-input-flat-border
         );
 
+        // Hover
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-input-flat-hover-text,
+                $kendo-input-flat-hover-bg,
+                $kendo-input-flat-hover-border
+            );
+        }
+
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -11944,6 +11960,28 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
                 $kendo-input-flat-focus-bg,
                 $kendo-input-flat-focus-border
             );
+            @include box-shadow( $kendo-input-flat-focus-shadow );
+        }
+        &:focus-within {
+            @include fill (
+                $kendo-input-flat-focus-text,
+                $kendo-input-flat-focus-bg,
+                $kendo-input-flat-focus-border
+            );
+            @include box-shadow( $kendo-input-flat-focus-shadow );
+        }
+
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-input-disabled-text,
+                $kendo-input-disabled-bg,
+                $kendo-input-disabled-border,
+                $kendo-input-disabled-gradient
+            );
+            @include box-shadow( $kendo-input-disabled-shadow );
         }
 
         // Invalid
@@ -11966,6 +12004,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
+
+    // Flat picker
     .k-picker-flat {
         @include fill (
             $kendo-picker-flat-text,
@@ -11973,6 +12013,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             $kendo-picker-flat-border
         );
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -11982,6 +12023,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -11991,6 +12033,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
             @include box-shadow( $kendo-picker-flat-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-picker-flat-focus-text,
+                $kendo-picker-flat-focus-bg,
+                $kendo-picker-flat-focus-border
+            );
+            @include box-shadow( $kendo-picker-flat-focus-shadow );
+        }
 
         &:focus:hover,
         &:focus.k-hover,
@@ -12003,6 +12053,19 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-picker-disabled-text,
+                $kendo-picker-disabled-bg,
+                $kendo-picker-disabled-border,
+                $kendo-picker-disabled-gradient
+            );
+            @include box-shadow( $kendo-picker-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
@@ -18242,6 +18305,16 @@ $slider-disabled-opacity: null !default;
                 flex: 0 0 1px;
             }
 
+            .k-tick-horizontal {
+                width: 1px;
+                min-height: 100%;
+            }
+
+            .k-tick-vertical {
+                width: 100%;
+                min-height: 1px;
+            }
+
             .k-draghandle {
                 position: absolute;
             }
@@ -20512,6 +20585,9 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 2 ) !default;
         }
 
         .k-input-inner {
+            padding-inline-start: 2px;
+            padding-inline-end: 2px;
+            text-align: center;
             text-overflow: clip;
         }
     }
@@ -25057,6 +25133,9 @@ $drawer-font-size: $font-size !default;
 $drawer-line-height: $line-height !default;
 $drawer-content-padding-x: $padding-x !default;
 $drawer-content-padding-y: $padding-y !default;
+$drawer-item-level-padding-x: map-get( $spacing, 4 ) !default;
+
+$drawer-item-level-count: 5 !default;
 
 $drawer-scrollbar-width: 7px !default;
 $drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
@@ -25099,6 +25178,7 @@ $drawer-selected-hover-text: $selected-text !default;
     }
     .k-drawer {
         height: 100%;
+        max-width: 100%;
         border-width: 0;
         border-style: solid;
         box-sizing: border-box;
@@ -25251,6 +25331,20 @@ $drawer-selected-hover-text: $selected-text !default;
             padding: 0 $drawer-item-padding-x;
             display: inline-block;
             white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .k-drawer-toggle {
+            margin-inline-start: auto;
+            cursor: pointer;
+        }
+
+        // Hierarchy items
+        @for $i from 1 through $drawer-item-level-count {
+            &.k-level-#{$i} {
+                padding-inline-start: ( $drawer-item-level-padding-x * $i );
+            }
         }
     }
     .k-drawer-separator {
@@ -29377,6 +29471,7 @@ $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
 $panelbar-line-height: $line-height !default;
 $panelbar-border-width: 1px !default;
+$panelbar-border-style: solid !default;
 $panelbar-item-border-width: 1px !default;
 $panelbar-item-border-style: solid !default;
 
@@ -29484,7 +29579,7 @@ $panelbar-header-expanded-gradient: null !default;
         margin: 0;
         padding: 0;
         border-width: $panelbar-border-width;
-        border-style: solid;
+        border-style: $panelbar-border-style;
         box-sizing: border-box;
         outline: 0;
         font-family: $panelbar-font-family;

package/lib/swatches/bootstrap-3-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#000000",
         "#222222",

package/lib/swatches/bootstrap-3.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/bootstrap-4-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#0275d8",
         "#5bc0de",

package/lib/swatches/bootstrap-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-main.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-nordic.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-turquoise-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#000000",
         "#292b2c",

package/lib/swatches/bootstrap-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f2f2f2",

package/lib/swatches/bootstrap-urban.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/lib/swatches/bootstrap-vintage.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Vintage",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f2efe8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "5.4.2-dev.3",
+  "version": "5.4.2-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,8 +49,8 @@
     "postpublish": "echo 'no postpublish for bootstrap theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.4.2-dev.3",
+    "@progress/kendo-theme-default": "^5.4.2-dev.6",
     "bootstrap": "^5.1.0"
   },
-  "gitHead": "3c98c61d0b83d13dfdc0d722e92c581db0f6269b"
+  "gitHead": "71e608352b1307f0c198c462241a9c8dc00d4542"
 }

package/scss/drawer/_variables.scss

@@ -8,6 +8,9 @@ $drawer-font-size: $font-size !default;
 $drawer-line-height: $line-height !default;
 $drawer-content-padding-x: $padding-x !default;
 $drawer-content-padding-y: $padding-y !default;
+$drawer-item-level-padding-x: map-get( $spacing, 4 ) !default;
+
+$drawer-item-level-count: 5 !default;
 
 $drawer-scrollbar-width: 7px !default;
 $drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;

package/scss/input/_variables.scss

@@ -87,18 +87,21 @@ $kendo-input-outline-hover-border: null !default;
 
 $kendo-input-outline-focus-bg: null !default;
 $kendo-input-outline-focus-text: null !default;
-$kendo-input-outline-focus-border: null !default;
-$kendo-input-outline-focus-shadow: null !default;
+$kendo-input-outline-focus-border: $kendo-input-focus-border !default;
+$kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
 
-$kendo-input-flat-bg: transparent !default;
-$kendo-input-flat-text: null !default;
-$kendo-input-flat-border: null !default;
+$kendo-input-flat-bg: null !default;
+$kendo-input-flat-text: $kendo-input-text !default;
+$kendo-input-flat-border: $kendo-input-border !default;
+
+$kendo-input-flat-hover-bg: null !default;
+$kendo-input-flat-hover-text: null !default;
+$kendo-input-flat-hover-border: $kendo-input-hover-border !default;
 
 $kendo-input-flat-focus-bg: null !default;
 $kendo-input-flat-focus-text: null !default;
-$kendo-input-flat-focus-border: $primary !default;
-
-$kendo-input-flat-border-radius: $kendo-border-radius $kendo-border-radius 0px 0px !default;
+$kendo-input-flat-focus-border: $kendo-input-focus-border !default;
+$kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
@@ -124,37 +127,37 @@ $kendo-picker-disabled-border: null !default;
 $kendo-picker-disabled-gradient: null !default;
 $kendo-picker-disabled-shadow: null !default;
 
-$kendo-picker-outline-bg: transparent !default;
+$kendo-picker-outline-bg: null !default;
 $kendo-picker-outline-text: $kendo-button-text !default;
-$kendo-picker-outline-border: $kendo-picker-outline-text !default;
+$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
 
-$kendo-picker-outline-hover-bg: $kendo-button-text !default;
-$kendo-picker-outline-hover-text: $body-bg !default;
+$kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
+$kendo-picker-outline-hover-text: contrast-wcag( $kendo-picker-outline-hover-bg ) !default;
 $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
 
-$kendo-picker-outline-focus-bg: transparent !default;
-$kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
-$kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
+$kendo-picker-outline-focus-bg: null !default;
+$kendo-picker-outline-focus-text: null !default;
+$kendo-picker-outline-focus-border: null !default;
 $kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
 
-$kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
-$kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
-$kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
+$kendo-picker-outline-hover-focus-bg: null !default;
+$kendo-picker-outline-hover-focus-text: null !default;
+$kendo-picker-outline-hover-focus-border: null !default;
 
-$kendo-picker-flat-bg: transparent !default;
-$kendo-picker-flat-text: null !default;
-$kendo-picker-flat-border: null !default;
+$kendo-picker-flat-bg: null !default;
+$kendo-picker-flat-text: $kendo-button-text !default;
+$kendo-picker-flat-border: $kendo-button-border !default;
 
 $kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .08 ) !default;
 $kendo-picker-flat-hover-text: null !default;
 $kendo-picker-flat-hover-border: null !default;
 
-$kendo-picker-flat-focus-bg: transparent !default;
+$kendo-picker-flat-focus-bg: null !default;
 $kendo-picker-flat-focus-text: null !default;
-$kendo-picker-flat-focus-border: $kendo-picker-focus-border !default;
+$kendo-picker-flat-focus-border: null !default;
 $kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;
 
-$kendo-picker-flat-hover-focus-bg: rgba( $kendo-button-text, .08 ) !default;
+$kendo-picker-flat-hover-focus-bg: null !default;
 $kendo-picker-flat-hover-focus-text: null !default;
 $kendo-picker-flat-hover-focus-border: null !default;
 

package/scss/panelbar/_variables.scss

@@ -5,6 +5,7 @@ $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
 $panelbar-line-height: $line-height !default;
 $panelbar-border-width: 1px !default;
+$panelbar-border-style: solid !default;
 $panelbar-item-border-width: 1px !default;
 $panelbar-item-border-style: solid !default;