@medyll/idae-slotui-svelte 0.120.0 → 0.122.0

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>

package/dist/styles/slotuisheet/SlotyuiSheet.demo.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-	import { be } from '@medyll/idae-be';
-	import { cssDom } from '@medyll/idae-dom-events';
-	import StyleSheet from './SlotuiSheet.svelte';
-	import { configCssVars, toContainerQuery } from './utils.js';
-
-	const tag = 'hideMaxWidth';
-	cssDom('[hideMaxWidth]').each((element, changes) => {
-		console.log(be(element as HTMLElement).attr.get(tag));
-		let tagValue = be(element as HTMLElement).attr.get(tag);
-
-		if (tag && tagValue) {
-			let objTag = toContainerQuery(tag, tagValue);
-			console.log(objTag);
-			be(element).classAdd(objTag.class).setStyle(objTag.style);
-			console.log(element, changes);
-
-			be(element).up('[container]').setStyle(objTag.style);
-			console.log(be(element).up('[container]').node);
-		}
-	});
-</script>
-
-<StyleSheet showSelectors={true} />
-
-<div container="size" class="container-size" style="container:size;width:135px;relative">
-	<div hideMaxWidth="115px">hideMaxWidth</div>
-</div>
+<script lang="ts">
+	import { be } from '@medyll/idae-be';
+	import { cssDom } from '@medyll/idae-dom-events';
+	import StyleSheet from './SlotuiSheet.svelte';
+	import { configCssVars, toContainerQuery } from './utils.js';
+
+	const tag = 'hideMaxWidth';
+	cssDom('[hideMaxWidth]').each((element, changes) => {
+		console.log(be(element as HTMLElement).attr.get(tag));
+		let tagValue = be(element as HTMLElement).attr.get(tag);
+
+		if (tag && tagValue) {
+			let objTag = toContainerQuery(tag, tagValue);
+			console.log(objTag);
+			be(element).classAdd(objTag.class).setStyle(objTag.style);
+			console.log(element, changes);
+
+			be(element).up('[container]').setStyle(objTag.style);
+			console.log(be(element).up('[container]').node);
+		}
+	});
+</script>
+
+<StyleSheet showSelectors={true} />
+
+<div container="size" class="container-size" style="container:size;width:135px;relative">
+	<div hideMaxWidth="115px">hideMaxWidth</div>
+</div>

package/dist/styles/slotuisheet/sheetConfig.scss

@@ -1,8 +1,8 @@
- 
- :root {
-  --container-item: container-item;
-  --on-container: on-container;
-  --than: than;
-  --show-selector: show;
-  --hide-selector: hide; 
+ 
+ :root {
+  --container-item: container-item;
+  --on-container: on-container;
+  --than: than;
+  --show-selector: show;
+  --hide-selector: hide; 
 }