@medyll/idae-slotui-svelte 0.181.0 → 0.181.4

package/dist/base/alert/alert.scss

@@ -1,93 +1,93 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --alert-radius: var(--sld-radius-small);
-    --alert-color-border: var(--sld-color-border);
-    --alert-color-background: var(--sld-color-background);
-    --alert-elevation: var(--sld-elevation-4);
-    --alert-pad: var(--sld-pad-small);
-    --alert-gap: var(--sld-gap-small);
-}
-
-dialog.alert {
-    &[open="true"] {
-        display: none;
-    }
-    position: relative;
-    min-width: 350px;
-    display: inline-block;
-    border-radius: var(--alert-radius);
-    border: 1px solid var(--alert-color-border);
-    background-color: var(--alert-color-background);
-    box-shadow: var(--alert-elevation);
-    overflow: hidden;
-    padding: 0;
-    article.dialog-content {
-        padding: var(--alert-pad);
-        border-bottom: 4px solid var(--alert-color-border);
-        header.header-bar {
-            display: flex;
-            align-items: center;
-            padding: var(--alert-pad-small);
-            gap: var(--alert-gap-small, 1rem);
-            .dot {
-                display: inline-block;
-                border: 1px solid var(--alert-color-border);
-                border-radius: var(--alert-radius);
-                height: 16px;
-                width: 4px;
-                transform: translate(-50%, 0);
-            }
-            .title {
-                flex: 1;
-                display: flex;
-                align-items: center;
-            }
-            [data-close] {
-                border-radius: var(--alert-radius);
-                margin: 0.25rem;
-                padding: 0.25rem;
-            }
-        }
-        footer.dialog-footer {
-            display: flex;
-            justify-content: flex-end;
-            padding: var(--alert-pad);
-            border-top: 1px solid var(--alert-color-border);
-            button {
-                margin-left: 1rem;
-            }
-        }
-    }
-}
-
-.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 "../../styles/slotui-mixins.scss";
+
+:root {
+    --alert-radius: var(--sld-radius-small);
+    --alert-color-border: var(--sld-color-border);
+    --alert-color-background: var(--sld-color-background);
+    --alert-elevation: var(--sld-elevation-4);
+    --alert-pad: var(--sld-pad-small);
+    --alert-gap: var(--sld-gap-small);
+}
+
+dialog.alert {
+    &[open="true"] {
+        display: none;
+    }
+    position: relative;
+    min-width: 350px;
+    display: inline-block;
+    border-radius: var(--alert-radius);
+    border: 1px solid var(--alert-color-border);
+    background-color: var(--alert-color-background);
+    box-shadow: var(--alert-elevation);
+    overflow: hidden;
+    padding: 0;
+    article.dialog-content {
+        padding: var(--alert-pad);
+        border-bottom: 4px solid var(--alert-color-border);
+        header.header-bar {
+            display: flex;
+            align-items: center;
+            padding: var(--alert-pad-small);
+            gap: var(--alert-gap-small, 1rem);
+            .dot {
+                display: inline-block;
+                border: 1px solid var(--alert-color-border);
+                border-radius: var(--alert-radius);
+                height: 16px;
+                width: 4px;
+                transform: translate(-50%, 0);
+            }
+            .title {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
+            [data-close] {
+                border-radius: var(--alert-radius);
+                margin: 0.25rem;
+                padding: 0.25rem;
+            }
+        }
+        footer.dialog-footer {
+            display: flex;
+            justify-content: flex-end;
+            padding: var(--alert-pad);
+            border-top: 1px solid var(--alert-color-border);
+            button {
+                margin-left: 1rem;
+            }
+        }
+    }
+}
+
+.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;
+}

package/dist/base/avatar/Avatar.demo.svelte

