@progress/kendo-theme-classic 9.1.1-dev.1 → 10.0.0-dev.0

package/scss/input/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "../button/_variables.scss" as *;
+
 // Input
 
 /// The default width of the Input components.
@@ -106,7 +110,7 @@ $kendo-input-bg: $kendo-component-bg !default;
 $kendo-input-text: $kendo-component-text !default;
 /// The border color of the Input components.
 /// @group input
-$kendo-input-border: $kendo-button-border !default;
+$kendo-input-border: $kendo-component-border !default;
 /// The shadow of the Input components.
 /// @group input
 $kendo-input-shadow: null !default;
@@ -119,7 +123,7 @@ $kendo-input-hover-bg: null !default;
 $kendo-input-hover-text: null !default;
 /// The border color of the hovered Input components.
 /// @group input
-$kendo-input-hover-border: $kendo-button-hover-border !default;
+$kendo-input-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 3 )) !default;
 /// The shadow of the hovered Input components.
 /// @group input
 $kendo-input-hover-shadow: null !default;
@@ -165,7 +169,7 @@ $kendo-input-disabled-shadow: null !default;
 $kendo-input-outline-bg: null !default;
 /// The text color of the outline Input components.
 /// @group input
-$kendo-input-outline-text: null !default;
+$kendo-input-outline-text: unset !default;
 /// The border color of the outline Input components.
 /// @group input
 $kendo-input-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-button-text, .5)) !default;
@@ -257,13 +261,13 @@ $kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
 
 /// The width of the Input button.
 /// @group input
-$kendo-input-button-width: null !default;
+$kendo-input-button-width: unset !default;
 /// The border width of the Input button.
 /// @group input
 $kendo-input-button-border-width: 1px !default;
 /// The width of the Input spinner button.
 /// @group input
-$kendo-input-spinner-width: null !default;
+$kendo-input-spinner-width: unset !default;
 /// The icon offset of the Input spinner button.
 /// @group input
 $kendo-input-spinner-icon-offset: null !default;
@@ -441,3 +445,132 @@ $kendo-picker-flat-hover-focus-text: null !default;
 $kendo-picker-flat-hover-focus-border: null !default;
 
 
