@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/base/badge/badge.scss

@@ -1,19 +1,19 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --badge-color-border: var(--sld-color-border);
-}
-
-.badge {
-  position: absolute;
-  border-radius: 50%;
-  border: 1px solid var(--badge-color-border);
-  display: grid;
-  place-items: center;
-  width: 16px;
-  height: 16px;
-
-  .hidden {
-    transform: scale(0, 0);
-  }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --badge-color-border: var(--sld-color-border);
+}
+
+.badge {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid var(--badge-color-border);
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+
+  .hidden {
+    transform: scale(0, 0);
+  }
+}

package/dist/base/box/Box.demo.svelte

@@ -1,54 +1,54 @@
-<script lang="ts">
-	import Box from './Box.svelte';
-	import Icon from '../icon/Icon.svelte';
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import { BoxDemoValues } from './types.js';
-	import { defaultsArgs } from '../demoer/demoer.utils.js';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let code = `
-<Box>
-	{#snippet titleBarTitle()}
-		<span>Title of the box</span>
-	{/snippet}
-	{#snippet titleBarIcon()}
-		<Icon fontSize="small" icon="clock" />
-	{/snippet}
-	{#snippet boxBottomZone()}
-		<div class="flex-h gap-small pad border-t marg-ii-1">bottom zoone</div>
-	{/snippet}
-	{#snippet children()}
-		<div class="pad-2">Content of the box</div>
-	{/snippet}
-</Box>`;
-</script>
-
-<ComponentDemo
-	component="Box"
-	cite="Boxes, essentially, contain other boxes. That's the meaning we'll found if open them<br /> B. Franklin,1854"
-	><div class="flex-v gap-medium">
-		<DemoPage {code} component="Box">
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Box {...activeParams}>
-						{#snippet titleBarTitle()}
-							<span>Title of the box</span>
-						{/snippet}
-						{#snippet titleBarIcon()}
-							<Icon iconSize="small" icon="clock" />
-						{/snippet}
-						{#snippet boxBottomZone()}
-							<div class="flex-h gap-small pad border-t marg-ii-1">bottom zoone</div>
-						{/snippet}
-						{#snippet children()}
-							<div class="pad-2">Content of the box</div>
-						{/snippet}
-					</Box>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Box from './Box.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import { BoxDemoValues } from './types.js';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code = `
+<Box>
+	{#snippet titleBarTitle()}
+		<span>Title of the box</span>
+	{/snippet}
+	{#snippet titleBarIcon()}
+		<Icon fontSize="small" icon="clock" />
+	{/snippet}
+	{#snippet boxBottomZone()}
+		<div class="flex-h gap-small pad border-t marg-ii-1">bottom zoone</div>
+	{/snippet}
+	{#snippet children()}
+		<div class="pad-2">Content of the box</div>
+	{/snippet}
+</Box>`;
+</script>
+
+<ComponentDemo
+	component="Box"
+	cite="Boxes, essentially, contain other boxes. That's the meaning we'll found if open them<br /> B. Franklin,1854"
+	><div class="flex-v gap-medium">
+		<DemoPage {code} component="Box">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Box {...activeParams}>
+						{#snippet titleBarTitle()}
+							<span>Title of the box</span>
+						{/snippet}
+						{#snippet titleBarIcon()}
+							<Icon iconSize="small" icon="clock" />
+						{/snippet}
+						{#snippet boxBottomZone()}
+							<div class="flex-h gap-small pad border-t marg-ii-1">bottom zoone</div>
+						{/snippet}
+						{#snippet children()}
+							<div class="pad-2">Content of the box</div>
+						{/snippet}
+					</Box>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/box/Box.svelte

@@ -1,74 +1,74 @@
-<script lang="ts">
-	import TitleBar from '../titleBar/TitleBar.svelte';
-	import Icon from '../icon/Icon.svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { BoxProps } from './types.js';
-	import type { ExpandProps } from '../../types/index.js';
-	import Content from '../../utils/content/Content.svelte';
-
-	/** box actions */
-	export const actions = {
-		open,
-		toggle,
-		close
-	};
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		isOpen = $bindable(true),
-		showCloseControl = true,
-		hasMenu = false,
-		title,
-		icon,
-		content,
-		bottomZone,
-		children,
-		titleBarTitle,
-		titleBarIcon,
-		boxBottomZone,
-		...rest
-	}: ExpandProps<BoxProps> = $props();
-
-	function open() {
-		isOpen = true;
-	}
-	function toggle() {
-		isOpen = !isOpen;
-	}
-	function close() {
-		isOpen = false;
-	}
-
-	let closer = !showCloseControl ? {} : { onClose: () => actions.close() };
-</script>
-
-{#if isOpen}
-	<Content bind:element class="box {className}" {style} {...rest}>
-		<TitleBar {hasMenu} {...closer}>
-			<Slotted child={titleBarTitle}>
-				{title ?? ''}
-			</Slotted>
-			<Slotted child={titleBarIcon}>
-				{#if icon}
-					<Icon {icon} />
-				{/if}
-			</Slotted>
-		</TitleBar>
-		<div class="box-content">
-			<Slotted child={children}>
-				{@html content ?? ''}
-			</Slotted>
-		</div>
-		<div class="box-button-zone">
-			<Slotted child={boxBottomZone}>
-				{@html bottomZone ?? ''}
-			</Slotted>
-		</div>
-	</Content>
-{/if}
-
+<script lang="ts">
+	import TitleBar from '../titleBar/TitleBar.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { BoxProps } from './types.js';
+	import type { ExpandProps } from '../../types/index.js';
+	import Content from '../../utils/content/Content.svelte';
+
+	/** box actions */
+	export const actions = {
+		open,
+		toggle,
+		close
+	};
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		isOpen = $bindable(true),
+		showCloseControl = true,
+		hasMenu = false,
+		title,
+		icon,
+		content,
+		bottomZone,
+		children,
+		titleBarTitle,
+		titleBarIcon,
+		boxBottomZone,
+		...rest
+	}: ExpandProps<BoxProps> = $props();
+
+	function open() {
+		isOpen = true;
+	}
+	function toggle() {
+		isOpen = !isOpen;
+	}
+	function close() {
+		isOpen = false;
+	}
+
+	let closer = !showCloseControl ? {} : { onClose: () => actions.close() };
+</script>
+
+{#if isOpen}
+	<Content bind:element class="box {className}" {style} {...rest}>
+		<TitleBar {hasMenu} {...closer}>
+			<Slotted child={titleBarTitle}>
+				{title ?? ''}
+			</Slotted>
+			<Slotted child={titleBarIcon}>
+				{#if icon}
+					<Icon {icon} />
+				{/if}
+			</Slotted>
+		</TitleBar>
+		<div class="box-content">
+			<Slotted child={children}>
+				{@html content ?? ''}
+			</Slotted>
+		</div>
+		<div class="box-button-zone">
+			<Slotted child={boxBottomZone}>
+				{@html bottomZone ?? ''}
+			</Slotted>
+		</div>
+	</Content>
+{/if}
+
 <style>:root {
   --box-color-background: var(--sld-color-background);
   --box-border-bottom: var(--sld-color-primary);
@@ -97,4 +97,4 @@
   padding: var(--box-pad);
   text-align: right;
   justify-content: end;
-}</style>
+}</style>

package/dist/base/box/box.scss

@@ -1,33 +1,33 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --box-color-background: var(--sld-color-background);
-  --box-border-bottom: var(--sld-color-primary);
-  --box-radius: var(--sld-radius-small);
-  --box-elevation: var(--sld-elevation-3);
-  --box-gap: var(--sld-gap-tiny);
-  --box-pad: var(--sld-pad-small);
-}
-
-.box {
-  min-height: 160px;
-  min-width: 320px;
-  background-color: var(--box-color-background);
-  border-bottom: 1px solid var(--box-border-bottom);
-  border-radius: var(--box-radius);
-  box-shadow: var(--box-elevation);
-  display: flex;
-  flex-direction: column;
-
-  &-content {
-    flex: 1;
-  }
-
-  &-button-zone {
-    display: flex;
-    gap: var(--box-gap);
-    padding: var(--box-pad);
-    text-align: right;
-    justify-content: end;
-  }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --box-color-background: var(--sld-color-background);
+  --box-border-bottom: var(--sld-color-primary);
+  --box-radius: var(--sld-radius-small);
+  --box-elevation: var(--sld-elevation-3);
+  --box-gap: var(--sld-gap-tiny);
+  --box-pad: var(--sld-pad-small);
+}
+
+.box {
+  min-height: 160px;
+  min-width: 320px;
+  background-color: var(--box-color-background);
+  border-bottom: 1px solid var(--box-border-bottom);
+  border-radius: var(--box-radius);
+  box-shadow: var(--box-elevation);
+  display: flex;
+  flex-direction: column;
+
+  &-content {
+    flex: 1;
+  }
+
+  &-button-zone {
+    display: flex;
+    gap: var(--box-gap);
+    padding: var(--box-pad);
+    text-align: right;
+    justify-content: end;
+  }
+}

package/dist/base/breadCrumb/BreadCrumb.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-	import type { ExpandProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { BreadCrumbProps } from './types.js';
-
-	let {
-		class: className,
-		element,
-		children,
-		style,
-		breadList = []
-	}: ExpandProps<BreadCrumbProps> = $props();
-</script>
-
-<nav bind:this={element} class="breadCrumb {className ?? ''}" {style}>
-	<ul>
-		<li class="bread">
-			<Slotted child={children} />
-		</li>
-	</ul>
-</nav>
-
+<script lang="ts">
+	import type { ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { BreadCrumbProps } from './types.js';
+
+	let {
+		class: className,
+		element,
+		children,
+		style,
+		breadList = []
+	}: ExpandProps<BreadCrumbProps> = $props();
+</script>
+
+<nav bind:this={element} class="breadCrumb {className ?? ''}" {style}>
+	<ul>
+		<li class="bread">
+			<Slotted child={children} />
+		</li>
+	</ul>
+</nav>
+
 <style>.breadCrumb ul {
   display: flex;
-}</style>
+}</style>

package/dist/base/breadCrumb/breadcrumb.scss

@@ -1,11 +1,11 @@
-// @import "../../styles/slotui-presets.scss";
-@use "../../styles/slotui-mixins.scss";
-
-.breadCrumb {
-    ul {
-        display: flex;
-
-        .bread {
-        }
-    }
-}
+// @import "../../styles/slotui-presets.scss";
+@use "../../styles/slotui-mixins.scss";
+
+.breadCrumb {
+    ul {
+        display: flex;
+
+        .bread {
+        }
+    }
+}

package/dist/base/cartouche/Cartouche.demo.svelte

@@ -1,108 +1,108 @@
-<script lang="ts">
-	import Cartouche from './Cartouche.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import Icon from '../icon/Icon.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let code1 = `
-<Cartouche  class="marg-tb-1">
-	{#snippet cartoucheButtons()}
-		<Button size="medium">a button</Button>
-	{/snippet}
-	{#snippet cartoucheIcon()}
-		<Icon fontSize="small" icon="circle" />
-	{/snippet}
-	{#snippet cartouchePrimary()}
-		This is a cartouche
-	{/snippet}
-	{#snippet cartoucheSecondary()}
-		Some subtitle
-	{/snippet}
-	<div class="pad-2 border-t">Some <br />Cartouche <br />content</div>
-</Cartouche>`;
-
-	let code2 = `
-	<Cartouche 
-		class="marg-tb-1" />`;
-</script>
-
-<ComponentDemo
-	component="Cartouche"
-	cite="'Open up', they said. So we stacked<br /> G. Brahms, 1964"
-	><div class="flex-v gap-large">
-		<DemoPage component="Cartouche" code={code1}>
-			<Demoer title="A simple cartouche" {parameters} {componentArgs}
-				>{#snippet children({ activeParams })}
-					<Cartouche {...activeParams} class="marg-tb-1">
-						<!-- {#snippet cartoucheButtons()}
-							<Button width="medium">a button</Button>
-						{/snippet} -->
-						<!-- {#snippet cartoucheIcon()}
-							<Icon iconSize="small" icon="circle" />
-						{/snippet} -->
-						<!-- {#snippet cartouchePrimary()}
-							This is a cartouche
-						{/snippet}
-						{#snippet cartoucheSecondary()}
-							Some subtitle
-						{/snippet} -->
-						<div class="pad-2 border-t">
-							Some <br />Cartouche <br />content
-						</div>
-					</Cartouche>
-				{/snippet}
-			</Demoer>
-			<Demoer title="Some stacked cartouches" {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Cartouche {...activeParams} stacked={true}>
-						{#snippet cartouchePrimary()}
-							This is a cartouche
-						{/snippet}
-						<div class="pad-4 border-t">Cartouche content</div>
-					</Cartouche>
-					<Cartouche stacked={true} primary="This is another cartouche">
-						<div class="pad-2 border-t">Cartouche content</div>
-					</Cartouche>
-					<Cartouche primary="And another one" stacked={true}>
-						{#snippet cartoucheIcon()}
-							<Icon iconSize="small" icon="user" />
-						{/snippet}
-					</Cartouche>
-				{/snippet}
-			</Demoer>
-			<Demoer title="Some nested cartouches" {parameters} {componentArgs}
-				>{#snippet children({ activeParams })}
-					<Cartouche
-						{...activeParams}
-						bordered={false}
-						primary="Can contain some others cartouches"
-						class="marg-tb-1"
-					>
-						{#snippet cartoucheIcon()}
-							<Icon iconSize="small" icon="info-circle" />
-						{/snippet}
-						<div class="marg-l-4">
-							<Cartouche {...activeParams} stacked={true} primary="Inner cartouche">
-								<div class="pad-2 border-t">Cartouche content</div>
-							</Cartouche>
-							<Cartouche {...activeParams} stacked={true} primary="Inner cartouche">
-								<div class="pad-2 border-t">Cartouche content</div>
-							</Cartouche>
-						</div>
-					</Cartouche>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage title="Using props" component="Cartouche" code={code2}>
-			<Demoer title="A simple cartouche" {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Cartouche {...activeParams} class="marg-tb-1" />
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Cartouche from './Cartouche.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code1 = `
+<Cartouche  class="marg-tb-1">
+	{#snippet cartoucheButtons()}
+		<Button size="medium">a button</Button>
+	{/snippet}
+	{#snippet cartoucheIcon()}
+		<Icon fontSize="small" icon="circle" />
+	{/snippet}
+	{#snippet cartouchePrimary()}
+		This is a cartouche
+	{/snippet}
+	{#snippet cartoucheSecondary()}
+		Some subtitle
+	{/snippet}
+	<div class="pad-2 border-t">Some <br />Cartouche <br />content</div>
+</Cartouche>`;
+
+	let code2 = `
+	<Cartouche 
+		class="marg-tb-1" />`;
+</script>
+
+<ComponentDemo
+	component="Cartouche"
+	cite="'Open up', they said. So we stacked<br /> G. Brahms, 1964"
+	><div class="flex-v gap-large">
+		<DemoPage component="Cartouche" code={code1}>
+			<Demoer title="A simple cartouche" {parameters} {componentArgs}
+				>{#snippet children({ activeParams })}
+					<Cartouche {...activeParams} class="marg-tb-1">
+						<!-- {#snippet cartoucheButtons()}
+							<Button width="medium">a button</Button>
+						{/snippet} -->
+						<!-- {#snippet cartoucheIcon()}
+							<Icon iconSize="small" icon="circle" />
+						{/snippet} -->
+						<!-- {#snippet cartouchePrimary()}
+							This is a cartouche
+						{/snippet}
+						{#snippet cartoucheSecondary()}
+							Some subtitle
+						{/snippet} -->
+						<div class="pad-2 border-t">
+							Some <br />Cartouche <br />content
+						</div>
+					</Cartouche>
+				{/snippet}
+			</Demoer>
+			<Demoer title="Some stacked cartouches" {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Cartouche {...activeParams} stacked={true}>
+						{#snippet cartouchePrimary()}
+							This is a cartouche
+						{/snippet}
+						<div class="pad-4 border-t">Cartouche content</div>
+					</Cartouche>
+					<Cartouche stacked={true} primary="This is another cartouche">
+						<div class="pad-2 border-t">Cartouche content</div>
+					</Cartouche>
+					<Cartouche primary="And another one" stacked={true}>
+						{#snippet cartoucheIcon()}
+							<Icon iconSize="small" icon="user" />
+						{/snippet}
+					</Cartouche>
+				{/snippet}
+			</Demoer>
+			<Demoer title="Some nested cartouches" {parameters} {componentArgs}
+				>{#snippet children({ activeParams })}
+					<Cartouche
+						{...activeParams}
+						bordered={false}
+						primary="Can contain some others cartouches"
+						class="marg-tb-1"
+					>
+						{#snippet cartoucheIcon()}
+							<Icon iconSize="small" icon="info-circle" />
+						{/snippet}
+						<div class="marg-l-4">
+							<Cartouche {...activeParams} stacked={true} primary="Inner cartouche">
+								<div class="pad-2 border-t">Cartouche content</div>
+							</Cartouche>
+							<Cartouche {...activeParams} stacked={true} primary="Inner cartouche">
+								<div class="pad-2 border-t">Cartouche content</div>
+							</Cartouche>
+						</div>
+					</Cartouche>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="Using props" component="Cartouche" code={code2}>
+			<Demoer title="A simple cartouche" {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Cartouche {...activeParams} class="marg-tb-1" />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>