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

package/scss/input/_index.scss

@@ -1,39 +1,18 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "input",
-    dependencies: (
-        "button",
-        "icon"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../button/_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-input--styles() {
-    @include module-render( "input" ) {
+    @include import-once( "input" ) {
+        @include core-styles();
+        @include kendo-button--styles();
         @include kendo-input--layout();
         @include kendo-input--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-input--styles();
-}

package/scss/input/_layout.scss

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

package/scss/input/_theme.scss

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

package/scss/input/_variables.scss

@@ -1,3 +1,9 @@
+@use "sass:math";
+
+@use "../button/_variables.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Input
 
 /// The default width of the Input components.
@@ -6,37 +12,37 @@ $kendo-input-default-width: 100% !default;
 
 /// The border width of the Input components.
 /// @group input
-$kendo-input-border-width: $input-border-width !default;
-$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
+$kendo-input-border-width: k-spacing(1px) !default;
+$kendo-input-border-height: calc( #{ $kendo-input-border-width } * 2 ) !default;
 /// The border radius of the Input components.
 /// @group input
 $kendo-input-border-radius: null !default;
 
 /// The horizontal padding of the Input components.
 /// @group input
-$kendo-input-padding-x: $input-padding-x !default;
+$kendo-input-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the small Input components.
 /// @group input
-$kendo-input-sm-padding-x: $input-padding-x-sm !default;
+$kendo-input-sm-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-x: $input-padding-x !default;
+$kendo-input-md-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the large Input components.
 /// @group input
-$kendo-input-lg-padding-x: $input-padding-x-lg !default;
+$kendo-input-lg-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of input components.
 /// @group input
-$kendo-input-padding-y: $input-padding-y !default;
+$kendo-input-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the small Input components.
 /// @group input
-$kendo-input-sm-padding-y: $input-padding-y-sm !default;
+$kendo-input-sm-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-y: $input-padding-y !default;
+$kendo-input-md-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the large Input components.
 /// @group input
-$kendo-input-lg-padding-y: $input-padding-y-lg !default;
+$kendo-input-lg-padding-y: k-spacing(2) !default;
 
 /// The font family of input components.
 /// @group input
@@ -57,10 +63,10 @@ $kendo-input-lg-font-size: var( --kendo-font-size, inherit )  !default;
 
 /// The line height of input components.
 /// @group input
-$kendo-input-line-height: $input-line-height !default;
+$kendo-input-line-height: 1.5 !default;
 /// The line height of the small Input components.
 /// @group input
-$kendo-input-sm-line-height: k-math-div( 20, 14 ) !default;
+$kendo-input-sm-line-height: math.div( 20, 14 ) !default;
 /// The line height of the medium Input components.
 /// @group input
 $kendo-input-md-line-height: var( --kendo-line-height, normal) !default;
@@ -99,13 +105,13 @@ $kendo-input-sizes: (
 
 /// The background color of the Input components.
 /// @group input
-$kendo-input-bg: $input-bg !default;
+$kendo-input-bg: $kendo-component-bg !default;
 /// The text color of the Input components.
 /// @group input
-$kendo-input-text: $input-color !default;
+$kendo-input-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-dark) !default;
 /// The border color of the Input components.
 /// @group input
-$kendo-input-border: $input-border-color !default;
+$kendo-input-border: if($kendo-enable-color-system, k-color( border-alt ), #ced4da) !default;
 /// The shadow of the Input components.
 /// @group input
 $kendo-input-shadow: null !default;
@@ -118,23 +124,23 @@ $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: null !default;
+$kendo-input-hover-border: $kendo-input-border !default;
 /// The shadow of the hovered Input components.
 /// @group input
 $kendo-input-hover-shadow: null !default;
 
 /// The background color of the focused Input components.
 /// @group input
-$kendo-input-focus-bg: $input-focus-bg !default;
+$kendo-input-focus-bg: $kendo-input-bg !default;
 /// The text color of the focused Input components.
 /// @group input
-$kendo-input-focus-text: $input-focus-color !default;
+$kendo-input-focus-text: $kendo-input-text !default;
 /// The border color of the focused Input components.
 /// @group input
-$kendo-input-focus-border: $input-focus-border-color !default;
+$kendo-input-focus-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary, 50% ) ) !default;
 /// The shadow of the focused Input components.
 /// @group input
-$kendo-input-focus-shadow: $input-focus-box-shadow !default;
+$kendo-input-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
 
 /// The background color of the selected Input components.
 /// @group input
@@ -167,8 +173,7 @@ $kendo-input-outline-bg: null !default;
 $kendo-input-outline-text: $kendo-base-text !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-base-text, .5 )) !default;
-
+$kendo-input-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), color-mix(in srgb, $kendo-base-text 50%, transparent)) !default;
 /// The background color of the outline hovered Input components.
 /// @group input
 $kendo-input-outline-hover-bg: null !default;