+
+
+@forward "@progress/kendo-theme-default/scss/input/_variables.scss" with (
+    $kendo-input-default-width: $kendo-input-default-width,
+    $kendo-input-border-width: $kendo-input-border-width,
+    $kendo-input-border-height: $kendo-input-border-height,
+    $kendo-input-border-radius: $kendo-input-border-radius,
+    $kendo-input-padding-x: $kendo-input-padding-x,
+    $kendo-input-sm-padding-x: $kendo-input-sm-padding-x,
+    $kendo-input-md-padding-x: $kendo-input-md-padding-x,
+    $kendo-input-lg-padding-x: $kendo-input-lg-padding-x,
+    $kendo-input-padding-y: $kendo-input-padding-y,
+    $kendo-input-sm-padding-y: $kendo-input-sm-padding-y,
+    $kendo-input-md-padding-y: $kendo-input-md-padding-y,
+    $kendo-input-lg-padding-y: $kendo-input-lg-padding-y,
+    $kendo-input-font-family: $kendo-input-font-family,
+    $kendo-input-font-size: $kendo-input-font-size,
+    $kendo-input-sm-font-size: $kendo-input-sm-font-size,
+    $kendo-input-md-font-size: $kendo-input-md-font-size,
+    $kendo-input-lg-font-size: $kendo-input-lg-font-size,
+    $kendo-input-line-height: $kendo-input-line-height,
+    $kendo-input-sm-line-height: $kendo-input-sm-line-height,
+    $kendo-input-md-line-height: $kendo-input-md-line-height,
+    $kendo-input-lg-line-height: $kendo-input-lg-line-height,
+    $kendo-input-sizes: $kendo-input-sizes,
+    $kendo-input-bg: $kendo-input-bg,
+    $kendo-input-text: $kendo-input-text,
+    $kendo-input-border: $kendo-input-border,
+    $kendo-input-shadow: $kendo-input-shadow,
+    $kendo-input-hover-bg: $kendo-input-hover-bg,
+    $kendo-input-hover-text: $kendo-input-hover-text,
+    $kendo-input-hover-border: $kendo-input-hover-border,
+    $kendo-input-hover-shadow: $kendo-input-hover-shadow,
+    $kendo-input-focus-bg: $kendo-input-focus-bg,
+    $kendo-input-focus-text: $kendo-input-focus-text,
+    $kendo-input-focus-border: $kendo-input-focus-border,
+    $kendo-input-focus-shadow: $kendo-input-focus-shadow,
+    $kendo-input-selected-bg: $kendo-input-selected-bg,
+    $kendo-input-selected-text: $kendo-input-selected-text,
+    $kendo-input-disabled-bg: $kendo-input-disabled-bg,
+    $kendo-input-disabled-text: $kendo-input-disabled-text,
+    $kendo-input-disabled-border: $kendo-input-disabled-border,
+    $kendo-input-disabled-gradient: $kendo-input-disabled-gradient,
+    $kendo-input-disabled-shadow: $kendo-input-disabled-shadow,
+    $kendo-input-outline-bg: $kendo-input-outline-bg,
+    $kendo-input-outline-text: $kendo-input-outline-text,
+    $kendo-input-outline-border: $kendo-input-outline-border,
+    $kendo-input-outline-hover-bg: $kendo-input-outline-hover-bg,
+    $kendo-input-outline-hover-text: $kendo-input-outline-hover-text,
+    $kendo-input-outline-hover-border: $kendo-input-outline-hover-border,
+    $kendo-input-outline-focus-bg: $kendo-input-outline-focus-bg,
+    $kendo-input-outline-focus-text: $kendo-input-outline-focus-text,
+    $kendo-input-outline-focus-border: $kendo-input-outline-focus-border,
+    $kendo-input-outline-focus-shadow: $kendo-input-outline-focus-shadow,
+    $kendo-input-flat-bg: $kendo-input-flat-bg,
+    $kendo-input-flat-text: $kendo-input-flat-text,
+    $kendo-input-flat-border: $kendo-input-flat-border,
+    $kendo-input-flat-hover-bg: $kendo-input-flat-hover-bg,
+    $kendo-input-flat-hover-text: $kendo-input-flat-hover-text,
+    $kendo-input-flat-hover-border: $kendo-input-flat-hover-border,
+    $kendo-input-flat-focus-bg: $kendo-input-flat-focus-bg,
+    $kendo-input-flat-focus-text: $kendo-input-flat-focus-text,
+    $kendo-input-flat-focus-border: $kendo-input-flat-focus-border,
+    $kendo-input-flat-focus-shadow: $kendo-input-flat-focus-shadow,
+    $kendo-input-placeholder-text: $kendo-input-placeholder-text,
+    $kendo-input-placeholder-opacity: $kendo-input-placeholder-opacity,
+    $kendo-input-clear-value-text: $kendo-input-clear-value-text,
+    $kendo-input-clear-value-opacity: $kendo-input-clear-value-opacity,
+    $kendo-input-clear-value-hover-text: $kendo-input-clear-value-hover-text,
+    $kendo-input-clear-value-hover-opacity: $kendo-input-clear-value-hover-opacity,
+    $kendo-input-values-margin-y: $kendo-input-values-margin-y,
+    $kendo-input-values-margin-x: $kendo-input-values-margin-x,
+    $kendo-input-button-width: $kendo-input-button-width,
+    $kendo-input-button-border-width: $kendo-input-button-border-width,
+    $kendo-input-spinner-width: $kendo-input-spinner-width,
+    $kendo-input-spinner-icon-offset: $kendo-input-spinner-icon-offset,
+    $kendo-input-separator-text: $kendo-input-separator-text,
+    $kendo-input-separator-opacity: $kendo-input-separator-opacity,
+    $kendo-input-prefix-text: $kendo-input-prefix-text,
+    $kendo-input-suffix-text: $kendo-input-suffix-text,
+    $kendo-input-invalid-border: $kendo-input-invalid-border,
+    $kendo-input-invalid-shadow: $kendo-input-invalid-shadow,
+    $kendo-picker-bg: $kendo-picker-bg,
+    $kendo-picker-text: $kendo-picker-text,
+    $kendo-picker-border: $kendo-picker-border,
+    $kendo-picker-gradient: $kendo-picker-gradient,
+    $kendo-picker-shadow: $kendo-picker-shadow,
+    $kendo-picker-hover-bg: $kendo-picker-hover-bg,
+    $kendo-picker-hover-text: $kendo-picker-hover-text,
+    $kendo-picker-hover-border: $kendo-picker-hover-border,
+    $kendo-picker-hover-gradient: $kendo-picker-hover-gradient,
+    $kendo-picker-hover-shadow: $kendo-picker-hover-shadow,
+    $kendo-picker-focus-bg: $kendo-picker-focus-bg,
+    $kendo-picker-focus-text: $kendo-picker-focus-text,
+    $kendo-picker-focus-border: $kendo-picker-focus-border,
+    $kendo-picker-focus-gradient: $kendo-picker-focus-gradient,
+    $kendo-picker-focus-shadow: $kendo-picker-focus-shadow,
+    $kendo-picker-disabled-bg: $kendo-picker-disabled-bg,
+    $kendo-picker-disabled-text: $kendo-picker-disabled-text,
+    $kendo-picker-disabled-border: $kendo-picker-disabled-border,
+    $kendo-picker-disabled-gradient: $kendo-picker-disabled-gradient,
+    $kendo-picker-disabled-shadow: $kendo-picker-disabled-shadow,
+    $kendo-picker-outline-bg: $kendo-picker-outline-bg,
+    $kendo-picker-outline-text: $kendo-picker-outline-text,
+    $kendo-picker-outline-border: $kendo-picker-outline-border,
+    $kendo-picker-outline-hover-bg: $kendo-picker-outline-hover-bg,
+    $kendo-picker-outline-hover-text: $kendo-picker-outline-hover-text,
+    $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-border,
+    $kendo-picker-outline-focus-bg: $kendo-picker-outline-focus-bg,
+    $kendo-picker-outline-focus-text: $kendo-picker-outline-focus-text,
+    $kendo-picker-outline-focus-border: $kendo-picker-outline-focus-border,
+    $kendo-picker-outline-focus-shadow: $kendo-picker-outline-focus-shadow,
+    $kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-focus-bg,
+    $kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-focus-text,
+    $kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-focus-border,
+    $kendo-picker-flat-bg: $kendo-picker-flat-bg,
+    $kendo-picker-flat-text: $kendo-picker-flat-text,
+    $kendo-picker-flat-border: $kendo-picker-flat-border,
+    $kendo-picker-flat-hover-bg: $kendo-picker-flat-hover-bg,
+    $kendo-picker-flat-hover-text: $kendo-picker-flat-hover-text,
+    $kendo-picker-flat-hover-border: $kendo-picker-flat-hover-border,
+    $kendo-picker-flat-focus-bg: $kendo-picker-flat-focus-bg,
+    $kendo-picker-flat-focus-text: $kendo-picker-flat-focus-text,
+    $kendo-picker-flat-focus-border: $kendo-picker-flat-focus-border,
+    $kendo-picker-flat-focus-shadow: $kendo-picker-flat-focus-shadow,
+    $kendo-picker-flat-hover-focus-bg: $kendo-picker-flat-hover-focus-bg,
+    $kendo-picker-flat-hover-focus-text: $kendo-picker-flat-hover-focus-text,
+    $kendo-picker-flat-hover-focus-border: $kendo-picker-flat-hover-focus-border
+);

