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

package/scss/popup/_index.scss

@@ -1,35 +1,16 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "popup",
-    dependencies: ()
-);
-
-
 // Dependencies
-
+@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-popup--styles() {
-    @include module-render( "popup" ) {
+    @include import-once( "popup" ) {
+        @include core-styles();
         @include kendo-popup--layout();
         @include kendo-popup--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-popup--styles();
-}

package/scss/popup/_layout.scss

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

package/scss/popup/_theme.scss

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

package/scss/popup/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 /// Horizontal padding of the popup.
 /// @group popup
 $kendo-popup-padding-x: null !default;
@@ -37,3 +39,19 @@ $kendo-popup-border: $kendo-component-border !default;
 /// Box shadow of the popup.
 /// @group popup
 $kendo-popup-shadow: k-elevation(4) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/popup/_variables.scss" with (
+    $kendo-popup-padding-x: $kendo-popup-padding-x,
+    $kendo-popup-padding-y: $kendo-popup-padding-y,
+    $kendo-popup-border-width: $kendo-popup-border-width,
+    $kendo-popup-border-radius: $kendo-popup-border-radius,
+    $kendo-popup-font-size: $kendo-popup-font-size,
+    $kendo-popup-line-height: $kendo-popup-line-height,
+    $kendo-popup-content-padding-x: $kendo-popup-content-padding-x,
+    $kendo-popup-content-padding-y: $kendo-popup-content-padding-y,
+    $kendo-popup-bg: $kendo-popup-bg,
+    $kendo-popup-text: $kendo-popup-text,
+    $kendo-popup-border: $kendo-popup-border,
+    $kendo-popup-shadow: $kendo-popup-shadow
+);

package/scss/progressbar/_index.scss

@@ -1,35 +1,16 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "progressbar",
-    dependencies: ()
-);
-
-
 // Dependencies
