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

package/scss/components/grid/_layout.scss

@@ -7,6 +7,7 @@
 @use "../../typography/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../elevation/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "../chip/_variables.scss" as *;
@@ -317,6 +318,28 @@
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
 
+        .k-grid-sticky-container {
+            position: sticky;
+            inset-block-start: 0;
+            z-index: k-z-index("base", 3);
+            overflow: hidden;
+            border-color: inherit;
+            box-shadow: $kendo-grid-sticky-container-shadow;
+
+            .k-table {
+                table-layout: fixed;
+            }
+        }
+
+        .k-grid-sticky-top-container:has(> .k-grid-group-sticky-header-table) {
+            border-block-end-width: 1px;
+            border-block-end-style: solid;
+        }
+        .k-grid-sticky-bottom-container:has(> .k-grid-group-sticky-footer-table) {
+            border-block-start-width: 1px;
+            border-block-start-style: solid;
+        }
+
         .k-hierarchy-cell,
         .k-drag-cell {
             text-align: center;
@@ -335,6 +358,20 @@
             }
         }
 
+        .k-pin-cell {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: k-spacing(2);
+            padding: k-spacing(1);
+            cursor: pointer;
+
+            > .k-icon-wrapper-host .k-icon,
+            > .k-icon {
+                flex-shrink: 0;
+            }
+        }
+
         .k-hierarchy-cell + .k-grid-content-sticky {
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
@@ -403,6 +440,11 @@
         .k-table-row.k-highlighted > .k-table-td {
             font-weight: $kendo-grid-highlighted-font-weight;
         }
+
+        // Indicates that the row is a source of a pinned element
+        .k-table-row.k-pinned-source {
+            font-weight: $kendo-grid-pinned-source-font-weight;
+        }
     }
 
     .k-grid-resizable {
@@ -1489,6 +1531,7 @@
         cursor: pointer;
 
         > .k-icon,
+        > .k-icon-wrapper-host,
         > .k-expander-indicator {
             margin-inline-end: $kendo-icon-spacing;
         }

package/scss/components/grid/_theme.scss

@@ -67,6 +67,15 @@
         );
     }
 
+    .k-grid-sticky-container {
+        background-color: inherit;
+    }
+
+    .k-grid-sticky-top-container:has(> .k-grid-group-sticky-header-table),
+    .k-grid-sticky-bottom-container:has(> .k-grid-group-sticky-footer-table) {
+        border-color: $kendo-grid-sticky-border;
+    }
+
     .k-grouping-dropclue {
         &::before {
             border-color: $kendo-grid-header-text transparent transparent;

package/scss/components/grid/_variables.scss

@@ -172,6 +172,8 @@ $kendo-grid-sticky-header-border: null !default;
 
 $kendo-grid-sticky-footer-bg: null !default;
 
+$kendo-grid-sticky-container-shadow: null !default;
+
 $kendo-grid-column-menu-width: null !default;
 $kendo-grid-column-menu-max-width: null !default;
 
@@ -227,3 +229,5 @@ $kendo-grid-stack-expandable-shadow-height: null !default;
 $kendo-grid-stack-header-color: null !default;
 $kendo-grid-stack-focus-outline: null !default;
 $kendo-grid-stack-expandable-shadow: null !default;
+
+$kendo-grid-pinned-source-font-weight: null !default;

package/scss/components/icons/_theme.scss

@@ -1 +1,7 @@
-@mixin kendo-icon--theme-base() {}
+@use "./_variables.scss" as *;
+
+@mixin kendo-icon--theme-base() {
+    .k-accent-icon {
+        color: $kendo-accent-icon-color;
+    }
+}

package/scss/components/icons/_variables.scss

@@ -9,3 +9,5 @@ $kendo-icon-size-xxl: null !default;
 $kendo-icon-size-xxxl: null !default;
 $kendo-icon-spacing: null !default;
 $kendo-icon-padding: null !default;
+
+$kendo-accent-icon-color: null !default;

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