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

package/scss/components/list/_layout.scss

@@ -15,13 +15,18 @@
         > .k-list {
             flex: 1;
             height: 100%;
+            border-radius: 0;
+        }
+
+        &.k-popup {
+            padding-inline: $kendo-list-container-padding-inline;
+            padding-block: $kendo-list-container-padding-block;
         }
     }
 
     // List
     .k-list {
         margin: 0;
-        padding: 0;
         box-sizing: border-box;
         border-radius: inherit;
         font-family: $kendo-list-font-family;
@@ -90,6 +95,20 @@
                     line-height: $_item-line-height;
                 }
 
+                &:has(.k-list-item-icon) .k-list-item,
+                &:has(.k-list-item-icon) .k-list-group-item {
+                    padding-inline-start:  calc( #{$kendo-icon-size} + $_item-padding-x + #{$kendo-list-item-gap} );
+                }
+
+                .k-list-item:has(.k-list-item-icon) .k-list-item-description {
+                    padding-inline-start:  calc( #{$kendo-icon-size} + #{$kendo-list-item-gap});
+                }
+
+                .k-list-item:has(.k-list-item-icon),
+                .k-list-group-item:has(.k-list-item-icon) {
+                    padding-inline: $_item-padding-x;
+                }
+
                 .k-list-group-item {
                     padding-block: $_group-item-padding-y;
                     padding-inline: $_group-item-padding-x;
@@ -155,6 +174,13 @@
         border-color: inherit;
         height: auto;
         list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: $kendo-list-item-spacing;
+    }
+
+    .k-list-ul + .k-list-ul {
+        margin-block-start: $kendo-list-item-spacing;
     }
 
 
@@ -172,7 +198,7 @@
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
-        gap: $kendo-icon-spacing;
+        column-gap: $kendo-list-item-gap;
         position: relative;
 
         transition: color k-transition(snappy), background-color k-transition(snappy), outline-color k-transition(snappy), box-shadow k-transition(snappy);
@@ -206,6 +232,41 @@
         position: sticky;
     }
 
+    .k-list-item {
+        flex-wrap: wrap;
+        align-items: center;
+        border-radius: $kendo-list-item-border-radius;
+    }
+
+    .k-list-item-text {
+        flex: 1;
+        text-overflow: ellipsis;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .k-list-item-icon-wrapper,
+    .k-list-item-actions,
+    .k-list-item-text {
+        align-self: flex-start;
+    }
+
+    .k-list-item-actions {
+        display: flex;
+        align-items: center;
+        gap: $kendo-list-item-gap;
+    }
+
+    .k-list-item:has(.k-list-item-icon) .k-list-item-text::before,
+    .k-list-item:has(.k-list-item-actions) .k-list-item-text::before {
+        content: none;
+    }
+
+    .k-list .k-list-item-description {
+        flex-basis: 100%;
+        font-size: $kendo-list-item-description-font-size;
+        line-height: $kendo-list-item-description-line-height;
+    }
 
     // List group item
     .k-list-group-item {
@@ -268,5 +329,4 @@
         box-sizing: border-box;
         flex: none;
     }
-
 }

package/scss/components/list/_theme.scss

@@ -12,6 +12,10 @@
             $kendo-list-bg,
             $kendo-list-border
         );
+
+        .k-list-ul:first-of-type .k-list-group-item {
+            box-shadow: none;
+        }
     }
 
 
@@ -94,4 +98,8 @@
         );
     }
 
+    .k-list .k-list-item-description {
+        color: $kendo-list-item-description-text;
+    }
+
 }

package/scss/components/list/_variables.scss

@@ -1,4 +1,6 @@
 // List
+$kendo-list-container-padding-block: null !default;
+$kendo-list-container-padding-inline: null !default;
 
 $kendo-list-default-size: null !default;
 
@@ -72,6 +74,9 @@ $kendo-list-sm-item-font-size: null !default;
 $kendo-list-md-item-font-size: null !default;
 $kendo-list-lg-item-font-size: null !default;
 