package/scss/list/_index.scss

@@ -1,41 +1,16 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "list",
-    dependencies: (
-        "checkbox",
-        "icon",
-        "no-data"
-    )
-);
-
-
 // Dependencies
-@import "../checkbox/_index.scss";
-@import "../no-data/_index.scss";
-
+@use "../core/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-list--styles() {
-    @include module-render( "list" ) {
+    @include import-once( "list" ) {
+        @include core-styles();
         @include kendo-list--layout();
         @include kendo-list--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-list--styles();
-}

package/scss/list/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/list/_layout.scss";
+@use "@progress/kendo-theme-default/scss/list/_layout.scss" as *;
 
 
 @mixin kendo-list--layout() {

package/scss/list/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/list/_theme.scss";
+@use "@progress/kendo-theme-default/scss/list/_theme.scss" as *;
 
 
 @mixin kendo-list--theme() {

package/scss/list/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // List
 
 /// The font family of the List components.
@@ -54,6 +56,10 @@ $kendo-list-lg-header-line-height: null !default;
 /// @group list
 $kendo-list-header-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
+/// The padding of the the List filter input.
+/// @group list
+$kendo-list-filter-padding: k-spacing(2) !default;
+
 /// The horizontal padding of the List items, when no size is set.
 /// @group list
 $kendo-list-item-padding-x: null !default;
@@ -195,7 +201,7 @@ $kendo-list-header-text: null !default;
 $kendo-list-header-border: inherit !default;
 /// The box shadow of the List header.
 /// @group list
-$kendo-list-header-shadow: null !default;
+$kendo-list-header-shadow: none !default;
 
 
 /// The background color of the List items.
@@ -245,3 +251,91 @@ $kendo-list-group-item-shadow: null !default;
 /// The color of the 'Option Label' text.
 /// @group list
 $kendo-list-option-label-text: $kendo-subtle-text !default;
+
+
+@forward "@progress/kendo-theme-default/scss/list/_variables.scss" with (
+    $kendo-list-font-family: $kendo-list-font-family,
+    $kendo-list-font-size: $kendo-list-font-size,
+    $kendo-list-sm-font-size: $kendo-list-sm-font-size,
+    $kendo-list-md-font-size: $kendo-list-md-font-size,
+    $kendo-list-lg-font-size: $kendo-list-lg-font-size,
+    $kendo-list-line-height: $kendo-list-line-height,
+    $kendo-list-sm-line-height: $kendo-list-sm-line-height,
+    $kendo-list-md-line-height: $kendo-list-md-line-height,
+    $kendo-list-lg-line-height: $kendo-list-lg-line-height,
+    $kendo-list-header-padding-x: $kendo-list-header-padding-x,
+    $kendo-list-sm-header-padding-x: $kendo-list-sm-header-padding-x,
+    $kendo-list-md-header-padding-x: $kendo-list-md-header-padding-x,
+    $kendo-list-lg-header-padding-x: $kendo-list-lg-header-padding-x,
+    $kendo-list-header-padding-y: $kendo-list-header-padding-y,
+    $kendo-list-sm-header-padding-y: $kendo-list-sm-header-padding-y,
+    $kendo-list-md-header-padding-y: $kendo-list-md-header-padding-y,
+    $kendo-list-lg-header-padding-y: $kendo-list-lg-header-padding-y,
+    $kendo-list-header-border-width: $kendo-list-header-border-width,
+    $kendo-list-header-font-size: $kendo-list-header-font-size,
+    $kendo-list-sm-header-font-size: $kendo-list-sm-header-font-size,
+    $kendo-list-md-header-font-size: $kendo-list-md-header-font-size,
+    $kendo-list-lg-header-font-size: $kendo-list-lg-header-font-size,
+    $kendo-list-header-line-height: $kendo-list-header-line-height,
+    $kendo-list-sm-header-line-height: $kendo-list-sm-header-line-height,
+    $kendo-list-md-header-line-height: $kendo-list-md-header-line-height,
+    $kendo-list-lg-header-line-height: $kendo-list-lg-header-line-height,
+    $kendo-list-header-font-weight: $kendo-list-header-font-weight,
+    $kendo-list-filter-padding: $kendo-list-filter-padding,
+    $kendo-list-item-padding-x: $kendo-list-item-padding-x,
+    $kendo-list-sm-item-padding-x: $kendo-list-sm-item-padding-x,
+    $kendo-list-md-item-padding-x: $kendo-list-md-item-padding-x,
+    $kendo-list-lg-item-padding-x: $kendo-list-lg-item-padding-x,
+    $kendo-list-item-padding-y: $kendo-list-item-padding-y,
+    $kendo-list-sm-item-padding-y: $kendo-list-sm-item-padding-y,
+    $kendo-list-md-item-padding-y: $kendo-list-md-item-padding-y,
+    $kendo-list-lg-item-padding-y: $kendo-list-lg-item-padding-y,
+    $kendo-list-item-font-size: $kendo-list-item-font-size,
+    $kendo-list-sm-item-font-size: $kendo-list-sm-item-font-size,
+    $kendo-list-md-item-font-size: $kendo-list-md-item-font-size,
+    $kendo-list-lg-item-font-size: $kendo-list-lg-item-font-size,
+    $kendo-list-item-line-height: $kendo-list-item-line-height,
+    $kendo-list-sm-item-line-height: $kendo-list-sm-item-line-height,
+    $kendo-list-md-item-line-height: $kendo-list-md-item-line-height,
+    $kendo-list-lg-item-line-height: $kendo-list-lg-item-line-height,
+    $kendo-list-group-item-padding-x: $kendo-list-group-item-padding-x,
+    $kendo-list-sm-group-item-padding-x: $kendo-list-sm-group-item-padding-x,
+    $kendo-list-md-group-item-padding-x: $kendo-list-md-group-item-padding-x,
+    $kendo-list-lg-group-item-padding-x: $kendo-list-lg-group-item-padding-x,
+    $kendo-list-group-item-padding-y: $kendo-list-group-item-padding-y,
+    $kendo-list-sm-group-item-padding-y: $kendo-list-sm-group-item-padding-y,
+    $kendo-list-md-group-item-padding-y: $kendo-list-md-group-item-padding-y,
+    $kendo-list-lg-group-item-padding-y: $kendo-list-lg-group-item-padding-y,
+    $kendo-list-group-item-border-width: $kendo-list-group-item-border-width,
+    $kendo-list-group-item-font-size: $kendo-list-group-item-font-size,
+    $kendo-list-sm-group-item-font-size: $kendo-list-sm-group-item-font-size,
+    $kendo-list-md-group-item-font-size: $kendo-list-md-group-item-font-size,
+    $kendo-list-lg-group-item-font-size: $kendo-list-lg-group-item-font-size,
+    $kendo-list-group-item-line-height: $kendo-list-group-item-line-height,
+    $kendo-list-sm-group-item-line-height: $kendo-list-sm-group-item-line-height,
+    $kendo-list-md-group-item-line-height: $kendo-list-md-group-item-line-height,
+    $kendo-list-lg-group-item-line-height: $kendo-list-lg-group-item-line-height,
+    $kendo-list-group-item-font-weight: $kendo-list-group-item-font-weight,
+    $kendo-list-sizes: $kendo-list-sizes,
+    $kendo-list-bg: $kendo-list-bg,
+    $kendo-list-text: $kendo-list-text,
+    $kendo-list-border: $kendo-list-border,
+    $kendo-list-header-bg: $kendo-list-header-bg,
+    $kendo-list-header-text: $kendo-list-header-text,
+    $kendo-list-header-border: $kendo-list-header-border,
+    $kendo-list-header-shadow: $kendo-list-header-shadow,
+    $kendo-list-item-bg: $kendo-list-item-bg,
+    $kendo-list-item-text: $kendo-list-item-text,
+    $kendo-list-item-hover-bg: $kendo-list-item-hover-bg,
+    $kendo-list-item-hover-text: $kendo-list-item-hover-text,
+    $kendo-list-item-focus-bg: $kendo-list-item-focus-bg,
+    $kendo-list-item-focus-text: $kendo-list-item-focus-text,
+    $kendo-list-item-focus-shadow: $kendo-list-item-focus-shadow,
+    $kendo-list-item-selected-bg: $kendo-list-item-selected-bg,
+    $kendo-list-item-selected-text: $kendo-list-item-selected-text,
+    $kendo-list-group-item-bg: $kendo-list-group-item-bg,
+    $kendo-list-group-item-text: $kendo-list-group-item-text,
+    $kendo-list-group-item-border: $kendo-list-group-item-border,
+    $kendo-list-group-item-shadow: $kendo-list-group-item-shadow,
+    $kendo-list-option-label-text: $kendo-list-option-label-text
+);

package/scss/listbox/_index.scss

@@ -1,44 +1,24 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "listbox",
-    dependencies: (
-        "button",
-        "checkbox",
-        "icon",
-        "list"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../popup/_index.scss";
-@import "../list/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-listbox--styles() {
-    @include module-render( "listbox" ) {
+    @include import-once( "listbox" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-icon--styles();
         @include kendo-listbox--layout();
         @include kendo-listbox--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-listbox--styles();
-}

package/scss/listbox/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/listbox/_layout.scss";
+@use "@progress/kendo-theme-default/scss/listbox/_layout.scss" as *;
 
 
 @mixin kendo-listbox--layout() {

package/scss/listbox/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/listbox/_theme.scss";
+@use "@progress/kendo-theme-default/scss/listbox/_theme.scss" as *;
 
 
 @mixin kendo-listbox--theme() {

package/scss/listbox/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // ListBox
 
 /// The spacing between the ListBox elements.
@@ -48,3 +50,22 @@ $kendo-listbox-drop-hint-width: 1px !default;
 /// The width of the border around the ListBox drop hint.
 /// @group listbox
 $kendo-listbox-drop-hint-border-width: null !default;
+
+
+@forward "@progress/kendo-theme-default/scss/listbox/_variables.scss" with (
+    $kendo-listbox-spacing: $kendo-listbox-spacing,
+    $kendo-listbox-button-spacing: $kendo-listbox-button-spacing,
+    $kendo-listbox-width: $kendo-listbox-width,
+    $kendo-listbox-default-height: $kendo-listbox-default-height,
+    $kendo-listbox-border-width: $kendo-listbox-border-width,
+    $kendo-listbox-font-family: $kendo-listbox-font-family,
+    $kendo-listbox-font-size: $kendo-listbox-font-size,
+    $kendo-listbox-line-height: $kendo-listbox-line-height,
+    $kendo-listbox-text: $kendo-listbox-text,
+    $kendo-listbox-bg: $kendo-listbox-bg,
+    $kendo-listbox-border: $kendo-listbox-border,
+    $kendo-listbox-item-padding-x: $kendo-listbox-item-padding-x,
+    $kendo-listbox-item-padding-y: $kendo-listbox-item-padding-y,
+    $kendo-listbox-drop-hint-width: $kendo-listbox-drop-hint-width,
+    $kendo-listbox-drop-hint-border-width: $kendo-listbox-drop-hint-border-width
+);

package/scss/listgroup/_index.scss

@@ -1,38 +1,18 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "listgroup",
-    dependencies: (
-        "icon"
-    )
-);
-
-
 // Dependencies
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-listgroup--styles() {
-    @include module-render( "listgroup" ) {
+    @include import-once( "listgroup" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
         @include kendo-listgroup--layout();
         @include kendo-listgroup--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-listgroup--styles();
-}

package/scss/listgroup/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/listgroup/_layout.scss";
+@use "@progress/kendo-theme-default/scss/listgroup/_layout.scss" as *;
 
 
 @mixin kendo-listgroup--layout() {

package/scss/listgroup/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/listgroup/_theme.scss";
+@use "@progress/kendo-theme-default/scss/listgroup/_theme.scss" as *;
 
 
 @mixin kendo-listgroup--theme() {

package/scss/listgroup/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Listgroup
 $kendo-listgroup-border-width: 1px !default;
 $kendo-listgroup-border-radius: k-border-radius(md) !default;
@@ -12,3 +14,17 @@ $kendo-listgroup-border: $kendo-component-border !default;
 $kendo-listgroup-item-padding-x: k-spacing(2) !default;
 $kendo-listgroup-item-padding-y: k-spacing(2) !default;
 $kendo-listgroup-item-border-width: 1px !default;
+
+
+@forward "@progress/kendo-theme-default/scss/listgroup/_variables.scss" with (
+    $kendo-listgroup-border-width: $kendo-listgroup-border-width,
+    $kendo-listgroup-border-radius: $kendo-listgroup-border-radius,
+    $kendo-listgroup-font-size: $kendo-listgroup-font-size,
+    $kendo-listgroup-line-height: $kendo-listgroup-line-height,
+    $kendo-listgroup-bg: $kendo-listgroup-bg,
+    $kendo-listgroup-text: $kendo-listgroup-text,
+    $kendo-listgroup-border: $kendo-listgroup-border,
+    $kendo-listgroup-item-padding-x: $kendo-listgroup-item-padding-x,
+    $kendo-listgroup-item-padding-y: $kendo-listgroup-item-padding-y,
+    $kendo-listgroup-item-border-width: $kendo-listgroup-item-border-width
+);

package/scss/listview/_index.scss

@@ -1,36 +1,20 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "listview",
-    dependencies: (
-        "icon",
-        "pager"
-    )
-);
-
-
 // Dependencies
-@import "../pager/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../pager/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-listview--styles() {
-    @include module-render( "listview" ) {
+    @include import-once( "listview" ) {
+        @include core-styles();
+        @include kendo-pager--styles();
+        @include kendo-icon--styles();
         @include kendo-listview--layout();
         @include kendo-listview--theme();
         @include kendo-utils--layout--display();
@@ -39,7 +23,3 @@ $_kendo-module-meta: (
         @include kendo-utils--flex-grid--flex-wrap();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-listview--styles();
-}

package/scss/listview/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/listview/_layout.scss";
+@use "@progress/kendo-theme-default/scss/listview/_layout.scss" as *;
 
 
 @mixin kendo-listview--layout() {

package/scss/listview/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/listview/_theme.scss";
+@use "@progress/kendo-theme-default/scss/listview/_theme.scss" as *;
 
 
 @mixin kendo-listview--theme() {

package/scss/listview/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // ListView
 
 /// The horizontal padding of the ListView.
@@ -58,3 +60,25 @@ $kendo-listview-item-focus-border: null !default;
 /// The box shadow of the focused ListView items.
 /// @group listview
 $kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/listview/_variables.scss" with (
+    $kendo-listview-padding-x: $kendo-listview-padding-x,
+    $kendo-listview-padding-y: $kendo-listview-padding-y,
+    $kendo-listview-border-width: $kendo-listview-border-width,
+    $kendo-listview-font-family: $kendo-listview-font-family,
+    $kendo-listview-font-size: $kendo-listview-font-size,
+    $kendo-listview-line-height: $kendo-listview-line-height,
+    $kendo-listview-text: $kendo-listview-text,
+    $kendo-listview-bg: $kendo-listview-bg,
+    $kendo-listview-border: $kendo-listview-border,
+    $kendo-listview-item-padding-x: $kendo-listview-item-padding-x,
+    $kendo-listview-item-padding-y: $kendo-listview-item-padding-y,
+    $kendo-listview-item-selected-text: $kendo-listview-item-selected-text,
+    $kendo-listview-item-selected-bg: $kendo-listview-item-selected-bg,
+    $kendo-listview-item-selected-border: $kendo-listview-item-selected-border,
+    $kendo-listview-item-focus-text: $kendo-listview-item-focus-text,
+    $kendo-listview-item-focus-bg: $kendo-listview-item-focus-bg,
+    $kendo-listview-item-focus-border: $kendo-listview-item-focus-border,
+    $kendo-listview-item-focus-shadow: $kendo-listview-item-focus-shadow
+);