@medyll/idae-slotui-svelte 0.120.0 → 0.121.0

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; 
 }

package/dist/styles/slotuisheet/slotui-sheet.scss

@@ -1,192 +1,192 @@
-@use "../slotui-presets.scss";
-
-:root {
-    transition: all 0.3s ease-out;
-}
-
-:root {
-    @each $preset, $preset-value in slotui-presets.$preset-radius-list {
-        --#{slotui-presets.$vendor}-radius-#{$preset}: #{$preset-value};
-    }
-
-    @each $preset, $preset-value in slotui-presets.$preset-pad-list {
-        --#{slotui-presets.$vendor}-pad-#{$preset}: #{$preset-value};
-    }
-
-    @each $preset, $preset-value in slotui-presets.$preset-gap-list {
-        --#{slotui-presets.$vendor}-gap-#{$preset}: #{$preset-value};
-    }
-
-    @each $preset, $preset-value in slotui-presets.$preset-gutter-list {
-        --#{slotui-presets.$vendor}-gutter-#{$preset}: #{$preset-value};
-    }
-
-    @each $preset, $preset-value in slotui-presets.$preset-tall-list {
-        --#{slotui-presets.$vendor}-tall-#{$preset}: #{$preset-value};
-    }
-
-    @each $preset, $preset-value in slotui-presets.$preset-width-list {
-        --#{slotui-presets.$vendor}-width-#{$preset}: #{$preset-value};
-    }
-}
-
-:root {
-    --white: #fff;
-    --black: #333;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --white: #333;
-        --black: #ccc;
-    }
-}
-
-:root.dark,
-:root[data-theme="dark"],
-body[data-theme="dark"],
-:root[theme="dark"] {
-    --white: #333;
-    --black: #ccc;
-}
-
-:root {
-    --#{slotui-presets.$vendor}-color-foreground: #333333;
-    --#{slotui-presets.$vendor}-color-background: #ffffff;
-
-    --#{slotui-presets.$vendor}-color-paper: color-mix(
-        in srgb,
-        var(--#{slotui-presets.$vendor}-color-background) 90%,
-        var(--#{slotui-presets.$vendor}-color-foreground) 10%
-    );
-
-    --#{slotui-presets.$vendor}-color-primary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 60%, #4caf50);
-    --#{slotui-presets.$vendor}-color-secondary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 80%, #2196f3);
-    --#{slotui-presets.$vendor}-color-tertiary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 70%, #ffc107);
-
-    --#{slotui-presets.$vendor}-color-disabled: color-mix(
-        in srgb,
-        var(--#{slotui-presets.$vendor}-color-foreground) 20%,
-        var(--#{slotui-presets.$vendor}-color-background)
-    );
-    --#{slotui-presets.$vendor}-color-disabled-border: color-mix(
-        in srgb,
-        var(--#{slotui-presets.$vendor}-color-foreground) 30%,
-        var(--#{slotui-presets.$vendor}-color-background)
-    );
-    --#{slotui-presets.$vendor}-background-disabled: color-mix(
-        in srgb,
-        var(--#{slotui-presets.$vendor}-color-background) 90%,
-        var(--#{slotui-presets.$vendor}-color-foreground)
-    );
-}
-
-:root.dark,
-:root[data-theme="dark"],
-body[data-theme="dark"],
-:root[theme="dark"] {
-    --#{slotui-presets.$vendor}-color-foreground: #ffffff;
-    --#{slotui-presets.$vendor}-color-background: #27323a;
-}
-
-:root {
-    --#{slotui-presets.$vendor}-elevation-1: 0 0 1.75px 0 rgba(0, 0, 0, 0.15), 0 0.15px 0.46px 0 rgba(0, 0, 0, 0.1);
-    --#{slotui-presets.$vendor}-elevation-2: 0 0 3.44px 0 rgba(0, 0, 0, 0.15), 0 0.3px 0.93px 0 rgba(0, 0, 0, 0.1);
-    --#{slotui-presets.$vendor}-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
-    --#{slotui-presets.$vendor}-elevation-4: 0 0 6.89px 0 rgba(0, 0, 0, 0.15), 0 0.61px 1.86px 0 rgba(0, 0, 0, 0.1);
-    --#{slotui-presets.$vendor}-elevation-5: 0 0 8.62px 0 rgba(0, 0, 0, 0.15), 0 0.76px 2.32px 0 rgba(0, 0, 0, 0.1);
-}
-
-:root {
-    --#{slotui-presets.$vendor}-color-discrete: #ccc;
-    --#{slotui-presets.$vendor}-color-success: #075c07;
-    --#{slotui-presets.$vendor}-color-info: #ffd324;
-    --#{slotui-presets.$vendor}-color-warning: #b49104;
-    --#{slotui-presets.$vendor}-color-alert: #cc5c00;
-    --#{slotui-presets.$vendor}-color-error: #cc0000;
-}
-:root {
-    $tints: foreground, "background", primary, secondary, tertiary;
-
-    @each $tint in $tints {
-        /* alpha  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 80%);
-    }
-    @each $tint in $tints {
-        /* darken  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
-    }
-    @each $tint in $tints {
-        /* lighten  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
-    }
-
-    $tints: discrete, success, info, warning, alert, error;
-    @each $tint in $tints {
-        /* alpha  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 30%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
-    }
-    @each $tint in $tints {
-        /* darken  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
-    }
-    @each $tint in $tints {
-        /* lighten  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
-    }
-}
-/* presets */
-:root {
-    --#{slotui-presets.$vendor}-color-border: var(--#{slotui-presets.$vendor}-color-foreground-alpha-low);
-
-    --#{slotui-presets.$vendor}-hover-background-color: var(--#{slotui-presets.$vendor}-color-secondary-alpha-mid);
-    --#{slotui-presets.$vendor}-hover-border-color: var(--#{slotui-presets.$vendor}-color-foreground-alpha-high);
-    --#{slotui-presets.$vendor}-hover-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
-
-    --#{slotui-presets.$vendor}-selected-background-color: var(--#{slotui-presets.$vendor}-color-primary-alpha-mid);
-    --#{slotui-presets.$vendor}-selected-border-color: var(--#{slotui-presets.$vendor}-color-primary);
-    --#{slotui-presets.$vendor}-selected-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
-}
-
-.bg-themed-scheme-discrete {
-    color: black;
-    text-shadow: 0 0 0.125rem #b3b3b3;
-    background-color: #ccc;
-}
-.bg-themed-scheme-success {
-    color: white;
-    text-shadow: 0 0 0.125rem #004d00;
-    background-color: green;
-}
-.bg-themed-scheme-info {
-    color: black;
-    text-shadow: 0 0 0.125rem #ffd324;
-    background-color: #ffdd57;
-}
-.bg-themed-scheme-warning {
-    color: black;
-    text-shadow: 0 0 0.125rem #b49104;
-    background-color: #e6b905;
-}
-.bg-themed-scheme-alert {
-    color: black;
-    text-shadow: 0 0 0.125rem #cc5c00;
-    background-color: #ff7300;
-}
-.bg-themed-scheme-error {
-    color: white;
-    text-shadow: 0 0 0.125rem #cc0000;
-    background-color: red;
-}
+@use "../slotui-presets.scss";
+
+:root {
+    transition: all 0.3s ease-out;
+}
+
+:root {
+    @each $preset, $preset-value in slotui-presets.$preset-radius-list {
+        --#{slotui-presets.$vendor}-radius-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in slotui-presets.$preset-pad-list {
+        --#{slotui-presets.$vendor}-pad-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in slotui-presets.$preset-gap-list {
+        --#{slotui-presets.$vendor}-gap-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in slotui-presets.$preset-gutter-list {
+        --#{slotui-presets.$vendor}-gutter-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in slotui-presets.$preset-tall-list {
+        --#{slotui-presets.$vendor}-tall-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in slotui-presets.$preset-width-list {
+        --#{slotui-presets.$vendor}-width-#{$preset}: #{$preset-value};
+    }
+}
+
+:root {
+    --white: #fff;
+    --black: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --white: #333;
+        --black: #ccc;
+    }
+}
+
+:root.dark,
+:root[data-theme="dark"],
+body[data-theme="dark"],
+:root[theme="dark"] {
+    --white: #333;
+    --black: #ccc;
+}
+
+:root {
+    --#{slotui-presets.$vendor}-color-foreground: #333333;
+    --#{slotui-presets.$vendor}-color-background: #ffffff;
+
+    --#{slotui-presets.$vendor}-color-paper: color-mix(
+        in srgb,
+        var(--#{slotui-presets.$vendor}-color-background) 90%,
+        var(--#{slotui-presets.$vendor}-color-foreground) 10%
+    );
+
+    --#{slotui-presets.$vendor}-color-primary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 60%, #4caf50);
+    --#{slotui-presets.$vendor}-color-secondary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 80%, #2196f3);
+    --#{slotui-presets.$vendor}-color-tertiary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 70%, #ffc107);
+
+    --#{slotui-presets.$vendor}-color-disabled: color-mix(
+        in srgb,
+        var(--#{slotui-presets.$vendor}-color-foreground) 20%,
+        var(--#{slotui-presets.$vendor}-color-background)
+    );
+    --#{slotui-presets.$vendor}-color-disabled-border: color-mix(
+        in srgb,
+        var(--#{slotui-presets.$vendor}-color-foreground) 30%,
+        var(--#{slotui-presets.$vendor}-color-background)
+    );
+    --#{slotui-presets.$vendor}-background-disabled: color-mix(
+        in srgb,
+        var(--#{slotui-presets.$vendor}-color-background) 90%,
+        var(--#{slotui-presets.$vendor}-color-foreground)
+    );
+}
+
+:root.dark,
+:root[data-theme="dark"],
+body[data-theme="dark"],
+:root[theme="dark"] {
+    --#{slotui-presets.$vendor}-color-foreground: #ffffff;
+    --#{slotui-presets.$vendor}-color-background: #27323a;
+}
+
+:root {
+    --#{slotui-presets.$vendor}-elevation-1: 0 0 1.75px 0 rgba(0, 0, 0, 0.15), 0 0.15px 0.46px 0 rgba(0, 0, 0, 0.1);
+    --#{slotui-presets.$vendor}-elevation-2: 0 0 3.44px 0 rgba(0, 0, 0, 0.15), 0 0.3px 0.93px 0 rgba(0, 0, 0, 0.1);
+    --#{slotui-presets.$vendor}-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
+    --#{slotui-presets.$vendor}-elevation-4: 0 0 6.89px 0 rgba(0, 0, 0, 0.15), 0 0.61px 1.86px 0 rgba(0, 0, 0, 0.1);
+    --#{slotui-presets.$vendor}-elevation-5: 0 0 8.62px 0 rgba(0, 0, 0, 0.15), 0 0.76px 2.32px 0 rgba(0, 0, 0, 0.1);
+}
+
+:root {
+    --#{slotui-presets.$vendor}-color-discrete: #ccc;
+    --#{slotui-presets.$vendor}-color-success: #075c07;
+    --#{slotui-presets.$vendor}-color-info: #ffd324;
+    --#{slotui-presets.$vendor}-color-warning: #b49104;
+    --#{slotui-presets.$vendor}-color-alert: #cc5c00;
+    --#{slotui-presets.$vendor}-color-error: #cc0000;
+}
+:root {
+    $tints: foreground, "background", primary, secondary, tertiary;
+
+    @each $tint in $tints {
+        /* alpha  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 80%);
+    }
+    @each $tint in $tints {
+        /* darken  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
+    }
+    @each $tint in $tints {
+        /* lighten  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
+    }
+
+    $tints: discrete, success, info, warning, alert, error;
+    @each $tint in $tints {
+        /* alpha  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 30%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
+    }
+    @each $tint in $tints {
+        /* darken  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
+    }
+    @each $tint in $tints {
+        /* lighten  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
+    }
+}
+/* presets */
+:root {
+    --#{slotui-presets.$vendor}-color-border: var(--#{slotui-presets.$vendor}-color-foreground-alpha-low);
+
+    --#{slotui-presets.$vendor}-hover-background-color: var(--#{slotui-presets.$vendor}-color-secondary-alpha-mid);
+    --#{slotui-presets.$vendor}-hover-border-color: var(--#{slotui-presets.$vendor}-color-foreground-alpha-high);
+    --#{slotui-presets.$vendor}-hover-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
+
+    --#{slotui-presets.$vendor}-selected-background-color: var(--#{slotui-presets.$vendor}-color-primary-alpha-mid);
+    --#{slotui-presets.$vendor}-selected-border-color: var(--#{slotui-presets.$vendor}-color-primary);
+    --#{slotui-presets.$vendor}-selected-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
+}
+
+.bg-themed-scheme-discrete {
+    color: black;
+    text-shadow: 0 0 0.125rem #b3b3b3;
+    background-color: #ccc;
+}
+.bg-themed-scheme-success {
+    color: white;
+    text-shadow: 0 0 0.125rem #004d00;
+    background-color: green;
+}
+.bg-themed-scheme-info {
+    color: black;
+    text-shadow: 0 0 0.125rem #ffd324;
+    background-color: #ffdd57;
+}
+.bg-themed-scheme-warning {
+    color: black;
+    text-shadow: 0 0 0.125rem #b49104;
+    background-color: #e6b905;
+}
+.bg-themed-scheme-alert {
+    color: black;
+    text-shadow: 0 0 0.125rem #cc5c00;
+    background-color: #ff7300;
+}
+.bg-themed-scheme-error {
+    color: white;
+    text-shadow: 0 0 0.125rem #cc0000;
+    background-color: red;
+}