+$kendo-list-item-gap: null !default;
+$kendo-list-item-spacing: null !default;
+
 $kendo-list-item-line-height: null !default;
 $kendo-list-sm-item-line-height: null !default;
 $kendo-list-md-item-line-height: null !default;
@@ -185,6 +190,7 @@ $kendo-list-header-shadow: null !default;
 
 $kendo-list-item-bg: null !default;
 $kendo-list-item-text: null !default;
+$kendo-list-item-border-radius: null !default;
 
 $kendo-list-item-hover-bg: null !default;
 $kendo-list-item-hover-text: null !default;
@@ -205,3 +211,8 @@ $kendo-list-group-item-border: null !default;
 $kendo-list-group-item-shadow: null !default;
 
 $kendo-list-option-label-text: null !default;
+
+$kendo-list-item-description-font-size: null !default;
+$kendo-list-item-description-line-height: null !default;
+$kendo-list-item-description-text: null !default;
+

package/scss/components/prompt-box/_layout.scss

@@ -0,0 +1,63 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-prompt-box--layout-base() {
+
+    .k-prompt-box {
+        border-radius: $kendo-prompt-box-border-radius;
+        flex-flow: column nowrap;
+
+        .k-input-inner {
+            padding: $kendo-prompt-box-input-inner-padding;
+        }
+    }
+
+    .k-prompt-box-header {
+       padding: $kendo-prompt-box-header-padding;
+    }
+
+    .k-prompt-box-affix {
+        padding: $kendo-prompt-box-affix-padding;
+        border-color: inherit;
+        display: flex;
+        align-items: center;
+        flex: none;
+        gap: $kendo-prompt-box-affix-spacing;
+    }
+
+    .k-prompt-box-textarea {
+        resize: none;
+        white-space: nowrap;
+        flex: 1 1 auto;
+    }
+
+    .k-prompt-box-textarea + .k-prompt-box-affix {
+        justify-content: flex-end;
+    }
+
+    .k-prompt-box-content {
+        display: flex;
+        flex-flow: row nowrap;
+    }
+
+    .k-prompt-box-singleline {
+        .k-prompt-box-affix:has(+.k-input-inner) {
+            padding-inline-end: 0;
+        }
+
+        .k-input-inner + .k-prompt-box-affix {
+            padding-inline-start: 0;
+        }
+    }
+
+    .k-prompt-box-multiline {
+        .k-prompt-box-content {
+            flex-direction: column;
+        }
+
+        .k-prompt-box-textarea {
+            white-space: normal;
+            overflow: auto;
+        }
+    }
+
+}

package/scss/components/prompt-box/_theme.scss

@@ -0,0 +1,7 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-prompt-box--theme-base() {
+    .k-prompt-box {
+        box-shadow: $kendo-prompt-box-box-shadow;
+    }
+}

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

@@ -0,0 +1,11 @@
+// Prompt box
+
+$kendo-prompt-box-border-radius: null !default;
+
+$kendo-prompt-box-box-shadow: null !default;
+
+$kendo-prompt-box-header-padding: null !default;
+$kendo-prompt-box-input-inner-padding: null !default;
+$kendo-prompt-box-affix-padding: null !default;
+
+$kendo-prompt-box-affix-spacing: null !default;

package/scss/components/segmented-control/_layout.scss

