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

package/dist/all.css

@@ -10791,15 +10791,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;
@@ -13532,6 +13523,20 @@ kendo-badge-container {
     position: relative;
 }
 
+.k-button-arrow {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.k-button > .k-button-arrow {
+    margin-inline-start: -0.375rem;
+    margin-inline-end: -0.75rem;
+}
+
 .k-text-button > .k-icon,
 .k-text-button > .k-button-icon {
     display: none;
@@ -13557,6 +13562,11 @@ kendo-badge-container {
     min-height: 1.5rem;
 }
 
+.k-icon-button > .k-button-arrow {
+    margin-inline-start: 0;
+    margin-inline-end: -0.375rem;
+}
+
 .k-button.k-button-icon {
     padding: 0.375rem;
     width: calc(1.5em + 0.75rem + 2px);
@@ -13642,7 +13652,7 @@ kendo-badge-container {
 }
 
 .k-split-button .k-split-button-arrow {
-    padding: 0.375rem;
+    padding: 0.375rem 0.375rem;
     width: auto;
     flex: none;
 }
@@ -13803,8 +13813,9 @@ kendo-badge-container {
 }
 
 .k-button.k-state-selected {
-    border-color: #bfc6d0;
-    background-color: #c7cdd5;
+    border-color: #0252c9;
+    color: white;
+    background-color: #0257d5;
 }
 
 .k-button-solid.k-button-solid-primary, .k-button-solid.k-button.k-primary {
@@ -16465,17 +16476,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;
@@ -16483,7 +16505,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;
@@ -16493,97 +16518,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%);
 }
 
@@ -16899,6 +16924,20 @@ textarea.k-textarea {
     margin-top: -0.2rem;
 }
 
+.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 {
     color: #212529;
 }
@@ -17654,6 +17693,7 @@ textarea.k-textarea {
     flex: 1;
     position: relative;
     z-index: 1;
+    outline: 0;
     overflow: hidden;
 }
 
@@ -30321,8 +30361,9 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .k-pivot-toolbar .k-button.k-state-selected,
 .k-fieldselector .k-list li.k-item.k-state-selected {
-    border-color: #bfc6d0;
-    background-color: #c7cdd5;
+    border-color: #0252c9;
+    color: white;
+    background-color: #0257d5;
 }
 
 .k-pivot-toolbar .k-button:focus, .k-pivot-toolbar .k-button.k-state-focus, .k-pivot-toolbar .k-button.k-state-focused,
@@ -34378,8 +34419,9 @@ ul.k-scheduler-views li:hover, ul.k-scheduler-views li.k-state-hover {
 }
 
 ul.k-scheduler-views li.k-state-selected {
-    border-color: #bfc6d0;
-    background-color: #c7cdd5;
+    border-color: #0252c9;
+    color: white;
+    background-color: #0257d5;
 }
 
 ul.k-scheduler-views li:focus, ul.k-scheduler-views li.k-state-focus, ul.k-scheduler-views li.k-state-focused {

package/dist/all.scss

@@ -8753,21 +8753,6 @@ $checkbox-ripple-opacity: .25 !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;
@@ -9574,6 +9559,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: (
@@ -9633,13 +9621,13 @@ $button-active-shadow: null !default;
 
 /// The background color of selected buttons.
 /// @group button
-$button-selected-bg: $button-active-bg !default;
+$button-selected-bg: try-darken( $primary, 10% ) !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: try-darken( $primary, 12.5% ) !default;
 /// The background gradient of selected buttons.
 /// @group button
 $button-selected-gradient: null !default;
@@ -13511,6 +13499,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 {
 
@@ -13538,6 +13541,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;
@@ -13636,7 +13643,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;
 
@@ -17229,16 +17236,29 @@ $slider-disabled-opacity: null !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;
@@ -17246,6 +17266,9 @@ $slider-disabled-opacity: null !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%;
@@ -17265,7 +17288,7 @@ $slider-disabled-opacity: null !default;
         }
 
         &-horizontal {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
                 height: 26px;
 
                 .k-slider-track {
@@ -17318,7 +17341,7 @@ $slider-disabled-opacity: null !default;
         }
 
         &-vertical {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
                 width: 26px;
 
                 .k-slider-track {
@@ -17570,6 +17593,21 @@ $slider-disabled-opacity: null !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
@@ -18723,6 +18761,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .02) !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-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "4.43.1-dev.6",
+  "version": "4.43.1-dev.7",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
     "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",
     "bootstrap": "^5.1.0"
   },
-  "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: $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: try-darken( $primary, 10% ) !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: try-darken( $primary, 12.5% ) !default;
 /// The background gradient of selected buttons.
 /// @group button
 $button-selected-gradient: null !default;