-
+@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-progressbar--styles() {
-    @include module-render( "progressbar" ) {
+    @include import-once( "progressbar" ) {
+        @include core-styles();
         @include kendo-progressbar--layout();
         @include kendo-progressbar--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-progressbar--styles();
-}

package/scss/progressbar/_layout.scss

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

package/scss/progressbar/_theme.scss

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

package/scss/progressbar/_variables.scss

@@ -1,14 +1,17 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // ProgressBar
 
 /// The height of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-height: $progress-height !default;
+$kendo-progressbar-height: k-spacing(4) !default;
 /// The horizontal width of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-horizontal-width: 100% !default;
 /// The animation timing of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-animation-timing: $progress-bar-animation-timing !default;
+$kendo-progressbar-animation-timing: 1s linear infinite !default;
 /// The width of the border around the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border-width: 0px !default;
@@ -17,20 +20,20 @@ $kendo-progressbar-border-width: 0px !default;
 $kendo-progressbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-font-size: $progress-font-size !default;
+$kendo-progressbar-font-size: $kendo-font-size * .75 !default;
 /// The line height of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-line-height: var( --kendo-line-height-xs, normal ) !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), $gray-200) !default;
+$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), #e9ecef) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-text: if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $gray-200 )) !default;
+$kendo-progressbar-text: if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( #e9ecef )) !default;
 /// The border color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-border: null !default;
+$kendo-progressbar-border: inherit !default;
 /// The background gradient of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-gradient: null !default;
@@ -43,7 +46,7 @@ $kendo-progressbar-value-bg: $kendo-selected-bg !default;
 $kendo-progressbar-value-text: $kendo-selected-text !default;
 /// The progress border color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-border: null !default;
+$kendo-progressbar-value-border: unset !default;
 /// The progress background gradient of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-gradient: null !default;
@@ -72,3 +75,29 @@ $kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default;
 /// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
 $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
+
+
+@forward "@progress/kendo-theme-default/scss/progressbar/_variables.scss" with (
+    $kendo-progressbar-height: $kendo-progressbar-height,
+    $kendo-progressbar-horizontal-width: $kendo-progressbar-horizontal-width,
+    $kendo-progressbar-animation-timing: $kendo-progressbar-animation-timing,
+    $kendo-progressbar-border-width: $kendo-progressbar-border-width,
+    $kendo-progressbar-font-family: $kendo-progressbar-font-family,
+    $kendo-progressbar-font-size: $kendo-progressbar-font-size,
+    $kendo-progressbar-line-height: $kendo-progressbar-line-height,
+    $kendo-progressbar-bg: $kendo-progressbar-bg,
+    $kendo-progressbar-text: $kendo-progressbar-text,
+    $kendo-progressbar-border: $kendo-progressbar-border,
+    $kendo-progressbar-gradient: $kendo-progressbar-gradient,
+    $kendo-progressbar-value-bg: $kendo-progressbar-value-bg,
+    $kendo-progressbar-value-text: $kendo-progressbar-value-text,
+    $kendo-progressbar-value-border: $kendo-progressbar-value-border,
+    $kendo-progressbar-value-gradient: $kendo-progressbar-value-gradient,
+    $kendo-progressbar-indeterminate-bg: $kendo-progressbar-indeterminate-bg,
+    $kendo-progressbar-indeterminate-text: $kendo-progressbar-indeterminate-text,
+    $kendo-progressbar-indeterminate-border: $kendo-progressbar-indeterminate-border,
+    $kendo-progressbar-indeterminate-gradient: $kendo-progressbar-indeterminate-gradient,
+    $kendo-progressbar-chunk-border: $kendo-progressbar-chunk-border,
+    $kendo-circular-progressbar-arc-stroke: $kendo-circular-progressbar-arc-stroke,
+    $kendo-circular-progressbar-scale-stroke: $kendo-circular-progressbar-scale-stroke
+);

package/scss/prompt/_index.scss

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

package/scss/prompt/_layout.scss

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

package/scss/prompt/_theme.scss

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

package/scss/prompt/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // AIPrompt
 
 /// The text color of the AIPrompt.
@@ -64,3 +66,27 @@ $kendo-prompt-suggestion-border: $kendo-component-border !default;
 /// The elevation of the AIPrompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-shadow: k-elevation(1) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/prompt/_variables.scss" with (
+    $kendo-prompt-text: $kendo-prompt-text,
+    $kendo-prompt-bg: $kendo-prompt-bg,
+    $kendo-prompt-border: $kendo-prompt-border,
+    $kendo-prompt-header-text: $kendo-prompt-header-text,
+    $kendo-prompt-header-bg: $kendo-prompt-header-bg,
+    $kendo-prompt-header-border: $kendo-prompt-header-border,
+    $kendo-prompt-content-padding-y: $kendo-prompt-content-padding-y,
+    $kendo-prompt-content-padding-x: $kendo-prompt-content-padding-x,
+    $kendo-prompt-content-spacing: $kendo-prompt-content-spacing,
+    $kendo-prompt-content-text: $kendo-prompt-content-text,
+    $kendo-prompt-content-bg: $kendo-prompt-content-bg,
+    $kendo-prompt-content-border: $kendo-prompt-content-border,
+    $kendo-prompt-expander-spacing: $kendo-prompt-expander-spacing,
+    $kendo-prompt-suggestion-padding-y: $kendo-prompt-suggestion-padding-y,
+    $kendo-prompt-suggestion-padding-x: $kendo-prompt-suggestion-padding-x,
+    $kendo-prompt-suggestion-border-radius: $kendo-prompt-suggestion-border-radius,
+    $kendo-prompt-suggestion-text: $kendo-prompt-suggestion-text,
+    $kendo-prompt-suggestion-bg: $kendo-prompt-suggestion-bg,
+    $kendo-prompt-suggestion-border: $kendo-prompt-suggestion-border,
+    $kendo-prompt-suggestion-shadow: $kendo-prompt-suggestion-shadow
+);

package/scss/radio/_index.scss

@@ -1,35 +1,16 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "radio",
-    dependencies: ()
-);
-
-
 // Dependencies
