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

package/scss/ripple/_index.scss

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

package/scss/ripple/_layout.scss

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

package/scss/ripple/_theme.scss

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

package/scss/scheduler/_index.scss

@@ -1,65 +1,32 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "scheduler",
-    dependencies: (
-        "action-buttons",
-        "adaptive",
-        "button",
-        "calendar",
-        "checkbox",
-        "date-time-picker",
-        "dialog",
-        "dropdown-list",
-        "form",
-        "icon",
-        "numeric-textbox",
-        "radio",
-        "textarea",
-        "textbox",
-        "toolbar",
-        "tooltip",
-        "time-marker",
-        "window",
-        "no-data"
-    )
-);
-
-
 // Dependencies
-@import "../icons/_index.scss";
-@import "../adaptive/_index.scss";
-@import "../button/_index.scss";
-@import "../datetimepicker/_index.scss";
-@import "../dropdownlist/_index.scss";
-@import "../dialog/_index.scss";
-@import "../tooltip/_index.scss";
-@import "../no-data/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../adaptive/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../datetimepicker/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../dialog/_index.scss" as *;
+@use "../tooltip/_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-scheduler--styles() {
-    @include module-render( "scheduler" ) {
+    @include import-once( "scheduler" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-adaptive--styles();
+        @include kendo-button--styles();
+        @include kendo-date-time-picker--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-dialog--styles();
+        @include kendo-tooltip--styles();
         @include kendo-scheduler--layout();
         @include kendo-scheduler--theme();
         @include kendo-utils--typography--text-overflow();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-scheduler--styles();
-}

package/scss/scheduler/_layout.scss

@@ -1,4 +1,5 @@
-@import "@progress/kendo-theme-default/scss/scheduler/_layout.scss";
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-default/scss/scheduler/_layout.scss" as *;
 
 
 @mixin kendo-scheduler--layout() {
@@ -16,17 +17,17 @@
         // Angular fix for stronger selector and smaller padding
         .k-event-template {
             & { // stylelint-disable-line
-                padding-block: $kendo-padding-sm-y;
-                padding-inline: $kendo-padding-sm-x;
+                padding-block: k-spacing(1);
+                padding-inline: k-spacing(2);
                 font-size: var( --kendo-font-size-sm, inherit );
             }
         }
 
         .k-event-actions {
-            right: $kendo-padding-sm-x;
+            right: k-spacing(2);
 
             &:first-child {
-                margin: .1ex .4ex 0 $kendo-padding-sm-x;
+                margin: .1ex .4ex 0 k-spacing(2);
             }
         }
     }

package/scss/scheduler/_theme.scss

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

package/scss/scheduler/_variables.scss

@@ -1,3 +1,10 @@
+
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+@use "../calendar/_variables.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Scheduler
 
 /// The width of the border around the Scheduler.
@@ -57,7 +64,7 @@ $kendo-scheduler-event-min-height: 25px !default;
 $kendo-scheduler-event-border-radius: k-border-radius(md) !default;
 /// The line height of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-sm-y}) ) !default;
+$kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{k-spacing(1)}) ) !default;
 
 /// The background color of the Scheduler event.
 /// @group scheduler
@@ -167,7 +174,7 @@ $kendo-scheduler-yearview-indicator-size: 3px !default;
 $kendo-scheduler-yearview-indicator-calc-offset-top: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2)) !default;
 /// The left position of the days with events indicator of the year view in the Scheduler.
 /// @group scheduler
-$kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2)} ) !default;
+$kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{math.div( $kendo-scheduler-yearview-indicator-size, 2)} ) !default;
 /// The border radius of the days with events indicator of the year view in the Scheduler.
 /// @group scheduler
 $kendo-scheduler-yearview-indicator-border-radius: 50% !default;
@@ -233,3 +240,114 @@ $kendo-scheduler-tooltip-event-gap: k-spacing(2) !default;
 /// The color of the Scheduler Tooltip callout.
 /// @group scheduler
 $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
