@progress/kendo-theme-fluent 5.8.2-dev.4 → 5.8.2-dev.5

package/dist/all.css

@@ -893,7 +893,6 @@
 .k-disabled {
   outline: none;
   cursor: default;
-  background-color: var(--kendo-disabled-bg, inherit);
   color: var(--kendo-disabled-text, inherit);
   border-color: var(--kendo-disabled-border, inherit);
   pointer-events: none;
@@ -21481,6 +21480,7 @@ kendo-badge-container {
 
 .k-color-preview-mask {
   width: 100%;
+  min-width: var(--kendo-icon-size, 1rem);
   height: 100%;
   position: relative;
 }
@@ -25517,6 +25517,8 @@ textarea.k-input-inner {
   display: flex;
   overflow: unset;
   flex-shrink: 0;
+  grid-column: 1/-1;
+  grid-row: 2/-1;
 }
 .k-progress-status-wrap.k-progress-start {
   justify-content: flex-start;
@@ -25574,10 +25576,10 @@ textarea.k-input-inner {
 }
 .k-progressbar-vertical .k-progress-status-wrap {
   flex-direction: column;
-  align-items: flex-end;
+  align-items: flex-start;
+  margin-inline-start: var(--kendo-progressbar-vertical-status-offset, calc(var(--kendo-font-size-sm, inherit)*var(--kendo-line-height, inherit)*-1 + -0.5rem));
   grid-row: 1/-1;
-  grid-column: 1/-1;
-  margin-inline-start: var(--kendo-progressbar-offset-y, -0.5rem);
+  grid-column: -1/1;
 }
 .k-progressbar-vertical .k-progress-status {
   -ms-writing-mode: tb-lr;
@@ -26528,13 +26530,13 @@ textarea.k-input-inner {
 .k-slider-thumb:active, .k-draghandle:active, .k-slider-thumb.k-active, .k-active.k-draghandle {
   --INTERNAL--kendo-slider-thumb-bg: var(--kendo-component-bg, transparent);
   --INTERNAL--kendo-slider-thumb-text: inherit;
-  --INTERNAL--kendo-slider-thumb-border: var(--kendo-primary-120, inherit);
+  --INTERNAL--kendo-slider-thumb-border: var(--kendo-primary-130, inherit);
   --INTERNAL--kendo-slider-thumb-gradient: transparent;
 }
 .k-slider-thumb:focus, .k-draghandle:focus, .k-slider-thumb.k-focus, .k-focus.k-draghandle {
   --INTERNAL--kendo-slider-thumb-bg: var(--kendo-component-bg, transparent);
   --INTERNAL--kendo-slider-thumb-text: inherit;
-  --INTERNAL--kendo-slider-thumb-border: var(--kendo-primary-120, inherit);
+  --INTERNAL--kendo-slider-thumb-border: var(--kendo-primary-130, inherit);
   --INTERNAL--kendo-slider-thumb-gradient: transparent;
 }
 
@@ -26770,7 +26772,7 @@ textarea.k-input-inner {
   padding-inline-end: 100px;
   padding-inline-start: 100px;
   margin-inline-start: -100px;
-  margin-inline-end: -117px;
+  margin-inline-end: calc(-100px - var(--kendo-scrollbar-width, 17px));
 }
 
 .k-calendar .k-scrollable-placeholder {
@@ -26889,7 +26891,6 @@ textarea.k-input-inner {
 .k-calendar-range .k-range-mid::before {
   content: "";
   position: absolute;
-  z-index: 1;
   inset: 0px;
   border-style: solid;
   border-width: var(--INTERNAL--kendo-calendar-range-border-width, 0);
@@ -26950,6 +26951,14 @@ textarea.k-input-inner {
 .k-calendar .k-calendar-nav-today.k-focus {
   color: var(--kendo-calendar-today-nav-hover-text, var(--kendo-link-hover-text, initial));
 }
+.k-calendar .k-nav-today.k-disabled,
+.k-calendar .k-calendar-nav-today.k-disabled {
+  outline: none;
+  cursor: default;
+  color: var(--kendo-disabled-text, inherit);
+  pointer-events: none;
+  box-shadow: none;
+}
 .k-calendar .k-calendar-th {
   color: var(--kendo-calendar-header-cell-text, inherit);
 }
@@ -27043,6 +27052,7 @@ textarea.k-input-inner {
   --kendo-calendar-cell-bg: var( --kendo-calendar-range-bg, var(--kendo-neutral-30, inherit) );
   --kendo-calendar-cell-text: var( --kendo-calendar-range-text, inherit );
   --kendo-calendar-cell-link-bg: transparent;
+  --kendo-calendar-cell-selected-bg: transparent;
   --kendo-calendar-cell-selected-shadow: none;
 }
 .k-calendar .k-calendar-td.k-range-start::before, .k-calendar .k-calendar-td.k-range-end::before, .k-calendar .k-calendar-td.k-range-mid::before {
@@ -27116,7 +27126,7 @@ textarea.k-input-inner {
   border-style: solid;
   box-sizing: border-box;
   position: absolute;
-  top: calc(50% + var(--kendo-time-list-title-height, calc( var(--kendo-font-size-xs, inherit) * var(--kendo-line-height-lg, inherit) )) / 2);
+  top: calc(50% + var(--kendo-time-list-title-height, calc( 0.75rem + var(--kendo-font-size-xs, inherit) * var(--kendo-line-height-lg, inherit) )) / 2);
   left: 0;
   right: 0;
   transform: translateY(-50%);
@@ -27157,7 +27167,7 @@ textarea.k-input-inner {
   border-style: solid;
 }
 .k-time-list-wrapper.k-focus::before {
-  top: calc(var(--kendo-time-list-title-spacing, 0.75rem) + var(--kendo-time-list-title-height, calc( var(--kendo-font-size-xs, inherit) * var(--kendo-line-height-lg, inherit) )));
+  top: calc(var(--kendo-time-list-title-height, calc( 0.75rem + var(--kendo-font-size-xs, inherit) * var(--kendo-line-height-lg, inherit) )));
 }
 .k-time-list-wrapper.k-focus::after {
   bottom: 0;
@@ -27200,7 +27210,7 @@ textarea.k-input-inner {
   padding-inline-end: 100px;
   padding-inline-start: 100px;
   margin-inline-start: -100px;
-  margin-inline-end: -117px;
+  margin-inline-end: calc(-100px - var(--kendo-scrollbar-width, 17px));
 }
 .k-time-container > ul,
 .k-time-list-content > ul {
@@ -27225,12 +27235,12 @@ textarea.k-input-inner {
   width: 0;
   height: var(--kendo-time-list-highlight-height, calc(var(--kendo-font-size, inherit)*var(--kendo-line-height, normal) + 0.5rem));
   align-self: center;
-  display: inline-flex;
+  display: var(--kendo-time-list-separator-display, none);
   justify-content: center;
   align-items: center;
   position: relative;
   z-index: 11;
-  top: calc(var(--kendo-time-list-title-height, calc( var(--kendo-font-size-xs, inherit) * var(--kendo-line-height-lg, inherit) )) / 2);
+  top: calc(var(--kendo-time-list-title-height, calc( 0.75rem + var(--kendo-font-size-xs, inherit) * var(--kendo-line-height-lg, inherit) )) / 2);
 }
 
 .k-timeselector-sm {
@@ -29703,6 +29713,11 @@ k-datetimepicker[dir=rtl] .k-time-tab .k-datetime-selector, .k-rtl k-datetimepic
   align-self: center;
   align-items: center;
 }
+.k-toolbar .k-toolbar-item:focus,
+.k-toolbar .k-toolbar-item.k-focus {
+  outline-width: var(--kendo-toolbar-item-focus-outline-width, 1px);
+  outline-style: var(--kendo-toolbar-item-focus-outline-style, solid);
+}
 
 .k-toolbar-group {
   display: flex;
@@ -29802,6 +29817,10 @@ kendo-toolbar-renderer {
 .k-toolbar .k-separator {
   border-color: var(--kendo-toolbar-separator-border, var(--kendo-neutral-60, inherit));
 }
+.k-toolbar .k-toolbar-item:focus,
+.k-toolbar .k-toolbar-item.k-focus {
+  outline-color: var(--kendo-toolbar-item-focus-outline-color, var(--kendo-neutral-130, inherit));
+}
 
 .k-overflow-container .k-button:hover, .k-overflow-container .k-button.k-hover {
   color: var(--kendo-menu-popup-item-hover-text, initial);
@@ -34258,26 +34277,26 @@ kendo-card-footer {
   margin-inline-start: calc(var(--kendo-grid-group-indicator-gap, 0.75rem)/2);
 }
 
-.k-grouping-dropclue {
+.k-grouping-dropclue, .k-reorder-cue {
   width: calc(var(--kendo-grid-group-dropclue-size, 6px)*2);
   height: var(--kendo-grid-group-dropclue-height, calc(var(--kendo-line-height, normal)*1em + 0.875rem + 6px));
   position: absolute;
   top: var(--kendo-grid-group-dropclue-top, 2px);
   box-sizing: content-box;
 }
-.k-grouping-dropclue::before, .k-grouping-dropclue::after {
+.k-grouping-dropclue::before, .k-reorder-cue::before, .k-grouping-dropclue::after, .k-reorder-cue::after {
   display: inline-block;
   content: "";
   position: absolute;
 }
-.k-grouping-dropclue::before {
+.k-grouping-dropclue::before, .k-reorder-cue::before {
   width: var(--kendo-grid-group-dropclue-dot-size, 6px);
   height: var(--kendo-grid-group-dropclue-dot-size, 6px);
   border-radius: 50%;
   top: 0;
   left: calc(var(--kendo-grid-group-dropclue-dot-size, 6px)/2);
 }
-.k-grouping-dropclue::after {
+.k-grouping-dropclue::after, .k-reorder-cue::after {
   width: var(--kendo-grid-group-dropclue-line-size, 1px);
   height: calc(100% - var(--kendo-grid-group-dropclue-size, 6px));
   top: var(--kendo-grid-group-dropclue-size, 6px);
@@ -34433,7 +34452,7 @@ div.k-grid-footer {
 }
 
 .k-grid-filter-popup {
-  min-width: 200px;
+  min-width: 230px;
 }
 
 .k-grid-column-menu-standalone a.k-grid-filter {
@@ -34963,7 +34982,7 @@ div.k-grid-norecords {
 .k-filter-menu-container .k-action-buttons,
 .k-filter-menu-container .k-columnmenu-actions, .k-filter-menu-container .k-form-buttons {
   margin: 0;
-  padding-block-start: var(--kendo-filter-menu-container-padding-y, 0.75rem);
+  padding-block-start: calc(var(--kendo-filter-menu-container-padding-y, 0.75rem) - var(--kendo-grid-column-menu-spacing, 0.5rem));
   padding-block-end: 0;
   padding-inline: 0;
 }
@@ -35176,7 +35195,7 @@ tbody .k-group-cell {
   background-color: var(--kendo-grid-grouping-row-bg, var(--kendo-component-bg, initial));
 }
 
-.k-grouping-dropclue::before, .k-grouping-dropclue::after {
+.k-grouping-dropclue::before, .k-reorder-cue::before, .k-grouping-dropclue::after, .k-reorder-cue::after {
   background-color: var(--kendo-grid-group-dropclue-bg, var(--kendo-primary-100, inherit));
 }
 
@@ -35478,6 +35497,13 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .k-column-menu .k-check-all-wrap {
   border-color: var(--kendo-component-border, initial);
 }
+.k-column-menu .k-listgroup-item.k-disabled {
+  outline: none;
+  cursor: default;
+  background-color: var(--kendo-disabled-bg, inherit);
+  pointer-events: none;
+  box-shadow: none;
+}
 
 .k-grid-norecords-template {
   background-color: var(--kendo-component-bg, initial);
@@ -37521,6 +37547,10 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .k-filter .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
   background-color: var(--kendo-filter-line-bg, var(--kendo-component-border, initial));
 }
+.k-filter .k-toolbar:focus,
+.k-filter .k-toolbar.k-focus {
+  border-color: var(--kendo-filter-toolbar-focus-border, var(--kendo-neutral-130, inherit));
+}
 
 .k-filemanager {
   border-width: var(--kendo-filemanager-border-width, 1px);
@@ -38640,6 +38670,14 @@ kendo-editor.k-readonly .k-editor-content.k-focus {
   color: var(---kendo-editor-ct-popup-text, var(--kendo-selected-text, initial));
   background-color: var(--kendo-editor-ct-popup-bg, var(--kendo-selected-bg, initial));
 }
+.k-ct-popup .k-disabled:not(.k-selected) {
+  outline: none;
+  cursor: default;
+  background-color: var(--kendo-disabled-bg, inherit);
+  border-color: var(--kendo-disabled-border, inherit);
+  pointer-events: none;
+  box-shadow: none;
+}
 
 .k-editor-content .k-text-selected, .k-editor-content::selection {
   color: var(--kendo-editor-selected-text, #ffffff);
@@ -39604,6 +39642,9 @@ kendo-editor.k-readonly .k-editor-content.k-focus {
 .k-task-single .k-task-complete {
   background-color: var(--kendo-gantt-task-progress-bg, var(--kendo-neutral-160, inherit));
 }
+.k-task-single:hover .k-task-complete {
+  background-color: var(--kendo-gantt-task-progress-hover-bg, var(--kendo-neutral-190, inherit));
+}
 
 .k-task-delayed .k-task-complete {
   background-color: var(--kendo-gantt-delayed-bg, var(--kendo-error-160, inherit));
@@ -39612,6 +39653,9 @@ kendo-editor.k-readonly .k-editor-content.k-focus {
 .k-task-advanced .k-task-complete {
   background-color: var(--kendo-gantt-advanced-bg, var(--kendo-success-160, inherit));
 }
+.k-task-advanced:hover .k-task-complete {
+  background-color: var(--kendo-gantt-advanced-hover-bg, var(--kendo-success-190, inherit));
+}
 
 .k-task-single.k-selected {
   border-color: var(--kendo-gantt-task-selected-border, transparent);
@@ -41646,7 +41690,7 @@ kendo-scheduler .k-recurrence-editor {
   box-sizing: border-box;
 }
 .k-timeline ul {
-  margin: 0;
+  margin: 0 0 1px 0;
   padding: 0;
 }
 .k-timeline ul li {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "5.8.2-dev.4",
+  "version": "5.8.2-dev.5",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,10 +45,10 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "^0.4.0",
-    "@progress/kendo-theme-utils": "^5.8.2-dev.4"
+    "@progress/kendo-theme-utils": "^5.8.2-dev.5"
   },
   "devDependencies": {
     "sass-build": "^1.0.0"
   },
-  "gitHead": "03c192e0d4c7227c7d8f41b7fefee897888e6218"
+  "gitHead": "071af936605691a801eaa4de3b8714e6223670f4"
 }

package/scss/calendar/_layout.scss

@@ -412,7 +412,6 @@
             &::before {
                 content: "";
                 position: absolute;
-                z-index: 1;
                 inset: 0px;
                 border-style: solid;
                 border-width: var( --INTERNAL--kendo-calendar-range-border-width, 0 );

package/scss/calendar/_theme.scss

@@ -30,6 +30,12 @@
             &.k-focus {
                 color: var( --kendo-calendar-today-nav-hover-text, #{$kendo-calendar-today-nav-hover-text});
             }
+
+            &.k-disabled {
+                @include disabled(
+                    $color: var( --kendo-disabled-text, inherit )
+                );
+            }
         }
 
 
@@ -185,6 +191,7 @@
             --kendo-calendar-cell-bg: var( --kendo-calendar-range-bg, #{$kendo-calendar-range-bg} );
             --kendo-calendar-cell-text: var( --kendo-calendar-range-text, #{$kendo-calendar-range-text} );
             --kendo-calendar-cell-link-bg: transparent;
+            --kendo-calendar-cell-selected-bg: transparent;
             --kendo-calendar-cell-selected-shadow: none;
 
             &::before {

package/scss/color-preview/_layout.scss

@@ -49,6 +49,7 @@
     // Color Preview Mask
     .k-color-preview-mask {
         width: 100%;
+        min-width: var( --kendo-icon-size, 1rem );
         height: 100%;
         position: relative;
     }

package/scss/core/helpers/_base.scss

@@ -7,9 +7,8 @@
 .k-widget[disabled],
 .k-disabled {
     @include disabled(
-        var( --kendo-disabled-text, inherit ),
-        var( --kendo-disabled-bg, inherit ),
-        var( --kendo-disabled-border, inherit )
+        $color: var( --kendo-disabled-text, inherit ),
+        $border: var( --kendo-disabled-border, inherit )
     );
 
     .k-link {

package/scss/core/mixins/_hide-scrollbar.scss

@@ -1,8 +1,9 @@
+@use "../variables.scss" as *;
 // Infinite calendar and timepicker
 @mixin hide-scrollbar($max-scrollbar: 100px) {
     // anything larger than the scrollbar width will do
-    $scrollbar-size: 17px;
-    $margin: -$max-scrollbar - $scrollbar-size;
+    $scrollbar-size: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
+    $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
 
     padding-inline-end: $max-scrollbar;
     padding-inline-start: $max-scrollbar;

package/scss/editor/_theme.scss

@@ -77,6 +77,13 @@
                 var( --kendo-editor-ct-popup-border, #{$kendo-editor-ct-popup-border} )
             );
         }
+
+        .k-disabled:not(.k-selected) {
+            @include disabled(
+                $bg: var( --kendo-disabled-bg, inherit ),
+                $border: var( --kendo-disabled-border, inherit )
+            );
+        }
     }
 
     // Content

package/scss/filter/_theme.scss

@@ -20,6 +20,12 @@
         .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
             background-color: var( --kendo-filter-line-bg, #{$kendo-filter-line-bg} );
         }
+
+        // Focus
+        .k-toolbar:focus,
+        .k-toolbar.k-focus {
+            border-color: var( --kendo-filter-toolbar-focus-border, #{$kendo-filter-toolbar-focus-border} );
+        }
     }
 
 }

package/scss/filter/_variables.scss

@@ -33,3 +33,7 @@ $kendo-filter-text: var( --kendo-component-text, initial ) !default;
 /// Background color of the line that connects the filter items.
 /// @group filter
 $kendo-filter-line-bg: var( --kendo-component-border, initial ) !default;
+
+/// Border color of the focused filter.
+/// @group filter
+$kendo-filter-toolbar-focus-border: get-theme-color-var( neutral-130 ) !default;

package/scss/gantt/_theme.scss

@@ -157,17 +157,34 @@
                 $bg: var( --kendo-gantt-task-progress-bg, #{$kendo-gantt-task-progress-bg} )
             );
         }
+
+        &:hover {
+            .k-task-complete {
+                background-color: var( --kendo-gantt-task-progress-hover-bg, #{$kendo-gantt-task-progress-hover-bg} )
+            }
+        }
     }
+
     .k-task-delayed .k-task-complete {
         @include fill(
             $bg: var( --kendo-gantt-delayed-bg, #{$kendo-gantt-delayed-bg} )
         );
     }
-    .k-task-advanced .k-task-complete {
-        @include fill(
-            $bg: var( --kendo-gantt-advanced-bg, #{$kendo-gantt-advanced-bg} )
-        );
+
+    .k-task-advanced {
+        .k-task-complete {
+            @include fill(
+                $bg: var( --kendo-gantt-advanced-bg, #{$kendo-gantt-advanced-bg} )
+            );
+        }
+
+        &:hover {
+            .k-task-complete {
+                background-color: var( --kendo-gantt-advanced-hover-bg, #{$kendo-gantt-advanced-hover-bg} );
+            }
+        }
     }
+
     .k-task-single.k-selected {
         @include fill(
             var( --kendo-gantt-task-selected-text, #{$kendo-gantt-task-selected-text} ),

package/scss/gantt/_variables.scss

@@ -110,6 +110,9 @@ $kendo-gantt-task-border: inherit !default;
 /// Background color of the gantt task progress.
 /// @group gantt
 $kendo-gantt-task-progress-bg: get-theme-color-var( neutral-160 ) !default;
+/// Background hover color of the gantt task progress.
+/// @group gantt
+$kendo-gantt-task-progress-hover-bg: get-theme-color-var( neutral-190 ) !default;
 /// Selected background color of the gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-bg: get-theme-color-var( primary-50 ) !default;
@@ -207,6 +210,9 @@ $kendo-gantt-advanced-bg: get-theme-color-var( success-160 ) !default;
 /// Complement background color of the gantt advanced task.
 /// @group gantt
 $kendo-gantt-advanced-bg-lighter: get-theme-color-var( success-110 ) !default;
+/// Background hover color of the gantt advanced task.
+/// @group gantt
+$kendo-gantt-advanced-hover-bg: get-theme-color-var( success-190 ) !default;
 
 /// Text color of the gantt delayed task action.
 /// @group gantt

package/scss/grid/_layout.scss

@@ -353,6 +353,10 @@
         }
     }
 
+    // Alias used in jQuery
+    .k-reorder-cue {
+        @extend .k-grouping-dropclue;
+    }
 
     // Grid header / footer
     .k-grid-header-wrap,
@@ -514,7 +518,7 @@
     }
 
     .k-grid-filter-popup {
-        min-width: 200px;
+        min-width: 230px;
     }
 
     // Standalone column menu
@@ -1090,7 +1094,7 @@
 
         .k-actions {
             margin: 0;
-            padding-block-start: var( --kendo-filter-menu-container-padding-y, #{$kendo-filter-menu-container-padding-y} );
+            padding-block-start: calc( var( --kendo-filter-menu-container-padding-y, #{$kendo-filter-menu-container-padding-y} ) - var( --kendo-grid-column-menu-spacing, #{$kendo-grid-column-menu-spacing} ) ) ;
             padding-block-end: 0;
             padding-inline: 0;
         }

package/scss/grid/_theme.scss

@@ -484,6 +484,14 @@
         .k-check-all-wrap {
             @include fill( $border: $kendo-popup-border );
         }
+
+        .k-listgroup-item {
+            &.k-disabled {
+                @include disabled(
+                    $bg: var( --kendo-disabled-bg, inherit )
+                );
+            }
+        }
     }
 
 

package/scss/progressbar/_layout.scss

@@ -67,6 +67,8 @@
         display: flex;
         overflow: unset;
         flex-shrink: 0;
+        grid-column: 1/-1;
+        grid-row: 2/-1;
 
         &.k-progress-start { justify-content: flex-start; }
         &.k-progress-center { justify-content: center; }
@@ -137,10 +139,10 @@
 
         .k-progress-status-wrap {
             flex-direction: column;
-            align-items: flex-end;
-            grid-row: 1 / -1;
-            grid-column: 1 / -1;
-            margin-inline-start: var( --kendo-progressbar-offset-y, #{- $kendo-progressbar-offset-y} );
+            align-items: flex-start;
+            margin-inline-start: var( --kendo-progressbar-vertical-status-offset, #{$kendo-progressbar-vertical-status-offset} );
+            grid-row: 1/-1;
+            grid-column: -1/1;
         }
 
         .k-progress-status {

package/scss/progressbar/_variables.scss

@@ -27,13 +27,10 @@ $kendo-progressbar-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// @group progressbar
 $kendo-progressbar-line-height: var( --kendo-line-height, inherit ) !default;
 
-///  of the progressbar.
-/// @group progressbar
-$kendo-progressbar-offset-y: map-get( $kendo-spacing, 2 ) !default;
-///  of the progressbar.
+/// Horizontal padding of the progressbar.
 /// @group progressbar
 $kendo-progressbar-padding-x: 0 !default;
-///  of the progressbar.
+/// Vertical padding of the progressbar.
 /// @group progressbar
 $kendo-progressbar-padding-y: 0 !default;
 
@@ -73,6 +70,13 @@ $kendo-progressbar-fill-border: $kendo-progressbar-fill-bg !default;
 /// @group progressbar
 $kendo-progressbar-fill-gradient: null !default;
 
+/// Progress status offset of the progressbar.
+/// @group progressbar
+$kendo-progressbar-offset-y: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical status offset of the progressbar.
+/// @group progressbar
+$kendo-progressbar-vertical-status-offset: calc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1) !default;
+
 /// Progress background color of the disabled progressbar.
 /// @group progressbar
 $kendo-progressbar-fill-disabled-bg: get-theme-color-var( primary-30 ) !default;

package/scss/slider/_variables.scss

@@ -103,7 +103,7 @@ $kendo-slider-thumb-active-bg: $kendo-slider-thumb-hover-bg !default;
 $kendo-slider-thumb-active-text: inherit !default;
 /// The active border color of the slider thumb.
 /// @group slider
-$kendo-slider-thumb-active-border: $kendo-slider-thumb-hover-border !default;
+$kendo-slider-thumb-active-border: get-theme-color-var( primary-130 ) !default;
 /// The active gradient of the slider thumb.
 /// @group slider
 $kendo-slider-thumb-active-gradient: transparent !default;
@@ -116,7 +116,7 @@ $kendo-slider-thumb-focus-bg: $kendo-slider-thumb-hover-bg !default;
 $kendo-slider-thumb-focus-text: inherit !default;
 /// The focus border color of the slider thumb.
 /// @group slider
-$kendo-slider-thumb-focus-border: $kendo-slider-thumb-hover-border !default;
+$kendo-slider-thumb-focus-border: $kendo-slider-thumb-active-border !default;
 /// The focus gradient of the slider thumb.
 /// @group slider
 $kendo-slider-thumb-focus-gradient: transparent !default;

package/scss/timeline/_layout.scss

@@ -24,7 +24,7 @@
         }
 
         ul {
-            margin: 0;
+            margin: 0 0 1px 0;
             padding: 0;
 
             li {

package/scss/timeselector/_layout.scss

@@ -121,7 +121,7 @@
             }
 
             &::before {
-                top: calc( var( --kendo-time-list-title-spacing, #{$kendo-time-list-title-spacing} ) + var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) );
+                top: calc( var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) );
             }
 
             &::after {
@@ -197,7 +197,7 @@
         width: 0;
         height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
         align-self: center;
-        display: inline-flex;
+        display: var( --kendo-time-list-separator-display, #{$kendo-time-list-separator-display} );
         justify-content: center;
         align-items: center;
         position: relative;

package/scss/timeselector/_variables.scss

@@ -35,6 +35,9 @@ $kendo-time-selector-header-padding-y: map-get( $kendo-spacing, 3 ) !default;
 /// @group time-selector
 $kendo-time-selector-header-border-width: 0px !default;
 
+/// Visibility of the time-selector separator.
+/// @group time-selector
+$kendo-time-list-separator-display: none;
 /// Minimum width of the time-selector columns.
 /// @group time-selector
 $kendo-time-list-width: 4em !default;
@@ -51,7 +54,10 @@ $kendo-time-list-title-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// Line height of the time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-line-height: var( --kendo-line-height-lg, inherit ) !default;
-$kendo-time-list-title-height: calc( #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) !default;
+/// Height of the time-selector titles.
+/// @group time-selector
+$kendo-time-list-title-height: calc( #{$kendo-time-list-title-spacing} + #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) !default;
+
 /// Text color of the time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-text: var( --kendo-subtle-text, inherit ) !default;
@@ -61,14 +67,16 @@ $kendo-time-list-title-focus-text: $kendo-time-selector-text !default;
 
 /// Horizontal padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-x: map-get( $kendo-spacing, 2 ) !default; //$kendo-list-item-padding-x-md
+$kendo-time-list-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-y: map-get( $kendo-spacing, 1 ) !default; //$kendo-list-item-padding-y-md
+$kendo-time-list-item-padding-y: map-get( $kendo-spacing, 1 ) !default;
 
 /// Width of the border of the selected item in the time-selector.
 /// @group time-selector
 $kendo-time-list-highlight-border-width: 1px 0px !default;
+/// Height of the selected item in the time-selector.
+/// @group time-selector
 $kendo-time-list-highlight-height: calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + #{ $kendo-time-list-item-padding-y * 2} ) !default;
 /// Background color of the selected item in the time-selector.
 /// @group time-selector

package/scss/toolbar/_layout.scss

@@ -102,6 +102,13 @@
             align-items: center;
         }
 
+        // Template item
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
+            outline-width: var( --kendo-toolbar-item-focus-outline-width, #{$kendo-toolbar-item-focus-outline-width} );
+            outline-style: var( --kendo-toolbar-item-focus-outline-style, #{$kendo-toolbar-item-focus-outline-style} );
+        }
+
     }
 
     // Toolbar group

package/scss/toolbar/_theme.scss

@@ -13,6 +13,12 @@
             border-color: var( --kendo-toolbar-separator-border, #{$kendo-toolbar-separator-border} );
         }
 
+        // Template item
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
+            outline-color: var( --kendo-toolbar-item-focus-outline-color, #{$kendo-toolbar-item-focus-outline-color} );
+        }
+
     }
 
     // Overflow container

package/scss/toolbar/_variables.scss

@@ -38,3 +38,13 @@ $kendo-toolbar-separator-border: get-theme-color-var( neutral-60 ) !default;
 /// The width of the input in the toolbar
 /// @group toolbar
 $kendo-toolbar-input-width: 10em !default;
+
+/// Border width of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-focus-outline-width: 1px !default;
+/// Border style of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-focus-outline-style: solid !default;
+/// Border color of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-focus-outline-color: get-theme-color-var( neutral-130 ) !default;