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

package/scss/components/smart-box/_variables.scss

@@ -0,0 +1,40 @@
+// Smart box
+$kendo-smart-box-default-size: null !default;
+$kendo-smart-box-default-roundness: null !default;
+
+$kendo-smart-box-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
+
+$kendo-smart-box-suffix-spacing: null !default;
+
+$kendo-smart-box-sm-padding-x: null !default;
+$kendo-smart-box-md-padding-x: null !default;
+$kendo-smart-box-lg-padding-x: null !default;
+
+$kendo-smart-box-sm-prefix-margin-x: null !default;
+$kendo-smart-box-md-prefix-margin-x: null !default;
+$kendo-smart-box-lg-prefix-margin-x: null !default;
+
+$kendo-smart-box-popup-padding-inline: null !default;
+$kendo-smart-box-popup-padding-block: null !default;
+$kendo-smart-box-popup-border-radius: null !default;
+$kendo-smart-box-popup-spacing: null !default;
+
+$kendo-smart-box-popup-segmented-control-margin: null !default;
+
+/// The sizes map for the Smart box components.
+/// @group smart-box
+$kendo-smart-box-sizes: (
+    sm: (
+        padding-x: $kendo-smart-box-sm-padding-x,
+        prefix-margin-x: $kendo-smart-box-sm-prefix-margin-x,
+    ),
+    md: (
+        padding-x: $kendo-smart-box-md-padding-x,
+        prefix-margin-x: $kendo-smart-box-md-prefix-margin-x,
+    ),
+    lg: (
+        padding-x: $kendo-smart-box-lg-padding-x,
+        prefix-margin-x: $kendo-smart-box-lg-prefix-margin-x,
+
+    )
+) !default;

package/scss/components/spreadsheet/_layout.scss

@@ -610,6 +610,7 @@
             cursor: pointer;
 
             > .k-icon,
+            > .k-icon-wrapper-host,
             > .k-expander-indicator {
                 margin-inline-end: $kendo-spreadsheet-filter-padding;
             }

package/scss/components/suggestion/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../mixins/index.scss" as *;
 @use "../../motion/index.scss" as *;
 @use "../../spacing/index.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-suggestion--layout-base() {
     .k-suggestion-scrollwrap {
@@ -10,16 +11,7 @@
         display: flex;
         align-items: center;
         position: relative;
-        gap: $kendo-suggestion-spacing;
-
-        .k-suggestion-group {
-            padding-block: calc( #{$kendo-suggestion-padding-y} / 2 );
-            flex: 1 1 auto;
-            flex-wrap: nowrap;
-            overflow-x: auto;
-            scrollbar-width: none;
-            white-space: nowrap;
-        }
+        gap: k-spacing(.5);
     }
 
     .k-suggestion-group {
@@ -27,12 +19,20 @@
         flex-wrap: wrap;
         gap: $kendo-suggestion-spacing;
         align-self: normal;
+        overflow: hidden;
 
         &.k-suggestion-group-scrollable {
             flex-wrap: nowrap;
+        }
+
+        .k-suggestions-scroll {
+            padding-block: calc( #{$kendo-suggestion-padding-y} / 2 );
+            display: flex;
             overflow-x: auto;
             scrollbar-width: none;
-            padding-block: calc( #{$kendo-suggestion-padding-y} / 2 );
+            flex-wrap: nowrap;
+            white-space: nowrap;
+            gap: $kendo-suggestion-spacing;
         }
     }
 
@@ -44,6 +44,11 @@
         }
     }
 
+    .k-suggestion-group-scrollable,
+    .k-suggestion-scrollwrap .k-suggestion-group {
+        position: relative;
+    }
+
     .k-suggestion {
         @include border-radius( $kendo-suggestion-border-radius );
         max-width: 100%;
@@ -52,6 +57,7 @@
         box-sizing: border-box;
         border-width: $kendo-suggestion-border-width;
         border-style: $kendo-suggestion-border-style;
+        font-size: $kendo-suggestion-font-size;
         line-height: $kendo-suggestion-line-height;
         flex: 0 0 auto;
         transition: background-color k-transition(rapid), box-shadow k-transition(rapid);
@@ -60,6 +66,22 @@
         white-space: normal;
     }
 
+    .k-suggestion-group-scrollable-end::before,
+    .k-suggestion-group-scrollable-start::after,
+    .k-suggestion-scrollwrap .k-suggestion-group-scrollable-end::before,
+    .k-suggestion-scrollwrap .k-suggestion-group-scrollable-start::after {
+        content: '';
+        aspect-ratio: .3;
+        position: absolute;
+        top: 0;
+        z-index: k-z-index("base", 3);
+        height: calc( #{$kendo-suggestion-font-size} * #{$kendo-suggestion-line-height} + #{$kendo-suggestion-padding-y} * 2 + #{$kendo-suggestion-padding-y} + #{$kendo-suggestion-border-width} * 2);
+    }
+
+    .k-suggestion-group-scrollable-start::after,
+    .k-suggestion-scrollwrap .k-suggestion-group-scrollable-start::after {
+        inset-inline-end: 0;
+    }
 
 }
 

package/scss/components/suggestion/_theme.scss

@@ -53,4 +53,27 @@
         }
     }
 
+    .k-suggestion-group-scrollable-end::before,
+    .k-suggestion-scrollwrap .k-suggestion-group-scrollable-end::before {
+        background: linear-gradient(270deg, $kendo-suggestion-scroll-gradient);
+    }
+
+    .k-suggestion-group-scrollable-start::after,
+    .k-suggestion-scrollwrap .k-suggestion-group-scrollable-start::after {
+        background: linear-gradient(90deg, $kendo-suggestion-scroll-gradient);
+    }
+
+    .k-rtl,
+    [dir="rtl"] {
+        .k-suggestion-group-scrollable-end::before,
+        .k-suggestion-scrollwrap .k-suggestion-group-scrollable-end::before {
+            background: linear-gradient(90deg, $kendo-suggestion-scroll-gradient);
+        }
+
+        .k-suggestion-group-scrollable-start::after,
+        .k-suggestion-scrollwrap .k-suggestion-group-scrollable-start::after {
+            background: linear-gradient(270deg, $kendo-suggestion-scroll-gradient);
+        }
+    }
+
 }

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: (