@medyll/idae-slotui-svelte 0.120.0 → 0.121.0

package/dist/base/divider/Divider.demo.svelte

@@ -1,34 +1,34 @@
-<script lang="ts">
-	import Divider from './Divider.svelte';
-
-	/* demo */
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	/* demo */
-
-	import { parameters, componentArgs } from './types.js';
-
-	let codeSlot = `
-	<Divider />`;
-</script>
-
-<ComponentDemo
-	component="Divider"
-	cite="What is separating before from after is not a time nor a place : it's only a component <br /> B. Franklin,
-1854"
->
-	<div class=" flex-v gap-small">
-		<DemoPage component="Divider" code={codeSlot}>
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<div class="pad">
-						<div class="pad">What is before</div>
-						<Divider {...activeParams} />
-						<div class="pad">And what is after</div>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Divider from './Divider.svelte';
+
+	/* demo */
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	/* demo */
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
+	<Divider />`;
+</script>
+
+<ComponentDemo
+	component="Divider"
+	cite="What is separating before from after is not a time nor a place : it's only a component <br /> B. Franklin,
+1854"
+>
+	<div class=" flex-v gap-small">
+		<DemoPage component="Divider" code={codeSlot}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<div class="pad">
+						<div class="pad">What is before</div>
+						<Divider {...activeParams} />
+						<div class="pad">And what is after</div>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/divider/Divider.svelte

@@ -1,70 +1,70 @@
-<script lang="ts">
-	/** extends button */
-	import type { ElementProps, ExpandProps } from '../../types/index.js';
-	import { uiPresets } from '../../utils/engine/presets.js';
-	import type { DividerProps } from './types.js';
-	let {
-		class: className = '',
-		style,
-		element = null,
-		dense: density = 'default',
-		orientation: direction = 'horizontal',
-		expansion = 'full',
-		shadowed: shadow = false,
-		color
-	}: ExpandProps<DividerProps> = $props();
-
-	let extensionClass = {
-		horizontal: {
-			full: '',
-			padded: 'marg-ii-12',
-			centered: 'marg-ii-6'
-		},
-		vertical: {
-			full: '',
-			padded: 'marg-ii-12',
-			centered: 'marg-ii-6'
-		}
-	};
-	let addStyle: string = (style as unknown as string) ?? ('' as unknown as string);
-
-	const shadowClass = $derived(shadow ? 'shad-3' : '');
-
-	if (color) addStyle += `--sld-color-border:${color};`;
-
-	// set height od divider when direction === vertical in a flex env
-	if (
-		direction === 'vertical' &&
-		(element?.nextElementSibling ?? element?.previousElementSibling)
-	) {
-		let maxHeight = (
-			element?.previousElementSibling ?? element?.nextElementSibling
-		)?.getBoundingClientRect()?.height;
-
-		addStyle += `height:calc(${maxHeight}px - ${getDensity(density)});`;
-	}
-
-	function getDensity(density: ElementProps['density']) {
-		return uiPresets.density?.[density];
-	}
-
-	switch (direction) {
-		case 'horizontal':
-			addStyle += `margin-top:${getDensity(density)};margin-bottom:${getDensity(density)};`;
-			break;
-		case 'vertical':
-			addStyle += `margin-left:${getDensity(density)};margin-right:${getDensity(density)};`;
-			break;
-	}
-</script>
-
-<hr
-	bind:this={element}
-	class="{extensionClass[direction][expansion]} {className} {shadowClass}"
-	class:vertical={direction === 'vertical'}
-	style={addStyle}
-/>
-
+<script lang="ts">
+	/** extends button */
+	import type { ElementProps, ExpandProps } from '../../types/index.js';
+	import { uiPresets } from '../../utils/engine/presets.js';
+	import type { DividerProps } from './types.js';
+	let {
+		class: className = '',
+		style,
+		element = null,
+		dense: density = 'default',
+		orientation: direction = 'horizontal',
+		expansion = 'full',
+		shadowed: shadow = false,
+		color
+	}: ExpandProps<DividerProps> = $props();
+
+	let extensionClass = {
+		horizontal: {
+			full: '',
+			padded: 'marg-ii-12',
+			centered: 'marg-ii-6'
+		},
+		vertical: {
+			full: '',
+			padded: 'marg-ii-12',
+			centered: 'marg-ii-6'
+		}
+	};
+	let addStyle: string = (style as unknown as string) ?? ('' as unknown as string);
+
+	const shadowClass = $derived(shadow ? 'shad-3' : '');
+
+	if (color) addStyle += `--sld-color-border:${color};`;
+
+	// set height od divider when direction === vertical in a flex env
+	if (
+		direction === 'vertical' &&
+		(element?.nextElementSibling ?? element?.previousElementSibling)
+	) {
+		let maxHeight = (
+			element?.previousElementSibling ?? element?.nextElementSibling
+		)?.getBoundingClientRect()?.height;
+
+		addStyle += `height:calc(${maxHeight}px - ${getDensity(density)});`;
+	}
+
+	function getDensity(density: ElementProps['density']) {
+		return uiPresets.density?.[density];
+	}
+
+	switch (direction) {
+		case 'horizontal':
+			addStyle += `margin-top:${getDensity(density)};margin-bottom:${getDensity(density)};`;
+			break;
+		case 'vertical':
+			addStyle += `margin-left:${getDensity(density)};margin-right:${getDensity(density)};`;
+			break;
+	}
+</script>
+
+<hr
+	bind:this={element}
+	class="{extensionClass[direction][expansion]} {className} {shadowClass}"
+	class:vertical={direction === 'vertical'}
+	style={addStyle}
+/>
+
 <style>:root {
   --divider-border-top: var(--sld-color-border, var(--sld-color-foreground-alpha-high, #333));
   --divider-background-color: var(--sld-color-border, var(--sld-color-foreground-alpha-mid, #333));
@@ -80,4 +80,4 @@ hr {
 hr.vertical {
   width: 1px;
   border-right: 1px solid var(--divider-border-right);
-}</style>
+}</style>

package/dist/base/divider/divider.scss

@@ -1,19 +1,19 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --divider-border-top: var(--sld-color-border, var(--sld-color-foreground-alpha-high, #333));
-  --divider-background-color: var(--sld-color-border, var(--sld-color-foreground-alpha-mid, #333));
-  --divider-border-right: var(--sld-color-border, var(--sld-color-foreground-alpha-mid, #333));
-}
-
-hr {
-  border: none;
-  border-top: 1px solid var(--divider-border-top);
-  background-color: var(--divider-background-color);
-  display: block;
-
-  &.vertical {
-    width: 1px;
-    border-right: 1px solid var(--divider-border-right);
-  }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --divider-border-top: var(--sld-color-border, var(--sld-color-foreground-alpha-high, #333));
+  --divider-background-color: var(--sld-color-border, var(--sld-color-foreground-alpha-mid, #333));
+  --divider-border-right: var(--sld-color-border, var(--sld-color-foreground-alpha-mid, #333));
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--divider-border-top);
+  background-color: var(--divider-background-color);
+  display: block;
+
+  &.vertical {
+    width: 1px;
+    border-right: 1px solid var(--divider-border-right);
+  }
+}

package/dist/base/icon/Icon.demo.svelte

@@ -1,24 +1,24 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import { DemoPage, Demoer } from '../../index.js';
-	import Icon from './Icon.svelte';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let code = `
-<Icon>
-    mdi:tree
-</Icon>`;
-</script>
-
-<ComponentDemo component="Icon" cite="The icon is the window to the soul of the app">
-	<div class="flex-v gap-small">
-		<DemoPage component="Icon" {code}>
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Icon {...activeParams} />
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import { DemoPage, Demoer } from '../../index.js';
+	import Icon from './Icon.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code = `
+<Icon>
+    mdi:tree
+</Icon>`;
+</script>
+
+<ComponentDemo component="Icon" cite="The icon is the window to the soul of the app">
+	<div class="flex-v gap-small">
+		<DemoPage component="Icon" {code}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Icon {...activeParams} />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/icon/Icon.svelte

@@ -1,119 +1,119 @@
-<script module lang="ts">
-import type { ElementProps, IconObj } from "../../types/index.js"; 
-
-/**
- * Properties for the IconApp component.
- */
-export type IconAppProps = {
-  /**
-   * Icon name for Iconify.
-   * @param icon
-   */
-  icon?: ElementProps["icon"];
-
-  /**
-   * Class name of the root component.
-   * @param class
-   */
-  class?: string;
-
-  /**
-   * CSS style of the root component.
-   * @param style
-   */
-  style?: string;
-
-  /**
-   * Root HTMLDivElement properties.
-   * @param element
-   */
-  element?: HTMLDivElement | null | any;
-
-  /**
-   * Icon object for Iconify, replaces and invalidates `icon` prop.
-   * @param ico
-   */
-  ico?: IconObj;
-
-  /**
-   * Icon size.
-   * @param iconSize
-   */
-  iconSize?: ElementProps["iconSize"];
-
-  /**
-   * Rotate icon.
-   * @param rotate
-   */
-  rotate?: boolean;
-
-  /**
-   * Icon color.
-   * @param color
-   */
-  color?: string;
-
-  /**
-   * Icon rotation.
-   * @param rotation
-   */
-  rotation?: number;
-
-  /**
-   * Display property for the icon.
-   * @param display
-   */
-  display?: "block" | "inline-block" | "inline";
-};
-</script>
-
-<script lang="ts">
-	import { iconFontSize,   type ExpandProps } from '../../types/index.js'; 
-	import Iconify from '@iconify/svelte';
-
-	let {
-		icon = $bindable('question'),
-		class: className,
-		style,
-		element = $bindable<HTMLDivElement>(),
-		iconSize = $bindable(),
-		rotate = false,
-		color = $bindable(),
-		rotation = 0,
-		ico,
-		display = 'inline-block',
-		...rest
-	}: ExpandProps<IconAppProps> = $props();
-
-	iconSize = iconSize || 'small';
-
-	const sizes: Record<ElementProps['iconSize'], string> = iconFontSize;
-
-	let finalI = $derived(ico?.icon ?? (typeof icon === 'object' ? icon.icon : icon));
-	let finRot = $derived(ico?.rotate ?? (typeof icon === 'object' ? icon.rotate : rotate));
-	let finRotation = $derived(
-		ico?.rotation ?? (typeof icon === 'object' ? icon.rotation : rotation)
-	);
-	let finCol = $derived(ico?.color ?? (typeof icon === 'object' ? icon.color : color));
-	let finSize = $derived(ico?.iconSize ?? (typeof icon === 'object' ? iconSize : iconSize));
-	let iconName = $derived(finalI.includes(':') ? finalI : `mdi:${finalI}`);
-
-	let finalStyle = $derived(
-		`display:${display};font-size:${sizes[finSize]};color:${finCol};transform: rotate(${finRotation}deg);${style};`
-	);
- 
-</script>
-
-{#key [icon, iconName, color, finalStyle]}
-	<Iconify
-		bind:this={element}
-		class="icon medium {className} {finRot ? 'rotate' : ''}"
-		style={finalStyle}
-		icon={iconName}
-		{...rest}
-	/>
-{/key}
-
+<script module lang="ts">
+import type { ElementProps, IconObj } from "../../types/index.js"; 
+
+/**
+ * Properties for the IconApp component.
+ */
+export type IconAppProps = {
+  /**
+   * Icon name for Iconify.
+   * @param icon
+   */
+  icon?: ElementProps["icon"];
+
+  /**
+   * Class name of the root component.
+   * @param class
+   */
+  class?: string;
+
+  /**
+   * CSS style of the root component.
+   * @param style
+   */
+  style?: string;
+
+  /**
+   * Root HTMLDivElement properties.
+   * @param element
+   */
+  element?: HTMLDivElement | null | any;
+
+  /**
+   * Icon object for Iconify, replaces and invalidates `icon` prop.
+   * @param ico
+   */
+  ico?: IconObj;
+
+  /**
+   * Icon size.
+   * @param iconSize
+   */
+  iconSize?: ElementProps["iconSize"];
+
+  /**
+   * Rotate icon.
+   * @param rotate
+   */
+  rotate?: boolean;
+
+  /**
+   * Icon color.
+   * @param color
+   */
+  color?: string;
+
+  /**
+   * Icon rotation.
+   * @param rotation
+   */
+  rotation?: number;
+
+  /**
+   * Display property for the icon.
+   * @param display
+   */
+  display?: "block" | "inline-block" | "inline";
+};
+</script>
+
+<script lang="ts">
+	import { iconFontSize,   type ExpandProps } from '../../types/index.js'; 
+	import Iconify from '@iconify/svelte';
+
+	let {
+		icon = $bindable('question'),
+		class: className,
+		style,
+		element = $bindable<HTMLDivElement>(),
+		iconSize = $bindable(),
+		rotate = false,
+		color = $bindable(),
+		rotation = 0,
+		ico,
+		display = 'inline-block',
+		...rest
+	}: ExpandProps<IconAppProps> = $props();
+
+	iconSize = iconSize || 'small';
+
+	const sizes: Record<ElementProps['iconSize'], string> = iconFontSize;
+
+	let finalI = $derived(ico?.icon ?? (typeof icon === 'object' ? icon.icon : icon));
+	let finRot = $derived(ico?.rotate ?? (typeof icon === 'object' ? icon.rotate : rotate));
+	let finRotation = $derived(
+		ico?.rotation ?? (typeof icon === 'object' ? icon.rotation : rotation)
+	);
+	let finCol = $derived(ico?.color ?? (typeof icon === 'object' ? icon.color : color));
+	let finSize = $derived(ico?.iconSize ?? (typeof icon === 'object' ? iconSize : iconSize));
+	let iconName = $derived(finalI.includes(':') ? finalI : `mdi:${finalI}`);
+
+	let finalStyle = $derived(
+		`display:${display};font-size:${sizes[finSize]};color:${finCol};transform: rotate(${finRotation}deg);${style};`
+	);
+ 
+</script>
+
+{#key [icon, iconName, color, finalStyle]}
+	<Iconify
+		bind:this={element}
+		class="icon medium {className} {finRot ? 'rotate' : ''}"
+		style={finalStyle}
+		icon={iconName}
+		{...rest}
+	/>
+{/key}
+
 <style>:global(.icon) {
   transition: all 0.2;
 }
@@ -129,4 +129,4 @@ export type IconAppProps = {
   100% {
     transform: rotate(360deg);
   }
-}</style>
+}</style>

package/dist/base/icon/icon.scss

@@ -1,17 +1,17 @@
-@use "../../styles/slotui-mixins.scss";
-
-:global(.icon) {
-	transition: all 0.2;
-}
-
-.rotate {
-	animation: spinner-frames 3s infinite linear;
-}
-@keyframes spinner-frames {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
+@use "../../styles/slotui-mixins.scss";
+
+:global(.icon) {
+	transition: all 0.2;
+}
+
+.rotate {
+	animation: spinner-frames 3s infinite linear;
+}
+@keyframes spinner-frames {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/dist/base/paper/Paper.demo.svelte

@@ -1,31 +1,31 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import { defaultsArgs } from '../demoer/demoer.utils.js';
-	import Paper from './Paper.svelte';
-	import { paperDemoValues, type PaperProps } from './type.js';
-
-	let parameters = paperDemoValues;
-	let componentArgs = defaultsArgs(parameters);
-
-	let code = `
-<Paper elevation="2" style="height:350px;width:250px" >
-    paper content
-</Paper>`;
-</script>
-
-<ComponentDemo
-	component="Paper"
-	cite="What is separating before from after is not a time nor a place : it's only a component <br /> B. Franklin, 1854"
->
-	<div class=" flex-v gap-small">
-		<DemoPage component="Paper" {code}>
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Paper {...activeParams} style="height:350px;width:250px" />
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+	import Paper from './Paper.svelte';
+	import { paperDemoValues, type PaperProps } from './type.js';
+
+	let parameters = paperDemoValues;
+	let componentArgs = defaultsArgs(parameters);
+
+	let code = `
+<Paper elevation="2" style="height:350px;width:250px" >
+    paper content
+</Paper>`;
+</script>
+
+<ComponentDemo
+	component="Paper"
+	cite="What is separating before from after is not a time nor a place : it's only a component <br /> B. Franklin, 1854"
+>
+	<div class=" flex-v gap-small">
+		<DemoPage component="Paper" {code}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Paper {...activeParams} style="height:350px;width:250px" />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>