@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/treelist/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/treeview/_layout.scss

@@ -1,6 +1,6 @@
-@use "../core/color-system" as *;
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-treeview--layout() {
 
@@ -18,7 +18,7 @@
         overflow: auto;
         white-space: nowrap;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -46,7 +46,7 @@
         position: relative;
         outline: 0;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         &.ng-animating {
             overflow: hidden;
@@ -141,10 +141,10 @@
 
     // Treeview sizes
     @each $size, $size-props in $kendo-treeview-sizes {
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
-        $_item-padding-x: map-get( $size-props, item-padding-x );
-        $_item-padding-y: map-get( $size-props, item-padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_item-padding-x: map.get( $size-props, item-padding-x );
+        $_item-padding-y: map.get( $size-props, item-padding-y );
 
         .k-treeview-#{$size} {
             --INTERNAL--kendo-treeview-font-size: var( --kendo-treeview-#{$size}-font-size, #{$_font-size} );

package/scss/treeview/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-treeview--theme() {
 

package/scss/treeview/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Font family of the treeview component.
 /// @group treeview
@@ -16,18 +16,18 @@ $kendo-treeview-line-height-md: var( --kendo-line-height, normal ) !default;
 $kendo-treeview-line-height-lg: var( --kendo-line-height, normal ) !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
-$kendo-treeview-indent: map-get( $kendo-spacing, 4 ) !default;
+$kendo-treeview-indent: map.get( $kendo-spacing, 4 ) !default;
 
 /// Horizontal padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-sm: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-lg: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-y-sm: map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) !default;
-$kendo-treeview-item-padding-y-md: map-get( $kendo-spacing, 2 ) !default;
-$kendo-treeview-item-padding-y-lg: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-treeview-item-padding-y-sm: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-treeview-item-padding-y-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-lg: map.get( $kendo-spacing, 2.5 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0 !default;
@@ -37,10 +37,10 @@ $kendo-treeview-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 
 /// Horizontal padding of the treeview filter element.
 /// @group treeview
-$kendo-treeview-filter-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-filter-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the treeview filter element.
 /// @group treeview
-$kendo-treeview-filter-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-filter-padding-y: map.get( $kendo-spacing, 2 ) !default;
 
 
 /// The sizes of the treeview.

package/scss/treeview/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/typography/_layout.scss

@@ -1,5 +1,6 @@
+@use "sass:map";
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-typography--layout() {
     @if $kendo-enable-typography {
@@ -23,12 +24,12 @@
 
     // Headings
     @each $heading, $heading-props in $kendo-headings {
-        $_font-size: map-get( $heading-props, font-size );
-        $_font-family: map-get( $heading-props, font-family );
-        $_line-height: map-get( $heading-props, line-height );
-        $_font-weight: map-get( $heading-props, font-weight );
-        $_letter-spacing: map-get( $heading-props, letter-spacing );
-        $_margin: map-get( $heading-props, margin );
+        $_font-size: map.get( $heading-props, font-size );
+        $_font-family: map.get( $heading-props, font-family );
+        $_line-height: map.get( $heading-props, line-height );
+        $_font-weight: map.get( $heading-props, font-weight );
+        $_letter-spacing: map.get( $heading-props, letter-spacing );
+        $_margin: map.get( $heading-props, margin );
 
         .k-#{$heading} {
             @include typography(
@@ -90,12 +91,12 @@
 
     // Display
     @each $display, $display-props in $kendo-display {
-        $_font-size: map-get( $display-props, font-size );
-        $_font-family: map-get( $display-props, font-family );
-        $_line-height: map-get( $display-props, line-height );
-        $_font-weight: map-get( $display-props, font-weight );
-        $_letter-spacing: map-get( $display-props, letter-spacing );
-        $_margin: map-get( $display-props, margin );
+        $_font-size: map.get( $display-props, font-size );
+        $_font-family: map.get( $display-props, font-family );
+        $_line-height: map.get( $display-props, line-height );
+        $_font-weight: map.get( $display-props, font-weight );
+        $_letter-spacing: map.get( $display-props, letter-spacing );
+        $_margin: map.get( $display-props, margin );
 
         .k-display-#{$display} {
             @include typography(

package/scss/typography/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-typography--theme() {
     // Code snippet

package/scss/typography/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 // Typography
 
@@ -82,10 +82,10 @@ $kendo-code-line-height: var( --kendo-line-height, normal) !default;
 $kendo-code-font-weight: var( --kendo-font-weight, normal) !default;
 $kendo-code-letter-spacing: var( --kendo-letter-spacing, normal) !default;
 
-$kendo-code-padding-x: map-get( $kendo-spacing, 1 ) !default;
-$kendo-code-padding-y: map-get( $kendo-spacing, 0 ) !default;
-$kendo-pre-padding-x: map-get( $kendo-spacing, 6 ) !default;
-$kendo-pre-padding-y: map-get( $kendo-spacing, 4 ) !default;
+$kendo-code-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-code-padding-y: map.get( $kendo-spacing, 0 ) !default;
+$kendo-pre-padding-x: map.get( $kendo-spacing, 6 ) !default;
+$kendo-pre-padding-y: map.get( $kendo-spacing, 4 ) !default;
 $kendo-code-border-width: 1px !default;
 
 $kendo-code-bg: var( --kendo-component-bg, initial) !default;

package/scss/typography/index.scss

@@ -6,9 +6,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/upload/_layout.scss

@@ -1,6 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/_variables.scss" as *;
-@use "../core/color-system" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-upload--layout() {
 
@@ -15,7 +14,7 @@
         position: relative;
         display: block;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -28,11 +27,12 @@
         }
 
         // Drop zone
-        .k-dropzone {
+        .k-dropzone,
+        .k-upload-dropzone {
             padding-inline: var( --kendo-upload-dropzone-padding-x, #{$kendo-upload-dropzone-padding-x} );
             padding-block: var( --kendo-upload-dropzone-padding-y, #{$kendo-upload-dropzone-padding-y} );
             border-width: 0;
-            text-align: right;
+            text-align: end;
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -116,7 +116,7 @@
             }
 
             .k-filename {
-                margin-inline-start: var( --kendo-padding-x, #{$kendo-padding-x} );
+                margin-inline-start: var( --kendo-padding-x, #{$kendo-padding-md-x} );
                 flex: 1;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -138,7 +138,7 @@
 
             ~ .k-clear-selected,
             ~ .k-upload-selected {
-                margin-block-start: - var( --kendo-padding-y, #{$kendo-padding-y} );
+                margin-block-start: - var( --kendo-padding-y, #{$kendo-padding-md-y} );
                 border-width: 0;
             }
 
@@ -151,7 +151,7 @@
             .k-file-name,
             .k-file-size,
             .k-file-validation-message,
-            .k-file-information {
+            .k-file-summary {
                 display: block;
             }
 
@@ -163,7 +163,7 @@
             }
 
             .k-file-size,
-            .k-file-information,
+            .k-file-summary,
             .k-file-validation-message {
                 font-size: var( --kendo-upload-validation-font-size, #{$kendo-upload-validation-font-size} );
             }
@@ -172,12 +172,9 @@
                 visibility: hidden;
             }
 
-            .k-file-group-wrapper,
-            .k-file-invalid-group-wrapper,
-            .k-multiple-files-group-wrapper,
-            .k-multiple-files-invalid-group-wrapper {
+            .k-file-icon-wrapper {
 
-                .k-file-group {
+                .k-file-icon {
                     font-size: var( --kendo-upload-group-icon-size, #{$kendo-upload-group-icon-size} );
                 }
 
@@ -187,7 +184,7 @@
             }
         }
 
-        .k-upload-files .k-file-name-size-wrapper {
+        .k-upload-files .k-file-info {
             margin-inline-start: 0;
             margin-inline-end: 0;
             min-height: var( --kendo-upload-group-icon-size, #{$kendo-upload-group-icon-size} );
@@ -197,9 +194,8 @@
         }
 
         .k-multiple-files-wrapper,
-        .k-file-single > .k-file-name-size-wrapper,
-        .k-file > .k-file-name-size-wrapper {
-            margin-inline-start: var( --kendo-padding-x, #{$kendo-padding-x} );
+        .k-file-single > .k-file-info {
+            margin-inline-start: var( --kendo-padding-x, #{$kendo-padding-md-x} );
             margin-inline-end: 0;
             min-height: var( --kendo-upload-group-icon-size, #{$kendo-upload-group-icon-size} );
             display: block;
@@ -208,29 +204,24 @@
         }
 
         .k-multiple-files-wrapper {
-            .k-file-name-size-wrapper {
+
+            .k-file-info {
                 margin-block-end: var( --kendo-upload-multiple-items-spacing, #{$kendo-upload-multiple-items-spacing} );
                 display: block;
             }
 
-            .k-file-information {
+            .k-file-summary {
                 margin-block-start: calc( -1 * var( --kendo-upload-multiple-items-spacing, #{$kendo-upload-multiple-items-spacing} ) / 3);
             }
         }
 
         .k-progressbar {
-            height: var( --kendo-upload-progress-thickness, #{$kendo-upload-progress-thickness} );
+            --kendo-progressbar-height: var( --kendo-upload-progress-thickness, #{$kendo-upload-progress-thickness} );
             position: absolute;
+            left: var( --kendo-upload-item-padding-x, #{$kendo-upload-item-padding-x} );
+            right: var( --kendo-upload-item-padding-x, #{$kendo-upload-item-padding-x} );
             bottom: calc( var( --kendo-upload-item-padding-y, #{$kendo-upload-item-padding-y} ) / 2 );
-            // successed
-            width: calc( 100% - var( --kendo-upload-item-padding-x, #{$kendo-upload-item-padding-x} ) * 2);
-
-            .k-progress {
-                position: absolute;
-                width: 100%;
-                max-width: 100%;
-                height: 100%;
-            }
+            width: auto;
         }
 
         // Action buttons
@@ -238,18 +229,10 @@
             border-top-width: 1px;
         }
 
-        // RTL styles
-        &[dir = "rtl"],
-        .k-rtl & {
-            .k-dropzone {
-                text-align: left;
-            }
-        }
     }
 
-    .k-upload-button {
+    .k-upload-button-wrap {
         position: relative;
-        overflow: hidden;
         direction: ltr;
 
         input {

package/scss/upload/_theme.scss

@@ -1,6 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
-@use "../core/color-system" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-upload--theme() {
     .k-upload {
@@ -39,11 +38,11 @@
         .k-file {
 
             &.k-focus {
-                box-shadow: var( --kendo-upload-focused-shadow, #{$kendo-upload-focused-shadow} );
+                box-shadow: var( --kendo-upload-focus-shadow, #{$kendo-upload-focus-shadow} );
             }
 
             .k-upload-action.k-focus {
-                box-shadow: var( --kendo-upload-focused-shadow, #{$kendo-upload-focused-shadow} );
+                box-shadow: var( --kendo-upload-focus-shadow, #{$kendo-upload-focus-shadow} );
             }
 
         }
@@ -55,11 +54,7 @@
 
         // Upload status: uploading
         .k-file-progress {
-
-            .k-file-name {
-                color: var( --kendo-upload-progress-text, #{$kendo-upload-progress-text} );
-            }
-            .k-progress {
+            .k-progressbar .k-selected {
                 background-color: var( --kendo-upload-progress-bg, #{$kendo-upload-progress-bg} );
             }
         }
@@ -67,37 +62,38 @@
 
         // Upload status: success
         .k-file-success {
-            .k-progress {
+            .k-file-validation-message {
+                color: $kendo-upload-success-text;
+            }
+
+            .k-progressbar .k-selected {
                 background-color: var( --kendo-upload-success-bg, #{$kendo-upload-success-bg} );
             }
         }
 
         // Upload satus: error
-        .k-file-error,
-        .k-file-invalid {
+        .k-file-error {
             .k-file-validation-message {
                 color: var( --kendo-upload-error-text, #{$kendo-upload-error-text} );
             }
-            .k-progress {
+
+            .k-progressbar .k-selected {
                 background-color: var( --kendo-upload-error-bg, #{$kendo-upload-error-bg} );
             }
         }
 
-        .k-file-group-wrapper,
-        .k-multiple-files-group-wrapper,
-        .k-file-invalid-group-wrapper,
-        .k-multiple-files-invalid-group-wrapper {
+        .k-file-icon-wrapper {
             color: var( --kendo-upload-icon-color, #{$kendo-upload-icon-color} );
             border-color: var( --kendo-upload-icon-color, #{$kendo-upload-icon-color} );
         }
 
         .k-file-size,
         .k-file-validation-message,
-        .k-file-information {
+        .k-file-summary {
             color: var( --kendo-subtle-text, inherit);
         }
 
-        .k-multiple-files-wrapper .k-file-information {
+        .k-multiple-files-wrapper .k-file-summary {
             color: var( --kendo-upload-text, #{$kendo-upload-text} );
         }
 

package/scss/upload/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Width of the border around the upload.
 /// @group upload
@@ -12,7 +12,7 @@ $kendo-upload-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-upload-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the upload.
 /// @group upload
-$kendo-upload-line-height: var( --kendo-line-height, normal )  !default;
+$kendo-upload-line-height: var( --kendo-line-height, normal ) !default;
 /// Maximum height of the upload.
 /// @group upload
 $kendo-upload-max-height: 300px !default;
@@ -29,16 +29,16 @@ $kendo-upload-border: var( --kendo-component-border, initial ) !default;
 
 /// Horizontal padding of the upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Background color of the upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-bg: get-theme-color-var( neutral-10 ) !default; // header-bg
 /// Text color of the upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-text: get-theme-color-var( neutral-130 ) !default; //$header-text
+$kendo-upload-dropzone-text: get-theme-color-var( neutral-130 ) !default; //$kendo-component-header-text
 /// Border color of the upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-border: get-theme-color-var( neutral-30 ) !default;
@@ -55,14 +55,14 @@ $kendo-upload-status-text-opacity: null !default;
 
 /// Horizontal padding of the upload items.
 /// @group upload
-$kendo-upload-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the upload items.
 /// @group upload
-$kendo-upload-item-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
 
 /// Spacing between multiple items in the upload.
 /// @group upload
-$kendo-upload-multiple-items-spacing: map-get( $kendo-spacing, 4 ) !default;
+$kendo-upload-multiple-items-spacing: map.get( $kendo-spacing, 4 ) !default;
 
 /// Font size of the upload validation message.
 /// @group upload
@@ -84,9 +84,6 @@ $kendo-upload-progress-thickness: 2px !default;
 /// Background color of the upload progress bar.
 /// @group upload
 $kendo-upload-progress-bg: get-theme-color-var( primary-100 ) !default;
-/// Text color of the upload progress bar.
-/// @group upload
-$kendo-upload-progress-text: $kendo-upload-text !default;
 
 /// Success background color of the upload.
 /// @group upload
@@ -104,4 +101,4 @@ $kendo-upload-error-text: get-theme-color-var( error-190 ) !default;
 
 /// Focus shadow of the upload when focused.
 /// @group upload
-$kendo-upload-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-upload-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/upload/index.scss

@@ -12,9 +12,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/utils/_layout.scss

@@ -1,6 +1,6 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
-@use "~@progress/kendo-theme-utils/scss/all.scss" with (
+@use "@progress/kendo-theme-utils/scss/all.scss" with (
     $kendo-utils-border-radius: $kendo-utils-border-radius
 );
 

package/scss/utils/_variables.scss

@@ -1,4 +1,4 @@
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 
 /// Border radius configuration of the theme utils.
 /// @group utils

package/scss/utils/index.scss

@@ -6,9 +6,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/validator/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 @use "../tooltip/_variables.scss" as *;
 
 @mixin kendo-validator--layout() {

package/scss/validator/_theme.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-validator--theme() {
     .k-validator { }

package/scss/validator/_variables.scss

@@ -1 +1 @@
-@use "../core/color-system" as *;
+@use "../core/" as *;

package/scss/validator/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/virtual-scroller/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-virtual-scroller--layout() {
 
@@ -33,5 +33,5 @@
         position: relative;
         z-index: 0;
     }
-    
+
 }

package/scss/virtual-scroller/_theme.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-virtual-scroller--theme() {
     .k-virtual-scroller { }

package/scss/virtual-scroller/index.scss

@@ -6,9 +6,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;