+
+/// The padding of the Scheduler appointments.
+/// @group scheduler
+$kendo-scheduler-appointments-padding: k-spacing(4) !default;
+
+/// The horizontal padding of the Scheduler event template.
+/// @group scheduler
+$kendo-scheduler-event-template-padding-x: k-spacing(4) !default;
+/// The vertical padding of the Scheduler event template.
+/// @group scheduler
+$kendo-scheduler-event-template-padding-y: k-spacing(2) !default;
+
+/// The inline inset of the Scheduler event actions.
+/// @group scheduler
+$kendo-scheduler-event-actions-inset-x: k-spacing(4) !default;
+
+/// The margin of the Scheduler event indicators.
+/// @group scheduler
+$kendo-scheduler-indicators-margin: k-spacing(1) .4ex 0 k-spacing(2) !default;
+/// The margin of the Scheduler event indicators in rtl.
+/// @group scheduler
+$kendo-scheduler-rtl-indicators-margin: k-spacing(1) 0 k-spacing(2) .4ex !default;
+
+/// The inline inset of the Scheduler marquee labels.
+/// @group scheduler
+$kendo-scheduler-marquee-label-inset-x: k-spacing(2) !default;
+/// The block inset of the Scheduler marquee labels.
+/// @group scheduler
+$kendo-scheduler-marquee-label-inset-y: k-spacing(1) !default;
+
+@forward "@progress/kendo-theme-default/scss/scheduler/_variables.scss" with (
+    $kendo-scheduler-border-width: $kendo-scheduler-border-width,
+    $kendo-scheduler-font-family: $kendo-scheduler-font-family,
+    $kendo-scheduler-font-size: $kendo-scheduler-font-size,
+    $kendo-scheduler-line-height: $kendo-scheduler-line-height,
+    $kendo-scheduler-bg: $kendo-scheduler-bg,
+    $kendo-scheduler-text: $kendo-scheduler-text,
+    $kendo-scheduler-border: $kendo-scheduler-border,
+    $kendo-scheduler-toolbar-bg: $kendo-scheduler-toolbar-bg,
+    $kendo-scheduler-toolbar-text: $kendo-scheduler-toolbar-text,
+    $kendo-scheduler-toolbar-border: $kendo-scheduler-toolbar-border,
+    $kendo-scheduler-toolbar-gradient: $kendo-scheduler-toolbar-gradient,
+    $kendo-scheduler-footer-bg: $kendo-scheduler-footer-bg,
+    $kendo-scheduler-footer-text: $kendo-scheduler-footer-text,
+    $kendo-scheduler-footer-border: $kendo-scheduler-footer-border,
+    $kendo-scheduler-footer-gradient: $kendo-scheduler-footer-gradient,
+    $kendo-scheduler-event-min-height: $kendo-scheduler-event-min-height,
+    $kendo-scheduler-event-border-radius: $kendo-scheduler-event-border-radius,
+    $kendo-scheduler-event-line-height: $kendo-scheduler-event-line-height,
+    $kendo-scheduler-event-bg: $kendo-scheduler-event-bg,
+    $kendo-scheduler-event-text: $kendo-scheduler-event-text,
+    $kendo-scheduler-event-border: $kendo-scheduler-event-border,
+    $kendo-scheduler-event-gradient: $kendo-scheduler-event-gradient,
+    $kendo-scheduler-event-shadow: $kendo-scheduler-event-shadow,
+    $kendo-scheduler-event-hover-bg: $kendo-scheduler-event-hover-bg,
+    $kendo-scheduler-event-hover-text: $kendo-scheduler-event-hover-text,
+    $kendo-scheduler-event-hover-border: $kendo-scheduler-event-hover-border,
+    $kendo-scheduler-event-hover-gradient: $kendo-scheduler-event-hover-gradient,
+    $kendo-scheduler-event-hover-shadow: $kendo-scheduler-event-hover-shadow,
+    $kendo-scheduler-event-selected-bg: $kendo-scheduler-event-selected-bg,
+    $kendo-scheduler-event-selected-text: $kendo-scheduler-event-selected-text,
+    $kendo-scheduler-event-selected-border: $kendo-scheduler-event-selected-border,
+    $kendo-scheduler-event-selected-gradient: $kendo-scheduler-event-selected-gradient,
+    $kendo-scheduler-event-selected-shadow: $kendo-scheduler-event-selected-shadow,
+    $kendo-scheduler-event-ongoing-shadow: $kendo-scheduler-event-ongoing-shadow,
+    $kendo-scheduler-cell-padding-x: $kendo-scheduler-cell-padding-x,
+    $kendo-scheduler-cell-padding-y: $kendo-scheduler-cell-padding-y,
+    $kendo-scheduler-cell-height: $kendo-scheduler-cell-height,
+    $kendo-scheduler-datecolumn-width: $kendo-scheduler-datecolumn-width,
+    $kendo-scheduler-timecolumn-width: $kendo-scheduler-timecolumn-width,
+    $kendo-scheduler-nonwork-bg: $kendo-scheduler-nonwork-bg,
+    $kendo-scheduler-nonwork-text: $kendo-scheduler-nonwork-text,
+    $kendo-scheduler-weekend-bg: $kendo-scheduler-weekend-bg,
+    $kendo-scheduler-weekend-text: $kendo-scheduler-weekend-text,
+    $kendo-scheduler-othermonth-bg: $kendo-scheduler-othermonth-bg,
+    $kendo-scheduler-othermonth-text: $kendo-scheduler-othermonth-text,
+    $kendo-scheduler-yearview-padding-x: $kendo-scheduler-yearview-padding-x,
+    $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-y,
+    $kendo-scheduler-yearview-calendar-gap: $kendo-scheduler-yearview-calendar-gap,
+    $kendo-scheduler-yearview-indicator-size: $kendo-scheduler-yearview-indicator-size,
+    $kendo-scheduler-yearview-indicator-calc-offset-top: $kendo-scheduler-yearview-indicator-calc-offset-top,
+    $kendo-scheduler-yearview-indicator-calc-offset-left: $kendo-scheduler-yearview-indicator-calc-offset-left,
+    $kendo-scheduler-yearview-indicator-border-radius: $kendo-scheduler-yearview-indicator-border-radius,
+    $kendo-scheduler-yearview-indicator-bg: $kendo-scheduler-yearview-indicator-bg,
+    $kendo-scheduler-yearview-indicator-selected-bg: $kendo-scheduler-yearview-indicator-selected-bg,
+    $kendo-scheduler-tooltip-padding-x: $kendo-scheduler-tooltip-padding-x,
+    $kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-y,
+    $kendo-scheduler-tooltip-border-width: $kendo-scheduler-tooltip-border-width,
+    $kendo-scheduler-tooltip-bg: $kendo-scheduler-tooltip-bg,
+    $kendo-scheduler-tooltip-text: $kendo-scheduler-tooltip-text,
+    $kendo-scheduler-tooltip-border: $kendo-scheduler-tooltip-border,
+    $kendo-scheduler-tooltip-shadow: $kendo-scheduler-tooltip-shadow,
+    $kendo-scheduler-tooltip-title-margin-y: $kendo-scheduler-tooltip-title-margin-y,
+    $kendo-scheduler-tooltip-month-font-size: $kendo-scheduler-tooltip-month-font-size,
+    $kendo-scheduler-tooltip-day-font-size: $kendo-scheduler-tooltip-day-font-size,
+    $kendo-scheduler-tooltip-events-max-height: $kendo-scheduler-tooltip-events-max-height,
+    $kendo-scheduler-tooltip-events-gap: $kendo-scheduler-tooltip-events-gap,
+    $kendo-scheduler-tooltip-event-padding-x: $kendo-scheduler-tooltip-event-padding-x,
+    $kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-tooltip-event-padding-y,
+    $kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-tooltip-event-border-radius,
+    $kendo-scheduler-tooltip-event-gap: $kendo-scheduler-tooltip-event-gap,
+    $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-callout-text,
+    $kendo-scheduler-appointments-padding: $kendo-scheduler-appointments-padding,
+    $kendo-scheduler-event-template-padding-x: $kendo-scheduler-event-template-padding-x,
+    $kendo-scheduler-event-template-padding-y: $kendo-scheduler-event-template-padding-y,
+    $kendo-scheduler-event-actions-inset-x: $kendo-scheduler-event-actions-inset-x,
+    $kendo-scheduler-indicators-margin: $kendo-scheduler-indicators-margin,
+    $kendo-scheduler-rtl-indicators-margin: $kendo-scheduler-rtl-indicators-margin,
+    $kendo-scheduler-marquee-label-inset-x: $kendo-scheduler-marquee-label-inset-x,
+    $kendo-scheduler-marquee-label-inset-y: $kendo-scheduler-marquee-label-inset-y
+);