@@ -1,41 +1,41 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import Icon from '../icon/Icon.svelte';
-	import Avatar from './Avatar.svelte';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let code1 = `
-<Avatar>
-	<Icon icon={activeParams?.icon} />
-</Avatar>`;
-
-	let code2 = `
-	<Avatar icon={icon} />`;
-</script>
-
-<ComponentDemo
-	component="Avatar"
-	cite="If it's not you, then it's the other you, <br /> Emma Avatar you, 1652"
->
-	<div class="flex-v gap-large">
-		<DemoPage component="Rating" code={code1}>
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Avatar {...activeParams}>
-						<Icon icon={activeParams?.icon} />
-					</Avatar>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage title="Without slots" code={code2} component="Rating">
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Avatar {...activeParams} icon={activeParams?.icon} />
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Avatar from './Avatar.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code1 = `
+<Avatar>
+	<Icon icon={activeParams?.icon} />
+</Avatar>`;
+
+	let code2 = `
+	<Avatar icon={icon} />`;
+</script>
+
+<ComponentDemo
+	component="Avatar"
+	cite="If it's not you, then it's the other you, <br /> Emma Avatar you, 1652"
+>
+	<div class="flex-v gap-large">
+		<DemoPage component="Rating" code={code1}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Avatar {...activeParams}>
+						<Icon icon={activeParams?.icon} />
+					</Avatar>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="Without slots" code={code2} component="Rating">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Avatar {...activeParams} icon={activeParams?.icon} />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/avatar/Avatar.preview.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">
-	import Icon from '../icon/Icon.svelte';
-	import Avatar from './Avatar.svelte';
-</script>
-
-<Avatar size="tiny" class="marg-4"><Icon icon="user" /></Avatar>
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import Avatar from './Avatar.svelte';
+</script>
+
+<Avatar size="tiny" class="marg-4"><Icon icon="user" /></Avatar>

package/dist/base/avatar/Avatar.svelte

@@ -1,67 +1,67 @@
-<script module lang="ts" >
-import type { Snippet } from "svelte";
-import type { CommonProps,ElementProps } from '../../types/index.js';
-
-export interface AvatarProps    {
-  /** icon name 	*/
-  icon?: string;
-  /**
-   * size of the avatar
-   */
-  size?: ElementProps["width"];
-  /**
-   * size of the icon
-   */
-  iconSize?: ElementProps["iconSize"];
-  element?: HTMLElement;
-  class?: string;
-  children?: Snippet;
-  avatarBadge?: Snippet;
-};
-
-</script>
-
-<script lang="ts">
-	import Icon from '../icon/Icon.svelte';
-	import type { ExpandProps } from '../../types/index.js'; 
-	import Content from '../../utils/content/Content.svelte';
-
-	let {
-		icon = 'icon-park-outline:avatar',
-		size,
-		iconSize,
-		class: className = '',
-		element = $bindable(),
-		children,
-		avatarBadge,
-		...rest
-	}: AvatarProps = $props();
-
-	const sizes = {
-		tiny: '2rem',
-		small: '4rem',
-		medium: '8rem',
-		large: '12rem',
-		full: '100%'
-	};
-</script>
-
-<Content
-	bind:element
-	tag="figure"
-	class="avatar {className}"
-	style="width:{sizes[size]};height:{sizes[size]}"
-	{...rest}
->
-	{@render avatarBadge?.()}
-
-	{#if children}
-		{@render children()}
-	{:else}
-		<Icon {icon} {iconSize} />
-	{/if}
-</Content>
-
+<script module lang="ts" >
+import type { Snippet } from "svelte";
+import type {  ElementProps } from '../../types/index.js';
+
+export interface AvatarProps    {
+  /** icon name 	*/
+  icon?: string;
+  /**
+   * size of the avatar
+   */
+  size?: ElementProps["width"];
+  /**
+   * size of the icon
+   */
+  iconSize?: ElementProps["iconSize"];
+  element?: HTMLElement;
+  class?: string;
+  children?: Snippet;
+  avatarBadge?: Snippet;
+};
+
+</script>
+
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import type { ExpandProps } from '../../types/index.js'; 
+	import Content from '../../utils/content/Content.svelte';
+
+	let {
+		icon = 'icon-park-outline:avatar',
+		size,
+		iconSize,
+		class: className = '',
+		element = $bindable(),
+		children,
+		avatarBadge,
+		...rest
+	}: AvatarProps = $props();
+
+	const sizes = {
+		tiny: '2rem',
+		small: '4rem',
+		medium: '8rem',
+		large: '12rem',
+		full: '100%'
+	};
+</script>
+
+<Content
+	bind:element
+	tag="figure"
+	class="avatar {className}"
+	style="width:{sizes[size]};height:{sizes[size]}"
+	{...rest}
+>
+	{@render avatarBadge?.()}
+
+	{#if children}
+		{@render children()}
+	{:else}
+		<Icon {icon} {iconSize} />
+	{/if}
+</Content>
+
 <style>:root {
   --avatar-radius: var(--css-radius-small);
   --avatar-border-color: var(--sld-color-border);
@@ -74,4 +74,4 @@ export interface AvatarProps    {
   display: grid;
   place-items: center;
   overflow: hidden;
-}</style>
+}</style>

package/dist/base/avatar/avatar.scss

@@ -1,17 +1,17 @@
-// @import "../../styles/slotui-presets.scss";
-
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --avatar-radius: var(--css-radius-small);
-  --avatar-border-color: var(--sld-color-border);
-}
-
-.avatar {
-  position: relative;
-  border-radius: var(--avatar-radius);
-  border: 1px solid var(--avatar-border-color);
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-}
+// @import "../../styles/slotui-presets.scss";
+
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --avatar-radius: var(--css-radius-small);
+  --avatar-border-color: var(--sld-color-border);
+}
+
+.avatar {
+  position: relative;
+  border-radius: var(--avatar-radius);
+  border: 1px solid var(--avatar-border-color);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}

package/dist/base/backdrop/Backdrop.demo.svelte

@@ -1,49 +1,49 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import { defaultsArgs } from '../demoer/demoer.utils.js';
-	import Backdrop from './Backdrop.svelte';
-	import { BackdropDemoValues } from './types.js';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let codeSlot = `
-	<Backdrop
-		flow="relative"
-		onclick={()=>{}}> 
-		<div class="flex-h flex-align-middle-center h-full">
-			<div class="pad-4 border radius-small theme-bg">
-				some content
-			</div>
-		</div>
-	</Backdrop>`;
-
-	let BackdropRef: Backdrop;
-</script>
-
-<ComponentDemo component="Backdrop">
-	<div class="flex-v gap-medium">
-		<DemoPage code={codeSlot} component="Backdrop">
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<div style="width:350px;height:350px;position:realive;">
-						<Backdrop
-							bind:this={BackdropRef}
-							onclick={() => {
-								componentArgs.flow = 'relative';
-								BackdropRef.flow = 'relative';
-							}}
-							{...componentArgs}
-							{...activeParams}
-						>
-							<div class="flex-h flex-align-middle-center h-full">
-								<div class="pad-4 border radius-small theme-bg">some content</div>
-							</div>
-						</Backdrop>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+	import Backdrop from './Backdrop.svelte';
+	import { BackdropDemoValues } from './types.js';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
+	<Backdrop
+		flow="relative"
+		onclick={()=>{}}> 
+		<div class="flex-h flex-align-middle-center h-full">
+			<div class="pad-4 border radius-small theme-bg">
+				some content
+			</div>
+		</div>
+	</Backdrop>`;
+
+	let BackdropRef: Backdrop;
+</script>
+
+<ComponentDemo component="Backdrop">
+	<div class="flex-v gap-medium">
+		<DemoPage code={codeSlot} component="Backdrop">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<div style="width:350px;height:350px;position:realive;">
+						<Backdrop
+							bind:this={BackdropRef}
+							onclick={() => {
+								componentArgs.flow = 'relative';
+								BackdropRef.flow = 'relative';
+							}}
+							{...componentArgs}
+							{...activeParams}
+						>
+							<div class="flex-h flex-align-middle-center h-full">
+								<div class="pad-4 border radius-small theme-bg">some content</div>
+							</div>
+						</Backdrop>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>