@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/input/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system/" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 @use "../button/_variables.scss"as *;
 
 /// Width of the input.
@@ -19,15 +19,15 @@ $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
 
 /// Horizontal padding of the input.
 /// @group input
-$kendo-input-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
-$kendo-input-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
-$kendo-input-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+$kendo-input-padding-x-sm: map.get( $kendo-spacing, 2 ) !default;
+$kendo-input-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-input-padding-x-lg: map.get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of the input.
 /// @group input
-$kendo-input-padding-y-sm: map-get( $kendo-spacing, 1 ) !default;
-$kendo-input-padding-y-md: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
-$kendo-input-padding-y-lg: map-get( $kendo-spacing, 2 ) !default;
+$kendo-input-padding-y-sm: map.get( $kendo-spacing, 1 ) !default;
+$kendo-input-padding-y-md: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-input-padding-y-lg: map.get( $kendo-spacing, 2 ) !default;
 
 /// Font sizes of the input.
 /// @group input
@@ -66,7 +66,7 @@ $kendo-input-solid-text: get-theme-color-var( neutral-160 ) !default;
 
 /// The background color of the solid input.
 /// @group input
-$kendo-input-solid-bg: $white !default;
+$kendo-input-solid-bg: $kendo-color-white !default;
 
 /// The border color of the solid input.
 /// @group input
@@ -126,7 +126,7 @@ $kendo-input-outline-text: get-theme-color-var( neutral-160 ) !default;
 
 /// The background color of the outline input.
 /// @group input
-$kendo-input-outline-bg: $white !default;
+$kendo-input-outline-bg: $kendo-color-white !default;
 
 /// The border color of the outline input.
 /// @group input
@@ -138,7 +138,7 @@ $kendo-input-outline-hover-text: get-theme-color-var( neutral-190 ) !default;
 
 /// The hover background color of the outline input.
 /// @group input
-$kendo-input-outline-hover-bg: $white !default;
+$kendo-input-outline-hover-bg: $kendo-color-white !default;
 
 /// The hover border color of the outline input.
 /// @group input
@@ -150,7 +150,7 @@ $kendo-input-outline-focus-text: get-theme-color-var( neutral-160 ) !default;
 
 /// The focus background color of the outline input.
 /// @group input
-$kendo-input-outline-focus-bg: $white !default;
+$kendo-input-outline-focus-bg: $kendo-color-white !default;
 
 /// The focus border color of the outline input.
 /// @group input
@@ -186,7 +186,7 @@ $kendo-input-flat-text: get-theme-color-var( neutral-160 ) !default;
 
 /// The background color of the flat input.
 /// @group input
-$kendo-input-flat-bg: $white !default;
+$kendo-input-flat-bg: $kendo-color-white !default;
 
 /// The border color of the flat input.
 /// @group input
@@ -198,7 +198,7 @@ $kendo-input-flat-hover-text: get-theme-color-var( neutral-190 ) !default;
 
 /// The hover background color of the flat input.
 /// @group input
-$kendo-input-flat-hover-bg: $white !default;
+$kendo-input-flat-hover-bg: $kendo-color-white !default;
 
 /// The hover border color of the flat input.
 /// @group input
@@ -210,7 +210,7 @@ $kendo-input-flat-focus-text: get-theme-color-var( neutral-160 ) !default;
 
 /// The focus background color of the flat input.
 /// @group input
-$kendo-input-flat-focus-bg: $white !default;
+$kendo-input-flat-focus-bg: $kendo-color-white !default;
 
 /// The focus border color of the flat input.
 /// @group input
@@ -246,7 +246,7 @@ $kendo-picker-solid-text: get-theme-color-var( neutral-160 ) !default;
 
 /// The background color of the solid picker.
 /// @group input
-$kendo-picker-solid-bg: $white !default;
+$kendo-picker-solid-bg: $kendo-color-white !default;
 
 /// The border color of the solid picker.
 /// @group input
@@ -258,7 +258,7 @@ $kendo-picker-solid-hover-text: get-theme-color-var( neutral-190 ) !default;
 
 /// The hover background color of the solid picker.
 /// @group input
