@progress/kendo-theme-core 13.0.0-dev.1 → 13.0.0-dev.2

package/scss/components/suggestion/_variables.scss

@@ -5,6 +5,7 @@ $kendo-suggestion-spacing: null !default;
 $kendo-suggestion-border-width: null !default;
 $kendo-suggestion-border-style: null !default;
 
+$kendo-suggestion-font-size: null !default;
 $kendo-suggestion-line-height: null !default;
 $kendo-suggestion-border-radius: null !default;
 
@@ -17,3 +18,5 @@ $kendo-suggestion-focus-shadow-color: null !default;
 $kendo-suggestion-theme-colors: ("base", "primary", "secondary") !default;
 
 $kendo-suggestion-default-theme-color: null !default;
+
+$kendo-suggestion-scroll-gradient: null !default;

package/scss/components/tabstrip/_layout.scss

@@ -6,6 +6,8 @@
 @use "./_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
 @use "../../motion/index.scss" as *;
+@use "../../spacing/index.scss" as *;
+@use "../../typography/index.scss" as *;
 
 @mixin kendo-tabstrip--layout-base() {
 
@@ -299,6 +301,34 @@
     }
 
 
+    // Overflow
+    .k-tabstrip-overflow {
+        > .k-tabstrip-items-wrapper {
+            > .k-tabstrip-items {
+                flex-wrap: nowrap;
+                white-space: nowrap;
+            }
+        }
+
+        .k-tabstrip-overflow-button {
+            flex-shrink: 0;
+        }
+    }
+
+
+    // Actions container
+    .k-tabstrip-actions {
+        flex-shrink: 0;
+        gap: k-spacing(0.5);
+        align-items: center;
+
+        > .k-separator-vertical {
+            height: $kendo-line-height-em;
+            align-self: center;
+        }
+    }
+
+
     // Tabstrip orientation
     .k-tabstrip-horizontal {
         flex-direction: row;

package/scss/components/tabstrip/_theme.scss

@@ -76,6 +76,14 @@
     }
 
 
+    // Actions
+    .k-tabstrip-actions {
+        > .k-separator {
+            border-color: $kendo-tabstrip-border;
+        }
+    }
+
+
     // Content
     .k-tabstrip-content,
     .k-tabstrip > .k-content {

package/scss/components/toolbar/_layout.scss

@@ -91,6 +91,9 @@
         .k-color-picker {
             width: min-content;
         }
+        .k-smart-box {
+            min-width: $kendo-toolbar-smart-box-min-width;
+        }
 
 
         // Overflow anchor

package/scss/components/toolbar/_variables.scss

@@ -47,6 +47,7 @@ $kendo-toolbar-flat-scroll-overlay: null !default;
 $kendo-toolbar-separator-border: null !default;
 
 $kendo-toolbar-input-width: null !default;
+$kendo-toolbar-smart-box-min-width: null !default;
 
 $kendo-toolbar-item-shadow: null !default;
 

package/scss/components/treeview/_layout.scss

@@ -3,6 +3,7 @@
 @use "../../mixins/index.scss" as *;
 @use "../../functions/index.scss" as *;
 @use "../../spacing/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
 @use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
@@ -12,7 +13,7 @@
 
     // Treeview
     .k-treeview {
-        padding: 0;
+        border-radius: $kendo-treeview-border-radius;
         border-width: 0;
         background: none;
         box-sizing: border-box;
@@ -72,6 +73,11 @@
 
     // Treeview group
     .k-treeview-group {
+        display: flex;
+        flex-direction: column;
+        gap: $kendo-treeview-gap;
+        min-width: fit-content;
+
         margin: 0;
         padding: 0;
         list-style: none;
@@ -83,17 +89,21 @@
         &.ng-animating {
             overflow: hidden;
         }
+
+        .k-treeview-group {
+            margin-top: $kendo-treeview-gap;
+        }
     }
 
 
     // Treeview wrappers
-    .k-treeview-top,
-    .k-treeview-mid,
-    .k-treeview-bot {
+    .k-treeview-item-content {
+        @include border-radius( $kendo-treeview-item-border-radius );
         display: flex;
         flex-direction: row;
         align-items: center;
         align-content: center;
+        padding-inline-start: calc( var(--kendo-treeview-level, 0) * #{$kendo-treeview-indent} );
     }
 
 
@@ -102,7 +112,6 @@
         outline-style: none;
         margin: 0;
         padding: 0;
-        padding-inline-start: $kendo-treeview-indent;
         border-width: 0;
         display: block;
     }
@@ -138,7 +147,6 @@
 
     // Treeview leaf
     .k-treeview-leaf {
-        @include border-radius( $kendo-treeview-item-border-radius );
         padding-block: $kendo-treeview-md-item-padding-y;
         padding-inline: $kendo-treeview-md-item-padding-x;
         border: $kendo-treeview-item-border-width solid transparent;
@@ -155,10 +163,6 @@
         .k-sprite {
             margin-inline-end: $kendo-icon-spacing;
         }
-
-        &.k-focus {
-            z-index: k-z-index("base", 1);
-        }
     }
 
 

package/scss/components/treeview/_theme.scss

@@ -13,12 +13,8 @@
     }
 
 
-    // Treeview item
-    .k-treeview-item {}
-
-
-    // Treeview leaf
-    .k-treeview-leaf {
+    // Treeview wrappers
+    .k-treeview-item-content {
 
         // Hover state
         &:hover,
@@ -45,6 +41,11 @@
                 $kendo-treeview-item-selected-border,
                 $kendo-treeview-item-selected-gradient
             );
+
+            &:hover,
+            &.k-hover {
+                background-color: $kendo-treeview-item-selected-hover-bg;
+            }
         }
     }
 

package/scss/components/treeview/_variables.scss

@@ -1,6 +1,8 @@
 // TreeView
 
 $kendo-treeview-default-size: null !default;
+$kendo-treeview-gap: null !default;
+$kendo-treeview-border-radius: null !default;
 
 $kendo-treeview-font-family: null !default;
 $kendo-treeview-font-size: null !default;
@@ -74,6 +76,8 @@ $kendo-treeview-item-selected-text: null !default;
 $kendo-treeview-item-selected-border: null !default;
 $kendo-treeview-item-selected-gradient: null !default;
 
+$kendo-treeview-item-selected-hover-bg: null !default;
+
 $kendo-treeview-item-focus-shadow: null !default;
 
 $kendo-treeview-loadmore-bg: null !default;

package/scss/elevation/index.scss

@@ -2,8 +2,7 @@
 
 $default-elevation: (
     1: (
-        0 2px 3px rgba(0, 0, 0, .04),
-        0 4px 16px rgba(0, 0, 0, .12)
+        0 2px 3px rgba(0, 0, 0, .04)
     ),
     2: (
         0 4px 6px rgba(0, 0, 0, .06),

package/scss/motion/index.scss

@@ -9,6 +9,7 @@ $default-easings: (
     sharp: cubic-bezier(0.75, 0, 0.25, 1),
     bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55),
     elastic: cubic-bezier(0.5, -0.5, 0.5, 1.5),
+    stretchy: cubic-bezier(.07, 1.81, .3, .81)
 ) !default;
 
 $default-durations: (