@@ -0,0 +1,85 @@
+@use "sass:map";
+@use "./variables.scss" as *;
+@use "../../functions/index.scss" as *;
+@use "../../motion/index.scss" as *;
+
+@mixin kendo-segmented-control--layout-base() {
+
+    .k-segmented-control {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        padding-inline: $kendo-segmented-control-padding-x;
+        padding-block: $kendo-segmented-control-padding-y;
+        border-radius: $kendo-segmented-control-border-radius;
+        font-family: $kendo-segmented-control-font-family;
+        overflow: auto;
+        scrollbar-width: none;
+        white-space: nowrap;
+        box-sizing: border-box;
+
+        // Sizes
+        @each $size, $size-props in $kendo-segmented-control-sizes {
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+            $_button-padding-inline: map.get( $size-props, button-padding-x );
+            $_button-padding-block: map.get( $size-props, button-padding-y );
+            $_button-gap: map.get( $size-props, button-gap );
+
+            #{k-when-default($kendo-segmented-control-default-size, $size)}
+            &.k-segmented-control-#{$size} {
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                .k-segmented-control-button {
+                    padding-inline: $_button-padding-inline;
+                    padding-block: $_button-padding-block;
+                    gap: $_button-gap;
+                }
+            }
+        }
+    }
+
+    .k-segmented-control-stretched {
+        width: 100%;
+
+        .k-segmented-control-button {
+            overflow: hidden;
+        }
+    }
+
+    .k-segmented-control-thumb {
+        position: absolute;
+        height: calc( 100% - ( #{$kendo-segmented-control-padding-y} * 2));
+        border-radius: $kendo-segmented-control-thumb-border-radius;
+        pointer-events: none;
+        transition: all k-transition(settle);
+    }
+
+    .k-segmented-control-button {
+        position: relative;
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        border-width: $kendo-segmented-control-button-border-width;
+        border-radius: $kendo-segmented-control-button-border-radius;
+        cursor: pointer;
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    .k-segmented-control-button-text {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        min-width: 0
+    }
+
+
+    .k-segmented-control-button-icon {
+        flex-shrink: 0;
+    }
+
+}

package/scss/components/segmented-control/_theme.scss

@@ -0,0 +1,38 @@
+@use "../../mixins/index.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-segmented-control--theme-base() {
+    .k-segmented-control {
+        background-color: $kendo-segmented-control-bg;
+        color: $kendo-segmented-control-text;
+    }
+
+    .k-segmented-control-thumb {
+        background-color: $kendo-segmented-control-thumb-bg;
+        box-shadow: $kendo-segmented-control-thumb-shadow;
+    }
+
+    .k-segmented-control-button {
+        color: inherit;
+        background-color: transparent;
+
+        &:hover,
+        &.k-hover {
+            background-color: $kendo-segmented-control-button-hover-bg;
+        }
+
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-segmented-control-button-focus-indicator, true, true );
+        }
+
+        &.k-selected {
+            color: $kendo-segmented-control-thumb-text;
+
+            &:hover,
+            &.k-hover {
+                background-color: transparent;
+            }
+        }
+    }
+}

package/scss/components/segmented-control/_variables.scss

@@ -0,0 +1,73 @@
+// Segmented control
+
+$kendo-segmented-control-default-size: null !default;
+
+$kendo-segmented-control-padding-x: null !default;
+$kendo-segmented-control-padding-y: null !default;
+$kendo-segmented-control-border-radius: null !default;
+
+$kendo-segmented-control-bg: null !default;
+$kendo-segmented-control-text: null !default;
+
+$kendo-segmented-control-sm-font-size: null !default;
+$kendo-segmented-control-md-font-size: null !default;
+$kendo-segmented-control-lg-font-size: null !default;
+
+$kendo-segmented-control-font-family: null !default;
+
+$kendo-segmented-control-sm-line-height: null !default;
+$kendo-segmented-control-md-line-height: null !default;
+$kendo-segmented-control-lg-line-height: null !default;
+
+$kendo-segmented-control-thumb-border-radius: null !default;
+$kendo-segmented-control-thumb-shadow: null !default;
+$kendo-segmented-control-thumb-bg: null !default;
+$kendo-segmented-control-thumb-text: null !default;
+
+$kendo-segmented-control-sm-button-padding-x: null !default;
+$kendo-segmented-control-md-button-padding-x: null !default;
+$kendo-segmented-control-lg-button-padding-x: null !default;
+
+$kendo-segmented-control-sm-button-padding-y: null !default;
+$kendo-segmented-control-md-button-padding-y: null !default;
+$kendo-segmented-control-lg-button-padding-y: null !default;
+
+$kendo-segmented-control-button-border-width: null !default;
+$kendo-segmented-control-button-border-radius: null !default;
+
+$kendo-segmented-control-sm-button-gap: null !default;
+$kendo-segmented-control-md-button-gap: null !default;
+$kendo-segmented-control-lg-button-gap: null !default;
+
+$kendo-segmented-control-button-hover-bg: null !default;
+$kendo-segmented-control-button-focus-indicator: null !default;
+
+/// The map with the sizes of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-sizes: (
+    sm: (
+        font-size: $kendo-segmented-control-sm-font-size,
+        line-height: $kendo-segmented-control-sm-line-height,
+        button-padding-x: $kendo-segmented-control-sm-button-padding-x,
+        button-padding-y: $kendo-segmented-control-sm-button-padding-y,
+        button-gap: $kendo-segmented-control-sm-button-gap
+    ),
+    md: (
+        font-size: $kendo-segmented-control-md-font-size,
+        line-height: $kendo-segmented-control-md-line-height,
+        button-padding-x: $kendo-segmented-control-md-button-padding-x,
+        button-padding-y: $kendo-segmented-control-md-button-padding-y,
+        button-gap: $kendo-segmented-control-md-button-gap
+    ),
+    lg: (
+        font-size: $kendo-segmented-control-lg-font-size,
+        line-height: $kendo-segmented-control-lg-line-height,
+        button-padding-x: $kendo-segmented-control-lg-button-padding-x,
+        button-padding-y: $kendo-segmented-control-lg-button-padding-y,
+        button-gap: $kendo-segmented-control-lg-button-gap
+    )
+) !default;
+
+
+
+

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

