@medyll/idae-slotui-svelte 0.60.0 → 0.63.0

package/dist/data/dataList/DataList.svelte

@@ -230,20 +230,17 @@ $effect(() => {
   height: 100%;
   position: relative;
 }
-
 .datalist-group {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
-
 .datalist-group-wrapper {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   height: 100%;
 }
-
 .datalist-group-head {
   display: flex;
   flex-direction: row;
@@ -252,26 +249,21 @@ $effect(() => {
   gap: var(--datalist-gap);
   cursor: pointer;
 }
-
 .datalist-group-head-icon {
   color: var(--datalist-icon-color);
 }
-
 .datalist-group-head-divider {
   border-bottom: 1px solid var(--datalist-divider-border);
 }
-
 .datalist-group-head:hover-icon {
   color: var(--datalist-icon-color-hover);
 }
-
 .datalist-group-head:hover-divider {
   flex: 1;
   border-bottom-width: 1px;
   border-color: var(--datalist-divider-border-hover);
   cursor: pointer;
 }
-
 .datalist-group-body {
   flex: 1;
   position: relative;
@@ -288,7 +280,6 @@ $effect(() => {
   box-shadow: var(--datalist-box-shadow);
   border: 1px solid var(--datalist-border);
 }
-
 .datalist-group-head .dataListCell {
   display: flex;
   align-items: stretch;
@@ -300,64 +291,51 @@ $effect(() => {
   -ms-user-select: none;
   user-select: none;
 }
-
 .datalist-group-head .dataListCell:last-of-type {
   border-right: 1px solid transparent;
 }
-
 .datalist-group-head .dataListCell[data-sortable=true] {
   cursor: pointer;
 }
-
 .datalist-group-head .dataListCell[data-sortable=true]:hover {
   background-color: var(--datalist-cell-border-hover);
 }
-
 .datalist-group-head .dataListCell .cellHeader {
   display: flex;
   align-items: center;
   min-width: 0;
   width: 100%;
 }
-
 .datalist-group-head .dataListCell .cellHeader .cellHeaderContent {
   flex: 1;
   overflow: hidden;
   padding: 0 8px;
 }
-
 :global(.dataListRow) {
   border-bottom: 1px solid var(--datalist-row-border);
   --webkit-content-visibility: auto;
   webkit-content-visibility: auto;
 }
-
 :global(.dataListRow):last-of-type {
   border-bottom: 1px solid transparent;
 }
-
 :global(.dataListRow):hover {
   background-color: var(--datalist-row-background-color-hover);
 }
-
 :global(.dataListRow)[data-selected=true] {
   background-color: var(--datalist-cell-background-color-selected);
 }
-
 :global(.dataListRow)[data-selected=true] .dataListCell {
   color: var(--datalist-cell-color-selected);
 }
-
 :global(.dataListRow) .dataListCell {
   padding: 0.5rem 0.5rem;
   color: var(--datalist-cell-color);
   border-right: 1px solid var(--datalist-cell-border);
 }
-
 :global(.dataListRow) .dataListCell:last-of-type {
   border-right: 1px solid transparent;
 }
-
 :global(.dataListRow) .dataListCell[data-noWrap=true] {
   display: box;
   overflow: hidden;

package/dist/data/dataList/datalist.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
 	--datalist-pad: var(--sld-pad-med);
@@ -25,14 +25,14 @@
 	position: relative;
 
 	&-group {
-		@include flex(column);
+		@include slotui-mixins.flex(column);
 		&-wrapper {
-			@include flex(column);
+			@include slotui-mixins.flex(column);
 			height: 100%;
 		}
 
 		&-head {
-			@include flex(row, center);
+			@include slotui-mixins.flex(row, center);
 			padding: var(--datalist-pad);
 			gap: var(--datalist-gap);
 			cursor: pointer;

package/dist/data/finder/Finder.svelte

@@ -152,86 +152,70 @@ let dataKeys = $derived(
 .finder-container {
   display: inline-flex;
   gap: var(--finder-gap);
-  --preset-width: var(--sld-width-small);
-  width: var(--preset-width-small);
 }
-
 .finder-container {
   --preset-width: var(--sld-width-small);
-  width: var(--preset-width-small);
-  min-width: var(--preset-width-small);
 }
-
+.finder-container {
+  width: var(--sld-width-small);
+}
 .finder-container[width=tiny], .finder-container.width-tiny {
   --preset-width: var(--sld-width-tiny);
   width: var(--sld-width-tiny) !important;
 }
-
 .finder-container[width=mini], .finder-container.width-mini {
   --preset-width: var(--sld-width-mini);
   width: var(--sld-width-mini) !important;
 }
-
 .finder-container[width=small], .finder-container.width-small {
   --preset-width: var(--sld-width-small);
   width: var(--sld-width-small) !important;
 }
-
 .finder-container[width=med], .finder-container.width-med {
   --preset-width: var(--sld-width-med);
   width: var(--sld-width-med) !important;
 }
-
 .finder-container[width=kind], .finder-container.width-kind {
   --preset-width: var(--sld-width-kind);
   width: var(--sld-width-kind) !important;
 }
-
 .finder-container[width=full], .finder-container.width-full {
   --preset-width: var(--sld-width-full);
   width: var(--sld-width-full) !important;
 }
-
 .finder-container[width=auto], .finder-container.width-auto {
   --preset-width: var(--sld-width-auto);
   width: var(--sld-width-auto) !important;
 }
-
 .finder-container[width=default], .finder-container.width-default {
   --preset-width: var(--sld-width-default);
   width: var(--sld-width-default) !important;
 }
-
 .finder-container {
-  --preset-tall: var(--sld-tall-small);
   min-height: var(--preset-tall-small);
   height: var(--preset-tall-small);
 }
-
+.finder-container {
+  --preset-tall: var(--sld-tall-small);
+}
 .finder-container[tall=tiny], .finder-container.tall-tiny {
   min-height: var(--sld-tall-tiny) !important;
 }
-
 .finder-container[tall=mini], .finder-container.tall-mini {
   min-height: var(--sld-tall-mini) !important;
 }
-
 .finder-container[tall=small], .finder-container.tall-small {
   min-height: var(--sld-tall-small) !important;
 }
-
 .finder-container[tall=med], .finder-container.tall-med {
   min-height: var(--sld-tall-med) !important;
 }
-
 .finder-container[tall=kind], .finder-container.tall-kind {
   min-height: var(--sld-tall-kind) !important;
 }
-
 .finder-container[tall=auto], .finder-container.tall-auto {
   min-height: var(--sld-tall-auto) !important;
 }
-
 .finder-container[tall=default], .finder-container.tall-default {
   min-height: var(--sld-tall-default) !important;
 }</style>

package/dist/data/finder/finder.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --finder-gap: var(--sld-gap-tiny);
@@ -8,7 +8,7 @@
     &-container {
         display: inline-flex;
         gap: var(--finder-gap);
-        @include ui-width-presets;
-        @include ui-tall-presets;
+        @include slotui-mixins.ui-width-presets;
+        @include slotui-mixins.ui-tall-presets;
     }
 }

package/dist/data/loader/Loader.svelte

@@ -113,7 +113,6 @@ $effect(() => {
   left: 50%;
   transform: translate(-50%, 0);
 }
-
 .loader .loader-box {
   box-shadow: var(--loader-box-shadow);
   border-radius: var(--loader-radius);
@@ -128,7 +127,6 @@ $effect(() => {
   flex-direction: column;
   align-items: center;
 }
-
 .loader .loader-box .loader-message {
   border-radius: var(--loader-message-border-radius);
   border-bottom: 1px solid;

package/dist/data/loader/loader.scss

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

package/dist/data/sorter/sorterer.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
     --sorterer-gap: var(--sld-gap-tiny);
@@ -6,6 +6,6 @@
 
 .sorterer {
     cursor: pointer;
-    @include flex(row, center);
+    @include slotui-mixins.flex(row, center);
     gap: var(--sorterer-gap);
 }

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export * from './componentCite.js';
-export * from './csss/csss.js';
 export * as windowMinCss from './slotui-css/window.min.css';
 export * as windowCss from './slotui-css/window.css';
 export * as treeMinCss from './slotui-css/tree.min.css';
@@ -109,6 +108,7 @@ export * as autoCompleteMinCss from './slotui-css/auto-complete.min.css';
 export * as autoCompleteCss from './slotui-css/auto-complete.css';
 export * as alertMinCss from './slotui-css/alert.min.css';
 export * as alertCss from './slotui-css/alert.css';
+export * from './csss/csss.js';
 export * from './utils/uses/toggler.js';
 export * from './utils/uses/positioner.js';
 export * from './utils/uses/navigation.js';
@@ -215,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/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/switch/types.js';
+export { default as Switch } from './controls/switch/Switch.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';
@@ -280,6 +280,6 @@ export { default as Alert } from './base/alert/Alert.svelte';
 export * from './utils/uses/sx4u/sx4uPreprocess.js';
 export * from './utils/uses/sx4u/sx4u.js';
 export * from './utils/uses/stickTo/stickTo.js';
-export * from './utils/uses/clickAway/clickAway.js';
 export * from './utils/uses/resizer/resizer.js';
+export * from './utils/uses/clickAway/clickAway.js';
 export * from './utils/uses/autofocus/autofocus.js';

package/dist/index.js

@@ -1,6 +1,5 @@
 // auto exports of entry components
 export * from './componentCite.js';
-export * from './csss/csss.js';
 export * as windowMinCss from './slotui-css/window.min.css';
 export * as windowCss from './slotui-css/window.css';
 export * as treeMinCss from './slotui-css/tree.min.css';
@@ -110,6 +109,7 @@ export * as autoCompleteMinCss from './slotui-css/auto-complete.min.css';
 export * as autoCompleteCss from './slotui-css/auto-complete.css';
 export * as alertMinCss from './slotui-css/alert.min.css';
 export * as alertCss from './slotui-css/alert.css';
+export * from './csss/csss.js';
 export * from './utils/uses/toggler.js';
 export * from './utils/uses/positioner.js';
 export * from './utils/uses/navigation.js';
@@ -216,10 +216,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/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/switch/types.js';
+export { default as Switch } from './controls/switch/Switch.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';
@@ -281,6 +281,6 @@ export { default as Alert } from './base/alert/Alert.svelte';
 export * from './utils/uses/sx4u/sx4uPreprocess.js';
 export * from './utils/uses/sx4u/sx4u.js';
 export * from './utils/uses/stickTo/stickTo.js';
-export * from './utils/uses/clickAway/clickAway.js';
 export * from './utils/uses/resizer/resizer.js';
+export * from './utils/uses/clickAway/clickAway.js';
 export * from './utils/uses/autofocus/autofocus.js';

package/dist/navigation/drawer/Drawer.svelte

@@ -176,71 +176,59 @@ $effect(() => {
   height: 100%;
   transition: all 0.1s;
 }
-
 .drawer-icon {
   padding: var(--drawer-icon-padding);
   display: flex;
   align-items: center;
 }
-
 .drawer-opener {
   position: absolute;
   z-index: 8600;
 }
-
 .drawer header, .drawer-header {
   min-height: var(--drawer-header-min-height);
   display: flex;
   width: 100%;
 }
-
 .drawer header, .drawer-header {
-  --preset-tall: var(--sld-tall-small);
   min-height: var(--preset-tall-small);
   height: var(--preset-tall-small);
 }
-
+.drawer header, .drawer-header {
+  --preset-tall: var(--sld-tall-small);
+}
 .drawer header[tall=tiny], .drawer header.tall-tiny, .drawer-header[tall=tiny], .drawer-header.tall-tiny {
   min-height: var(--sld-tall-tiny) !important;
 }
-
 .drawer header[tall=mini], .drawer header.tall-mini, .drawer-header[tall=mini], .drawer-header.tall-mini {
   min-height: var(--sld-tall-mini) !important;
 }
-
 .drawer header[tall=small], .drawer header.tall-small, .drawer-header[tall=small], .drawer-header.tall-small {
   min-height: var(--sld-tall-small) !important;
 }
-
 .drawer header[tall=med], .drawer header.tall-med, .drawer-header[tall=med], .drawer-header.tall-med {
   min-height: var(--sld-tall-med) !important;
 }
-
 .drawer header[tall=kind], .drawer header.tall-kind, .drawer-header[tall=kind], .drawer-header.tall-kind {
   min-height: var(--sld-tall-kind) !important;
 }
-
 .drawer header[tall=auto], .drawer header.tall-auto, .drawer-header[tall=auto], .drawer-header.tall-auto {
   min-height: var(--sld-tall-auto) !important;
 }
-
 .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-bar, .drawer-header-bar {
   flex: 1;
   display: flex;
   align-items: center;
 }
-
 .drawer header-bar-title, .drawer-header-bar-title {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   font-size: var(--drawer-header-bar-title-font-size);
 }
-
 .drawer-content {
   flex: var(--drawer-content-flex);
   position: relative;

package/dist/navigation/drawer/drawer.scss

@@ -1,4 +1,4 @@
-@import "../../styles/slotui-mixins.scss";
+@use "../../styles/slotui-mixins.scss";
 
 :root {
   --drawer-color: inherit;
@@ -21,7 +21,7 @@
   box-shadow: var(--drawer-box-shadow);
   border-left: 1px solid var(--drawer-border-left);
   overflow: visible;
-  @include flex(column);
+  @include slotui-mixins.flex(column);
   height: 100%;
   transition: all 0.1s;
 
@@ -37,7 +37,7 @@
   }
   header,
   &-header {
-    @include ui-tall-presets;
+    @include slotui-mixins.ui-tall-presets;
 
     min-height: var(--drawer-header-min-height);
     display: flex;

package/dist/navigation/tabs/Tabs.svelte

@@ -160,15 +160,12 @@ function togglerCode(code) {
   position: relative;
   display: flex;
 }
-
 .tab[aria-orientation=horizontal] ul {
   flex-direction: column;
 }
-
 .tab[aria-orientation=vertical] {
   flex-direction: column;
 }
-
 .tab-nav {
   padding: 0.25rem 0;
   gap: var(--sld-gap-med);
@@ -178,11 +175,9 @@ function togglerCode(code) {
   align-items: center;
   width: 100%;
 }
-
 .tab-nav[aria-orientation=horizontal] {
   flex-direction: column;
 }
-
 .tab-nav-rail {
   display: flex;
   flex: 1;
@@ -190,7 +185,6 @@ function togglerCode(code) {
   padding-left: 0;
   margin-bottom: 0;
 }
-
 .tab-nav-rail > button {
   padding: var(--box-density-preset-small);
   min-width: 48px;
@@ -198,31 +192,26 @@ function togglerCode(code) {
   background: none;
   border: none;
 }
-
 .tab-nav-rail > button.active, .tab-nav-rail > button[aria-selected=true] {
   font-weight: bold;
 }
-
 .tab-content {
   flex: 1;
   background-color: var(--tabs-content-background-color);
   position: relative;
   width: 100%;
 }
-
 .tab-content-secondary {
   display: flex;
   padding: var(--tabs-content-secondary-padding) unset;
   gap: var(--tabs-content-secondary-gap);
 }
-
 .tab-content-secondary-icon {
   border-right: 1px solid var(--tabs-content-secondary-icon-border-right);
   border-radius: var(--tabs-content-secondary-icon-border-radius);
   box-shadow: var(--tabs-content-secondary-icon-box-shadow);
   padding: var(--tabs-content-secondary-icon-padding);
 }
-
 .tab-floating-cell {
   top: auto;
   position: relative;
@@ -230,7 +219,6 @@ function togglerCode(code) {
   height: 4px;
   transition: all 0.15;
 }
-
 .tab-floating-cell-snip {
   border-radius: var(--tabs-floating-cell-slot-border-radius);
   min-height: 4px;

package/dist/navigation/tabs/tabs.scss

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