@medyll/idae-slotui-svelte 0.119.0 → 0.121.0

package/dist/slotui-css/window.min.css

@@ -1,60 +1,60 @@
-:root {
-  --window-border-radius: var(--sld-radius-small);
-  --window-background-color: var(--sld-color-background);
-  --window-color: var(--sld-color-foreground);
-  --window-border: 1px solid rgba(255, 255, 255, 0.1);
-  --window-min-width: 250px;
-  --window-z-index: 70000;
-  --window-box-shadow: var(--sld-elevation-1);
-  --window-active-border: 1px solid var(--sld-color-primary);
-  --window-active-box-shadow: var(--sld-elevation-3);
-  --window-header-bar-background-color: var(--sld-color-paper);
-  --window-header-bar-padding: var(--sld-pad-tiny) 0;
-  --window-header-bar-icon-padding: unset var(--sld-pad-med);
-  --window-footer-button-zone-padding: var(--sld-pad-tiny);
-  --window-footer-button-zone-gap: var(--sld-gap-small);
-}
-
-dialog.window {
-  display: block;
-  border-radius: var(--window-border-radius);
-  background-color: var(--window-background-color);
-  color: var(--window-color);
-  border: var(--window-border);
-  min-width: var(--window-min-width);
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  z-index: var(--window-z-index);
-  max-height: 100%;
-  padding: 0;
-  box-shadow: var(--window-box-shadow);
-}
-dialog.window.active {
-  border: var(--window-active-border);
-  box-shadow: var(--window-active-box-shadow);
-}
-dialog.window header.bar {
-  display: flex;
-  align-items: center;
-  text-align: center;
-  background-color: var(--window-header-bar-background-color);
-  color: var(--window-color);
-  padding: var(--window-header-bar-padding);
-}
-dialog.window header.bar-icon {
-  padding: var(--window-header-bar-icon-padding);
-}
-dialog.window header.bar .handle {
-  flex: 1;
-  cursor: pointer;
-}
-dialog.window footer.buttonZone {
-  padding: var(--window-footer-button-zone-padding);
-  display: flex;
-  justify-content: end;
-  gap: var(--window-footer-button-zone-gap);
-}
-dialog.window .ctrlZone {
-  display: flex;
+:root {
+  --window-border-radius: var(--sld-radius-small);
+  --window-background-color: var(--sld-color-background);
+  --window-color: var(--sld-color-foreground);
+  --window-border: 1px solid rgba(255, 255, 255, 0.1);
+  --window-min-width: 250px;
+  --window-z-index: 70000;
+  --window-box-shadow: var(--sld-elevation-1);
+  --window-active-border: 1px solid var(--sld-color-primary);
+  --window-active-box-shadow: var(--sld-elevation-3);
+  --window-header-bar-background-color: var(--sld-color-paper);
+  --window-header-bar-padding: var(--sld-pad-tiny) 0;
+  --window-header-bar-icon-padding: unset var(--sld-pad-med);
+  --window-footer-button-zone-padding: var(--sld-pad-tiny);
+  --window-footer-button-zone-gap: var(--sld-gap-small);
+}
+
+dialog.window {
+  display: block;
+  border-radius: var(--window-border-radius);
+  background-color: var(--window-background-color);
+  color: var(--window-color);
+  border: var(--window-border);
+  min-width: var(--window-min-width);
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  z-index: var(--window-z-index);
+  max-height: 100%;
+  padding: 0;
+  box-shadow: var(--window-box-shadow);
+}
+dialog.window.active {
+  border: var(--window-active-border);
+  box-shadow: var(--window-active-box-shadow);
+}
+dialog.window header.bar {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  background-color: var(--window-header-bar-background-color);
+  color: var(--window-color);
+  padding: var(--window-header-bar-padding);
+}
+dialog.window header.bar-icon {
+  padding: var(--window-header-bar-icon-padding);
+}
+dialog.window header.bar .handle {
+  flex: 1;
+  cursor: pointer;
+}
+dialog.window footer.buttonZone {
+  padding: var(--window-footer-button-zone-padding);
+  display: flex;
+  justify-content: end;
+  gap: var(--window-footer-button-zone-gap);
+}
+dialog.window .ctrlZone {
+  display: flex;
 }

package/dist/styles/slotui-mixins.scss

@@ -1,168 +1,168 @@
-@use "slotui-presets.scss";
-
-@mixin ui-variants {
-    & {
-        &[variant*="square"] {
-            aspect-ratio: 1/1 !important;
-            height: auto;
-        }
-
-        &[variant*="rounded"] {
-            border-radius: 50%;
-        }
-    }
-}
-
-@mixin ui-ellipsises-presets {
-    & {
-        --preset-ellipsis-line: #{slotui-presets.$presets-ellipsis-line-default};
-    }
-
-    &[ellipsis],
-    &.ellipsis {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    @for $i from 1 through 5 {
-        &.ellipsis-line-#{$i} {
-            display: -webkit-box;
-            -webkit-line-clamp: #{$i};
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: normal;
-            --preset-ellipsis-line: #{$i};
-        }
-    }
-}
-
-@mixin ui-transition {
-    & {
-        transition: all 0.25s ease;
-    }
-}
-
-@mixin ui-tall-presets {
-    & {
-        min-height: var(--preset-tall-small);
-        height: var(--preset-tall-small);
-    }
-    & {
-        --preset-tall: var(--sld-tall-small);
-    }
-
-    @each $preset, $value in slotui-presets.$preset-tall-list {
-        &[tall="#{$preset}"],
-        &.tall-#{$preset} {
-            min-height: var(--sld-tall-#{$preset}) !important;
-        }
-    }
-}
-
-@mixin ui-width-presets {
-    & {
-        width: var(--sld-width-small);
-    }
-    & {
-        --preset-width: var(--sld-width-small);
-    }
-
-    @each $preset, $value in slotui-presets.$preset-width-list {
-        &[width="#{$preset}"],
-        &.width-#{$preset} {
-            --preset-width: var(--sld-width-#{$preset});
-            width: var(--sld-width-#{$preset}) !important;
-        }
-    }
-}
-
-@mixin ui-gutter-presets {
-    & {
-        --preset-gutter: var(--sld-gutter-default);
-    }
-
-    @each $preset, $value in slotui-presets.$preset-gutter-list {
-        & [gutter="#{$preset}"],
-        & .gutter-#{$preset} {
-            padding: var(--sld-gutter-#{$preset});
-            gap: var(--sld-gutter-#{$preset});
-            --preset-gutter: var(--sld-gutter-#{$preset});
-        }
-    }
-}
-
-@mixin ui-pad-presets {
-    & {
-        --preset-pad: var(--sld-pad-default);
-    }
-
-    @each $preset, $value in slotui-presets.$preset-pad-list {
-        &[pad="#{$preset}"],
-        &.pad-#{$preset} {
-            padding: var(--sld-pad-#{$preset});
-            --preset-pad: var(--sld-pad-#{$preset});
-        }
-    }
-}
-
-@mixin ui-radius-presets {
-    & {
-        --preset-radius: var(--sld-radius-default);
-    }
-
-    @each $preset, $value in slotui-presets.$preset-radius-list {
-        &[radius="#{$preset}"],
-        &.radius-#{$preset} {
-            border-radius: var(--sld-radius-#{$preset});
-            --preset-radius: var(--sld-radius-#{$preset});
-        }
-    }
-}
-
-@mixin elevation() {
-    @each $level in 0 through 5 {
-        &.elevation-#{$level},
-        &[elevation-#{$level}] {
-            box-shadow: var(--sld-elevation-#{$level});
-        }
-    }
-}
-
-@mixin data-hover {
-    &:hover {
-        border-color: var(--sld-hover-border-color);
-        background-color: var(--sld-background-disabled);
-    }
-}
-
-@mixin data-selected {
-    &.selected,
-    &[aria-selected="true"] {
-        border-color: none; //var(--sld-selected-border-color);
-        background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
-        box-shadow: var(--sld-selected-shadow);
-        .chip,
-        .menuItemChip {
-            position: absolute;
-            min-height: 16px;
-            height: 50%;
-            width: 3px;
-            background-color: var(--sld-color-primary);
-            border-radius: var(--sld-radius-med);
-            left: 0;
-            border: 1px solid var(--sld-color-primary-alpha-mid);
-        }
-    }
-}
-
-@mixin flex($direction: row, $align-items: flex-start) {
-    display: flex;
-    flex-direction: $direction;
-    align-items: $align-items;
-}
-
-@mixin flex-main {
-    flex: 1 1 0;
-}
+@use "slotui-presets.scss";
+
+@mixin ui-variants {
+    & {
+        &[variant*="square"] {
+            aspect-ratio: 1/1 !important;
+            height: auto;
+        }
+
+        &[variant*="rounded"] {
+            border-radius: 50%;
+        }
+    }
+}
+
+@mixin ui-ellipsises-presets {
+    & {
+        --preset-ellipsis-line: #{slotui-presets.$presets-ellipsis-line-default};
+    }
+
+    &[ellipsis],
+    &.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    @for $i from 1 through 5 {
+        &.ellipsis-line-#{$i} {
+            display: -webkit-box;
+            -webkit-line-clamp: #{$i};
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: normal;
+            --preset-ellipsis-line: #{$i};
+        }
+    }
+}
+
+@mixin ui-transition {
+    & {
+        transition: all 0.25s ease;
+    }
+}
+
+@mixin ui-tall-presets {
+    & {
+        min-height: var(--preset-tall-small);
+        height: var(--preset-tall-small);
+    }
+    & {
+        --preset-tall: var(--sld-tall-small);
+    }
+
+    @each $preset, $value in slotui-presets.$preset-tall-list {
+        &[tall="#{$preset}"],
+        &.tall-#{$preset} {
+            min-height: var(--sld-tall-#{$preset}) !important;
+        }
+    }
+}
+
+@mixin ui-width-presets {
+    & {
+        width: var(--sld-width-small);
+    }
+    & {
+        --preset-width: var(--sld-width-small);
+    }
+
+    @each $preset, $value in slotui-presets.$preset-width-list {
+        &[width="#{$preset}"],
+        &.width-#{$preset} {
+            --preset-width: var(--sld-width-#{$preset});
+            width: var(--sld-width-#{$preset}) !important;
+        }
+    }
+}
+
+@mixin ui-gutter-presets {
+    & {
+        --preset-gutter: var(--sld-gutter-default);
+    }
+
+    @each $preset, $value in slotui-presets.$preset-gutter-list {
+        & [gutter="#{$preset}"],
+        & .gutter-#{$preset} {
+            padding: var(--sld-gutter-#{$preset});
+            gap: var(--sld-gutter-#{$preset});
+            --preset-gutter: var(--sld-gutter-#{$preset});
+        }
+    }
+}
+
+@mixin ui-pad-presets {
+    & {
+        --preset-pad: var(--sld-pad-default);
+    }
+
+    @each $preset, $value in slotui-presets.$preset-pad-list {
+        &[pad="#{$preset}"],
+        &.pad-#{$preset} {
+            padding: var(--sld-pad-#{$preset});
+            --preset-pad: var(--sld-pad-#{$preset});
+        }
+    }
+}
+
+@mixin ui-radius-presets {
+    & {
+        --preset-radius: var(--sld-radius-default);
+    }
+
+    @each $preset, $value in slotui-presets.$preset-radius-list {
+        &[radius="#{$preset}"],
+        &.radius-#{$preset} {
+            border-radius: var(--sld-radius-#{$preset});
+            --preset-radius: var(--sld-radius-#{$preset});
+        }
+    }
+}
+
+@mixin elevation() {
+    @each $level in 0 through 5 {
+        &.elevation-#{$level},
+        &[elevation-#{$level}] {
+            box-shadow: var(--sld-elevation-#{$level});
+        }
+    }
+}
+
+@mixin data-hover {
+    &:hover {
+        border-color: var(--sld-hover-border-color);
+        background-color: var(--sld-background-disabled);
+    }
+}
+
+@mixin data-selected {
+    &.selected,
+    &[aria-selected="true"] {
+        border-color: none; //var(--sld-selected-border-color);
+        background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
+        box-shadow: var(--sld-selected-shadow);
+        .chip,
+        .menuItemChip {
+            position: absolute;
+            min-height: 16px;
+            height: 50%;
+            width: 3px;
+            background-color: var(--sld-color-primary);
+            border-radius: var(--sld-radius-med);
+            left: 0;
+            border: 1px solid var(--sld-color-primary-alpha-mid);
+        }
+    }
+}
+
+@mixin flex($direction: row, $align-items: flex-start) {
+    display: flex;
+    flex-direction: $direction;
+    align-items: $align-items;
+}
+
+@mixin flex-main {
+    flex: 1 1 0;
+}

package/dist/styles/slotui-presets.scss

@@ -1,56 +1,56 @@
-$vendor: "sld";
-
-$presets-ellipsis-line-default: 1;
-
-$preset-width-list: (
-    tiny: 2rem,
-    mini: 3rem,
-    small: 10rem,
-    med: 14rem,
-    kind: 20rem,
-    full: 100%,
-    auto: auto,
-    default: 10rem
-);
-
-$preset-tall-list: (
-    tiny: 1rem,
-    mini: 1.5rem,
-    small: 2.5rem,
-    med: 3.5rem,
-    kind: 4rem,
-    auto: auto,
-    default: 2.5rem
-);
-
-$preset-gutter-list: (
-    tiny: 0.25rem,
-    mini: 0.5rem,
-    small: 1rem,
-    med: 2rem,
-    kind: 3rem,
-    default: 1rem
-);
-
-$preset-gap-list: (
-    tiny: 0.25rem,
-    mini: 0.4rem,
-    small: 0.5rem,
-    med: 1rem,
-    large: 1.5rem,
-    default: 0.5rem
-);
-
-$preset-pad-list: (
-    tiny: 0.25rem,
-    small: 0.5rem,
-    med: 1rem,
-    large: 1.5rem
-);
-
-$preset-radius-list: (
-    tiny: 2px,
-    small: 4px,
-    med: 8px,
-    large: 16px
-);
+$vendor: "sld";
+
+$presets-ellipsis-line-default: 1;
+
+$preset-width-list: (
+    tiny: 2rem,
+    mini: 3rem,
+    small: 10rem,
+    med: 14rem,
+    kind: 20rem,
+    full: 100%,
+    auto: auto,
+    default: 10rem
+);
+
+$preset-tall-list: (
+    tiny: 1rem,
+    mini: 1.5rem,
+    small: 2.5rem,
+    med: 3.5rem,
+    kind: 4rem,
+    auto: auto,
+    default: 2.5rem
+);
+
+$preset-gutter-list: (
+    tiny: 0.25rem,
+    mini: 0.5rem,
+    small: 1rem,
+    med: 2rem,
+    kind: 3rem,
+    default: 1rem
+);
+
+$preset-gap-list: (
+    tiny: 0.25rem,
+    mini: 0.4rem,
+    small: 0.5rem,
+    med: 1rem,
+    large: 1.5rem,
+    default: 0.5rem
+);
+
+$preset-pad-list: (
+    tiny: 0.25rem,
+    small: 0.5rem,
+    med: 1rem,
+    large: 1.5rem
+);
+
+$preset-radius-list: (
+    tiny: 2px,
+    small: 4px,
+    med: 8px,
+    large: 16px
+);

package/dist/styles/slotuisheet/SlotuiSheet.svelte

@@ -1,42 +1,42 @@
-<script lang="ts">
-	import { type SlotUiStyleSheet, type BreakPoints } from './types.js';
-	import { configCssVars, toContainerQuery } from './utils.js';
-
-	let { breakpoints, showSelectors }: SlotUiStyleSheet = $props();
-
-	function castToCssProps(breakpoints: BreakPoints | undefined) {
-		if (!breakpoints) return '';
-		let cssProps = '';
-		for (let key in breakpoints) {
-			cssProps += `--${key}: ${breakpoints[key]};`;
-		}
-		return cssProps;
-	}
-</script>
-
-<svelte:head>
-	{castToCssProps(breakpoints)}
-	<style id="idae-slotui-sheet"  >
-		@use './slotui-sheet.scss';
-	</style>
-	<style id="idae-slotui-queries" >
-		@use './stylesheet.scss'; 
-	</style>
-</svelte:head>
-<div id="slotui-breakpoints"></div>
-{#if showSelectors}
-	{castToCssProps(breakpoints)}
-	<pre>
-        {JSON.stringify(configCssVars, undefined, ' ')}
-    </pre>
-	<pre>
-        {JSON.stringify(toContainerQuery('hideMaxWidth', '115px'), undefined, ' ')}
-    </pre>
-{/if} 
+<script lang="ts">
+	import { type SlotUiStyleSheet, type BreakPoints } from './types.js';
+	import { configCssVars, toContainerQuery } from './utils.js';
+
+	let { breakpoints, showSelectors }: SlotUiStyleSheet = $props();
+
+	function castToCssProps(breakpoints: BreakPoints | undefined) {
+		if (!breakpoints) return '';
+		let cssProps = '';
+		for (let key in breakpoints) {
+			cssProps += `--${key}: ${breakpoints[key]};`;
+		}
+		return cssProps;
+	}
+</script>
+
+<svelte:head>
+	{castToCssProps(breakpoints)}
+	<style id="idae-slotui-sheet"  >
+		@use './slotui-sheet.scss';
+	</style>
+	<style id="idae-slotui-queries" >
+		@use './stylesheet.scss'; 
+	</style>
+</svelte:head>
+<div id="slotui-breakpoints"></div>
+{#if showSelectors}
+	{castToCssProps(breakpoints)}
+	<pre>
+        {JSON.stringify(configCssVars, undefined, ' ')}
+    </pre>
+	<pre>
+        {JSON.stringify(toContainerQuery('hideMaxWidth', '115px'), undefined, ' ')}
+    </pre>
+{/if} 
 <style>#breakpoints {
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
   pointer-events: none;
-}</style>
+}</style>