@@ -0,0 +1,85 @@
+@use "sass:map";
+@use "./variables.scss" as *;
+@use "../../color-system/_functions.scss" as *;
+@use "../../functions/index.scss" as *;
+@use "../../spacing/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
+
+@mixin kendo-smart-box--layout-base() {
+
+    .k-smart-box {
+        .k-input-inner {
+            padding-inline: 0;
+        }
+
+        .k-input-prefix {
+            cursor: pointer;
+        }
+
+         // Roundness
+        @each $roundness in $kendo-smart-box-roundness {
+            #{k-when-default($kendo-smart-box-default-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+                border-radius: k-border-radius($roundness);
+            }
+        }
+
+        // Sizing
+        @each $size, $size-props in $kendo-smart-box-sizes {
+            $_padding-x: map.get( $size-props, padding-x );
+            $_prefix-margin-x: map.get( $size-props, prefix-margin-x );
+
+            #{k-when-default($kendo-smart-box-default-size, $size)}
+            &.k-input-#{$size} {
+                padding-inline-end: $_padding-x;
+
+                .k-input-prefix {
+                    margin-inline-start: $_prefix-margin-x;
+                }
+
+                .k-input-inner {
+                    padding-inline: 0;
+                }
+            }
+        }
+
+        .k-input-suffix {
+            gap: $kendo-smart-box-suffix-spacing;
+        }
+    }
+
+    .k-smart-box-popup {
+        padding-inline: $kendo-smart-box-popup-padding-inline;
+        padding-block: $kendo-smart-box-popup-padding-block;
+        border-radius: $kendo-smart-box-popup-border-radius;
+        gap: $kendo-smart-box-popup-spacing;
+
+        > .k-list {
+            border-radius: 0;
+        }
+
+        > .k-segmented-control {
+            margin-block-start: $kendo-smart-box-popup-segmented-control-margin;
+            margin-inline: $kendo-smart-box-popup-segmented-control-margin;
+            width: calc(100% - #{$kendo-smart-box-popup-segmented-control-margin} * 2);
+        }
+
+        .k-list-item-text {
+            white-space: nowrap;
+        }
+
+        .k-smart-box-check-icon {
+            color: k-color(success);
+        }
+    }
+
+    .k-smart-box-no-data {
+        flex-direction: column;
+        padding-inline: k-spacing(2);
+        padding-block: k-spacing(4);
+        gap: $kendo-smart-box-popup-spacing;
+        font-size: var(--kendo-font-size-sm, inherit);
+        min-height: auto;
+    }
+
+}

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

@@ -0,0 +1,5 @@
+@mixin kendo-smart-box--theme-base() {
+    .k-smart-box-no-data .k-icon {
+        opacity: 0.3;
+    }
+}

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/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);
+        }
+    }
+
 }