@progress/kendo-theme-material 4.43.1-dev.6 → 4.43.1-dev.7

package/dist/all.css

@@ -10799,15 +10799,6 @@ kendo-list > .k-group-header,
     width: 100%;
 }
 
-.k-dropdown-button .k-popup .k-item {
-    cursor: pointer;
-}
-
-.k-split-button .k-list .k-item:focus,
-.k-dropdown-button .k-list .k-item:focus {
-    outline: none;
-}
-
 .k-virtual-content {
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
@@ -13557,6 +13548,20 @@ kendo-badge-container {
     position: relative;
 }
 
+.k-button-arrow {
+    padding-left: 8px;
+    padding-right: 8px;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.k-button > .k-button-arrow {
+    margin-inline-start: -8px;
+    margin-inline-end: -16px;
+}
+
 .k-text-button > .k-icon,
 .k-text-button > .k-button-icon {
     display: none;
@@ -13582,6 +13587,11 @@ kendo-badge-container {
     min-height: 20.0000000004px;
 }
 
+.k-icon-button > .k-button-arrow {
+    margin-inline-start: 0;
+    margin-inline-end: -8px;
+}
+
 .k-button.k-button-icon {
     padding: 8px;
     width: calc(1.4285714286em + 18px);
@@ -13667,7 +13677,7 @@ kendo-badge-container {
 }
 
 .k-split-button .k-split-button-arrow {
-    padding: 8px;
+    padding: 8px 4px;
     width: auto;
     flex: none;
 }
@@ -17160,17 +17170,28 @@ textarea.k-textarea {
     right: 0;
 }
 
+.k-slider-wrap {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: inherit;
+    align-items: inherit;
+    gap: inherit;
+    position: relative;
+}
+
 .k-slider {
     width: min-content;
     height: min-content;
     gap: 7px;
 }
 
-.k-slider > .k-button {
+.k-slider .k-button {
     flex: none;
 }
 
-.k-slider > .k-slider-track-wrap {
+.k-slider .k-slider-track-wrap {
     flex: 1 1 auto;
     display: flex;
     flex-flow: inherit;
@@ -17178,7 +17199,10 @@ textarea.k-textarea {
     touch-action: none;
 }
 
-.k-slider > .k-slider-track-wrap .k-slider-items {
+.k-slider .k-slider-track-wrap .k-slider-items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
     flex: 1 1 100%;
     display: flex;
     flex-flow: inherit;
@@ -17188,97 +17212,97 @@ textarea.k-textarea {
             user-select: none;
 }
 
-.k-slider > .k-slider-track-wrap .k-tick {
+.k-slider .k-slider-track-wrap .k-tick {
     flex: 0 0 1px;
 }
 
-.k-slider > .k-slider-track-wrap .k-draghandle {
+.k-slider .k-slider-track-wrap .k-draghandle {
     position: absolute;
 }
 
-.k-slider-horizontal > .k-slider-track-wrap {
+.k-slider-horizontal .k-slider-track-wrap {
     height: 26px;
 }
 
-.k-slider-horizontal > .k-slider-track-wrap .k-slider-track {
+.k-slider-horizontal .k-slider-track-wrap .k-slider-track {
     width: 100%;
 }
 
-.k-slider-horizontal > .k-slider-track-wrap .k-draghandle {
+.k-slider-horizontal .k-slider-track-wrap .k-draghandle {
     top: 50%;
     transform: translate(-50%, -50%);
 }
 
-.k-slider-horizontal > .k-slider-track-wrap .k-draghandle:focus,
-.k-slider-horizontal > .k-slider-track-wrap .k-draghandle:active {
+.k-slider-horizontal .k-slider-track-wrap .k-draghandle:focus,
+.k-slider-horizontal .k-slider-track-wrap .k-draghandle:active {
     transform: translate(-50%, -50%) scale(1);
 }
 
-.k-slider-horizontal > .k-slider-track-wrap .k-slider-selection {
+.k-slider-horizontal .k-slider-track-wrap .k-slider-selection {
     width: calc((var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0))*1%);
     left: calc(var(--kendo-slider-start, 0)*1%);
 }
 
-.k-slider-horizontal > .k-slider-track-wrap .k-draghandle-start {
+.k-slider-horizontal .k-slider-track-wrap .k-draghandle-start {
     left: calc(var(--kendo-slider-start, 0)*1%);
 }
 
-.k-slider-horizontal > .k-slider-track-wrap .k-draghandle-end {
+.k-slider-horizontal .k-slider-track-wrap .k-draghandle-end {
     left: calc(var(--kendo-slider-end, 0)*1%);
 }
 
-[dir="rtl"] .k-slider-horizontal > .k-slider-track-wrap .k-slider-selection {
+[dir="rtl"] .k-slider-horizontal .k-slider-track-wrap .k-slider-selection {
     left: unset;
     right: calc(var(--kendo-slider-start, 0)*1%);
 }
 
-[dir="rtl"] .k-slider-horizontal > .k-slider-track-wrap .k-draghandle-start {
+[dir="rtl"] .k-slider-horizontal .k-slider-track-wrap .k-draghandle-start {
     left: unset;
     right: calc(var(--kendo-slider-start, 0)*1%);
 }
 
-[dir="rtl"] .k-slider-horizontal > .k-slider-track-wrap .k-draghandle-end {
+[dir="rtl"] .k-slider-horizontal .k-slider-track-wrap .k-draghandle-end {
     left: unset;
     right: calc(var(--kendo-slider-end, 0)*1%);
 }
 
-[dir="rtl"] .k-slider-horizontal > .k-slider-track-wrap .k-draghandle {
+[dir="rtl"] .k-slider-horizontal .k-slider-track-wrap .k-draghandle {
     transform: translate(50%, -50%);
 }
 
-[dir="rtl"] .k-slider-horizontal > .k-slider-track-wrap .k-draghandle:focus,
-[dir="rtl"] .k-slider-horizontal > .k-slider-track-wrap .k-draghandle:active {
+[dir="rtl"] .k-slider-horizontal .k-slider-track-wrap .k-draghandle:focus,
+[dir="rtl"] .k-slider-horizontal .k-slider-track-wrap .k-draghandle:active {
     transform: translate(50%, -50%) scale(1);
 }
 
-.k-slider-vertical > .k-slider-track-wrap {
+.k-slider-vertical .k-slider-track-wrap {
     width: 26px;
 }
 
-.k-slider-vertical > .k-slider-track-wrap .k-slider-track {
+.k-slider-vertical .k-slider-track-wrap .k-slider-track {
     height: 100%;
 }
 
-.k-slider-vertical > .k-slider-track-wrap .k-draghandle {
+.k-slider-vertical .k-slider-track-wrap .k-draghandle {
     left: 50%;
     transform: translate(-50%, 50%);
 }
 
-.k-slider-vertical > .k-slider-track-wrap .k-draghandle:focus,
-.k-slider-vertical > .k-slider-track-wrap .k-draghandle:active {
+.k-slider-vertical .k-slider-track-wrap .k-draghandle:focus,
+.k-slider-vertical .k-slider-track-wrap .k-draghandle:active {
     transform: translate(-50%, 50%) scale(1);
 }
 
-.k-slider-vertical > .k-slider-track-wrap .k-slider-selection {
+.k-slider-vertical .k-slider-track-wrap .k-slider-selection {
     bottom: calc(var(--kendo-slider-start, 0)*1%);
     height: calc((var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0))*1%);
 }
 
-.k-slider-vertical > .k-slider-track-wrap .k-draghandle-start {
+.k-slider-vertical .k-slider-track-wrap .k-draghandle-start {
     bottom: calc(var(--kendo-slider-start, 0)*1%);
 }
 
-.k-slider-vertical > .k-slider-track-wrap .k-draghandle-end {
+.k-slider-vertical .k-slider-track-wrap .k-draghandle-end {
     bottom: calc(var(--kendo-slider-end, 0)*1%);
 }
 
@@ -17594,6 +17618,20 @@ textarea.k-textarea {
     margin-top: -3px;
 }
 
+.k-slider kendo-resize-sensor {
+    position: absolute;
+}
+
+.k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
+    padding-left: 7px;
+    padding-right: 7px;
+}
+
+.k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
+    padding-top: 7px;
+    padding-bottom: 7px;
+}
+
 .k-slider .k-tick {
     margin: 0;
 }
@@ -18427,6 +18465,7 @@ textarea.k-textarea {
     flex: 1;
     position: relative;
     z-index: 1;
+    outline: 0;
     overflow: hidden;
 }
 

package/dist/all.scss

@@ -7551,21 +7551,6 @@ $checkbox-ripple-opacity: .2 !default;
         }
     }
 
-    .k-dropdown-button .k-popup {
-        .k-item {
-            cursor: pointer;
-        }
-    }
-
-    // SplitButton
-    // TODO: Wait for final design + revise
-    .k-split-button,
-    .k-dropdown-button {
-        .k-list .k-item:focus {
-            outline: none;
-        }
-    }
-
     .k-virtual-content {
         overflow-y: scroll;
         -webkit-overflow-scrolling: touch;
@@ -8416,6 +8401,9 @@ $button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2}
 /// @group button
 $button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
 
+$button-arrow-padding-x: map-get( $spacing, 1 ) !default;
+$button-arrow-padding-y: $button-padding-y !default;
+
 /// Theme colors map for the button.
 /// @group button
 $button-theme-colors: (
@@ -12393,6 +12381,21 @@ $tooltip-error-border: $tooltip-error-bg !default;
     .k-button .k-button-text {}
 
 
+    // Button arrow
+    .k-button-arrow {
+        padding-left: $button-arrow-padding-y;
+        padding-right: $button-arrow-padding-y;
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .k-button > .k-button-arrow {
+        margin-inline-start: -$button-padding-y;
+        margin-inline-end: -$button-padding-x;
+    }
+
+
     // Text button
     .k-text-button {
 
@@ -12420,6 +12423,10 @@ $tooltip-error-border: $tooltip-error-bg !default;
             min-height: calc( #{$button-font-size} * #{$button-line-height} );
         }
     }
+    .k-icon-button > .k-button-arrow {
+        margin-inline-start: 0;
+        margin-inline-end: -$button-padding-y;
+    }
     // TODO: REMOVE
     .k-button.k-button-icon {
         padding: $button-padding-y;
@@ -12518,7 +12525,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
         vertical-align: middle;
 
         .k-split-button-arrow {
-            padding: $button-padding-y;
+            padding: $button-arrow-padding-y $button-arrow-padding-x;
             width: auto;
             flex: none;
 
@@ -16664,16 +16671,29 @@ $slider-disabled-opacity: .65 !default;
     }
 
 
+    // Slider wrap
+    .k-slider-wrap {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-flow: inherit;
+        align-items: inherit;
+        gap: inherit;
+        position: relative;
+    }
+
+
     // New rendering
     .k-slider {
         width: min-content;
         height: min-content;
         gap: calc( #{$slider-draghandle-size} / 2 );
 
-        > .k-button {
+        .k-button {
             flex: none;
         }
-        > .k-slider-track-wrap {
+        .k-slider-track-wrap {
             flex: 1 1 auto;
             display: flex;
             flex-flow: inherit;
@@ -16681,6 +16701,9 @@ $slider-disabled-opacity: .65 !default;
             touch-action: none;
 
             .k-slider-items {
+                margin: 0;
+                padding: 0;
+                list-style: none;
                 // For some reason, Safari does not understand `flex-basis: 100%`
                 // See telerik/kendo-themes#2197
                 // flex-basis: 100%;
@@ -16700,7 +16723,7 @@ $slider-disabled-opacity: .65 !default;
         }
 
         &-horizontal {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
                 height: 26px;
 
                 .k-slider-track {
@@ -16753,7 +16776,7 @@ $slider-disabled-opacity: .65 !default;
         }
 
         &-vertical {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
                 width: 26px;
 
                 .k-slider-track {
@@ -17005,6 +17028,21 @@ $slider-disabled-opacity: .65 !default;
             margin-top: -$tooltip-callout-size / 2;
         }
     }
+
+
+    // Angular specific
+    .k-slider kendo-resize-sensor {
+        position: absolute;
+    }
+    .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
+        padding-left: calc( #{$slider-draghandle-size} / 2 );
+        padding-right: calc( #{$slider-draghandle-size} / 2 );
+    }
+    .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
+        padding-top: calc( #{$slider-draghandle-size} / 2 );
+        padding-bottom: calc( #{$slider-draghandle-size} / 2 );
+    }
+
 }
 
 // #endregion
@@ -18302,6 +18340,7 @@ $time-list-focused-bg: null !default;
         flex: 1;
         position: relative;
         z-index: 1;
+        outline: 0;
         overflow: hidden;
 
         &::before,

package/modules/@progress/kendo-theme-default/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "4.43.1-dev.6",
+  "version": "4.43.1-dev.7",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,5 +47,5 @@
     "dart:flat": "gulp dart:flat",
     "prepublishOnly": "echo 'no prebublish for default theme'"
   },
-  "gitHead": "2362d5beb5c65e7d4b4bc9c8a06b589bc065be8d"
+  "gitHead": "634466e18a3f771f8e1da5dc5efdefca1f4fd344"
 }

package/modules/@progress/kendo-theme-default/scss/button/_layout.scss

@@ -64,6 +64,21 @@
     .k-button .k-button-text {}
 
 
+    // Button arrow
+    .k-button-arrow {
+        padding-left: $button-arrow-padding-y;
+        padding-right: $button-arrow-padding-y;
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .k-button > .k-button-arrow {
+        margin-inline-start: -$button-padding-y;
+        margin-inline-end: -$button-padding-x;
+    }
+
+
     // Text button
     .k-text-button {
 
@@ -91,6 +106,10 @@
             min-height: calc( #{$button-font-size} * #{$button-line-height} );
         }
     }
+    .k-icon-button > .k-button-arrow {
+        margin-inline-start: 0;
+        margin-inline-end: -$button-padding-y;
+    }
     // TODO: REMOVE
     .k-button.k-button-icon {
         padding: $button-padding-y;
@@ -189,7 +208,7 @@
         vertical-align: middle;
 
         .k-split-button-arrow {
-            padding: $button-padding-y;
+            padding: $button-arrow-padding-y $button-arrow-padding-x;
             width: auto;
             flex: none;
 

package/modules/@progress/kendo-theme-default/scss/button/_variables.scss

@@ -48,6 +48,9 @@ $button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2}
 /// @group button
 $button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
 
+$button-arrow-padding-x: $button-padding-y !default;
+$button-arrow-padding-y: $button-padding-y !default;
+
 /// Theme colors map for the button.
 /// @group button
 $button-theme-colors: (
@@ -107,13 +110,13 @@ $button-active-shadow: null !default;
 
 /// The background color of selected buttons.
 /// @group button
-$button-selected-bg: $button-active-bg !default;
+$button-selected-bg: $primary !default;
 /// The text color of selected buttons.
 /// @group button
-$button-selected-text: $button-active-text !default;
+$button-selected-text: contrast-wcag( $button-selected-bg ) !default;
 /// The border color of selected buttons.
 /// @group button
-$button-selected-border: $button-active-border !default;
+$button-selected-border: $button-selected-bg !default;
 /// The background gradient of selected buttons.
 /// @group button
 $button-selected-gradient: null !default;

package/modules/@progress/kendo-theme-default/scss/list/_layout.scss

@@ -120,21 +120,6 @@
         }
     }
 
-    .k-dropdown-button .k-popup {
-        .k-item {
-            cursor: pointer;
-        }
-    }
-
-    // SplitButton
-    // TODO: Wait for final design + revise
-    .k-split-button,
-    .k-dropdown-button {
-        .k-list .k-item:focus {
-            outline: none;
-        }
-    }
-
     .k-virtual-content {
         overflow-y: scroll;
         -webkit-overflow-scrolling: touch;

package/modules/@progress/kendo-theme-default/scss/slider/_layout.scss

@@ -58,16 +58,29 @@
     }
 
 
+    // Slider wrap
+    .k-slider-wrap {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-flow: inherit;
+        align-items: inherit;
+        gap: inherit;
+        position: relative;
+    }
+
+
     // New rendering
     .k-slider {
         width: min-content;
         height: min-content;
         gap: calc( #{$slider-draghandle-size} / 2 );
 
-        > .k-button {
+        .k-button {
             flex: none;
         }
-        > .k-slider-track-wrap {
+        .k-slider-track-wrap {
             flex: 1 1 auto;
             display: flex;
             flex-flow: inherit;
@@ -75,6 +88,9 @@
             touch-action: none;
 
             .k-slider-items {
+                margin: 0;
+                padding: 0;
+                list-style: none;
                 // For some reason, Safari does not understand `flex-basis: 100%`
                 // See telerik/kendo-themes#2197
                 // flex-basis: 100%;
@@ -94,7 +110,7 @@
         }
 
         &-horizontal {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
                 height: 26px;
 
                 .k-slider-track {
@@ -147,7 +163,7 @@
         }
 
         &-vertical {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
                 width: 26px;
 
                 .k-slider-track {
@@ -399,4 +415,19 @@
             margin-top: -$tooltip-callout-size / 2;
         }
     }
+
+
+    // Angular specific
+    .k-slider kendo-resize-sensor {
+        position: absolute;
+    }
+    .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
+        padding-left: calc( #{$slider-draghandle-size} / 2 );
+        padding-right: calc( #{$slider-draghandle-size} / 2 );
+    }
+    .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
+        padding-top: calc( #{$slider-draghandle-size} / 2 );
+        padding-bottom: calc( #{$slider-draghandle-size} / 2 );
+    }
+
 }

package/modules/@progress/kendo-theme-default/scss/timeselector/_layout.scss

@@ -134,6 +134,7 @@
         flex: 1;
         position: relative;
         z-index: 1;
+        outline: 0;
         overflow: hidden;
 
         &::before,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "4.43.1-dev.6",
+  "version": "4.43.1-dev.7",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,7 +51,7 @@
     "postpublish": "rm -rf modules && git checkout scss"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^4.43.1-dev.6"
+    "@progress/kendo-theme-default": "^4.43.1-dev.7"
   },
-  "gitHead": "2362d5beb5c65e7d4b4bc9c8a06b589bc065be8d"
+  "gitHead": "634466e18a3f771f8e1da5dc5efdefca1f4fd344"
 }

package/scss/button/_variables.scss

@@ -48,6 +48,9 @@ $button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2}
 /// @group button
 $button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
 
+$button-arrow-padding-x: map-get( $spacing, 1 ) !default;
+$button-arrow-padding-y: $button-padding-y !default;
+
 /// Theme colors map for the button.
 /// @group button
 $button-theme-colors: (