-
+@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-radio--styles() {
-    @include module-render( "radio" ) {
+    @include import-once( "radio" ) {
+        @include core-styles();
         @include kendo-radio--layout();
         @include kendo-radio--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-radio--styles();
-}

package/scss/radio/_layout.scss

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

package/scss/radio/_theme.scss

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

package/scss/radio/_variables.scss

@@ -1,6 +1,7 @@
-@import "../list/_variables.scss";
-@import "../checkbox/_variables.scss";
-
+@use "../core/_index.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../checkbox/_variables.scss" as *;
+@use "../core/functions/index.import.scss" as *;
 
 // Radio button
 
@@ -184,3 +185,52 @@ $kendo-radio-ripple-bg: $kendo-radio-checked-bg !default;
 /// The opacity of the RadioButton ripple.
 /// @group radio
 $kendo-radio-ripple-opacity: .25 !default;
+
+
+@forward "@progress/kendo-theme-default/scss/radio/_variables.scss" with (
+    $kendo-radio-radius: $kendo-radio-radius,
+    $kendo-radio-border-width: $kendo-radio-border-width,
+    $kendo-radio-sm-size: $kendo-radio-sm-size,
+    $kendo-radio-md-size: $kendo-radio-md-size,
+    $kendo-radio-lg-size: $kendo-radio-lg-size,
+    $kendo-radio-sm-glyph-size: $kendo-radio-sm-glyph-size,
+    $kendo-radio-md-glyph-size: $kendo-radio-md-glyph-size,
+    $kendo-radio-lg-glyph-size: $kendo-radio-lg-glyph-size,
+    $kendo-radio-sm-ripple-size: $kendo-radio-sm-ripple-size,
+    $kendo-radio-md-ripple-size: $kendo-radio-md-ripple-size,
+    $kendo-radio-lg-ripple-size: $kendo-radio-lg-ripple-size,
+    $kendo-radio-sizes: $kendo-radio-sizes,
+    $kendo-radio-bg: $kendo-radio-bg,
+    $kendo-radio-text: $kendo-radio-text,
+    $kendo-radio-border: $kendo-radio-border,
+    $kendo-radio-hover-bg: $kendo-radio-hover-bg,
+    $kendo-radio-hover-text: $kendo-radio-hover-text,
+    $kendo-radio-hover-border: $kendo-radio-hover-border,
+    $kendo-radio-checked-bg: $kendo-radio-checked-bg,
+    $kendo-radio-checked-text: $kendo-radio-checked-text,
+    $kendo-radio-checked-border: $kendo-radio-checked-border,
+    $kendo-radio-focus-border: $kendo-radio-focus-border,
+    $kendo-radio-focus-shadow: $kendo-radio-focus-shadow,
+    $kendo-radio-focus-checked-border: $kendo-radio-focus-checked-border,
+    $kendo-radio-focus-checked-shadow: $kendo-radio-focus-checked-shadow,
+    $kendo-radio-disabled-bg: $kendo-radio-disabled-bg,
+    $kendo-radio-disabled-text: $kendo-radio-disabled-text,
+    $kendo-radio-disabled-border: $kendo-radio-disabled-border,
+    $kendo-radio-disabled-checked-bg: $kendo-radio-disabled-checked-bg,
+    $kendo-radio-disabled-checked-text: $kendo-radio-disabled-checked-text,
+    $kendo-radio-disabled-checked-border: $kendo-radio-disabled-checked-border,
+    $kendo-radio-invalid-bg: $kendo-radio-invalid-bg,
+    $kendo-radio-invalid-text: $kendo-radio-invalid-text,
+    $kendo-radio-invalid-border: $kendo-radio-invalid-border,
+    $kendo-radio-indicator-type: $kendo-radio-indicator-type,
+    $kendo-radio-glyph-font-family: $kendo-radio-glyph-font-family,
+    $kendo-radio-checked-glyph: $kendo-radio-checked-glyph,
+    $kendo-radio-checked-image: $kendo-radio-checked-image,
+    $kendo-radio-disabled-checked-image: $kendo-radio-disabled-checked-image,
+    $kendo-radio-label-margin-x: $kendo-radio-label-margin-x,
+    $kendo-radio-list-spacing: $kendo-radio-list-spacing,
+    $kendo-radio-list-item-padding-x: $kendo-radio-list-item-padding-x,
+    $kendo-radio-list-item-padding-y: $kendo-radio-list-item-padding-y,
+    $kendo-radio-ripple-bg: $kendo-radio-ripple-bg,
+    $kendo-radio-ripple-opacity: $kendo-radio-ripple-opacity
+);

package/scss/rating/_index.scss

@@ -1,38 +1,18 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "rating",
-    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-rating--styles() {
-    @include module-render( "rating" ) {
+    @include import-once( "rating" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
         @include kendo-rating--layout();
         @include kendo-rating--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-rating--styles();
-}

package/scss/rating/_layout.scss

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

package/scss/rating/_theme.scss

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

package/scss/rating/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Rating
 
 /// The font family of the Rating.
@@ -12,28 +14,28 @@ $kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal margin of the Rating container.
 /// @group rating
-$kendo-rating-container-margin-x: $kendo-padding-sm-x !default;
+$kendo-rating-container-margin-x: k-spacing(2) !default;
 
 /// The horizontal padding of the Rating item.
 /// @group rating
-$kendo-rating-item-padding-x: $kendo-padding-sm-x !default;
+$kendo-rating-item-padding-x: k-spacing(2) !default;
 /// The vertical padding of the Rating item.
 /// @group rating
-$kendo-rating-item-padding-y: $kendo-padding-md-y !default;
+$kendo-rating-item-padding-y: k-spacing(2) !default;
 
 /// The horizontal margin of the Rating label.
 /// @group rating
-$kendo-rating-label-margin-x: $kendo-padding-md-x !default;
+$kendo-rating-label-margin-x: k-spacing(4) !default;
 /// The vertical margin of the Rating label.
 /// @group rating
-$kendo-rating-label-margin-y: $kendo-padding-md-y !default;
+$kendo-rating-label-margin-y: k-spacing(2) !default;
 /// The line height of the Rating label.
 /// @group rating
-$kendo-rating-label-line-height: $kendo-line-height-lg !default;
+$kendo-rating-label-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The text color of the Rating icon.
 /// @group rating
-$kendo-rating-icon-text: $kendo-subtle-text !default;
+$kendo-rating-icon-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
 /// The text color of the selected Rating icon.
 /// @group rating
 $kendo-rating-icon-selected-text: $kendo-selected-bg !default;
@@ -50,3 +52,22 @@ $kendo-rating-icon-focus-shadow: 0 2px 4px rgba( black, .1 ) !default;
 /// The shadow of the focused and selected Rating icon.
 /// @group rating
 $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/rating/_variables.scss" with (
+    $kendo-rating-font-family: $kendo-rating-font-family,
+    $kendo-rating-font-size: $kendo-rating-font-size,
+    $kendo-rating-line-height: $kendo-rating-line-height,
+    $kendo-rating-container-margin-x: $kendo-rating-container-margin-x,
+    $kendo-rating-item-padding-x: $kendo-rating-item-padding-x,
+    $kendo-rating-item-padding-y: $kendo-rating-item-padding-y,
+    $kendo-rating-label-margin-x: $kendo-rating-label-margin-x,
+    $kendo-rating-label-margin-y: $kendo-rating-label-margin-y,
+    $kendo-rating-label-line-height: $kendo-rating-label-line-height,
+    $kendo-rating-icon-text: $kendo-rating-icon-text,
+    $kendo-rating-icon-selected-text: $kendo-rating-icon-selected-text,
+    $kendo-rating-icon-hover-text: $kendo-rating-icon-hover-text,
+    $kendo-rating-icon-focus-text: $kendo-rating-icon-focus-text,
+    $kendo-rating-icon-focus-shadow: $kendo-rating-icon-focus-shadow,
+    $kendo-rating-icon-focus-selected-shadow: $kendo-rating-icon-focus-selected-shadow
+);

package/scss/responsivepanel/_index.scss

@@ -1,38 +1,18 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "responsive-panel",
-    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-responsive-panel--styles() {
-    @include module-render( "responsive-panel" ) {
+    @include import-once( "responsive-panel" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
         @include kendo-responsive-panel--layout();
         @include kendo-responsive-panel--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-responsive-panel--styles();
-}

package/scss/responsivepanel/_layout.scss

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

package/scss/responsivepanel/_theme.scss

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