-$kendo-picker-solid-hover-bg: $white !default;
+$kendo-picker-solid-hover-bg: $kendo-color-white !default;
 
 /// The hover border color of the solid picker.
 /// @group input
@@ -270,7 +270,7 @@ $kendo-picker-solid-focus-text: get-theme-color-var( neutral-160 ) !default;
 
 /// The focus background color of the solid picker.
 /// @group input
-$kendo-picker-solid-focus-bg: $white !default;
+$kendo-picker-solid-focus-bg: $kendo-color-white !default;
 
 /// The focus border color of the solid picker.
 /// @group input
@@ -314,7 +314,7 @@ $kendo-picker-outline-border: get-theme-color-var( neutral-160 ) !default;
 
 /// The hover text color of the outline picker.
 /// @group input
-$kendo-picker-outline-hover-text: $white !default;
+$kendo-picker-outline-hover-text: $kendo-color-white !default;
 
 /// The hover background color of the outline picker.
 /// @group input
@@ -330,7 +330,7 @@ $kendo-picker-outline-focus-text: get-theme-color-var( neutral-160 ) !default;
 
 /// The focus background color of the outline picker.
 /// @group input
-$kendo-picker-outline-focus-bg: $white!default;
+$kendo-picker-outline-focus-bg: $kendo-color-white!default;
 
 /// The focus border color of the outline picker.
 /// @group input
@@ -338,7 +338,7 @@ $kendo-picker-outline-focus-border: get-theme-color-var( primary-100 ) !default;
 
 /// The hover-focus text color of the outline picker.
 /// @group input
-$kendo-picker-outline-hover-focus-text: $white !default;
+$kendo-picker-outline-hover-focus-text: $kendo-color-white !default;
 
 /// The hover-focus background color of the outline picker.
 /// @group input
@@ -366,7 +366,7 @@ $kendo-picker-flat-text: get-theme-color-var( neutral-160 ) !default;
 
 /// The background color of the flat picker.
 /// @group input
-$kendo-picker-flat-bg: $white !default;
+$kendo-picker-flat-bg: $kendo-color-white !default;
 
 /// The border color of the flat picker.
 /// @group input
@@ -390,7 +390,7 @@ $kendo-picker-flat-focus-text: get-theme-color-var( neutral-160 ) !default;
 
 /// The focus background color of the flat picker.
 /// @group input
-$kendo-picker-flat-focus-bg: $white !default;
+$kendo-picker-flat-focus-bg: $kendo-color-white !default;
 
 /// The focus border color of the flat picker.
 /// @group input

package/scss/input/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/list/_layout.scss

@@ -1,5 +1,6 @@
-@use "../core/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-list--layout() {
 
@@ -69,7 +70,6 @@
         flex: 1 1 auto;
         overflow: hidden;
         overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
         position: relative;
     }
 
