@progress/kendo-theme-bootstrap 5.3.2-dev.2 → 5.4.0

package/dist/all.css

@@ -13731,20 +13731,28 @@ textarea.k-input-inner {
     border-radius: 0 !important;
     border-width: 1px 0;
     border-top-color: transparent !important;
-    background: none !important;
+    background-image: none !important;
 }
 
-.k-input-flat .k-input-inner,
-.k-picker-flat .k-input-inner {
-    padding-left: 0 !important;
-    padding-right: 0 !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-outline,
-.k-picker-outline {
+.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;
@@ -14016,10 +14024,14 @@ textarea.k-input-inner {
 }
 
 .k-picker:focus, .k-picker.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 {
+    border-color: #bfc6d0;
+    background-color: #c7cdd5;
     box-shadow: 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
 }
 
@@ -14039,6 +14051,139 @@ textarea.k-input-inner {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
+.k-input-outline {
+    border-color: rgba(33, 37, 41, 0.5);
+    color: #212529;
+}
+
+.k-input-outline > .k-input-button {
+    border-color: inherit;
+}
+
+.k-input-outline > .k-input-spinner {
+    border-color: inherit;
+}
+
+.k-input-outline > .k-input-spinner > .k-spinner-increase,
+.k-input-outline > .k-input-spinner > .k-spinner-decrease {
+    border-color: inherit;
+}
+
+.k-input-outline.k-invalid, .k-input-outline.ng-invalid.ng-touched, .k-input-outline.ng-invalid.ng-dirty {
+    border-color: #dc3545;
+}
+
+.k-input-outline.k-invalid .k-input-validation-icon, .k-input-outline.ng-invalid.ng-touched .k-input-validation-icon, .k-input-outline.ng-invalid.ng-dirty .k-input-validation-icon {
+    color: #dc3545;
+}
+
+.k-input-outline.k-invalid:focus, .k-input-outline.k-invalid.k-focus, .k-input-outline.ng-invalid.ng-touched:focus, .k-input-outline.ng-invalid.ng-touched.k-focus, .k-input-outline.ng-invalid.ng-dirty:focus, .k-input-outline.ng-invalid.ng-dirty.k-focus {
+    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+
+.k-input-outline.k-invalid:focus-within, .k-input-outline.ng-invalid.ng-touched:focus-within, .k-input-outline.ng-invalid.ng-dirty:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+
+.k-picker-outline {
+    border-color: #212529;
+    color: #212529;
+    background-color: transparent;
+}
+
+.k-picker-outline:hover, .k-picker-outline.k-hover {
+    border-color: #212529;
+    color: #ffffff;
+    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.k-invalid, .k-picker-outline.ng-invalid.ng-touched, .k-picker-outline.ng-invalid.ng-dirty {
+    border-color: #dc3545;
+}
+
+.k-picker-outline.k-invalid .k-input-validation-icon, .k-picker-outline.ng-invalid.ng-touched .k-input-validation-icon, .k-picker-outline.ng-invalid.ng-dirty .k-input-validation-icon {
+    color: #dc3545;
+}
+
+.k-picker-outline.k-invalid:focus, .k-picker-outline.k-invalid.k-focus, .k-picker-outline.ng-invalid.ng-touched:focus, .k-picker-outline.ng-invalid.ng-touched.k-focus, .k-picker-outline.ng-invalid.ng-dirty:focus, .k-picker-outline.ng-invalid.ng-dirty.k-focus {
+    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+
+.k-picker-outline.k-invalid:focus-within, .k-picker-outline.ng-invalid.ng-touched:focus-within, .k-picker-outline.ng-invalid.ng-dirty:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+
+.k-input-flat {
+    background-color: transparent;
+}
+
+.k-input-flat:focus, .k-input-flat.k-focus {
+    border-color: #0d6efd;
+}
+
+.k-input-flat.k-invalid, .k-input-flat.ng-invalid.ng-touched, .k-input-flat.ng-invalid.ng-dirty {
+    border-color: #dc3545;
+}
+
+.k-input-flat.k-invalid .k-input-validation-icon, .k-input-flat.ng-invalid.ng-touched .k-input-validation-icon, .k-input-flat.ng-invalid.ng-dirty .k-input-validation-icon {
+    color: #dc3545;
+}
+
+.k-input-flat.k-invalid:focus, .k-input-flat.k-invalid.k-focus, .k-input-flat.ng-invalid.ng-touched:focus, .k-input-flat.ng-invalid.ng-touched.k-focus, .k-input-flat.ng-invalid.ng-dirty:focus, .k-input-flat.ng-invalid.ng-dirty.k-focus {
+    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+
+.k-input-flat.k-invalid:focus-within, .k-input-flat.ng-invalid.ng-touched:focus-within, .k-input-flat.ng-invalid.ng-dirty:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+
+.k-picker-flat {
+    background-color: transparent;
+}
+
+.k-picker-flat:hover, .k-picker-flat.k-hover {
+    background-color: rgba(33, 37, 41, 0.08);
+}
+
+.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.k-invalid, .k-picker-flat.ng-invalid.ng-touched, .k-picker-flat.ng-invalid.ng-dirty {
+    border-color: #dc3545;
+}
+
+.k-picker-flat.k-invalid .k-input-validation-icon, .k-picker-flat.ng-invalid.ng-touched .k-input-validation-icon, .k-picker-flat.ng-invalid.ng-dirty .k-input-validation-icon {
+    color: #dc3545;
+}
+
+.k-picker-flat.k-invalid:focus, .k-picker-flat.k-invalid.k-focus, .k-picker-flat.ng-invalid.ng-touched:focus, .k-picker-flat.ng-invalid.ng-touched.k-focus, .k-picker-flat.ng-invalid.ng-dirty:focus, .k-picker-flat.ng-invalid.ng-dirty.k-focus {
+    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+
+.k-picker-flat.k-invalid:focus-within, .k-picker-flat.ng-invalid.ng-touched:focus-within, .k-picker-flat.ng-invalid.ng-dirty:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+
 .k-floating-label-container {
     padding-top: 1.5rem;
     box-sizing: border-box;
@@ -18614,7 +18759,7 @@ kendo-label > .k-label {
     color: #0d6efd;
 }
 
-.k-calendar .k-nav-today:hover, .k-calendar .k-nav-today.k-state-hover, .k-calendar .k-nav-today:focus, .k-calendar .k-nav-today.k-state-focus {
+.k-calendar .k-nav-today:hover, .k-calendar .k-nav-today.k-hover, .k-calendar .k-nav-today.k-state-hover, .k-calendar .k-nav-today:focus, .k-calendar .k-nav-today.k-state-focus, .k-calendar .k-nav-today.k-focus {
     color: #0a58ca;
 }
 
@@ -18629,7 +18774,8 @@ kendo-label > .k-label {
     box-shadow: inset 0 0 0 1px #0d6efd;
 }
 
-.k-calendar .k-calendar-view .k-today.k-state-focused .k-link {
+.k-calendar .k-calendar-view .k-today.k-state-focused .k-link,
+.k-calendar .k-calendar-view .k-today.k-focus .k-link {
     box-shadow: inset 0 0 0 1px #0d6efd, inset 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
 }
 
@@ -18648,32 +18794,39 @@ kendo-label > .k-label {
 }
 
 .k-calendar .k-calendar-td:hover .k-link,
-.k-calendar .k-calendar-td.k-state-hover .k-link {
+.k-calendar .k-calendar-td.k-state-hover .k-link,
+.k-calendar .k-calendar-td.k-hover .k-link {
     border-color: #d6d9dc;
     color: #212529;
     background-color: #e9ecef;
 }
 
-.k-calendar .k-calendar-td.k-state-selected .k-link {
+.k-calendar .k-calendar-td.k-state-selected .k-link,
+.k-calendar .k-calendar-td.k-selected .k-link {
     border-color: #0c65e9;
     color: white;
     background-color: #0d6efd;
 }
 
 .k-calendar .k-calendar-td.k-state-selected:hover .k-link,
-.k-calendar .k-calendar-td.k-state-selected.k-state-hover .k-link {
+.k-calendar .k-calendar-td.k-state-selected.k-state-hover .k-link,
+.k-calendar .k-calendar-td.k-selected:hover .k-link,
+.k-calendar .k-calendar-td.k-selected.k-hover .k-link {
     border-color: #e4e5e6;
     color: white;
     background-color: #0c6af3;
 }
 
 .k-calendar .k-calendar-td.k-state-focused .k-link,
-.k-calendar .k-calendar-td.k-state-focus .k-link {
+.k-calendar .k-calendar-td.k-state-focus .k-link,
+.k-calendar .k-calendar-td.k-focus .k-link {
     box-shadow: inset 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
 }
 
 .k-calendar .k-calendar-td.k-state-selected.k-state-focused .k-link,
-.k-calendar .k-calendar-td.k-state-selected.k-state-focus .k-link {
+.k-calendar .k-calendar-td.k-state-selected.k-state-focus .k-link,
+.k-calendar .k-calendar-td.k-selected:focus .k-link,
+.k-calendar .k-calendar-td.k-selected.k-focus .k-link {
     box-shadow: inset 0 0 0 2px rgba(2, 82, 201, 0.5);
 }
 
@@ -18684,7 +18837,8 @@ kendo-label > .k-label {
 }
 
 .k-calendar .k-calendar-navigation li:hover,
-.k-calendar .k-calendar-navigation li.k-state-hover {
+.k-calendar .k-calendar-navigation li.k-state-hover,
+.k-calendar .k-calendar-navigation li.k-hover {
     color: #0a58ca;
 }
 
@@ -18732,7 +18886,8 @@ kendo-label > .k-label {
 }
 
 .k-calendar .k-range-start.k-state-active .k-link,
-.k-calendar .k-range-end.k-state-active .k-link {
+.k-calendar .k-range-end.k-state-active .k-link,
+.k-calendar .k-range-end.k-active .k-link {
     box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.2);
 }
 
@@ -22627,7 +22782,11 @@ kendo-card-footer {
     background-color: #ffffff;
 }
 
-.k-card:focus, .k-card.k-state-focus {
+.k-card:focus, .k-card.k-focus, .k-card.k-state-focus {
+    box-shadow: 0 0 0 3px rgba(222, 226, 230, 0.5);
+}
+
+.k-card.k-selected, .k-card.k-state-selected {
     box-shadow: 0 0 0 3px rgba(222, 226, 230, 0.5);
 }
 
@@ -22756,7 +22915,7 @@ kendo-card-footer {
     color: inherit;
 }
 
-.k-card-wrap.k-state-focused > .k-card, .k-card-wrap.k-state-selected > .k-card {
+.k-card-wrap.k-state-focused > .k-card, .k-card-wrap.k-focus > .k-card, .k-card-wrap:focus > .k-card, .k-card-wrap.k-state-selected > .k-card, .k-card-wrap.k-selected > .k-card {
     box-shadow: 0 0 0 3px rgba(222, 226, 230, 0.5);
 }
 
@@ -22766,21 +22925,25 @@ kendo-card-footer {
 }
 
 .k-card:focus .k-card-callout.k-callout-n,
+.k-card.k-focus .k-card-callout.k-callout-n,
 .k-card.k-state-focus .k-card-callout.k-callout-n {
     box-shadow: 0 0 0 3px rgba(222, 226, 230, 0.5);
 }
 
 .k-card:focus .k-card-callout.k-callout-e,
+.k-card.k-focus .k-card-callout.k-callout-e,
 .k-card.k-state-focus .k-card-callout.k-callout-e {
     box-shadow: 0 0 0 3px rgba(222, 226, 230, 0.5);
 }
 
 .k-card:focus .k-card-callout.k-callout-s,
+.k-card.k-focus .k-card-callout.k-callout-s,
 .k-card.k-state-focus .k-card-callout.k-callout-s {
     box-shadow: 3px -3px 0 0 rgba(222, 226, 230, 0.5);
 }
 
 .k-card:focus .k-card-callout.k-callout-w,
+.k-card.k-focus .k-card-callout.k-callout-w,
 .k-card.k-state-focus .k-card-callout.k-callout-w {
     box-shadow: 0 0 0 3px rgba(222, 226, 230, 0.5);
 }
@@ -25218,6 +25381,7 @@ kendo-card-footer {
 }
 
 .k-tilelayout-item:focus,
+.k-tilelayout-item.k-focus,
 .k-tilelayout-item.k-state-focus,
 .k-tilelayout-item.k-state-focused {
     box-shadow: 0 0 0 3px rgba(222, 226, 230, 0.5);
@@ -26985,6 +27149,7 @@ div.k-grid-norecords {
 .k-filter-menu-container kendo-numeric-filter-menu,
 .k-filter-menu-container kendo-grid-string-filter-menu,
 .k-filter-menu-container kendo-grid-date-filter-menu,
+.k-filter-menu-container kendo-grid-numeric-filter-menu,
 .k-filter-menu-container kendo-grid-filter-menu-input-wrapper {
     display: flex;
     flex-flow: column nowrap;
@@ -30245,7 +30410,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     overflow-wrap: anywhere;
 }
 
-.k-taskboard-card .k-card-title:focus, .k-taskboard-card .k-card-title.k-state-focus, .k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-state-hover {
+.k-taskboard-card .k-card-title:focus, .k-taskboard-card .k-card-title.k-focus, .k-taskboard-card .k-card-title.k-state-focus, .k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-hover, .k-taskboard-card .k-card-title.k-state-hover {
     text-decoration: underline;
 }
 
@@ -30317,29 +30482,29 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     color: #0d6efd;
 }
 
-.k-taskboard-card .k-card-title:focus, .k-taskboard-card .k-card-title.k-state-focus {
+.k-taskboard-card .k-card-title:focus, .k-taskboard-card .k-card-title.k-focus, .k-taskboard-card .k-card-title.k-state-focus {
     color: #0b5cd5;
 }
 
-.k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-state-hover {
+.k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-hover, .k-taskboard-card .k-card-title.k-state-hover {
     color: #0b5cd5;
 }
 
-.k-taskboard-card:focus, .k-taskboard-card.k-state-focus {
+.k-taskboard-card:focus, .k-taskboard-card.k-focus, .k-taskboard-card.k-state-focus {
     border-color: #b6b9bd;
     box-shadow: 0 0 0 3px rgba(222, 226, 230, 0.5);
 }
 
-.k-taskboard-card:hover, .k-taskboard-card.k-state-hover {
+.k-taskboard-card:hover, .k-taskboard-card.k-hover, .k-taskboard-card.k-state-hover {
     border-color: #c8cbcf;
 }
 
-.k-taskboard-card.k-state-selected {
+.k-taskboard-card.k-selected, .k-taskboard-card.k-state-selected {
     border-color: #b6d3fe;
     box-shadow: none;
 }
 
-.k-taskboard-card.k-state-disabled {
+.k-taskboard-card.k-disabled, .k-taskboard-card.k-state-disabled {
     outline: none;
     cursor: default;
     opacity: 0.65;
@@ -33359,6 +33524,11 @@ kendo-scheduler .k-event .k-event-actions,
     font-size: 0.875rem;
 }
 
+kendo-scheduler .k-event .k-event-actions:first-child,
+.k-event .k-event-actions:first-child {
+    margin: 0.1ex 0.4ex 0 0.5rem;
+}
+
 .k-scheduler {
     border-color: #dee2e6;
     color: #212529;
@@ -36140,7 +36310,7 @@ kendo-scrollview.k-scrollview-wrap.k-scrollview-light .k-scrollview-nav-wrap,
     border-color: transparent;
 }
 
-.k-orgchart-card:focus, .k-orgchart-card.k-state-focus {
+.k-orgchart-card:focus, .k-orgchart-card.k-focus, .k-orgchart-card.k-state-focus {
     box-shadow: 0 0 0 3px rgba(222, 226, 230, 0.5);
 }
 
@@ -36151,6 +36321,7 @@ kendo-scrollview.k-scrollview-wrap.k-scrollview-light .k-scrollview-nav-wrap,
 }
 
 .k-orgchart-node-group-container:focus,
+.k-orgchart-node-group-container.k-focus,
 .k-orgchart-node-group-container.k-state-focus,
 .k-orgchart-node-group-container.k-state-focused {
     box-shadow: 0 0 0 3px rgba(222, 226, 230, 0.5);

package/dist/all.scss

@@ -10267,13 +10267,13 @@ $kendo-button-selected-shadow: $kendo-button-active-shadow !default;
 
 /// The base background of focused button.
 /// @group button
-$kendo-button-focus-bg: null !default;
+$kendo-button-focus-bg: try-darken( $kendo-button-bg, 10% ) !default;
 /// The base text color of focused button.
 /// @group button
 $kendo-button-focus-text: null !default;
 /// The base border color of focused button.
 /// @group button
-$kendo-button-focus-border: null !default;
+$kendo-button-focus-border: try-darken( $kendo-button-bg, 12.5% ) !default;
 /// The base background gradient of focused button.
 /// @group button
 $kendo-button-focus-gradient: null !default;
@@ -11063,6 +11063,29 @@ $kendo-input-disabled-border: null !default;
 $kendo-input-disabled-gradient: null !default;
 $kendo-input-disabled-shadow: null !default;
 
+$kendo-input-outline-bg: null !default;
+$kendo-input-outline-text: $base-text !default;
+$kendo-input-outline-border: rgba( $base-text, .5 ) !default;
+
+$kendo-input-outline-hover-bg: null !default;
+$kendo-input-outline-hover-text: null !default;
+$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-flat-bg: transparent !default;
+$kendo-input-flat-text: null !default;
+$kendo-input-flat-border: null !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-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
 $kendo-picker-border: $kendo-button-border !default;
@@ -11075,7 +11098,7 @@ $kendo-picker-hover-border: $kendo-button-hover-border !default;
 $kendo-picker-hover-gradient: $kendo-button-hover-gradient !default;
 $kendo-picker-hover-shadow: $kendo-button-hover-shadow !default;
 
-$kendo-picker-focus-bg: $kendo-button-focus-bg !default;
+$kendo-picker-focus-bg: $kendo-button-active-bg !default;
 $kendo-picker-focus-text: $kendo-button-focus-text !default;
 $kendo-picker-focus-border: $kendo-button-focus-border !default;
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
@@ -11087,6 +11110,40 @@ $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-text: $kendo-button-text !default;
+$kendo-picker-outline-border: $kendo-picker-outline-text !default;
+
+$kendo-picker-outline-hover-bg: $kendo-button-text !default;
+$kendo-picker-outline-hover-text: $body-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-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-flat-bg: transparent !default;
+$kendo-picker-flat-text: null !default;
+$kendo-picker-flat-border: null !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-text: null !default;
+$kendo-picker-flat-focus-border: $kendo-picker-focus-border !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-text: null !default;
+$kendo-picker-flat-hover-focus-border: null !default;
+
 $kendo-input-placeholder-text: $input-placeholder-color !default;
 $kendo-input-placeholder-opacity: 1 !default;
 
@@ -11464,19 +11521,25 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         @include border-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: none !important; // sass-lint:disable-line no-important
+        background-image: none !important; // sass-lint:disable-line no-important
 
-        .k-input-inner {
-            padding-left: 0 !important; // sass-lint:disable-line no-important
-            padding-right: 0 !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,
-    .k-picker-outline {
+    .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 {
@@ -11737,6 +11800,218 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
+    // Outline
+    .k-input-outline {
+        @include fill (
+            $kendo-input-outline-text,
+            $kendo-input-outline-bg,
+            $kendo-input-outline-border
+        );
+
+        & > .k-input-button {
+            border-color: inherit;
+        }
+
+        & > .k-input-spinner {
+            border-color: inherit;
+
+            & > .k-spinner-increase,
+            & > .k-spinner-decrease {
+                border-color: inherit;
+           }
+        }
+
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-input-outline-hover-text,
+                $kendo-input-outline-hover-bg,
+                $kendo-input-outline-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            @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 );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow($invalid-shadow);
+            }
+            &:focus-within {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+
+    }
+
+    .k-picker-outline {
+        @include fill (
+            $kendo-picker-outline-text,
+            $kendo-picker-outline-bg,
+            $kendo-picker-outline-border
+        );
+
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-picker-outline-hover-text,
+                $kendo-picker-outline-hover-bg,
+                $kendo-picker-outline-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            @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,
+        &.k-focus:hover,
+        &.k-focus.k-hover {
+            @include fill (
+                $kendo-picker-outline-hover-focus-text,
+                $kendo-picker-outline-hover-focus-bg,
+                $kendo-picker-outline-hover-focus-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow($invalid-shadow);
+            }
+            &:focus-within {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+    }
+
+    // Flat
+    .k-input-flat {
+        @include fill (
+            $kendo-input-flat-text,
+            $kendo-input-flat-bg,
+            $kendo-input-flat-border
+        );
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-input-flat-focus-text,
+                $kendo-input-flat-focus-bg,
+                $kendo-input-flat-focus-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $kendo-input-invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+            &:focus-within {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+        }
+    }
+
+    .k-picker-flat {
+        @include fill (
+            $kendo-picker-flat-text,
+            $kendo-picker-flat-bg,
+            $kendo-picker-flat-border
+        );
+
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-picker-flat-hover-text,
+                $kendo-picker-flat-hover-bg,
+                $kendo-picker-flat-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            @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,
+        &.k-focus:hover,
+        &.k-focus.k-hover {
+            @include fill (
+                $kendo-picker-flat-hover-focus-text,
+                $kendo-picker-flat-hover-focus-bg,
+                $kendo-picker-flat-hover-focus-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $kendo-input-invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+            &:focus-within {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+        }
+    }
+
 }
 
 // #endregion
@@ -18997,9 +19272,11 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             color: $calendar-today-nav-text;
 
             &:hover,
+            &.k-hover,
             &.k-state-hover,
             &:focus,
-            &.k-state-focus {
+            &.k-state-focus,
+            &.k-focus {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -19020,7 +19297,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
                 .k-link {
                     box-shadow: inset 0 0 0 1px $calendar-today-color;
                 }
-                &.k-state-focused .k-link {
+                &.k-state-focused .k-link,
+                &.k-focus .k-link {
                     box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
                 }
             } @else if $calendar-today-style == color {
@@ -19055,7 +19333,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
         // Interactive states
         .k-calendar-td:hover .k-link,
-        .k-calendar-td.k-state-hover .k-link {
+        .k-calendar-td.k-state-hover .k-link,
+        .k-calendar-td.k-hover .k-link {
             @include fill(
                 $calendar-cell-hover-text,
                 $calendar-cell-hover-bg,
@@ -19063,7 +19342,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
                 $calendar-cell-hover-gradient
             );
         }
-        .k-calendar-td.k-state-selected .k-link {
+        .k-calendar-td.k-state-selected .k-link,
+        .k-calendar-td.k-selected .k-link {
             @include fill(
                 $calendar-cell-selected-text,
                 $calendar-cell-selected-bg,
@@ -19072,7 +19352,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             );
         }
         .k-calendar-td.k-state-selected:hover .k-link,
-        .k-calendar-td.k-state-selected.k-state-hover .k-link {
+        .k-calendar-td.k-state-selected.k-state-hover .k-link,
+        .k-calendar-td.k-selected:hover .k-link,
+        .k-calendar-td.k-selected.k-hover .k-link {
             @include fill(
                 $calendar-cell-selected-hover-text,
                 $calendar-cell-selected-hover-bg,
@@ -19081,11 +19363,14 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             );
         }
         .k-calendar-td.k-state-focused .k-link,
-        .k-calendar-td.k-state-focus .k-link {
+        .k-calendar-td.k-state-focus .k-link,
+        .k-calendar-td.k-focus .k-link {
             box-shadow: $calendar-cell-focused-shadow;
         }
         .k-calendar-td.k-state-selected.k-state-focused .k-link,
-        .k-calendar-td.k-state-selected.k-state-focus .k-link {
+        .k-calendar-td.k-state-selected.k-state-focus .k-link,
+        .k-calendar-td.k-selected:focus .k-link,
+        .k-calendar-td.k-selected.k-focus .k-link {
             box-shadow: $calendar-cell-selected-focus-shadow;
         }
 
@@ -19099,7 +19384,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             box-shadow: inset -1px 0 $calendar-navigation-border;
 
             li:hover,
-            li.k-state-hover {
+            li.k-state-hover,
+            li.k-hover {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -19182,7 +19468,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         }
 
         .k-range-start.k-state-active,
-        .k-range-end.k-state-active {
+        .k-range-end.k-state-active,
+        .k-range-end.k-active {
             .k-link {
                 box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
             }
@@ -25789,6 +26076,7 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
         @include box-shadow( $card-shadow );
 
         &:focus,
+        &.k-focus,
         &.k-state-focus {
             @include fill(
                 $card-focus-text,
@@ -25797,6 +26085,11 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
             );
             @include box-shadow( $card-focus-shadow );
         }
+
+        &.k-selected,
+        &.k-state-selected {
+            @include box-shadow( $card-focus-shadow );
+        }
     }
 
 
@@ -25847,7 +26140,10 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
 
     .k-card-wrap {
         &.k-state-focused,
-        &.k-state-selected {
+        &.k-focus,
+        &:focus,
+        &.k-state-selected,
+        &.k-selected {
             > .k-card {
                 @include box-shadow( $card-focus-shadow );
             }
@@ -25869,6 +26165,7 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
     .k-card-callout.k-callout-w { @include box-shadow( $card-callout-box-shadow-w ); }
 
     .k-card:focus .k-card-callout,
+    .k-card.k-focus .k-card-callout,
     .k-card.k-state-focus .k-card-callout {
         @include fill(
             $bg: $card-focus-bg,
@@ -28958,6 +29255,8 @@ $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
 $panelbar-line-height: $line-height !default;
 $panelbar-border-width: 1px !default;
+$panelbar-item-border-width: 1px !default;
+$panelbar-item-border-style: solid !default;
 
 $panelbar-header-padding-x: map-get( $spacing, 6 ) !default;
 $panelbar-header-padding-y: map-get( $spacing, 4 ) !default;
@@ -29086,7 +29385,7 @@ $panelbar-header-expanded-gradient: null !default;
         > .k-panelbar-header {
             // TODO
             border-width: 0;
-            border-style: solid;
+            border-style: $panelbar-item-border-style;
             border-color: inherit;
             display: block;
 
@@ -29109,7 +29408,7 @@ $panelbar-header-expanded-gradient: null !default;
         }
         > .k-item + .k-item,
         > .k-panelbar-header + .k-panelbar-header {
-            border-top-width: 1px;
+            border-top-width: $panelbar-item-border-width;
         }
 
 
@@ -29857,6 +30156,7 @@ $tilelayout-hint-border: $component-border !default;
     }
 
     .k-tilelayout-item:focus,
+    .k-tilelayout-item.k-focus,
     .k-tilelayout-item.k-state-focus,
     .k-tilelayout-item.k-state-focused {
         @include box-shadow($tilelayout-card-focus-shadow);
@@ -31863,6 +32163,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         kendo-numeric-filter-menu,
         kendo-grid-string-filter-menu,
         kendo-grid-date-filter-menu,
+        kendo-grid-numeric-filter-menu,
         kendo-grid-filter-menu-input-wrapper {
             display: flex;
             flex-flow: column nowrap;
@@ -36384,8 +36685,10 @@ $taskboard-drag-placeholder-border: $component-border !default;
             overflow-wrap: anywhere;
 
             &:focus,
+            &.k-focus,
             &.k-state-focus,
             &:hover,
+            &.k-hover,
             &.k-state-hover {
                 text-decoration: underline;
             }
@@ -36516,32 +36819,38 @@ $taskboard-drag-placeholder-border: $component-border !default;
             @include fill( $color: $taskboard-card-header-text );
 
             &:focus,
+            &.k-focus,
             &.k-state-focus {
                 @include fill( $color: $taskboard-card-header-focus-text );
             }
 
             &:hover,
+            &.k-hover,
             &.k-state-hover {
                 @include fill( $color: $taskboard-card-header-hover-text );
             }
         }
 
         &:focus,
+        &.k-focus,
         &.k-state-focus {
             @include fill( $border: $taskboard-card-focus-border );
             @include box-shadow( $taskboard-card-focus-shadow );
         }
 
         &:hover,
+        &.k-hover,
         &.k-state-hover {
             @include fill( $border: $taskboard-card-hover-border );
         }
 
+        &.k-selected,
         &.k-state-selected {
             @include fill( $border: $taskboard-card-selected-border );
             @include box-shadow( $taskboard-card-selected-shadow );
         }
 
+        &.k-disabled,
         &.k-state-disabled {
             @include disabled( $disabled-styling );
         }
@@ -40297,6 +40606,9 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         .k-event-actions {
             right: $padding-x-sm;
             font-size: $font-size-sm;
+            &:first-child {
+                margin: .1ex .4ex 0 $padding-x-sm;
+            }
         }
     }
 
@@ -44159,6 +44471,7 @@ $orgchart-line-v-height: 25px !default;
         }
 
         &:focus,
+        &.k-focus,
         &.k-state-focus {
             @include box-shadow( $orgchart-card-focus-shadow );
         }
@@ -44173,6 +44486,7 @@ $orgchart-line-v-height: 25px !default;
         );
     }
     .k-orgchart-node-group-container:focus,
+    .k-orgchart-node-group-container.k-focus,
     .k-orgchart-node-group-container.k-state-focus,
     .k-orgchart-node-group-container.k-state-focused {
         @include box-shadow( $orgchart-node-group-focus-shadow );

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "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.3.2-dev.2",
+    "version": "5.4.0",
     "previewColors": [
         "#ffffff",
         "#f2efe8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "5.3.2-dev.2",
+  "version": "5.4.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,8 +49,8 @@
     "postpublish": "echo 'no postpublish for bootstrap theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.3.2-dev.2",
+    "@progress/kendo-theme-default": "^5.4.0",
     "bootstrap": "^5.1.0"
   },
-  "gitHead": "be486e034baed68c866f3b61313899b350317d60"
+  "gitHead": "b22eb7cb9edd01d6088487b6f0c0178dd1eb3847"
 }

package/scss/button/_variables.scss

@@ -121,13 +121,13 @@ $kendo-button-selected-shadow: $kendo-button-active-shadow !default;
 
 /// The base background of focused button.
 /// @group button
-$kendo-button-focus-bg: null !default;
+$kendo-button-focus-bg: try-darken( $kendo-button-bg, 10% ) !default;
 /// The base text color of focused button.
 /// @group button
 $kendo-button-focus-text: null !default;
 /// The base border color of focused button.
 /// @group button
-$kendo-button-focus-border: null !default;
+$kendo-button-focus-border: try-darken( $kendo-button-bg, 12.5% ) !default;
 /// The base background gradient of focused button.
 /// @group button
 $kendo-button-focus-gradient: null !default;

package/scss/input/_variables.scss

@@ -77,6 +77,29 @@ $kendo-input-disabled-border: null !default;
 $kendo-input-disabled-gradient: null !default;
 $kendo-input-disabled-shadow: null !default;
 
+$kendo-input-outline-bg: null !default;
+$kendo-input-outline-text: $base-text !default;
+$kendo-input-outline-border: rgba( $base-text, .5 ) !default;
+
+$kendo-input-outline-hover-bg: null !default;
+$kendo-input-outline-hover-text: null !default;
+$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-flat-bg: transparent !default;
+$kendo-input-flat-text: null !default;
+$kendo-input-flat-border: null !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-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
 $kendo-picker-border: $kendo-button-border !default;
@@ -89,7 +112,7 @@ $kendo-picker-hover-border: $kendo-button-hover-border !default;
 $kendo-picker-hover-gradient: $kendo-button-hover-gradient !default;
 $kendo-picker-hover-shadow: $kendo-button-hover-shadow !default;
 
-$kendo-picker-focus-bg: $kendo-button-focus-bg !default;
+$kendo-picker-focus-bg: $kendo-button-active-bg !default;
 $kendo-picker-focus-text: $kendo-button-focus-text !default;
 $kendo-picker-focus-border: $kendo-button-focus-border !default;
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
@@ -101,6 +124,40 @@ $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-text: $kendo-button-text !default;
+$kendo-picker-outline-border: $kendo-picker-outline-text !default;
+
+$kendo-picker-outline-hover-bg: $kendo-button-text !default;
+$kendo-picker-outline-hover-text: $body-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-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-flat-bg: transparent !default;
+$kendo-picker-flat-text: null !default;
+$kendo-picker-flat-border: null !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-text: null !default;
+$kendo-picker-flat-focus-border: $kendo-picker-focus-border !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-text: null !default;
+$kendo-picker-flat-hover-focus-border: null !default;
+
 $kendo-input-placeholder-text: $input-placeholder-color !default;
 $kendo-input-placeholder-opacity: 1 !default;
 

package/scss/panelbar/_variables.scss

@@ -5,6 +5,8 @@ $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
 $panelbar-line-height: $line-height !default;
 $panelbar-border-width: 1px !default;
+$panelbar-item-border-width: 1px !default;
+$panelbar-item-border-style: solid !default;
 
 $panelbar-header-padding-x: map-get( $spacing, 6 ) !default;
 $panelbar-header-padding-y: map-get( $spacing, 4 ) !default;

package/scss/scheduler/_layout.scss

@@ -25,6 +25,9 @@
         .k-event-actions {
             right: $padding-x-sm;
             font-size: $font-size-sm;
+            &:first-child {
+                margin: .1ex .4ex 0 $padding-x-sm;
+            }
         }
     }