@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/controls/checkbox/Checkbox.svelte

@@ -1,61 +1,61 @@
-<script lang="ts">
-	import type { CommonProps, ElementProps, ExpandProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { CheckboxProps } from './types.js';
-
-	let {
-		title,
-		indeterminate = $bindable(false),
-		class: className = '',
-		inputElement = $bindable(),
-		labelElement,
-		checked = $bindable(false),
-		value = $bindable(undefined),
-		disabled = $bindable(false),
-		dense,
-		children,
-		...rest
-	}: ExpandProps<CheckboxProps> = $props();
-</script>
-
-<label class="checkbox-root" class:disabled class:indeterminate bind:this={labelElement}>
-	<div class="checkbox-container dense-{dense}">
-		<!-- @ts-ignore -->
-		<input
-			bind:this={inputElement}
-			bind:checked
-			bind:indeterminate
-			{value}
-			{disabled}
-			{...rest}
-			type="checkbox"
-			class="checkbox {className}"
-		/>
-		<svg aria-hidden="true" class="svg" viewBox={'0 0 16 16'}>
-			{#if indeterminate}
-				<path
-					class="path-indeterminate"
-					fill="currentColor"
-					d="M213.5,554.5C207.5,554.5 201.917,553.417 196.75,551.25C191.583,549.083 187.083,546.083 183.25,542.25C179.417,538.417 176.333,533.917 174,528.75C171.667,523.583 170.5,518 170.5,512C170.5,506 171.667,500.417 174,495.25C176.333,490.083 179.417,485.583 183.25,481.75C187.083,477.917 191.583,474.917 196.75,472.75C201.917,470.583 207.5,469.5 213.5,469.5L810.5,469.5C816.5,469.5 822.083,470.583 827.25,472.75C832.417,474.917 836.917,477.917 840.75,481.75C844.583,485.583 847.667,490.083 850,495.25C852.333,500.417 853.5,506 853.5,512C853.5,518 852.333,523.583 850,528.75C847.667,533.917 844.583,538.417 840.75,542.25C836.917,546.083 832.417,549.083 827.25,551.25C822.083,553.417 816.5,554.5 810.5,554.5Z"
-				/>
-			{:else if checked}
-				<path
-					class="path-check"
-					d="m14.431 3.323l-8.47 10l-.79-.036l-3.35-4.77l.818-.574l2.978 4.24l8.051-9.506z"
-					clip-rule="evenodd"
-					stroke-width="4"
-					fill="white"
-				/>
-			{/if}
-		</svg>
-	</div>
-	{#if children || title}
-		<div>
-			<Slotted child={children}>{title}</Slotted>
-		</div>
-	{/if}
-</label>
-
+<script lang="ts">
+	import type { CommonProps, ElementProps, ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { CheckboxProps } from './types.js';
+
+	let {
+		title,
+		indeterminate = $bindable(false),
+		class: className = '',
+		inputElement = $bindable(),
+		labelElement,
+		checked = $bindable(false),
+		value = $bindable(undefined),
+		disabled = $bindable(false),
+		dense,
+		children,
+		...rest
+	}: ExpandProps<CheckboxProps> = $props();
+</script>
+
+<label class="checkbox-root" class:disabled class:indeterminate bind:this={labelElement}>
+	<div class="checkbox-container dense-{dense}">
+		<!-- @ts-ignore -->
+		<input
+			bind:this={inputElement}
+			bind:checked
+			bind:indeterminate
+			{value}
+			{disabled}
+			{...rest}
+			type="checkbox"
+			class="checkbox {className}"
+		/>
+		<svg aria-hidden="true" class="svg" viewBox={'0 0 16 16'}>
+			{#if indeterminate}
+				<path
+					class="path-indeterminate"
+					fill="currentColor"
+					d="M213.5,554.5C207.5,554.5 201.917,553.417 196.75,551.25C191.583,549.083 187.083,546.083 183.25,542.25C179.417,538.417 176.333,533.917 174,528.75C171.667,523.583 170.5,518 170.5,512C170.5,506 171.667,500.417 174,495.25C176.333,490.083 179.417,485.583 183.25,481.75C187.083,477.917 191.583,474.917 196.75,472.75C201.917,470.583 207.5,469.5 213.5,469.5L810.5,469.5C816.5,469.5 822.083,470.583 827.25,472.75C832.417,474.917 836.917,477.917 840.75,481.75C844.583,485.583 847.667,490.083 850,495.25C852.333,500.417 853.5,506 853.5,512C853.5,518 852.333,523.583 850,528.75C847.667,533.917 844.583,538.417 840.75,542.25C836.917,546.083 832.417,549.083 827.25,551.25C822.083,553.417 816.5,554.5 810.5,554.5Z"
+				/>
+			{:else if checked}
+				<path
+					class="path-check"
+					d="m14.431 3.323l-8.47 10l-.79-.036l-3.35-4.77l.818-.574l2.978 4.24l8.051-9.506z"
+					clip-rule="evenodd"
+					stroke-width="4"
+					fill="white"
+				/>
+			{/if}
+		</svg>
+	</div>
+	{#if children || title}
+		<div>
+			<Slotted child={children}>{title}</Slotted>
+		</div>
+	{/if}
+</label>
+
 <style>:root {
   --sld-checkbox-background: var(--sld-color-background-alpha-high);
   --sld-checkbox-background-hover: var(--sld-color-primary);
@@ -182,4 +182,4 @@
 }
 .checkbox-root .checkbox-container .svg path-indeterminate {
   transform: scale(1.1);
-}</style>
+}</style>

package/dist/controls/checkbox/checkbox.scss

@@ -1,115 +1,115 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --sld-checkbox-background: var(--sld-color-background-alpha-high);
-    --sld-checkbox-background-hover: var(--sld-color-primary);
-    --sld-checkbox-background-checked: var(--sld-color-primary);
-    --sld-checkbox-background-indeterminate: var(--sld-color-primary-alpha-mid);
-    --sld-checkbox-border-width: 2px;
-    --sld-checkbox-border-color: var(--sld-color-foreground-alpha-mid);
-    --sld-checkbox-border-bottom-width: 2px;
-    --sld-checkbox-border-bottom-color: var(--sld-color-primary-darker, rgb(208, 191, 151));
-    --sld-checkbox-radius: var(--sld-radius-small);
-    --sld-checkbox-padding: 0 0.5rem;
-    --sld-checkbox-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
-}
-
-.checkbox {
-    @include slotui-mixins.data-hover;
-    @include slotui-mixins.ui-tall-presets;
-    @include slotui-mixins.ui-transition;
-
-    & {
-        appearance: none;
-        outline: none;
-        border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
-        border-radius: var(--sld-checkbox-radius);
-        background-clip: padding-box;
-        background-color: var(--sld-checkbox-background);
-        width: 1.7rem;
-        height: 1.7rem;
-        aspect-ratio: 1/1;
-        padding: 0;
-        margin: 0;
-    }
-
-    &:focus-visible {
-        box-shadow: var(--sld-checkbox-shadow);
-    }
-
-    &:hover {
-        background-color: var(--sld-color-primary-darken-mid);
-    }
-
-    &:active {
-        + .svg {
-            color: var(--sld-color-secondary);
-        }
-    }
-
-    &:disabled {
-        border-color: #ccc;
-        background-color: #ededed;
-        pointer-events: none;
-    }
-
-    &:checked,
-    &:indeterminate {
-        background-color: var(--sld-checkbox-background-indeterminate);
-
-        &:hover {
-            background-color: var(--sld-checkbox-background-hover);
-        }
-
-        &:active,
-        &:focus {
-            background-color: var(--sld-checkbox-background-checked);
-        }
-
-        &:disabled,
-        &[disabled] {
-            border-color: #ccc;
-            background-color: #ededed;
-            pointer-events: none;
-            + .svg {
-                color: #ededed;
-            }
-        }
-    }
-}
-
-.checkbox-root {
-    display: flex;
-    align-items: center;
-    -webkit-user-select: none;
-    user-select: none;
-    min-block-size: 32px;
-    gap: 0.5rem;
-
-    &.disabled > span {
-        color: #ededed;
-    }
-
-    .checkbox-container {
-        display: inline-flex;
-        justify-content: center;
-        position: relative;
-        .svg {
-            position: absolute;
-            color: white;
-            height: 100%;
-            width: 100%;
-            padding: 3px;
-            path {
-                transform-origin: center;
-                &-check {
-                    transform: scale(1.1);
-                    fill: white;
-                }
-                &-indeterminate {
-                    transform: scale(1.1);
-                }
-            }
-        }
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --sld-checkbox-background: var(--sld-color-background-alpha-high);
+    --sld-checkbox-background-hover: var(--sld-color-primary);
+    --sld-checkbox-background-checked: var(--sld-color-primary);
+    --sld-checkbox-background-indeterminate: var(--sld-color-primary-alpha-mid);
+    --sld-checkbox-border-width: 2px;
+    --sld-checkbox-border-color: var(--sld-color-foreground-alpha-mid);
+    --sld-checkbox-border-bottom-width: 2px;
+    --sld-checkbox-border-bottom-color: var(--sld-color-primary-darker, rgb(208, 191, 151));
+    --sld-checkbox-radius: var(--sld-radius-small);
+    --sld-checkbox-padding: 0 0.5rem;
+    --sld-checkbox-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
+}
+
+.checkbox {
+    @include slotui-mixins.data-hover;
+    @include slotui-mixins.ui-tall-presets;
+    @include slotui-mixins.ui-transition;
+
+    & {
+        appearance: none;
+        outline: none;
+        border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
+        border-radius: var(--sld-checkbox-radius);
+        background-clip: padding-box;
+        background-color: var(--sld-checkbox-background);
+        width: 1.7rem;
+        height: 1.7rem;
+        aspect-ratio: 1/1;
+        padding: 0;
+        margin: 0;
+    }
+
+    &:focus-visible {
+        box-shadow: var(--sld-checkbox-shadow);
+    }
+
+    &:hover {
+        background-color: var(--sld-color-primary-darken-mid);
+    }
+
+    &:active {
+        + .svg {
+            color: var(--sld-color-secondary);
+        }
+    }
+
+    &:disabled {
+        border-color: #ccc;
+        background-color: #ededed;
+        pointer-events: none;
+    }
+
+    &:checked,
+    &:indeterminate {
+        background-color: var(--sld-checkbox-background-indeterminate);
+
+        &:hover {
+            background-color: var(--sld-checkbox-background-hover);
+        }
+
+        &:active,
+        &:focus {
+            background-color: var(--sld-checkbox-background-checked);
+        }
+
+        &:disabled,
+        &[disabled] {
+            border-color: #ccc;
+            background-color: #ededed;
+            pointer-events: none;
+            + .svg {
+                color: #ededed;
+            }
+        }
+    }
+}
+
+.checkbox-root {
+    display: flex;
+    align-items: center;
+    -webkit-user-select: none;
+    user-select: none;
+    min-block-size: 32px;
+    gap: 0.5rem;
+
+    &.disabled > span {
+        color: #ededed;
+    }
+
+    .checkbox-container {
+        display: inline-flex;
+        justify-content: center;
+        position: relative;
+        .svg {
+            position: absolute;
+            color: white;
+            height: 100%;
+            width: 100%;
+            padding: 3px;
+            path {
+                transform-origin: center;
+                &-check {
+                    transform: scale(1.1);
+                    fill: white;
+                }
+                &-indeterminate {
+                    transform: scale(1.1);
+                }
+            }
+        }
+    }
+}

package/dist/controls/confirm/Confirm.demo.svelte

@@ -1,60 +1,60 @@
-<script lang="ts">
-	import Button from '../button/Button.svelte';
-	import Confirm from './Confirm.svelte';
-
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import { parameters, componentArgs } from './types.js';
-
-	let codeSlot = `
-<Confirm {...activeParams}>
-	{#snippet confirmInitial()}
-		<Button icon="fa-solid:question" size="large">Would you please click once ?</Button>
-	{/snippet}
-	<Button type="submit" size="medium">confirm</Button>
-</Confirm>`;
-
-	let codeProps = `
-<Confirm 
-	buttonInitial={{
-		icon: {icon:'fa-solid:question', size:'auto',color:'green'},
-		value: 'Would you please click me once ?',
-		ellipsis: true
-	}}
->
-	<Button type="submit" icon="fa-solid:check" >confirm</Button>
-</Confirm>`;
-</script>
-
-<ComponentDemo
-	component="Confirm"
-	cite="Leaded by a proud walk, nothing can stop nobody to win the step ahead, should we confirm ?
-<br />
-V.Hugo 1850"
->
-	<div class="flex-v gap-large">
-		<DemoPage component="Chipper" code={codeSlot}>
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Confirm {...activeParams}
-						buttonInitial={{
-							icon: {icon:'fa-solid:question', size:'auto',color:'green'},
-							value: 'Would you please click me once ?',
-							ellipsis: true
-						}}
-					>
-						<Button type="submit" icon="fa-solid:check" >confirm</Button>
-					</Confirm>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage title="Using props" component="Chipper" code={codeProps}>
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Confirm {...activeParams} primary="confirm deletion" />
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Button from '../button/Button.svelte';
+	import Confirm from './Confirm.svelte';
+
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
+<Confirm {...activeParams}>
+	{#snippet confirmInitial()}
+		<Button icon="fa-solid:question" size="large">Would you please click once ?</Button>
+	{/snippet}
+	<Button type="submit" size="medium">confirm</Button>
+</Confirm>`;
+
+	let codeProps = `
+<Confirm 
+	buttonInitial={{
+		icon: {icon:'fa-solid:question', size:'auto',color:'green'},
+		value: 'Would you please click me once ?',
+		ellipsis: true
+	}}
+>
+	<Button type="submit" icon="fa-solid:check" >confirm</Button>
+</Confirm>`;
+</script>
+
+<ComponentDemo
+	component="Confirm"
+	cite="Leaded by a proud walk, nothing can stop nobody to win the step ahead, should we confirm ?
+<br />
+V.Hugo 1850"
+>
+	<div class="flex-v gap-large">
+		<DemoPage component="Chipper" code={codeSlot}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Confirm {...activeParams}
+						buttonInitial={{
+							icon: {icon:'fa-solid:question', size:'auto',color:'green'},
+							value: 'Would you please click me once ?',
+							ellipsis: true
+						}}
+					>
+						<Button type="submit" icon="fa-solid:check" >confirm</Button>
+					</Confirm>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="Using props" component="Chipper" code={codeProps}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Confirm {...activeParams} primary="confirm deletion" />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/confirm/Confirm.preview.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-	import Button from '../button/Button.svelte';
-	import Confirm from './Confirm.svelte';
-</script>
-
-<div>
-	<Confirm primary="confirm deletion">
-		{#snippet confirmInitial()}
-			<Button>delete</Button>
-		{/snippet}
-
-		<Button type="submit" width="auto">confirm</Button>
-	</Confirm>
-</div>
+<script lang="ts">
+	import Button from '../button/Button.svelte';
+	import Confirm from './Confirm.svelte';
+</script>
+
+<div>
+	<Confirm primary="confirm deletion">
+		{#snippet confirmInitial()}
+			<Button>delete</Button>
+		{/snippet}
+
+		<Button type="submit" width="auto">confirm</Button>
+	</Confirm>
+</div>