@medyll/idae-slotui-svelte 0.60.0 → 0.63.0

package/dist/controls/button/ButtonMenu.svelte

@@ -60,7 +60,6 @@ let chevron = $derived(disabled ? "fluent:chevron-up-20-regular" : "fluent:chevr
   display: block;
   width: 64px;
 }
-
 .button:hover {
   background-color: rgba(255, 255, 255, 0.3);
 }
@@ -75,7 +74,6 @@ let chevron = $derived(disabled ? "fluent:chevron-up-20-regular" : "fluent:chevr
   width: 30%;
   padding: 0.5rem;
 }
-
 .action:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }</style>

package/dist/controls/button/button.scss

@@ -1,6 +1,6 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
-:global(:root) {
+:root {
     --sld-button-font-size: inherit;
     --sld-button-radius: var(--sld-radius-small);
     --sld-button-border-color: var(--sld-color-primary);
@@ -29,36 +29,37 @@
 
 :global(button),
 :global(.button),
-:global(button.button),
 :global(input[type="button"]),
 :global(input[type="submit"]) {
-    @include ui-width-presets;
-    @include ui-tall-presets;
-    @include ui-variants;
-    @include elevation;
+    @include slotui-mixins.ui-width-presets;
+    @include slotui-mixins.ui-tall-presets;
+    @include slotui-mixins.ui-variants;
+    @include slotui-mixins.elevation;
 
-    border: none;
-    border-radius: 0;
-    margin: 0;
+    & {
+        border: none;
+        border-radius: 0;
+        margin: 0;
 
-    text-align: var(--sld-button-text-align);
-    font-size: var(--sld-button-font-size);
-    border-radius: var(--sld-button-radius);
+        text-align: var(--sld-button-text-align);
+        font-size: var(--sld-button-font-size);
+        border-radius: var(--sld-button-radius);
 
-    color: var(--sld-color-foreground);
-    padding: var(--sld-button-padding);
-    position: relative;
+        color: var(--sld-color-foreground);
+        padding: var(--sld-button-padding);
+        position: relative;
 
-    display: inline-flex;
+        display: inline-flex;
 
-    transition: all 0.2s ease-in-out;
-    overflow: hidden;
-    cursor: pointer;
+        transition: all 0.2s ease-in-out;
+        overflow: hidden;
+        cursor: pointer;
 
-    align-content: center;
-    align-items: center;
+        align-content: center;
+        align-items: center;
 
-    background: var(--sld-button-background);
+        background: var(--sld-button-background);
+    }
 
     /*     :focus {
         outline: 1px solid var(--sld-button-focus-border-color);
@@ -97,19 +98,21 @@
     }
 
     .button-central {
-        @include ui-ellipsises-presets;
-        display: block;
-        max-width: 100%;
-        max-height: 100%;
-        flex: 1;
-        align-items: center;
-        align-content: center;
-        justify-content: center;
-        justify-items: center;
-        padding-left: 0.25rem; //calc(var(--content-padding, 0.25rem) / 2);
-        padding-right: 0.25rem; //calc(var(--content-padding, 0.25rem) / 2);
-        text-align: var(--sld-button-text-align, center);
-        overflow: hidden;
+        @include slotui-mixins.ui-ellipsises-presets;
+        & {
+            display: block;
+            max-width: 100%;
+            max-height: 100%;
+            flex: 1;
+            align-items: center;
+            align-content: center;
+            justify-content: center;
+            justify-items: center;
+            padding-left: 0.25rem; //calc(var(--content-padding, 0.25rem) / 2);
+            padding-right: 0.25rem; //calc(var(--content-padding, 0.25rem) / 2);
+            text-align: var(--sld-button-text-align, center);
+            overflow: hidden;
+        }
         &:empty {
             display: none;
         }
@@ -198,11 +201,6 @@
         justify-content: space-around;
     }
 
-    //
-    @include ui-width-presets;
-    @include ui-tall-presets;
-    @include ui-variants;
-
     &[variant*="bordered"],
     &[bordered="true"],
     &.bordered {
@@ -273,7 +271,7 @@
         background-color: transparent;
         border: 0px solid transparent;
         cursor: pointer;
-        @include data-hover;
+        @include slotui-mixins.data-hover;
         &:hover {
             background-color: var(--sld-button-hover-background);
         }

package/dist/controls/checkbox/Checkbox.svelte

@@ -80,82 +80,66 @@ let {
   padding: 0;
   margin: 0;
 }
-
 .checkbox:hover {
   border-color: var(--sld-hover-border-color);
   background-color: var(--sld-background-disabled);
 }
-
 .checkbox {
-  --preset-tall: var(--sld-tall-small);
   min-height: var(--preset-tall-small);
   height: var(--preset-tall-small);
 }
-
+.checkbox {
+  --preset-tall: var(--sld-tall-small);
+}
 .checkbox[tall=tiny], .checkbox.tall-tiny {
   min-height: var(--sld-tall-tiny) !important;
 }
-
 .checkbox[tall=mini], .checkbox.tall-mini {
   min-height: var(--sld-tall-mini) !important;
 }
-
 .checkbox[tall=small], .checkbox.tall-small {
   min-height: var(--sld-tall-small) !important;
 }
-
 .checkbox[tall=med], .checkbox.tall-med {
   min-height: var(--sld-tall-med) !important;
 }
-
 .checkbox[tall=kind], .checkbox.tall-kind {
   min-height: var(--sld-tall-kind) !important;
 }
-
 .checkbox[tall=auto], .checkbox.tall-auto {
   min-height: var(--sld-tall-auto) !important;
 }
-
 .checkbox[tall=default], .checkbox.tall-default {
   min-height: var(--sld-tall-default) !important;
 }
-
 .checkbox:focus-visible {
   box-shadow: var(--sld-checkbox-shadow);
 }
-
 .checkbox:hover {
   background-color: var(--sld-color-primary-darken-mid);
 }
-
 .checkbox:active + .svg {
   color: var(--sld-color-secondary);
 }
-
 .checkbox:disabled {
   border-color: #ccc;
   background-color: #ededed;
   pointer-events: none;
 }
-
 .checkbox:checked, .checkbox:indeterminate {
   background-color: var(--sld-checkbox-background-indeterminate);
 }
-
 .checkbox:checked:hover, .checkbox:indeterminate:hover {
   background-color: var(--sld-checkbox-background-hover);
 }
-
 .checkbox:checked:active, .checkbox:checked:focus, .checkbox:indeterminate:active, .checkbox:indeterminate:focus {
   background-color: var(--sld-checkbox-background-checked);
 }
-
 .checkbox:checked:disabled, .checkbox:checked[disabled], .checkbox:indeterminate:disabled, .checkbox:indeterminate[disabled] {
   border-color: #ccc;
   background-color: #ededed;
   pointer-events: none;
 }
-
 .checkbox:checked:disabled + .svg, .checkbox:checked[disabled] + .svg, .checkbox:indeterminate:disabled + .svg, .checkbox:indeterminate[disabled] + .svg {
   color: #ededed;
 }
@@ -168,17 +152,14 @@ let {
   min-block-size: 32px;
   gap: 0.5rem;
 }
-
 .checkbox-root.disabled > span {
   color: #ededed;
 }
-
 .checkbox-root .checkbox-container {
   display: inline-flex;
   justify-content: center;
   position: relative;
 }
-
 .checkbox-root .checkbox-container .svg {
   position: absolute;
   color: white;
@@ -186,16 +167,13 @@ let {
   width: 100%;
   padding: 3px;
 }
-
 .checkbox-root .checkbox-container .svg path {
   transform-origin: center;
 }
-
 .checkbox-root .checkbox-container .svg path-check {
   transform: scale(1.1);
   fill: white;
 }
-
 .checkbox-root .checkbox-container .svg path-indeterminate {
   transform: scale(1.1);
 }</style>

package/dist/controls/checkbox/checkbox.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --sld-checkbox-background: var(--sld-color-background-alpha-high);
@@ -15,9 +15,9 @@
 }
 
 .checkbox {
-    @include data-hover;
-    @include ui-tall-presets;
-    @include ui-transition;
+    @include slotui-mixins.data-hover;
+    @include slotui-mixins.ui-tall-presets;
+    @include slotui-mixins.ui-transition;
     appearance: none;
     outline: none;
     border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);

package/dist/controls/confirm/confirm.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 .confirm {
     display: flex;
     align-items: center;

package/dist/controls/progress/Progress.svelte

@@ -29,7 +29,6 @@ const precWidth = $derived(value / percentBase * 100);
   border-radius: var(--progress-radius);
   padding: 1px;
 }
-
 .progress .progress-gouge {
   background: var(--progress-gouge-background);
   border-radius: var(--progress-radius);

package/dist/controls/progress/progress.scss

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

package/dist/controls/rating/rating.scss

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

package/dist/controls/select/select.scss

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

package/dist/controls/slider/Slider.svelte

@@ -154,54 +154,45 @@ function getSliderVal(event2) {
   width: 168px;
   --height: calc(var(--preset-density) / 6);
 }
-
 .slider {
-  --preset-tall: var(--sld-tall-small);
   min-height: var(--preset-tall-small);
   height: var(--preset-tall-small);
 }
-
+.slider {
+  --preset-tall: var(--sld-tall-small);
+}
 .slider[tall=tiny], .slider.tall-tiny {
   min-height: var(--sld-tall-tiny) !important;
 }
-
 .slider[tall=mini], .slider.tall-mini {
   min-height: var(--sld-tall-mini) !important;
 }
-
 .slider[tall=small], .slider.tall-small {
   min-height: var(--sld-tall-small) !important;
 }
-
 .slider[tall=med], .slider.tall-med {
   min-height: var(--sld-tall-med) !important;
 }
-
 .slider[tall=kind], .slider.tall-kind {
   min-height: var(--sld-tall-kind) !important;
 }
-
 .slider[tall=auto], .slider.tall-auto {
   min-height: var(--sld-tall-auto) !important;
 }
-
 .slider[tall=default], .slider.tall-default {
   min-height: var(--sld-tall-default) !important;
 }
-
 .slider .slider-gouge {
   height: var(--height);
   width: 100%;
   border-radius: 10px;
   background-color: var(--slider-gouge-background-color);
 }
-
 .slider .slider-gouge-selected {
   height: var(--height);
   border-radius: 10px;
   background-color: var(--slider-gouge-selected-background-color);
 }
-
 .slider .slider-thumb {
   top: 0;
   aspect-ratio: 1/1;
@@ -214,7 +205,6 @@ function getSliderVal(event2) {
   display: inline-block;
   background-clip: padding-box;
 }
-
 .slider .slider-thumb:hover {
   box-shadow: var(--slider-thumb-hover-box-shadow);
   outline: 4px solid var(--slider-thumb-hover-outline);

package/dist/controls/slider/slider.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --slider-background-color: var(--sld-color-background);
@@ -17,7 +17,7 @@
     flex-direction: row;
     align-items: center;
     width: 168px;
-    @include ui-tall-presets;
+    @include slotui-mixins.ui-tall-presets;
     --height: calc(var(--preset-density) / 6);
     .slider-gouge {
         height: var(--height);

package/dist/controls/stepper/Stepper.svelte

@@ -30,17 +30,14 @@ let child = children;
 .stepper {
   display: flex;
 }
-
 .stepper.vertical {
   flex-direction: column;
 }
-
 .stepper-step {
   padding: var(--stepper-pad);
   border-radius: var(--stepper-radius);
   margin-top: 10px;
 }
-
 .stepper-step.active {
   color: var(--stepper-active-color);
 }</style>

package/dist/controls/stepper/stepper.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --stepper-pad: var(--sld-pad-med);

package/dist/controls/switch/Switch.svelte

@@ -55,22 +55,18 @@ let hiddenRef;
   overflow: hidden;
   cursor: pointer;
 }
-
 .switch :hover .switchHandle {
   background-color: var(--sld-color-secondary) !important;
 }
-
 .switch :has(input:checked) {
   background-color: var(--switch-checked-background);
 }
-
 .switch .switchGutter {
   border: 1px solid var(--switch-gutter-border);
   border-radius: var(--switch-border-radius);
   padding: var(--switch-gutter-padding);
   background-color: var(--switch-gutter-background);
 }
-
 .switch .switchGutter input {
   position: absolute;
   width: 0;
@@ -78,14 +74,12 @@ let hiddenRef;
   top: -50px;
   left: -50px;
 }
-
 .switch .switchGutter input:checked + .switchHandle {
   left: calc(100% - 16px);
   border-color: var(--sld-color-secondary-alpha-mid);
   box-shadow: var(--sld-elevation-3);
   background-color: var(--sld-color-background);
 }
-
 .switch .switchGutter input + .switchHandle {
   position: relative;
   display: block;

package/dist/controls/switch/switch.scss

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

package/dist/controls/textfield/TextField.svelte

@@ -94,105 +94,85 @@ if (usePopper) {
   box-shadow: var(--textfield-shadow);
   background-color: var(--textfield-background);
   color: var(--sld-color-foreground);
-  --preset-width: var(--sld-width-small);
-  width: var(--preset-width-small);
 }
-
 .textfield [error] {
   border-bottom: red;
 }
-
 .textfield {
   --preset-width: var(--sld-width-small);
-  width: var(--preset-width-small);
-  min-width: var(--preset-width-small);
 }
-
+.textfield {
+  width: var(--sld-width-small);
+}
 .textfield[width=tiny], .textfield.width-tiny {
   --preset-width: var(--sld-width-tiny);
   width: var(--sld-width-tiny) !important;
 }
-
 .textfield[width=mini], .textfield.width-mini {
   --preset-width: var(--sld-width-mini);
   width: var(--sld-width-mini) !important;
 }
-
 .textfield[width=small], .textfield.width-small {
   --preset-width: var(--sld-width-small);
   width: var(--sld-width-small) !important;
 }
-
 .textfield[width=med], .textfield.width-med {
   --preset-width: var(--sld-width-med);
   width: var(--sld-width-med) !important;
 }
-
 .textfield[width=kind], .textfield.width-kind {
   --preset-width: var(--sld-width-kind);
   width: var(--sld-width-kind) !important;
 }
-
 .textfield[width=full], .textfield.width-full {
   --preset-width: var(--sld-width-full);
   width: var(--sld-width-full) !important;
 }
-
 .textfield[width=auto], .textfield.width-auto {
   --preset-width: var(--sld-width-auto);
   width: var(--sld-width-auto) !important;
 }
-
 .textfield[width=default], .textfield.width-default {
   --preset-width: var(--sld-width-default);
   width: var(--sld-width-default) !important;
 }
-
 .textfield {
-  --preset-tall: var(--sld-tall-small);
   min-height: var(--preset-tall-small);
   height: var(--preset-tall-small);
 }
-
+.textfield {
+  --preset-tall: var(--sld-tall-small);
+}
 .textfield[tall=tiny], .textfield.tall-tiny {
   min-height: var(--sld-tall-tiny) !important;
 }
-
 .textfield[tall=mini], .textfield.tall-mini {
   min-height: var(--sld-tall-mini) !important;
 }
-
 .textfield[tall=small], .textfield.tall-small {
   min-height: var(--sld-tall-small) !important;
 }
-
 .textfield[tall=med], .textfield.tall-med {
   min-height: var(--sld-tall-med) !important;
 }
-
 .textfield[tall=kind], .textfield.tall-kind {
   min-height: var(--sld-tall-kind) !important;
 }
-
 .textfield[tall=auto], .textfield.tall-auto {
   min-height: var(--sld-tall-auto) !important;
 }
-
 .textfield[tall=default], .textfield.tall-default {
   min-height: var(--sld-tall-default) !important;
 }
-
 .textfield:hover {
   border-color: var(--sld-hover-border-color);
   background-color: var(--sld-background-disabled);
 }
-
 .textfield-container {
   position: relative;
   display: inline-flex;
   overflow: hidden;
 }
-
 .textfield-start {
   position: absolute;
   height: 100%;
@@ -206,7 +186,6 @@ if (usePopper) {
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: var(--textfield-radius, var(--sld-radius-small));
 }
-
 .textfield-end {
   position: absolute;
   right: 0;
@@ -220,7 +199,6 @@ if (usePopper) {
   align-items: center;
   border-radius: var(--textfield-radius, var(--sld-radius-small));
 }
-
 .textfield-end > * {
   max-height: calc(100% - 40px) !important;
   border: 1px solid pink;

package/dist/controls/textfield/textfield.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 .textfield {
     --textfield-background: var(--sld-color-background-alpha-high);
     --textfield-border-width: 1px;
@@ -23,9 +23,9 @@
         border-bottom: red;
     }
 
-    @include ui-width-presets;
-    @include ui-tall-presets;
-    @include data-hover;
+    @include slotui-mixins.ui-width-presets;
+    @include slotui-mixins.ui-tall-presets;
+    @include slotui-mixins.data-hover;
     &-container {
         position: relative;
         display: inline-flex;

package/dist/csss/csss.scss

@@ -1,8 +1,8 @@
-@import "../styles/slotui-mixins.scss";
+@use "../styles/slotui-mixins.scss";
 
 :global {
     * {
-        @include ui-variants;
+        @include slotui-mixins.ui-variants;
         border: 1px solid red;
     }
 }