@medyll/idae-slotui-svelte 0.63.0 → 0.64.0

package/dist/controls/button/button.scss

@@ -27,10 +27,10 @@
     }
 }
 
-:global(button),
-:global(.button),
-:global(input[type="button"]),
-:global(input[type="submit"]) {
+.slotui-button,
+button.slotui-button,
+input[type="button"].slotui-button,
+input[type="submit"].slotui-button {
     @include slotui-mixins.ui-width-presets;
     @include slotui-mixins.ui-tall-presets;
     @include slotui-mixins.ui-variants;
@@ -61,29 +61,7 @@
         background: var(--sld-button-background);
     }
 
-    /*     :focus {
-        outline: 1px solid var(--sld-button-focus-border-color);
-        outline-offset: 2px;
-        box-shadow: var(--sld-button-focus-shadow);
-    }
-    :focus-visible {
-        outline: 1px solid var(--sld-button-focus-border-color);
-        outline-offset: -2px;
-        box-shadow: var(--sld-button-focus-shadow);
-    }
-    :hover {
-        background-color: var(--sld-button-hover-background);
-        box-shadow: var(--sld-button-hover-shadow);
-    }
-    :active {
-        transform: translateY(1px);
-        box-shadow: var(--sld-button-active-shadow);
-    }
-    :focus:not(:focus-visible) {
-        box-shadow: var(--sld-button-focus-shadow);
-    } */
-
-    .button-start {
+    .start {
         position: relative;
         top: 0;
         left: 0;
@@ -97,7 +75,7 @@
         }
     }
 
-    .button-central {
+    .central {
         @include slotui-mixins.ui-ellipsises-presets;
         & {
             display: block;
@@ -118,11 +96,10 @@
         }
     }
 
-    .button-end {
+    .end {
         position: relative;
         align-items: center;
         align-content: center;
-        //width: var(--w-tiny);
         padding: 0 0.5rem;
         text-align: center;
         cursor: pointer;
@@ -138,9 +115,11 @@
 
     &.loading,
     &[aria-busy="true"] {
-        position: relative;
-        color: transparent;
-        pointer-events: none;
+        & {
+            position: relative;
+            color: transparent;
+            pointer-events: none;
+        }
 
         &::after {
             content: " ";
@@ -242,7 +221,6 @@
     }
 
     &[variant*="link"],
-    &[link="true"],
     &.link,
     &[role="link"] {
         color: var(--sld-color-primary);
@@ -267,11 +245,15 @@
     &[variant*="naked"],
     &[naked="true"],
     &.naked {
-        color: inherit;
-        background-color: transparent;
-        border: 0px solid transparent;
-        cursor: pointer;
         @include slotui-mixins.data-hover;
+
+        & {
+            color: inherit;
+            background-color: transparent;
+            border: 0px solid transparent;
+            cursor: pointer;
+        }
+
         &:hover {
             background-color: var(--sld-button-hover-background);
         }

package/dist/controls/checkbox/Checkbox.svelte

@@ -66,20 +66,6 @@ let {
   --sld-checkbox-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
 }
 
-.checkbox {
-  transition: all 0.25s ease;
-  appearance: none;
-  outline: none;
-  border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
-  border-radius: var(--sld-checkbox-radius);
-  background-clip: padding-box;
-  background-color: var(--sld-checkbox-background);
-  width: 1.7rem;
-  height: 1.7rem;
-  aspect-ratio: 1/1;
-  padding: 0;
-  margin: 0;
-}
 .checkbox:hover {
   border-color: var(--sld-hover-border-color);
   background-color: var(--sld-background-disabled);
@@ -112,6 +98,22 @@ let {
 .checkbox[tall=default], .checkbox.tall-default {
   min-height: var(--sld-tall-default) !important;
 }
+.checkbox {
+  transition: all 0.25s ease;
+}
+.checkbox {
+  appearance: none;
+  outline: none;
+  border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
+  border-radius: var(--sld-checkbox-radius);
+  background-clip: padding-box;
+  background-color: var(--sld-checkbox-background);
+  width: 1.7rem;
+  height: 1.7rem;
+  aspect-ratio: 1/1;
+  padding: 0;
+  margin: 0;
+}
 .checkbox:focus-visible {
   box-shadow: var(--sld-checkbox-shadow);
 }

package/dist/controls/checkbox/checkbox.scss

@@ -18,17 +18,20 @@
     @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);
-    border-radius: var(--sld-checkbox-radius);
-    background-clip: padding-box;
-    background-color: var(--sld-checkbox-background);
-    width: 1.7rem;
-    height: 1.7rem;
-    aspect-ratio: 1/1;
-    padding: 0;
-    margin: 0;
+
+    & {
+        appearance: none;
+        outline: none;
+        border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
+        border-radius: var(--sld-checkbox-radius);
+        background-clip: padding-box;
+        background-color: var(--sld-checkbox-background);
+        width: 1.7rem;
+        height: 1.7rem;
+        aspect-ratio: 1/1;
+        padding: 0;
+        margin: 0;
+    }
 
     &:focus-visible {
         box-shadow: var(--sld-checkbox-shadow);

package/dist/controls/slider/Slider.svelte

@@ -145,15 +145,6 @@ function getSliderVal(event2) {
   --slider-thumb-hover-box-shadow: var(--sld-elevation-3);
 }
 
-.slider {
-  background-color: var(--slider-background-color);
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  width: 168px;
-  --height: calc(var(--preset-density) / 6);
-}
 .slider {
   min-height: var(--preset-tall-small);
   height: var(--preset-tall-small);
@@ -182,6 +173,15 @@ function getSliderVal(event2) {
 .slider[tall=default], .slider.tall-default {
   min-height: var(--sld-tall-default) !important;
 }
+.slider {
+  --height: calc(var(--preset-density) / 6);
+  background-color: var(--slider-background-color);
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: 168px;
+}
 .slider .slider-gouge {
   height: var(--height);
   width: 100%;

package/dist/controls/slider/slider.scss

@@ -11,14 +11,16 @@
 }
 
 .slider {
-    background-color: var(--slider-background-color);
-    position: relative;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    width: 168px;
     @include slotui-mixins.ui-tall-presets;
-    --height: calc(var(--preset-density) / 6);
+    & {
+        --height: calc(var(--preset-density) / 6);
+        background-color: var(--slider-background-color);
+        position: relative;
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        width: 168px;
+    }
     .slider-gouge {
         height: var(--height);
         width: 100%;

package/dist/controls/textfield/TextField.svelte

@@ -99,10 +99,10 @@ if (usePopper) {
   border-bottom: red;
 }
 .textfield {
-  --preset-width: var(--sld-width-small);
+  width: var(--sld-width-small);
 }
 .textfield {
-  width: var(--sld-width-small);
+  --preset-width: var(--sld-width-small);
 }
 .textfield[width=tiny], .textfield.width-tiny {
   --preset-width: var(--sld-width-tiny);

package/dist/csss/csss.scss

@@ -3,6 +3,8 @@
 :global {
     * {
         @include slotui-mixins.ui-variants;
-        border: 1px solid red;
+        & {
+            border: 1px solid red;
+        }
     }
 }

package/dist/data/dataList/DataList.svelte

@@ -322,10 +322,10 @@ $effect(() => {
 :global(.dataListRow):hover {
   background-color: var(--datalist-row-background-color-hover);
 }
-:global(.dataListRow)[data-selected=true] {
+:global(.dataListRow)[aria-selected=true] {
   background-color: var(--datalist-cell-background-color-selected);
 }
-:global(.dataListRow)[data-selected=true] .dataListCell {
+:global(.dataListRow)[aria-selected=true] .dataListCell {
   color: var(--datalist-cell-color-selected);
 }
 :global(.dataListRow) .dataListCell {

package/dist/data/dataList/datalist.scss

@@ -130,7 +130,7 @@
 		background-color: var(--datalist-row-background-color-hover);
 	}
 
-	&[data-selected="true"] {
+	&[aria-selected="true"] {
 		background-color: var(--datalist-cell-background-color-selected);
 
 		.dataListCell {

package/dist/data/finder/Finder.svelte

@@ -154,10 +154,10 @@ let dataKeys = $derived(
   gap: var(--finder-gap);
 }
 .finder-container {
-  --preset-width: var(--sld-width-small);
+  width: var(--sld-width-small);
 }
 .finder-container {
-  width: var(--sld-width-small);
+  --preset-width: var(--sld-width-small);
 }
 .finder-container[width=tiny], .finder-container.width-tiny {
   --preset-width: var(--sld-width-tiny);

package/dist/index.d.ts

@@ -33,7 +33,6 @@ export * as slotuiMixinsMinCss from './slotui-css/slotui-mixins.min.css';
 export * as slotuiMixinsCss from './slotui-css/slotui-mixins.css';
 export * as slotuiMinCssCss from './slotui-css/slotui-min-css.css';
 export * as slotuiCssCss from './slotui-css/slotui-css.css';
-export * as slotuiCombinedCss from './slotui-css/slotui-combined.css';
 export * as sliderMinCss from './slotui-css/slider.min.css';
 export * as sliderCss from './slotui-css/slider.css';
 export * as sheetConfigMinCss from './slotui-css/sheetConfig.min.css';
@@ -121,6 +120,7 @@ export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
 export { default as Slotted } from './utils/slotted/Slotted.svelte';
 export * from './utils/looper/types.js';
 export { default as Looper } from './utils/looper/Looper.svelte';
+export * from './utils/effects/transitions.js';
 export * from './utils/engine/wactions.utils.js';
 export * from './utils/engine/utils.js';
 export * from './utils/engine/stator.js';
@@ -128,7 +128,6 @@ export * from './utils/engine/site.utils.js';
 export * from './utils/engine/presets.js';
 export * from './utils/engine/engine.js';
 export * from './utils/engine/elem.js';
-export * from './utils/effects/transitions.js';
 export { default as Css } from './utils/css/Css.svelte';
 export { default as ContextRooter } from './utils/contextRooter/ContextRooter.svelte';
 export * from './utils/content/types.js';
@@ -215,10 +214,10 @@ export { default as DataListCell } from './data/dataList/DataListCell.svelte';
 export { default as DataList } from './data/dataList/DataList.svelte';
 export * from './controls/textfield/types.js';
 export { default as TextField } from './controls/textfield/TextField.svelte';
-export * from './controls/stepper/types.js';
-export { default as Stepper } from './controls/stepper/Stepper.svelte';
 export * from './controls/switch/types.js';
 export { default as Switch } from './controls/switch/Switch.svelte';
+export * from './controls/stepper/types.js';
+export { default as Stepper } from './controls/stepper/Stepper.svelte';
 export * from './controls/slider/types.js';
 export { default as Slider } from './controls/slider/Slider.svelte';
 export { default as Select } from './controls/select/Select.svelte';

package/dist/index.js

@@ -34,7 +34,6 @@ export * as slotuiMixinsMinCss from './slotui-css/slotui-mixins.min.css';
 export * as slotuiMixinsCss from './slotui-css/slotui-mixins.css';
 export * as slotuiMinCssCss from './slotui-css/slotui-min-css.css';
 export * as slotuiCssCss from './slotui-css/slotui-css.css';
-export * as slotuiCombinedCss from './slotui-css/slotui-combined.css';
 export * as sliderMinCss from './slotui-css/slider.min.css';
 export * as sliderCss from './slotui-css/slider.css';
 export * as sheetConfigMinCss from './slotui-css/sheetConfig.min.css';
@@ -122,6 +121,7 @@ export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
 export { default as Slotted } from './utils/slotted/Slotted.svelte';
 export * from './utils/looper/types.js';
 export { default as Looper } from './utils/looper/Looper.svelte';
+export * from './utils/effects/transitions.js';
 export * from './utils/engine/wactions.utils.js';
 export * from './utils/engine/utils.js';
 export * from './utils/engine/stator.js';
@@ -129,7 +129,6 @@ export * from './utils/engine/site.utils.js';
 export * from './utils/engine/presets.js';
 export * from './utils/engine/engine.js';
 export * from './utils/engine/elem.js';
-export * from './utils/effects/transitions.js';
 export { default as Css } from './utils/css/Css.svelte';
 export { default as ContextRooter } from './utils/contextRooter/ContextRooter.svelte';
 export * from './utils/content/types.js';
@@ -216,10 +215,10 @@ export { default as DataListCell } from './data/dataList/DataListCell.svelte';
 export { default as DataList } from './data/dataList/DataList.svelte';
 export * from './controls/textfield/types.js';
 export { default as TextField } from './controls/textfield/TextField.svelte';
-export * from './controls/stepper/types.js';
-export { default as Stepper } from './controls/stepper/Stepper.svelte';
 export * from './controls/switch/types.js';
 export { default as Switch } from './controls/switch/Switch.svelte';
+export * from './controls/stepper/types.js';
+export { default as Stepper } from './controls/stepper/Stepper.svelte';
 export * from './controls/slider/types.js';
 export { default as Slider } from './controls/slider/Slider.svelte';
 export { default as Select } from './controls/select/Select.svelte';

package/dist/navigation/drawer/Drawer.svelte

@@ -161,6 +161,11 @@ $effect(() => {
   --drawer-content-flex: 1;
 }
 
+.drawer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
 .drawer {
   color: var(--drawer-color);
   background-color: var(--drawer-background-color);
@@ -170,9 +175,6 @@ $effect(() => {
   box-shadow: var(--drawer-box-shadow);
   border-left: 1px solid var(--drawer-border-left);
   overflow: visible;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   height: 100%;
   transition: all 0.1s;
 }
@@ -185,11 +187,6 @@ $effect(() => {
   position: absolute;
   z-index: 8600;
 }
-.drawer header, .drawer-header {
-  min-height: var(--drawer-header-min-height);
-  display: flex;
-  width: 100%;
-}
 .drawer header, .drawer-header {
   min-height: var(--preset-tall-small);
   height: var(--preset-tall-small);
@@ -218,6 +215,11 @@ $effect(() => {
 .drawer header[tall=default], .drawer header.tall-default, .drawer-header[tall=default], .drawer-header.tall-default {
   min-height: var(--sld-tall-default) !important;
 }
+.drawer header, .drawer-header {
+  min-height: var(--drawer-header-min-height);
+  display: flex;
+  width: 100%;
+}
 .drawer header-bar, .drawer-header-bar {
   flex: 1;
   display: flex;

package/dist/navigation/drawer/drawer.scss

@@ -13,17 +13,19 @@
 }
 
 .drawer {
-  color: var(--drawer-color);
-  background-color: var(--drawer-background-color);
-  --webkit-backdrop-filter: var(--drawer-backdrop-filter);
-  backdrop-filter: var(--drawer-backdrop-filter);
-  z-index: 3000;
-  box-shadow: var(--drawer-box-shadow);
-  border-left: 1px solid var(--drawer-border-left);
-  overflow: visible;
   @include slotui-mixins.flex(column);
-  height: 100%;
-  transition: all 0.1s;
+  & {
+    color: var(--drawer-color);
+    background-color: var(--drawer-background-color);
+    --webkit-backdrop-filter: var(--drawer-backdrop-filter);
+    backdrop-filter: var(--drawer-backdrop-filter);
+    z-index: 3000;
+    box-shadow: var(--drawer-box-shadow);
+    border-left: 1px solid var(--drawer-border-left);
+    overflow: visible;
+    height: 100%;
+    transition: all 0.1s;
+  }
 
   &-icon {
     padding: var(--drawer-icon-padding);
@@ -39,9 +41,11 @@
   &-header {
     @include slotui-mixins.ui-tall-presets;
 
-    min-height: var(--drawer-header-min-height);
-    display: flex;
-    width: 100%;
+    & {
+      min-height: var(--drawer-header-min-height);
+      display: flex;
+      width: 100%;
+    }
 
     &-bar {
       flex: 1;