@@ -186,7 +186,7 @@
     .k-list-filter {
         display: block;
         position: relative;
-        padding: var( --kendo-padding-x, #{$kendo-padding-x} );
+        padding: var( --kendo-padding-x, #{$kendo-padding-md-x} );
         box-sizing: border-box;
         flex: 0 0 auto;
     }
@@ -194,23 +194,23 @@
 
     // Switch sizes
     @each $size, $size-props in $kendo-list-sizes {
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
-        $_header-padding-x: map-get( $size-props, header-padding-x );
-        $_header-padding-y: map-get( $size-props, header-padding-y );
-        $_header-font-size: map-get( $size-props, header-font-size );
-        $_header-line-height: map-get( $size-props, header-line-height );
-        $_item-padding-x: map-get( $size-props, item-padding-x );
-        $_item-padding-y: map-get( $size-props, item-padding-y );
-        $_item-font-size: map-get( $size-props, item-font-size );
-        $_item-line-height: map-get( $size-props, item-line-height );
-        $_item-group-label-padding-x: map-get( $size-props, item-group-label-padding-x );
-        $_item-group-label-padding-y: map-get( $size-props, item-group-label-padding-y );
-        $_item-group-label-font-size: map-get( $size-props, item-group-label-font-size );
-        $_group-item-padding-x: map-get( $size-props, group-item-padding-x );
-        $_group-item-padding-y: map-get( $size-props, group-item-padding-y );
-        $_group-item-font-size: map-get( $size-props, group-item-font-size );
-        $_group-item-line-height: map-get( $size-props, group-item-line-height );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_header-padding-x: map.get( $size-props, header-padding-x );
+        $_header-padding-y: map.get( $size-props, header-padding-y );
+        $_header-font-size: map.get( $size-props, header-font-size );
+        $_header-line-height: map.get( $size-props, header-line-height );
+        $_item-padding-x: map.get( $size-props, item-padding-x );
+        $_item-padding-y: map.get( $size-props, item-padding-y );
+        $_item-font-size: map.get( $size-props, item-font-size );
+        $_item-line-height: map.get( $size-props, item-line-height );
+        $_item-group-label-padding-x: map.get( $size-props, item-group-label-padding-x );
+        $_item-group-label-padding-y: map.get( $size-props, item-group-label-padding-y );
+        $_item-group-label-font-size: map.get( $size-props, item-group-label-font-size );
+        $_group-item-padding-x: map.get( $size-props, group-item-padding-x );
+        $_group-item-padding-y: map.get( $size-props, group-item-padding-y );
+        $_group-item-font-size: map.get( $size-props, group-item-font-size );
+        $_group-item-line-height: map.get( $size-props, group-item-line-height );
 
         .k-list-#{$size} {
             --INTERNAL--kendo-list-font-size: var( --kendo-list-#{$size}-font-size, #{$_font-size} );

package/scss/list/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-list--theme() {
 

package/scss/list/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Font size of the list component.
 /// @group list
@@ -15,15 +15,15 @@ $kendo-list-line-height-lg: var( --kendo-line-height, normal ) !default;
 
 /// Horizontal padding of list header.
 /// @group list
-$kendo-list-header-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-header-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-header-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-header-padding-x-sm: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-header-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-header-padding-x-lg: map.get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of list header.
 /// @group list
-$kendo-list-header-padding-y-sm: map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) !default;
-$kendo-list-header-padding-y-md: map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-header-padding-y-lg: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-list-header-padding-y-sm: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-list-header-padding-y-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-header-padding-y-lg: map.get( $kendo-spacing, 2.5 ) !default;
 
 /// Border width of list header.
 /// @group list
@@ -47,15 +47,15 @@ $kendo-list-header-font-weight: var( --kendo-font-weight-bold, normal ) !default
 
 /// Horizontal padding of list items.
 /// @group list
-$kendo-list-item-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-item-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-item-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-item-padding-x-sm: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-item-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-item-padding-x-lg: map.get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of list items.
 /// @group list
-$kendo-list-item-padding-y-sm: map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) !default;
-$kendo-list-item-padding-y-md: map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-item-padding-y-lg: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-list-item-padding-y-sm: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-list-item-padding-y-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-item-padding-y-lg: map.get( $kendo-spacing, 2.5 ) !default;
 
 /// Font size of list items.
 /// @group list
@@ -77,27 +77,27 @@ $kendo-list-item-group-label-font-size-lg: var( --kendo-font-size-xs, inherit )
 
 /// Horizontal padding of list group items.
 /// @group list
-$kendo-list-group-item-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-group-item-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-group-item-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+$kendo-list-group-item-padding-x-sm: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-group-item-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-group-item-padding-x-lg: map.get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of list group items.
 /// @group list
-$kendo-list-group-item-padding-y-sm: map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) !default;
-$kendo-list-group-item-padding-y-md: map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-group-item-padding-y-lg: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-list-group-item-padding-y-sm: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-list-group-item-padding-y-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-list-group-item-padding-y-lg: map.get( $kendo-spacing, 2.5 ) !default;
 
 /// Horizontal padding of list item group label.
 /// @group list
-$kendo-list-item-group-label-padding-x-sm: map-get( $kendo-spacing, thin ) !default;
-$kendo-list-item-group-label-padding-x-md: map-get( $kendo-spacing, 1 ) !default;
-$kendo-list-item-group-label-padding-x-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-list-item-group-label-padding-x-sm: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-list-item-group-label-padding-x-md: map.get( $kendo-spacing, 1 ) !default;
+$kendo-list-item-group-label-padding-x-lg: map.get( $kendo-spacing, 1.5 ) !default;
 
 /// Vertical padding of list item group label.
 /// @group list
-$kendo-list-item-group-label-padding-y-sm: map-get( $kendo-spacing, thin ) !default;
-$kendo-list-item-group-label-padding-y-md: map-get( $kendo-spacing, 1 ) !default;
-$kendo-list-item-group-label-padding-y-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-list-item-group-label-padding-y-sm: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-list-item-group-label-padding-y-md: map.get( $kendo-spacing, 1 ) !default;
+$kendo-list-item-group-label-padding-y-lg: map.get( $kendo-spacing, 1.5 ) !default;
 
 /// Border width of list group items.
 /// @group list
@@ -198,7 +198,7 @@ $kendo-list-border: var( --kendo-component-border, inherit ) !default;
 
 /// Background color of list header.
 /// @group list
-$kendo-list-header-bg: $white !default;
+$kendo-list-header-bg: $kendo-color-white !default;
 /// Text color of list header.
 /// @group list
 $kendo-list-header-text: get-theme-color-var( primary-100 ) !default;
@@ -212,7 +212,7 @@ $kendo-list-header-shadow: $kendo-box-shadow-depth-3 !default;
 
 /// Background color of list items.
 /// @group list
-$kendo-list-item-bg: $white !default;
+$kendo-list-item-bg: $kendo-color-white !default;
 /// Text color of list items.
 /// @group list
 $kendo-list-item-text: get-theme-color-var( neutral-160 ) !default;
@@ -226,7 +226,7 @@ $kendo-list-item-hover-text: get-theme-color-var( neutral-190 ) !default;
 
 /// Background color of focused list items.
 /// @group list
-$kendo-list-item-focus-bg: $white !default;
+$kendo-list-item-focus-bg: $kendo-color-white !default;
 /// Text color of focused list items.
 /// @group list
 $kendo-list-item-focus-text: get-theme-color-var( neutral-160 ) !default;
@@ -250,14 +250,14 @@ $kendo-list-item-selected-hover-text: get-theme-color-var( neutral-190 ) !defaul
 
 /// Background color of disabled list items.
 /// @group list
-$kendo-list-item-disabled-bg: $white !default;
+$kendo-list-item-disabled-bg: $kendo-color-white !default;
 /// Text color of disabled list items.
 /// @group list
 $kendo-list-item-disabled-text: get-theme-color-var( neutral-90 ) !default;
 
 /// Background color of list group items.
 /// @group list
-$kendo-list-group-item-bg: $white !default;
+$kendo-list-group-item-bg: $kendo-color-white !default;
 /// Text color of list group items.
 /// @group list
 $kendo-list-group-item-text: get-theme-color-var( primary-100 ) !default;

package/scss/list/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/listbox/_layout.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-listbox--layout() {
 
@@ -14,63 +14,39 @@
         vertical-align: top;
         background-color: transparent;
         display: inline-flex;
+        gap: var( --kendo-listbox-spacing, #{$kendo-listbox-spacing} );
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
-        .k-listbox-toolbar ul {
+        .k-listbox-actions {
             display: flex;
+            gap: var( --kendo-listbox-button-spacing, #{$kendo-listbox-button-spacing} );
         }
 
-        &.k-listbox-toolbar-left,
-        &.k-listbox-toolbar-right {
-            .k-listbox-toolbar ul {
-                flex-direction: column;
-            }
-
-            .k-listbox-toolbar li + li {
-                margin-block-start: var( --kendo-listbox-button-margin, #{$kendo-listbox-button-margin} );
-            }
-        }
-
-        &.k-listbox-toolbar-left {
+        &.k-listbox-actions-left,
+        &.k-listbox-actions-right {
             flex-direction: row;
 
-            .k-listbox-toolbar {
-                margin-inline-end: var( --kendo-listbox-margin, #{$kendo-listbox-margin} );
+            .k-listbox-actions {
+                flex-direction: column;
             }
         }
 
-        &.k-listbox-toolbar-right {
+        &.k-listbox-actions-right {
             flex-direction: row-reverse;
-
-            .k-listbox-toolbar {
-                margin-inline-start: var( --kendo-listbox-margin, #{$kendo-listbox-margin} );
-            }
         }
 
-        &.k-listbox-toolbar-top,
-        &.k-listbox-toolbar-bottom {
+        &.k-listbox-actions-top,
+        &.k-listbox-actions-bottom {
             flex-direction: column;
 
-            .k-listbox-toolbar ul {
+            .k-listbox-actions {
                 flex-direction: row;
             }
-
-            .k-listbox-toolbar li + li {
-                margin-inline-start: var( --kendo-listbox-button-margin, #{$kendo-listbox-button-margin} );
-            }
         }
 
-        &.k-listbox-toolbar-top {
-            .k-listbox-toolbar {
-                margin-block-end: var( --kendo-listbox-margin, #{$kendo-listbox-margin} );
-            }
-        }
-
-        &.k-listbox-toolbar-bottom {
-            .k-listbox-toolbar {
-                margin-block-start: var( --kendo-listbox-margin, #{$kendo-listbox-margin} );
-            }
+        &.k-listbox-actions-bottom {
+            flex-direction: column-reverse;
         }
 
         .k-list-scroller {

package/scss/listbox/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-listbox--theme() {
 

package/scss/listbox/_variables.scss

@@ -1,12 +1,12 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Margin between the listbox elements.
 /// @group listbox
-$kendo-listbox-margin: $kendo-padding-x !default;
+$kendo-listbox-spacing: map.get( $kendo-spacing, 2 ) !default;
 /// Margin between the listbox buttons.
 /// @group listbox
-$kendo-listbox-button-margin: $kendo-padding-x !default;
+$kendo-listbox-button-spacing: map.get( $kendo-spacing, 2 ) !default;
 /// Width of the listbox.
 /// @group listbox
 $kendo-listbox-width: 10em !default;
@@ -22,7 +22,7 @@ $kendo-listbox-border-width: 1px !default;
 $kendo-listbox-font-family: var( --kendo-font-family, normal ) !default;
 /// Font size of the listbox.
 /// @group listbox
-$kendo-listbox-font-size: var( --kendo-font-size, inherit ) !default;;
+$kendo-listbox-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the listbox.
 /// @group listbox
 $kendo-listbox-line-height: var( --kendo-line-height, normal ) !default;

package/scss/listbox/index.scss

@@ -11,9 +11,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/listgroup/_layout.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-listgroup--layout() {
 

package/scss/listgroup/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-listgroup--theme() {
 

package/scss/listgroup/_variables.scss

@@ -1,5 +1,6 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+
 
 /// Border width of the listgroup.
 /// @group listgroup
@@ -27,10 +28,10 @@ $kendo-listgroup-border: var( --kendo-component-border, inherit ) !default;
 
 /// Horizontal padding of the listgroup items.
 /// @group listgroup
-$kendo-listgroup-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-listgroup-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the listgroup items.
 /// @group listgroup
-$kendo-listgroup-item-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-listgroup-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Border width of the listgroup item.
 /// @group listgroup
 $kendo-listgroup-item-border-width: 1px !default;

package/scss/listgroup/index.scss

@@ -8,9 +8,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/listview/_layout.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-listview--layout() {
 
@@ -114,7 +114,6 @@
     .k-listview-pager {
         border-width: 0;
         border-color: inherit;
-        font: inherit;
     }
     .k-listview-bordered > .k-listview-pager-top {
         border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );

package/scss/listview/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-listview--theme() {
     // Listview
@@ -8,7 +8,7 @@
             var( --kendo-listview-text, $kendo-listview-text ),
             var( --kendo-listview-bg, $kendo-listview-bg ),
             var( --kendo-listview-border, $kendo-listview-border )
-        )
+        );
     }
 
 
@@ -31,6 +31,11 @@
         }
     }
 
+    // List item
+    .k-listview-item {
+        border-color: $kendo-listview-border;
+    }
+
     // Listview header
     .k-listview-header {
         @include fill(