@medyll/idae-slotui-svelte 0.60.0 → 0.63.0

package/dist/base/alert/Alert.svelte

@@ -109,23 +109,19 @@ dialog.alert {
   overflow: hidden;
   padding: 0;
 }
-
 dialog.alert[open=true] {
   display: none;
 }
-
 dialog.alert article.dialog-content {
   padding: var(--alert-pad);
   border-bottom: 4px solid var(--alert-color-border);
 }
-
 dialog.alert article.dialog-content header.header-bar {
   display: flex;
   align-items: center;
   padding: var(--alert-pad-small);
   gap: var(--alert-gap-small, 1rem);
 }
-
 dialog.alert article.dialog-content header.header-bar .dot {
   display: inline-block;
   border: 1px solid var(--alert-color-border);
@@ -134,26 +130,22 @@ dialog.alert article.dialog-content header.header-bar .dot {
   width: 4px;
   transform: translate(-50%, 0);
 }
-
 dialog.alert article.dialog-content header.header-bar .title {
   flex: 1;
   display: flex;
   align-items: center;
 }
-
 dialog.alert article.dialog-content header.header-bar [data-close] {
   border-radius: var(--alert-radius);
   margin: 0.25rem;
   padding: 0.25rem;
 }
-
 dialog.alert article.dialog-content footer.dialog-footer {
   display: flex;
   justify-content: flex-end;
   padding: var(--alert-pad);
   border-top: 1px solid var(--alert-color-border);
 }
-
 dialog.alert article.dialog-content footer.dialog-footer button {
   margin-left: 1rem;
 }

package/dist/base/alert/alert.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --alert-radius: var(--sld-radius-small);

package/dist/base/avatar/avatar.scss

@@ -1,6 +1,6 @@
 // @import "../../styles/slotui-presets.scss";
 
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
   --avatar-radius: var(--css-radius-small);

package/dist/base/backdrop/Backdrop.svelte

@@ -78,7 +78,6 @@ function testAutoClose() {
   top: 0;
   left: 0;
 }
-
 .backdrop-content {
   z-index: 10001;
   position: absolute;
@@ -91,14 +90,12 @@ function testAutoClose() {
   align-items: center;
   justify-content: center;
 }
-
 .backdrop-content-loader {
   display: flex;
   justify-content: center;
   align-content: center;
   align-items: center;
 }
-
 .backdrop-content-inner {
   display: inherit;
 }</style>

package/dist/base/backdrop/backdrop.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --backdrop-background-color: var(--sld-color-foreground-alpha-high);

package/dist/base/badge/Badge.svelte

@@ -37,7 +37,6 @@ const yM = {
   width: 16px;
   height: 16px;
 }
-
 .badge .hidden {
   transform: scale(0, 0);
 }</style>

package/dist/base/badge/badge.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
   --badge-color-border: var(--sld-color-border);

package/dist/base/box/Box.svelte

@@ -80,11 +80,9 @@ let closer = !showCloseControl ? {} : { onClose: () => actions.close() };
   display: flex;
   flex-direction: column;
 }
-
 .box-content {
   flex: 1;
 }
-
 .box-button-zone {
   display: flex;
   gap: var(--box-gap);

package/dist/base/box/box.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
   --box-color-background: var(--sld-color-background);

package/dist/base/breadCrumb/breadcrumb.scss

@@ -1,5 +1,5 @@
 // @import "../../styles/slotui-presets.scss";
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 .breadCrumb {
     ul {

package/dist/base/cartouche/Cartouche.svelte

@@ -118,25 +118,20 @@ let Component = $state(component);
   overflow: hidden;
   box-shadow: var(--sld-elevation-1);
 }
-
 .cartouche[aria-expanded=true] {
   box-shadow: var(--sld-elevation-2);
 }
-
 .cartouche.stacked {
   border-radius: 0;
 }
-
 .cartouche.stacked:first-child {
   border-top-left-radius: var(--cartouche-radius);
   border-top-right-radius: var(--cartouche-radius);
 }
-
 .cartouche.stacked:last-child {
   border-bottom-left-radius: var(--cartouche-radius);
   border-bottom-right-radius: var(--cartouche-radius);
 }
-
 .cartouche .control {
   transition: all 0.25s ease;
   display: flex;
@@ -146,67 +141,55 @@ let Component = $state(component);
   padding: auto 0.25rem;
   cursor: pointer;
 }
-
 .cartouche .control {
-  --preset-tall: var(--sld-tall-small);
   min-height: var(--preset-tall-small);
   height: var(--preset-tall-small);
 }
-
+.cartouche .control {
+  --preset-tall: var(--sld-tall-small);
+}
 .cartouche .control[tall=tiny], .cartouche .control.tall-tiny {
   min-height: var(--sld-tall-tiny) !important;
 }
-
 .cartouche .control[tall=mini], .cartouche .control.tall-mini {
   min-height: var(--sld-tall-mini) !important;
 }
-
 .cartouche .control[tall=small], .cartouche .control.tall-small {
   min-height: var(--sld-tall-small) !important;
 }
-
 .cartouche .control[tall=med], .cartouche .control.tall-med {
   min-height: var(--sld-tall-med) !important;
 }
-
 .cartouche .control[tall=kind], .cartouche .control.tall-kind {
   min-height: var(--sld-tall-kind) !important;
 }
-
 .cartouche .control[tall=auto], .cartouche .control.tall-auto {
   min-height: var(--sld-tall-auto) !important;
 }
-
 .cartouche .control[tall=default], .cartouche .control.tall-default {
   min-height: var(--sld-tall-default) !important;
 }
-
 .cartouche .control:hover {
   background-color: var(--cartouche-background-color-hover);
 }
-
 .cartouche .control .controlIcon {
   display: flex;
   align-items: center;
   padding: 0 0.5rem;
 }
-
 .cartouche .control .controlLabel {
   cursor: pointer;
   padding: 0 0.5rem;
 }
-
 .cartouche .control .cartouche-control-actions {
   cursor: default;
 }
-
 .cartouche .control .chevron {
   cursor: pointer;
   padding: 0.5rem;
   align-items: center;
   align-content: center;
 }
-
 .cartouche .content {
   transition: all 0.25s ease;
   overflow: hidden;
@@ -216,7 +199,6 @@ let Component = $state(component);
   padding-top: 0;
   border-radius: 4px;
 }
-
 .cartouche .content-wrapper {
   padding: 1px;
   padding-top: 0;
@@ -225,11 +207,9 @@ let Component = $state(component);
   border-top: none !important;
   background-color: var(--cartouche-background-color);
 }
-
 .cartouche .content-wrapper[aria-expanded=false] {
   display: none;
 }
-
 .cartouche .content[aria-expanded=false] {
   display: none;
 }</style>

package/dist/base/cartouche/cartouche.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
   --cartouche-radius: var(--sld-radius-small);
@@ -36,8 +36,8 @@
   }
 
   .control {
-    @include ui-tall-presets;
-    @include ui-transition;
+    @include slotui-mixins.ui-tall-presets;
+    @include slotui-mixins.ui-transition;
     display: flex;
     align-items: center;
     gap: var(--cartouche-control-gap);
@@ -78,7 +78,7 @@
   }
 
   .content {
-    @include ui-transition;
+    @include slotui-mixins.ui-transition;
     &-wrapper {
       padding: 1px;
       padding-top: 0;

package/dist/base/chipper/Chipper.svelte

@@ -38,11 +38,9 @@ let cssColor = $derived(color ?? (status ? `var(--sld-color-${status})` : ""));
   position: relative;
   gap: var(--chipper-gap);
 }
-
 .chipper .chipper-content {
   padding: 0.5rem;
 }
-
 .chipper .chipper-chip {
   display: block;
   position: absolute;
@@ -52,21 +50,18 @@ let cssColor = $derived(color ?? (status ? `var(--sld-color-${status})` : ""));
   max-height: 100%;
   background-color: var(--chipper-chip-color);
 }
-
 .chipper .chipper-chip[data-position=left] {
   top: 2px;
   left: 2px;
   height: 100%;
   width: 3px;
 }
-
 .chipper .chipper-chip[data-position=right] {
   top: 2px;
   right: 2px;
   height: 130px;
   width: 3px;
 }
-
 .chipper .chipper-chip[data-position=top] {
   height: 4px;
   top: 2px;
@@ -74,7 +69,6 @@ let cssColor = $derived(color ?? (status ? `var(--sld-color-${status})` : ""));
   transform: translate(-50%, 0);
   width: 50%;
 }
-
 .chipper .chipper-chip[data-position=bottom] {
   height: 4px;
   bottom: 2px;
@@ -82,7 +76,6 @@ let cssColor = $derived(color ?? (status ? `var(--sld-color-${status})` : ""));
   transform: translate(-50%, 0);
   width: 50%;
 }
-
 .chipper .chipper-chip .defaultChip,
 .chipper .chipper-chip [slot=chipperChip] {
   display: block;

package/dist/base/chipper/chipper.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --chipper-gap: var(--sld-gap-tiny);

package/dist/base/contentSwitcher/ContentSwitcher.svelte

@@ -65,7 +65,6 @@ function handleClick(event) {
   align-items: center;
   flex: 1;
 }
-
 .content-switcher .content {
   position: relative;
   overflow: var(--sld-content-switcher-overflow);

package/dist/base/contentSwitcher/content-switcher.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --sld-content-switcher-overflow: hidden;

package/dist/base/divider/Divider.svelte

@@ -60,7 +60,6 @@ hr {
   background-color: var(--divider-background-color);
   display: block;
 }
-
 hr.vertical {
   width: 1px;
   border-right: 1px solid var(--divider-border-right);

package/dist/base/divider/divider.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
   --divider-border-top: var(--sld-color-border, var(--sld-color-foreground-alpha-high, #333));

package/dist/base/icon/icon.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :global(.icon) {
 	transition: all 0.2;

package/dist/base/paper/Paper.svelte

@@ -25,15 +25,12 @@ let {
   background-color: var(--paper-background-color);
   border-radius: var(--paper-radius);
 }
-
 .paper.elevation-0, .paper[elevation-0] {
   box-shadow: var(--sld-elevation-0);
 }
-
 .paper.elevation-through, .paper[elevation-through] {
   box-shadow: var(--sld-elevation-through);
 }
-
 .paper.elevation-5, .paper[elevation-5] {
   box-shadow: var(--sld-elevation-5);
 }</style>

package/dist/base/paper/paper.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --paper-radius: var(--sld-radius-small);
@@ -11,5 +11,5 @@
     color: var(--paper-border);
     background-color: var(--paper-background-color);
     border-radius: var(--paper-radius);
-    @include elevation();
+    @include slotui-mixins.elevation();
 }

package/dist/base/titleBar/TitleBar.svelte

@@ -45,7 +45,6 @@ let {
   align-items: center;
   border-bottom: 1px solid var(--title-bar-color-border-bottom);
 }
-
 .title-bar-content {
   display: flex;
   flex-direction: row;
@@ -54,11 +53,9 @@ let {
   min-height: 34px;
   flex: 1;
 }
-
 .title-bar-content-icon {
   padding: var(--title-bar-pad);
 }
-
 .title-bar-content-title {
   flex: 1;
 }</style>

package/dist/base/titleBar/title-bar.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --title-bar-gap: var(--sld-gap-med);
@@ -7,9 +7,9 @@
 }
 
 .title-bar {
-    @include flex(row, center);
+    @include slotui-mixins.flex(row, center);
     &-content {
-        @include flex(row, center);
+        @include slotui-mixins.flex(row, center);
         gap: var(--title-bar-gap);
         min-height: 34px;
         flex: 1;

package/dist/controls/autocomplete/auto-complete.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --auto-complete-pad: var(--sld-pad-medium);
@@ -10,6 +10,6 @@
     &-boot {
         padding: var(--auto-complete-pad);
         gap: var(--auto-complete-gap);
-        @include flex(row, center);
+        @include slotui-mixins.flex(row, center);
     }
 }