@lavalogic/scoria 0.37.44 → 0.37.46

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,62 +1,62 @@
-<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';
-	import type { ContextMenuOptionProps } from './ContextMenuOptionProps.js';
-
-	let { text = '', index, disabled = false, onclick, children }: ContextMenuOptionProps = $props();
-
-	let element = $state<HTMLButtonElement | undefined>();
-
-	$effect(() => {
-		void element;
-		// Only the first option seeds focus. The check stays inside the
-		// effect (rather than gating registration) so Svelte's reactive
-		// dependency on `index` is recorded.
-		if (index === 0) {
-			tick()
-				.then(() => {
-					element?.focus();
-				})
-				.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>
-
+<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';
+	import type { ContextMenuOptionProps } from './ContextMenuOptionProps.js';
+
+	let { text = '', index, disabled = false, onclick, children }: ContextMenuOptionProps = $props();
+
+	let element = $state<HTMLButtonElement | undefined>();
+
+	$effect(() => {
+		void element;
+		// Only the first option seeds focus. The check stays inside the
+		// effect (rather than gating registration) so Svelte's reactive
+		// dependency on `index` is recorded.
+		if (index === 0) {
+			tick()
+				.then(() => {
+					element?.focus();
+				})
+				.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>
+
 <style>button {
   background-color: #ffffff;
   border: none;
@@ -85,4 +85,4 @@ button.disabled {
 
 button.disabled:hover {
   background: #ffffff;
-}</style>
+}</style>

package/dist/Components/Contexts/Toast.svelte

@@ -1,85 +1,88 @@
-<svelte:options runes />
-
-<!--
-@component
-Single toast rendering. Renders a horizontally-sliding pill near the
-bottom-right of the viewport via `ToastContainer`. 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 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 { ColourSet } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import { Validity } from '../../Types/Internal/Validity.js';
-	import { slide } from 'svelte/transition';
-	import Action from '../Action.svelte';
-	import Icon from '../Icon.svelte';
-	import type { ToastProps } from './ToastProps.js';
-</script>
-
-<script lang="ts">
-	import { usePrefersReducedMotion } from '../../Helpers/prefersReducedMotion.svelte.js';
-
-	let { toast, copy }: ToastProps = $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: 'x', duration: slideDuration }}
->
-	<div>
-		<div class="noshrink">
-			{#if toast.copyable != false && navigator.clipboard}
-				<Action
-					onclick={copy}
-					icon={{ name: 'copy' }}
-					label="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="Dismiss"
-					onclick={() => {
-						toast.close?.();
-					}}
-					colourSet={ColourSet.Auxiliary}
-				/>
-			</div>
-		{/if}
-	</div>
-</output>
-
+<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 { ColourSet } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import { Validity } from '../../Types/Internal/Validity.js';
+	import { slide } from 'svelte/transition';
+	import Action from '../Action.svelte';
+	import Icon from '../Icon.svelte';
+	import type { ToastProps } from './ToastProps.js';
+</script>
+
+<script lang="ts">
+	import { usePrefersReducedMotion } from '../../Helpers/prefersReducedMotion.svelte.js';
+
+	let { toast, copy }: ToastProps = $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="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="Dismiss"
+					onclick={() => {
+						toast.close?.();
+					}}
+					colourSet={ColourSet.Auxiliary}
+				/>
+			</div>
+		{/if}
+	</div>
+</output>
+
 <style>output {
   font-weight: 700;
   font-size: 1.125rem;
@@ -113,4 +116,4 @@ output span {
   overflow-wrap: anywhere;
   min-width: 0;
   flex: 1 1 auto;
-}</style>
+}</style>

package/dist/Components/Contexts/Toast.svelte.d.ts

@@ -1,15 +1,18 @@
 import type { ToastProps } from './ToastProps.js';
 /**
- * Single toast rendering. Renders a horizontally-sliding pill near the
- * bottom-right of the viewport via `ToastContainer`. The severity of the
- * underlying toast drives both the colouring and the live-region
+ * 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 honours `prefers-reduced-motion` through the
- * shared `usePrefersReducedMotion` helper; when the user has opted in
+ * 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`).
  */

package/dist/Components/Contexts/ToastContainer.svelte

@@ -1,67 +1,67 @@
-<svelte:options runes />
-
-<!--
-@component
-Live region for the {@link ToastContext}. Iterates the context's
-queue and renders one `Toast` per message, providing the
-copy-to-clipboard callback (the container owns the clipboard logic
-because the toast itself only knows the message it should copy).
-
-The wrapping `<section>` carries `role="region"` plus
-`aria-live="polite"` so multiple toast appearances are announced as
-a single rolling region without interrupting the user; individual
-`Toast` elements override `aria-live` to `assertive` for hard errors.
-
-Mounted once at the app root by `ContextWrapper`; consumers should
-not render this directly.
--->
-<script lang="ts">
-	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
-	import { devCatch } from '../../Helpers/Helpers.svelte.js';
-	import { Validity } from '../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
-	import Toast from './Toast.svelte';
-
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
-
-	function copyDataToClipboard(text: string): void {
-		// `navigator.clipboard` is `undefined` on insecure (HTTP)
-		// origins and in some embedded WebViews. The compile-time
-		// type says it is always defined, hence the eslint disable;
-		// the runtime check is the load-bearing one.
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		if (!navigator.clipboard) {
-			toastContext.toast({
-				result: Validity.Invalid,
-				message: 'Cannot Copy in an Insecure Connection',
-				copyable: false,
-			});
-			return;
-		}
-
-		navigator.clipboard.writeText(text).catch(devCatch);
-		toastContext.toast({
-			result: Validity.Info,
-			message: 'Message copied to clipboard',
-			copyable: false,
-		});
-	}
-</script>
-
-<section
-	aria-live="polite"
-	aria-label="Notifications"
->
-	{#each toastContext.toasts as toast (toast.id)}
-		<Toast
-			{toast}
-			copy={() => {
-				copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
-			}}
-		/>
-	{/each}
-</section>
-
+<svelte:options runes />
+
+<!--
+@component
+Live region for the {@link ToastContext}. Iterates the context's
+queue and renders one `Toast` per message, providing the
+copy-to-clipboard callback (the container owns the clipboard logic
+because the toast itself only knows the message it should copy).
+
+The wrapping `<section>` carries `role="region"` plus
+`aria-live="polite"` so multiple toast appearances are announced as
+a single rolling region without interrupting the user; individual
+`Toast` elements override `aria-live` to `assertive` for hard errors.
+
+Mounted once at the app root by `ContextWrapper`; consumers should
+not render this directly.
+-->
+<script lang="ts">
+	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { Validity } from '../../Types/Internal/Validity.js';
+	import { getContext } from 'svelte';
+	import Toast from './Toast.svelte';
+
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+
+	function copyDataToClipboard(text: string): void {
+		// `navigator.clipboard` is `undefined` on insecure (HTTP)
+		// origins and in some embedded WebViews. The compile-time
+		// type says it is always defined, hence the eslint disable;
+		// the runtime check is the load-bearing one.
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		if (!navigator.clipboard) {
+			toastContext.toast({
+				result: Validity.Invalid,
+				message: 'Cannot Copy in an Insecure Connection',
+				copyable: false,
+			});
+			return;
+		}
+
+		navigator.clipboard.writeText(text).catch(devCatch);
+		toastContext.toast({
+			result: Validity.Info,
+			message: 'Message copied to clipboard',
+			copyable: false,
+		});
+	}
+</script>
+
+<section
+	aria-live="polite"
+	aria-label="Notifications"
+>
+	{#each toastContext.toasts as toast (toast.id)}
+		<Toast
+			{toast}
+			copy={() => {
+				copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
+			}}
+		/>
+	{/each}
+</section>
+
 <style>section {
   user-select: none;
   gap: 0.5rem;
@@ -73,4 +73,4 @@ not render this directly.
   justify-content: flex-end;
   align-items: flex-end;
   z-index: 99999;
-}</style>
+}</style>

package/dist/Components/Contexts/Tooltip.svelte

@@ -1,39 +1,39 @@
-<svelte:options runes />
-
-<!--
-@component
-Visual host for `TooltipContext`. Renders a fixed-position tooltip at
-the coordinates the context exposes, with a CSS arrow that points
-back toward the anchored element on the configured side.
-
-The tooltip just appears and disappears; no transition is applied,
-which is the conservative choice for `prefers-reduced-motion`. Reads
-the context with `getContext` and relies on `ContextWrapper` to have
-set it up at the app root.
--->
-<script lang="ts">
-	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
-	import { Side } from '../../Types/Internal/Side.js';
-	import { getContext } from 'svelte';
-	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
-</script>
-
-{#if tooltipContext.isShowingTooltip}
-	<div
-		role="tooltip"
-		style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
-		class="tooltip-wrapper"
-		class:top-arrow={tooltipContext.anchor === Side.Top}
-		class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
-		class:left-arrow={tooltipContext.anchor === Side.Left}
-		class:right-arrow={tooltipContext.anchor === Side.Right}
-	>
-		<div class="tooltip">
-			{tooltipContext.text}
-		</div>
-	</div>
-{/if}
-
+<svelte:options runes />
+
+<!--
+@component
+Visual host for `TooltipContext`. Renders a fixed-position tooltip at
+the coordinates the context exposes, with a CSS arrow that points
+back toward the anchored element on the configured side.
+
+The tooltip just appears and disappears; no transition is applied,
+which is the conservative choice for `prefers-reduced-motion`. Reads
+the context with `getContext` and relies on `ContextWrapper` to have
+set it up at the app root.
+-->
+<script lang="ts">
+	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
+	import { Side } from '../../Types/Internal/Side.js';
+	import { getContext } from 'svelte';
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+</script>
+
+{#if tooltipContext.isShowingTooltip}
+	<div
+		role="tooltip"
+		style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
+		class="tooltip-wrapper"
+		class:top-arrow={tooltipContext.anchor === Side.Top}
+		class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
+		class:left-arrow={tooltipContext.anchor === Side.Left}
+		class:right-arrow={tooltipContext.anchor === Side.Right}
+	>
+		<div class="tooltip">
+			{tooltipContext.text}
+		</div>
+	</div>
+{/if}
+
 <style>.tooltip-wrapper {
   position: fixed;
   z-index: 99999;
@@ -121,4 +121,4 @@ set it up at the app root.
   transform: rotate(45deg);
   background-color: #3a4952;
   border: solid 2px #dae0e5;
-}</style>
+}</style>