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

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-spacing(1) !default;
@@ -12,3 +14,17 @@ $kendo-listgroup-border: $kendo-component-border !default;
 $kendo-listgroup-item-padding-x: k-spacing(4) !default;
 $kendo-listgroup-item-padding-y: k-spacing(2) !default;
 $kendo-listgroup-item-border-width: $kendo-listgroup-border-width !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 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-listview-text, .15 )) !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
+);

package/scss/loader/_index.scss

@@ -1,40 +1,20 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "loader",
-    dependencies: (
-        "overlay"
-    )
-);
-
-
 // Dependencies
-@import "../overlay/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../overlay/_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-loader--styles() {
-    @include module-render( "loader" ) {
+    @include import-once( "loader" ) {
+        @include core-styles();
+        @include kendo-overlay--styles();
         @include kendo-loader--layout();
         @include kendo-loader--theme();
         @include kendo-utils--typography--text-color();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-loader--styles();
-}

package/scss/loader/_layout.scss

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

package/scss/loader/_theme.scss

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

package/scss/loader/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Loader
 
 /// The border radius of the Loader segment.
@@ -123,3 +125,44 @@ $kendo-loading-opacity: .3 !default;
 /// The z-index of the Loading indicator.
 /// @group loading
 $kendo-zindex-loading: 100 !default;
+
+
+@forward "@progress/kendo-theme-default/scss/loader/_variables.scss" with (
+    $kendo-loader-segment-border-radius: $kendo-loader-segment-border-radius,
+    $kendo-loader-sm-segment-size: $kendo-loader-sm-segment-size,
+    $kendo-loader-md-segment-size: $kendo-loader-md-segment-size,
+    $kendo-loader-lg-segment-size: $kendo-loader-lg-segment-size,
+    $kendo-loader-sm-padding: $kendo-loader-sm-padding,
+    $kendo-loader-md-padding: $kendo-loader-md-padding,
+    $kendo-loader-lg-padding: $kendo-loader-lg-padding,
+    $kendo-loader-sm-spinner-3-width: $kendo-loader-sm-spinner-3-width,
+    $kendo-loader-md-spinner-3-width: $kendo-loader-md-spinner-3-width,
+    $kendo-loader-lg-spinner-3-width: $kendo-loader-lg-spinner-3-width,
+    $kendo-loader-sm-spinner-3-height: $kendo-loader-sm-spinner-3-height,
+    $kendo-loader-md-spinner-3-height: $kendo-loader-md-spinner-3-height,
+    $kendo-loader-lg-spinner-3-height: $kendo-loader-lg-spinner-3-height,
+    $kendo-loader-sm-spinner-4-width: $kendo-loader-sm-spinner-4-width,
+    $kendo-loader-md-spinner-4-width: $kendo-loader-md-spinner-4-width,
+    $kendo-loader-lg-spinner-4-width: $kendo-loader-lg-spinner-4-width,
+    $kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-height,
+    $kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-height,
+    $kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-height,
+    $kendo-loader-container-panel-border-width: $kendo-loader-container-panel-border-width,
+    $kendo-loader-container-panel-border-style: $kendo-loader-container-panel-border-style,
+    $kendo-loader-container-panel-border-color: $kendo-loader-container-panel-border-color,
+    $kendo-loader-container-panel-border-radius: $kendo-loader-container-panel-border-radius,
+    $kendo-loader-container-panel-bg: $kendo-loader-container-panel-bg,
+    $kendo-loader-sm-container-padding: $kendo-loader-sm-container-padding,
+    $kendo-loader-md-container-padding: $kendo-loader-md-container-padding,
+    $kendo-loader-lg-container-padding: $kendo-loader-lg-container-padding,
+    $kendo-loader-sm-container-gap: $kendo-loader-sm-container-gap,
+    $kendo-loader-md-container-gap: $kendo-loader-md-container-gap,
+    $kendo-loader-lg-container-gap: $kendo-loader-lg-container-gap,
+    $kendo-loader-sm-container-font-size: $kendo-loader-sm-container-font-size,
+    $kendo-loader-md-container-font-size: $kendo-loader-md-container-font-size,
+    $kendo-loader-lg-container-font-size: $kendo-loader-lg-container-font-size,
+    $kendo-loading-bg: $kendo-loading-bg,
+    $kendo-loading-text: $kendo-loading-text,
+    $kendo-loading-opacity: $kendo-loading-opacity,
+    $kendo-zindex-loading: $kendo-zindex-loading
+);

package/scss/map/_index.scss

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

package/scss/map/_layout.scss

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

package/scss/map/_theme.scss

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

package/scss/map/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 // Map
 /// The border width of the Map.
 /// @group map
@@ -51,10 +55,10 @@ $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding
 
 /// The horizontal padding of the Map attribution.
 /// @group map
-$kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
+$kendo-map-attribution-padding-x: k-spacing(2) !default;
 /// The vertical padding of the Map attribution.
 /// @group map
-$kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
+$kendo-map-attribution-padding-y: k-spacing(1) !default;
 /// The font size of the Map attribution.
 /// @group map
 $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default;
@@ -66,4 +70,29 @@ $kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-c
 /// @group map
 $kendo-map-marker-fill: $kendo-color-primary !default;
 
-$kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==";
+$kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==" !default;
+
+
+@forward "@progress/kendo-theme-default/scss/map/_variables.scss" with (
+    $kendo-map-border-width: $kendo-map-border-width,
+    $kendo-map-font-size: $kendo-map-font-size,
+    $kendo-map-line-height: $kendo-map-line-height,
+    $kendo-map-font-family: $kendo-map-font-family,
+    $kendo-map-bg: $kendo-map-bg,
+    $kendo-map-text: $kendo-map-text,
+    $kendo-map-border: $kendo-map-border,
+    $kendo-map-navigator-margin: $kendo-map-navigator-margin,
+    $kendo-map-navigator-padding: $kendo-map-navigator-padding,
+    $kendo-map-navigator-width: $kendo-map-navigator-width,
+    $kendo-map-navigator-height: $kendo-map-navigator-height,
+    $kendo-map-navigator-border-width: $kendo-map-navigator-border-width,
+    $kendo-map-zoom-control-margin: $kendo-map-zoom-control-margin,
+    $kendo-map-zoom-control-button-padding-x: $kendo-map-zoom-control-button-padding-x,
+    $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-y,
+    $kendo-map-attribution-padding-x: $kendo-map-attribution-padding-x,
+    $kendo-map-attribution-padding-y: $kendo-map-attribution-padding-y,
+    $kendo-map-attribution-font-size: $kendo-map-attribution-font-size,
+    $kendo-map-attribution-bg: $kendo-map-attribution-bg,
+    $kendo-map-marker-fill: $kendo-map-marker-fill,
+    // $kendo-map-marker-images: $kendo-map-marker-images
+);

package/scss/maskedtextbox/_index.scss

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

package/scss/maskedtextbox/_layout.scss

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

package/scss/maskedtextbox/_theme.scss

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

package/scss/mediaplayer/_index.scss

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

package/scss/mediaplayer/_layout.scss

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

package/scss/mediaplayer/_theme.scss

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

package/scss/mediaplayer/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Media player
 
 /// The border width of the MediaPlayer.
@@ -41,3 +43,20 @@ $kendo-media-player-titlebar-border: null !default;
 /// The gradient of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/mediaplayer/_variables.scss" with (
+    $kendo-media-player-border-width: $kendo-media-player-border-width,
+    $kendo-media-player-font-family: $kendo-media-player-font-family,
+    $kendo-media-player-font-size: $kendo-media-player-font-size,
+    $kendo-media-player-line-height: $kendo-media-player-line-height,
+    $kendo-media-player-bg: $kendo-media-player-bg,
+    $kendo-media-player-text: $kendo-media-player-text,
+    $kendo-media-player-border: $kendo-media-player-border,
+    $kendo-media-player-titlebar-padding-x: $kendo-media-player-titlebar-padding-x,
+    $kendo-media-player-titlebar-padding-y: $kendo-media-player-titlebar-padding-y,
+    $kendo-media-player-titlebar-bg: $kendo-media-player-titlebar-bg,
+    $kendo-media-player-titlebar-text: $kendo-media-player-titlebar-text,
+    $kendo-media-player-titlebar-border: $kendo-media-player-titlebar-border,
+    $kendo-media-player-titlebar-gradient: $kendo-media-player-titlebar-gradient
+);