@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/ConditionBuilder/ConditionBuilder.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="F extends string | number, O extends string | number, V"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="F extends string | number, O extends string | number, V"
 >import { m as i18n } from "../../paraglide/messages.js";
 import SingleSelect from "../SingleSelect.svelte";
 import Button from "../Button.svelte";
@@ -43,101 +43,101 @@ function setValue(leaf, value) {
 	leaf.value = value;
 	onChange(root);
 }
-</script>
-
-<div
-	class="group"
-	class:nested={depth > 0}
->
-	<div class="combinator">
-		<Button
-			label={andLabel}
-			toggled={root.combinator === 'and'}
-			onclick={() => setCombinator('and')}>{andLabel}</Button
-		>
-		<Button
-			label={orLabel}
-			toggled={root.combinator === 'or'}
-			onclick={() => setCombinator('or')}>{orLabel}</Button
-		>
-	</div>
-
-	<div class="children">
-		{#each root.children as child (child.id)}
-			{#if child.kind === 'leaf'}
-				<div class="leaf">
-					<SingleSelect
-						label={i18n['scoria.label.field']()}
-						options={[...fields]}
-						labelProp="label"
-						valueProp="value"
-						valueAsObject={false}
-						clearable
-						value={child.field}
-						onchange={(value) => setField(child, value)}
-					/>
-					<SingleSelect
-						label={i18n['scoria.label.operator']()}
-						options={[...operatorsFor(child.field)]}
-						labelProp="label"
-						valueProp="value"
-						valueAsObject={false}
-						clearable
-						value={child.operator}
-						onchange={(value) => setOperator(child, value)}
-					/>
-					<div class="value-editor">
-						{@render valueEditor(child, (value) => setValue(child, value))}
-					</div>
-					<Button
-						label={i18n['scoria.action.remove_condition']()}
-						iconLeft={{ name: 'circle-cross' }}
-						onclick={() => removeChild(child)}
-					/>
-				</div>
-			{:else}
-				<div class="subgroup">
-					<Self
-						root={child}
-						{onChange}
-						{fields}
-						{operatorsFor}
-						{valueEditor}
-						{defaultValueFor}
-						{allowGroups}
-						{maxDepth}
-						{addConditionLabel}
-						{addGroupLabel}
-						{andLabel}
-						{orLabel}
-						depth={depth + 1}
-					/>
-					<Button
-						label={i18n['scoria.action.remove_group']()}
-						iconLeft={{ name: 'circle-cross' }}
-						onclick={() => removeChild(child)}
-					/>
-				</div>
-			{/if}
-		{/each}
-	</div>
-
-	<div class="actions">
-		<Button
-			label={addConditionLabel}
-			iconLeft={{ name: 'circle-plus' }}
-			onclick={addLeaf}>{addConditionLabel}</Button
-		>
-		{#if allowGroups && depth < maxDepth}
-			<Button
-				label={addGroupLabel}
-				iconLeft={{ name: 'circle-plus' }}
-				onclick={addGroup}>{addGroupLabel}</Button
-			>
-		{/if}
-	</div>
-</div>
-
+</script>
+
+<div
+	class="group"
+	class:nested={depth > 0}
+>
+	<div class="combinator">
+		<Button
+			label={andLabel}
+			toggled={root.combinator === 'and'}
+			onclick={() => setCombinator('and')}>{andLabel}</Button
+		>
+		<Button
+			label={orLabel}
+			toggled={root.combinator === 'or'}
+			onclick={() => setCombinator('or')}>{orLabel}</Button
+		>
+	</div>
+
+	<div class="children">
+		{#each root.children as child (child.id)}
+			{#if child.kind === 'leaf'}
+				<div class="leaf">
+					<SingleSelect
+						label={i18n['scoria.label.field']()}
+						options={[...fields]}
+						labelProp="label"
+						valueProp="value"
+						valueAsObject={false}
+						clearable
+						value={child.field}
+						onchange={(value) => setField(child, value)}
+					/>
+					<SingleSelect
+						label={i18n['scoria.label.operator']()}
+						options={[...operatorsFor(child.field)]}
+						labelProp="label"
+						valueProp="value"
+						valueAsObject={false}
+						clearable
+						value={child.operator}
+						onchange={(value) => setOperator(child, value)}
+					/>
+					<div class="value-editor">
+						{@render valueEditor(child, (value) => setValue(child, value))}
+					</div>
+					<Button
+						label={i18n['scoria.action.remove_condition']()}
+						iconLeft={{ name: 'circle-cross' }}
+						onclick={() => removeChild(child)}
+					/>
+				</div>
+			{:else}
+				<div class="subgroup">
+					<Self
+						root={child}
+						{onChange}
+						{fields}
+						{operatorsFor}
+						{valueEditor}
+						{defaultValueFor}
+						{allowGroups}
+						{maxDepth}
+						{addConditionLabel}
+						{addGroupLabel}
+						{andLabel}
+						{orLabel}
+						depth={depth + 1}
+					/>
+					<Button
+						label={i18n['scoria.action.remove_group']()}
+						iconLeft={{ name: 'circle-cross' }}
+						onclick={() => removeChild(child)}
+					/>
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	<div class="actions">
+		<Button
+			label={addConditionLabel}
+			iconLeft={{ name: 'circle-plus' }}
+			onclick={addLeaf}>{addConditionLabel}</Button
+		>
+		{#if allowGroups && depth < maxDepth}
+			<Button
+				label={addGroupLabel}
+				iconLeft={{ name: 'circle-plus' }}
+				onclick={addGroup}>{addGroupLabel}</Button
+			>
+		{/if}
+	</div>
+</div>
+
 <style>.group {
   display: flex;
   flex-flow: column nowrap;
@@ -185,4 +185,4 @@ function setValue(leaf, value) {
   display: flex;
   flex-flow: row nowrap;
   gap: 0.5rem;
-}</style>
+}</style>

package/dist/Components/Contexts/ContextMenu.svelte

@@ -1,32 +1,32 @@
-<svelte:options runes />
-
-<!--
-@component
-Visual host for `ContextMenuContext`. Renders the fixed-positioned
-`<ul role="menu">` near the `(x, y)` coordinates the context exposes,
-and clamps the position so the menu never spills off the viewport.
-
-Mounted exactly once at the app root by `ContextWrapper`; consumers do
-not render `ContextMenu` directly. Open a menu through the context:
-
-```svelte
-<script lang="ts">
-	import { ContextMenuContext } from '@lavalogic/scoria';
-	import { getContext } from 'svelte';
-
-	const ctx = getContext<ContextMenuContext>(ContextMenuContext.identifier);
-</script>
-
-<button oncontextmenu={(e) => ctx.openContextMenu(e, items)}>
-	Right-click me
-</button>
-```
-
-### Keyboard
-
-`Escape` closes the menu and returns focus to the previously focused
-element; `ArrowUp` / `ArrowDown` cycle focus through the items.
--->
+<svelte:options runes />
+
+<!--
+@component
+Visual host for `ContextMenuContext`. Renders the fixed-positioned
+`<ul role="menu">` near the `(x, y)` coordinates the context exposes,
+and clamps the position so the menu never spills off the viewport.
+
+Mounted exactly once at the app root by `ContextWrapper`; consumers do
+not render `ContextMenu` directly. Open a menu through the context:
+
+```svelte
+<script lang="ts">
+	import { ContextMenuContext } from '@lavalogic/scoria';
+	import { getContext } from 'svelte';
+
+	const ctx = getContext<ContextMenuContext>(ContextMenuContext.identifier);
+</script>
+
+<button oncontextmenu={(e) => ctx.openContextMenu(e, items)}>
+	Right-click me
+</button>
+```
+
+### Keyboard
+
+`Escape` closes the menu and returns focus to the previously focused
+element; `ArrowUp` / `ArrowDown` cycle focus through the items.
+-->
 <script lang="ts">import { m as i18n } from "../../paraglide/messages.js";
 import { ContextMenuContext } from "../../Contexts/ContextMenuContext.svelte.js";
 import { devCatch } from "../../Helpers/Helpers.svelte.js";
@@ -101,52 +101,52 @@ function focusPrev() {
 	const index = items.indexOf(document.activeElement);
 	items.at((index - 1 + items.length) % items.length)?.focus();
 }
-</script>
-
-<svelte:body onclick={closeOnClickOutside} />
-
-{#if contextMenuContext.showMenu}
-	<ul
-		transition:fade={{ duration: fadeDuration }}
-		bind:this={menuEl}
-		style="top: {_y}px; left: {_x}px;"
-		role="menu"
-		aria-label={i18n['scoria.label.context_menu']()}
-		tabindex="-1"
-		onkeydown={(e) => {
-			if (e.key === 'Escape') {
-				e.stopImmediatePropagation();
-				e.stopPropagation();
-				e.preventDefault();
-				contextMenuContext.closeMenu();
-				refocusPrevious();
-			} else if (e.key == 'ArrowUp') {
-				e.stopImmediatePropagation();
-				e.stopPropagation();
-				e.preventDefault();
-				focusPrev();
-			} else if (e.key == 'ArrowDown') {
-				e.stopImmediatePropagation();
-				e.stopPropagation();
-				e.preventDefault();
-				focusNext();
-			}
-		}}
-	>
-		{#each contextMenuContext.items as item, index (item)}
-			<ContextMenuOption
-				{index}
-				disabled={item.disabled}
-				onclick={() => {
-					void item.callback();
-					contextMenuContext.closeMenu();
-				}}
-				text={item.text}
-			/>
-		{/each}
-	</ul>
-{/if}
-
+</script>
+
+<svelte:body onclick={closeOnClickOutside} />
+
+{#if contextMenuContext.showMenu}
+	<ul
+		transition:fade={{ duration: fadeDuration }}
+		bind:this={menuEl}
+		style="top: {_y}px; left: {_x}px;"
+		role="menu"
+		aria-label={i18n['scoria.label.context_menu']()}
+		tabindex="-1"
+		onkeydown={(e) => {
+			if (e.key === 'Escape') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				contextMenuContext.closeMenu();
+				refocusPrevious();
+			} else if (e.key == 'ArrowUp') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				focusPrev();
+			} else if (e.key == 'ArrowDown') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				focusNext();
+			}
+		}}
+	>
+		{#each contextMenuContext.items as item, index (item)}
+			<ContextMenuOption
+				{index}
+				disabled={item.disabled}
+				onclick={() => {
+					void item.callback();
+					contextMenuContext.closeMenu();
+				}}
+				text={item.text}
+			/>
+		{/each}
+	</ul>
+{/if}
+
 <style>ul {
   padding: 0.375rem;
   position: fixed;
@@ -161,4 +161,4 @@ function focusPrev() {
 
 ul:focus {
   outline: none;
-}</style>
+}</style>

package/dist/Components/Contexts/ContextMenuDivider.svelte

@@ -1,19 +1,19 @@
-<svelte:options runes />
-
-<!--
-@component
-Visual separator for {@link ContextMenu}. Renders a thin horizontal
-rule. The native `<hr>` ARIA mapping is `role="separator"`, which is
-the correct semantic inside a `role="menu"` group, so no explicit
-role is set.
-
-Intended for use between groups of `ContextMenuOption` entries inside
-a context menu rendered via the visual host.
--->
-<hr />
-
+<svelte:options runes />
+
+<!--
+@component
+Visual separator for {@link ContextMenu}. Renders a thin horizontal
+rule. The native `<hr>` ARIA mapping is `role="separator"`, which is
+the correct semantic inside a `role="menu"` group, so no explicit
+role is set.
+
+Intended for use between groups of `ContextMenuOption` entries inside
+a context menu rendered via the visual host.
+-->
+<hr />
+
 <style>hr {
   border-top: solid 1px #cbd4da;
   width: 100%;
   margin: 2px 0;
-}</style>
+}</style>

package/dist/Components/Contexts/ContextMenuOption.svelte

@@ -1,17 +1,17 @@
-<svelte:options runes />
-
-<!--
-@component
-A single row inside the {@link ContextMenu} host. Renders a
-`<button role="menuitem">` and assigns a roving `tabindex`: the
-first option (index `0`) receives focus on mount and is the only
-tab stop, all subsequent options carry `tabindex="-1"` so arrow-key
-navigation owns focus traversal within the menu.
-
-Consumers do not usually mount `ContextMenuOption` directly; the
-visual host iterates over `ContextMenuContext.items` and renders one
-option per entry.
--->
+<svelte:options runes />
+
+<!--
+@component
+A single row inside the {@link ContextMenu} host. Renders a
+`<button role="menuitem">` and assigns a roving `tabindex`: the
+first option (index `0`) receives focus on mount and is the only
+tab stop, all subsequent options carry `tabindex="-1"` so arrow-key
+navigation owns focus traversal within the menu.
+
+Consumers do not usually mount `ContextMenuOption` directly; the
+visual host iterates over `ContextMenuContext.items` and renders one
+option per entry.
+-->
 <script lang="ts">import { devCatch } from "../../Helpers/Helpers.svelte.js";
 import { tick } from "svelte";
 let { text = "", index, disabled = false, onclick, children } = $props();
@@ -27,29 +27,29 @@ $effect(() => {
 		}).catch(devCatch);
 	}
 });
-</script>
-
-<button
-	class="context-menu-item"
-	role="menuitem"
-	class:disabled
-	tabindex={index === 0 ? 0 : -1}
-	aria-disabled={disabled ? 'true' : undefined}
-	bind:this={element}
-	onclick={(e) => {
-		e.stopImmediatePropagation();
-		e.stopPropagation();
-		e.preventDefault();
-		void onclick?.(e);
-	}}
->
-	{#if text}
-		{text}
-	{:else if children}
-		{@render children()}
-	{/if}
-</button>
-
+</script>
+
+<button
+	class="context-menu-item"
+	role="menuitem"
+	class:disabled
+	tabindex={index === 0 ? 0 : -1}
+	aria-disabled={disabled ? 'true' : undefined}
+	bind:this={element}
+	onclick={(e) => {
+		e.stopImmediatePropagation();
+		e.stopPropagation();
+		e.preventDefault();
+		void onclick?.(e);
+	}}
+>
+	{#if text}
+		{text}
+	{:else if children}
+		{@render children()}
+	{/if}
+</button>
+
 <style>button {
   background-color: #ffffff;
   border: none;
@@ -78,4 +78,4 @@ button.disabled {
 
 button.disabled:hover {
   background: #ffffff;
-}</style>
+}</style>

package/dist/Components/Contexts/Toast.svelte

@@ -1,26 +1,26 @@
-<svelte:options runes />
-
-<!--
-@component
-Single toast rendering. Renders a pill near the bottom-right of the
-viewport via `ToastContainer`, sliding in vertically. The severity of
-the underlying toast drives both the colouring and the live-region
-semantics:
-
-- `Validity.Invalid` -> `role="alert"`, `aria-live="assertive"`.
-- All other severities -> `role="status"`, `aria-live="polite"`.
-
-The slide transition animates the pill's height (the `y` axis) so the
-message keeps its final width for the whole animation — animating the
-`x` axis instead reflows the text from stacked-and-wrapped to a single
-line as the pill widens. It honours `prefers-reduced-motion` through
-the shared `usePrefersReducedMotion` helper; when the user has opted in
-the duration collapses to zero. The copy action is only shown when
-`navigator.clipboard` is present (HTTPS or `localhost`).
--->
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<!--
+@component
+Single toast rendering. Renders a pill near the bottom-right of the
+viewport via `ToastContainer`, sliding in vertically. The severity of
+the underlying toast drives both the colouring and the live-region
+semantics:
+
+- `Validity.Invalid` -> `role="alert"`, `aria-live="assertive"`.
+- All other severities -> `role="status"`, `aria-live="polite"`.
+
+The slide transition animates the pill's height (the `y` axis) so the
+message keeps its final width for the whole animation — animating the
+`x` axis instead reflows the text from stacked-and-wrapped to a single
+line as the pill widens. It honours `prefers-reduced-motion` through
+the shared `usePrefersReducedMotion` helper; when the user has opted in
+the duration collapses to zero. The copy action is only shown when
+`navigator.clipboard` is present (HTTPS or `localhost`).
+-->
+<script
+	lang="ts"
+	module
 >import { m as i18n } from "../../paraglide/messages.js";
 import { ColourSet } from "../../scss/colours.js";
 import { Size } from "../../Types/Internal/Size.js";
@@ -28,57 +28,57 @@ import { Validity } from "../../Types/Internal/Validity.js";
 import { slide } from "svelte/transition";
 import Action from "../Action.svelte";
 import Icon from "../Icon.svelte";
-</script>
-
+</script>
+
 <script lang="ts">import { usePrefersReducedMotion } from "../../Helpers/prefersReducedMotion.svelte.js";
 let { toast, copy } = $props();
 const reducedMotion = usePrefersReducedMotion();
 const slideDuration = $derived(reducedMotion.matches ? 0 : 500);
-</script>
-
-<output
-	role={toast.result == Validity.Invalid ? 'alert' : 'status'}
-	aria-live={toast.result == Validity.Invalid ? 'assertive' : 'polite'}
-	class:info={toast.result == Validity.Info}
-	class:success={toast.result == Validity.Valid}
-	class:warning={toast.result == Validity.Warning}
-	class:error={toast.result == Validity.Invalid}
-	transition:slide={{ axis: 'y', duration: slideDuration }}
->
-	<div>
-		<div class="noshrink">
-			{#if toast.copyable != false && navigator.clipboard}
-				<Action
-					onclick={copy}
-					icon={{ name: 'copy' }}
-					label={i18n['scoria.action.copy_to_clipboard']()}
-					size={Size.MediumLarge}
-					colourSet={ColourSet.Auxiliary}
-				/>
-			{:else}
-				<Icon
-					name="info"
-					size={Size.MediumLarge}
-				/>
-			{/if}
-		</div>
-		<span>{toast.message}</span>
-		{#if toast.closeable}
-			<div class="noshrink">
-				<Action
-					size={Size.MediumLarge}
-					icon={{ name: 'cross' }}
-					label={i18n['scoria.action.dismiss']()}
-					onclick={() => {
-						toast.close?.();
-					}}
-					colourSet={ColourSet.Auxiliary}
-				/>
-			</div>
-		{/if}
-	</div>
-</output>
-
+</script>
+
+<output
+	role={toast.result == Validity.Invalid ? 'alert' : 'status'}
+	aria-live={toast.result == Validity.Invalid ? 'assertive' : 'polite'}
+	class:info={toast.result == Validity.Info}
+	class:success={toast.result == Validity.Valid}
+	class:warning={toast.result == Validity.Warning}
+	class:error={toast.result == Validity.Invalid}
+	transition:slide={{ axis: 'y', duration: slideDuration }}
+>
+	<div>
+		<div class="noshrink">
+			{#if toast.copyable != false && navigator.clipboard}
+				<Action
+					onclick={copy}
+					icon={{ name: 'copy' }}
+					label={i18n['scoria.action.copy_to_clipboard']()}
+					size={Size.MediumLarge}
+					colourSet={ColourSet.Auxiliary}
+				/>
+			{:else}
+				<Icon
+					name="info"
+					size={Size.MediumLarge}
+				/>
+			{/if}
+		</div>
+		<span>{toast.message}</span>
+		{#if toast.closeable}
+			<div class="noshrink">
+				<Action
+					size={Size.MediumLarge}
+					icon={{ name: 'cross' }}
+					label={i18n['scoria.action.dismiss']()}
+					onclick={() => {
+						toast.close?.();
+					}}
+					colourSet={ColourSet.Auxiliary}
+				/>
+			</div>
+		{/if}
+	</div>
+</output>
+
 <style>output {
   font-weight: 700;
   font-size: 1.125rem;
@@ -112,4 +112,4 @@ output span {
   overflow-wrap: anywhere;
   min-width: 0;
   flex: 1 1 auto;
-}</style>
+}</style>