@@ -177,7 +182,7 @@ $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
 /// The border color of the outline hovered Input components.
 /// @group input
-$kendo-input-outline-hover-border: null !default;
+$kendo-input-outline-hover-border: $kendo-input-outline-border !default;
 
 /// The background color of the outline focused Input components.
 /// @group input
@@ -227,7 +232,7 @@ $kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
 /// The text color of the Input placeholder.
 /// @group input
-$kendo-input-placeholder-text: $input-placeholder-color !default;
+$kendo-input-placeholder-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
 /// The opacity of the Input placeholder.
 /// @group input
 $kendo-input-placeholder-opacity: 1 !default;
@@ -254,13 +259,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;
@@ -274,10 +279,10 @@ $kendo-input-separator-opacity: .5 !default;
 
 /// The text color of the Input prefix.
 /// @group input
-$kendo-input-prefix-text: $kendo-subtle-text !default;
+$kendo-input-prefix-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
 /// The text color of the Input suffix.
 /// @group input
-$kendo-input-suffix-text: $kendo-subtle-text !default;
+$kendo-input-suffix-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
 
 /// The border color of the invalid Input components.
 /// @group input
@@ -358,8 +363,7 @@ $kendo-picker-outline-bg: null !default;
 $kendo-picker-outline-text: $kendo-button-text !default;
 /// The border color of the outline Picker components.
 /// @group picker
-$kendo-picker-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-picker-outline-text, .5 )) !default;
-
+$kendo-picker-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), color-mix(in srgb, $kendo-picker-outline-text 50%, transparent)) !default;
 /// The background color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
@@ -405,13 +409,13 @@ $kendo-picker-flat-border: $kendo-button-border !default;
 
 /// The background color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-text, .08 )) !default;
+$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), color-mix(in srgb, $kendo-button-text 80%, transparent)) !default;
 /// The text color of the flat hovered Picker components.
 /// @group picker
 $kendo-picker-flat-hover-text: null !default;
 /// The border color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-border: null !default;
+$kendo-picker-flat-hover-border: $kendo-picker-flat-border !default;
 
 /// The background color of the flat focused Picker components.
 /// @group picker
@@ -436,3 +440,132 @@ $kendo-picker-flat-hover-focus-text: null !default;
 /// @group picker
 $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,6 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+
 // List
 
 /// The font family of the List components.
@@ -14,7 +17,7 @@ $kendo-list-lg-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the List component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
-$kendo-list-sm-line-height: k-math-div( 20, 14 ) !default;
+$kendo-list-sm-line-height: math.div( 20, 14 ) !default;
 $kendo-list-md-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-list-lg-line-height: var( --kendo-line-height, normal ) !default;
 
@@ -54,6 +57,9 @@ $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(4) !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.
@@ -244,4 +250,92 @@ $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;
+$kendo-list-option-label-text: if($kendo-enable-color-system, k-color( subtle ) , $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,43 +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() {