package/scss/scroller/_index.scss

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

package/scss/scroller/_layout.scss

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

package/scss/scroller/_theme.scss

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

package/scss/scrollview/_index.scss

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

package/scss/scrollview/_layout.scss

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

package/scss/scrollview/_theme.scss

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

package/scss/scrollview/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+
 // ScrollView
 
 /// The width of the border around the ScrollView.
@@ -90,3 +93,35 @@ $kendo-scrollview-transition-duration: .3s !default;
 /// The timing function of the ScrollView transition.
 /// @group scrollview
 $kendo-scrollview-transition-timing-function: ease-in-out !default;
+
+
+@forward "@progress/kendo-theme-default/scss/scrollview/_variables.scss" with (
+    $kendo-scrollview-border-width: $kendo-scrollview-border-width,
+    $kendo-scrollview-font-family: $kendo-scrollview-font-family,
+    $kendo-scrollview-font-size: $kendo-scrollview-font-size,
+    $kendo-scrollview-line-height: $kendo-scrollview-line-height,
+    $kendo-scrollview-text: $kendo-scrollview-text,
+    $kendo-scrollview-bg: $kendo-scrollview-bg,
+    $kendo-scrollview-border: $kendo-scrollview-border,
+    $kendo-scrollview-pagebutton-size: $kendo-scrollview-pagebutton-size,
+    $kendo-scrollview-pagebutton-bg: $kendo-scrollview-pagebutton-bg,
+    $kendo-scrollview-pagebutton-border: $kendo-scrollview-pagebutton-border,
+    $kendo-scrollview-pagebutton-primary-bg: $kendo-scrollview-pagebutton-primary-bg,
+    $kendo-scrollview-pagebutton-primary-border: $kendo-scrollview-pagebutton-primary-border,
+    $kendo-scrollview-pagebutton-shadow: $kendo-scrollview-pagebutton-shadow,
+    $kendo-scrollview-pager-offset: $kendo-scrollview-pager-offset,
+    $kendo-scrollview-pager-item-spacing: $kendo-scrollview-pager-item-spacing,
+    $kendo-scrollview-pager-item-border-width: $kendo-scrollview-pager-item-border-width,
+    $kendo-scrollview-pager-height: $kendo-scrollview-pager-height,
+    $kendo-scrollview-arrow-tap-highlight-color: $kendo-scrollview-arrow-tap-highlight-color,
+    $kendo-scrollview-navigation-color: $kendo-scrollview-navigation-color,
+    $kendo-scrollview-navigation-icon-shadow: $kendo-scrollview-navigation-icon-shadow,
+    $kendo-scrollview-navigation-bg: $kendo-scrollview-navigation-bg,
+    $kendo-scrollview-navigation-default-opacity: $kendo-scrollview-navigation-default-opacity,
+    $kendo-scrollview-navigation-hover-opacity: $kendo-scrollview-navigation-hover-opacity,
+    $kendo-scrollview-navigation-hover-span-bg: $kendo-scrollview-navigation-hover-span-bg,
+    $kendo-scrollview-light-bg: $kendo-scrollview-light-bg,
+    $kendo-scrollview-dark-bg: $kendo-scrollview-dark-bg,
+    $kendo-scrollview-transition-duration: $kendo-scrollview-transition-duration,
+    $kendo-scrollview-transition-timing-function: $kendo-scrollview-transition-timing-function
+);

package/scss/searchbox/_index.scss

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

package/scss/searchbox/_layout.scss

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

package/scss/searchbox/_theme.scss

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

package/scss/signature/_index.scss

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

package/scss/signature/_layout.scss

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

package/scss/signature/_theme.scss

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