@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Contexts/Toast.svelte

@@ -1,68 +1,91 @@
-<svelte:options runes />
-
-<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">
-	let { toast, copy }: ToastProps = $props();
-</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: 500 }}
->
-	<div>
-		<div class="noshrink">
-			{#if toast.copyable != false && navigator.clipboard}
-				<Action
-					onclick={copy}
-					icon={{ name: 'copy' }}
-					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' }}
-					onclick={() => {
-						toast.close?.();
-					}}
-					colourSet={ColourSet.Auxiliary}
-				/>
-			</div>
-		{/if}
-	</div>
-</output>
-
+<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>
+
 <style>output {
   font-weight: 700;
   font-size: 1.125rem;
   padding: 0.75rem;
   border-radius: 4px;
+  max-width: var(--toast-max-width, 32rem);
 }
 output.info, output.success {
   color: #ffffff;
@@ -86,7 +109,8 @@ output > div {
   align-items: center;
 }
 output span {
-  text-wrap: nowrap;
-  word-break: keep-all;
-  overflow: hidden;
-}</style>
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  min-width: 0;
+  flex: 1 1 auto;
+}</style>

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

@@ -1,4 +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
+ * 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`).
+ */
 declare const Toast: import("svelte").Component<ToastProps, {}, "">;
 type Toast = ReturnType<typeof Toast>;
 export default Toast;

package/dist/Components/Contexts/ToastContainer.svelte

@@ -1,57 +1,76 @@
-<svelte:options runes />
-
-<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) {
-		//clipboard doesn't exist in http connections. This may be redundant now but you never know
-		// 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;
-		}
-
-		// copy plain value
-
-		navigator.clipboard.writeText(text).catch(devCatch);
-		toastContext.toast({
-			result: Validity.Info,
-			message: 'Message copied to clipboard',
-			copyable: false
-		});
-	}
-</script>
-
-<section>
-	{#each toastContext.toasts as toast (toast)}
-		<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;
-  bottom: 8rem;
-  right: 2rem;
+  bottom: var(--toast-bottom, 8rem);
+  right: var(--toast-right, 2rem);
   display: flex;
   position: fixed;
   flex-flow: column-reverse nowrap;
   justify-content: flex-end;
   align-items: flex-end;
-  z-index: 9999;
-}</style>
+  z-index: 99999;
+}</style>

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

@@ -1,3 +1,17 @@
+/**
+ * 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.
+ */
 declare const ToastContainer: import("svelte").Component<Record<string, never>, {}, "">;
 type ToastContainer = ReturnType<typeof ToastContainer>;
 export default ToastContainer;

package/dist/Components/Contexts/ToastProps.d.ts

@@ -1,5 +1,18 @@
 import type { IdentifiableToastMessage } from '../../Types/Internal/IdentifiableToastMessage.js';
+/**
+ * Props for {@link Toast}.
+ *
+ * `Toast` is the per-message renderer used by `ToastContainer`. The
+ * container provides the `copy` callback because copy-to-clipboard is
+ * a host-level concern (the host knows which message text or verbose
+ * representation to write).
+ */
 export interface ToastProps {
+    /** The toast message and metadata to render. */
     toast: IdentifiableToastMessage;
-    copy: () => void;
+    /**
+     * Click handler for the copy action. Allowed to return a promise
+     * so callers can await the underlying `navigator.clipboard.writeText`.
+     */
+    copy: () => void | Promise<void>;
 }

package/dist/Components/Contexts/Tooltip.svelte

@@ -1,43 +1,54 @@
-<svelte:options runes />
-
-<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: 9999;
+  z-index: 99999;
   border-radius: 4px;
-  background-color: black;
-  color: white;
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1333333333);
+  background-color: #3a4952;
+  color: #ffffff;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.13);
   border: solid 2px #dae0e5;
 }
 .tooltip-wrapper .tooltip {
   padding: 0.5rem;
-  background-color: black;
+  background-color: #3a4952;
   border-radius: 4px;
   font-weight: 500;
-  white-space: preserve;
+  white-space: pre-wrap;
 }
 .tooltip-wrapper.top-arrow {
   left: var(--x, 0);
@@ -54,7 +65,7 @@
   left: 50%;
   translate: -50% -50%;
   transform: rotate(45deg);
-  background-color: black;
+  background-color: #3a4952;
   border: solid 2px #dae0e5;
 }
 .tooltip-wrapper.bottom-arrow {
@@ -72,7 +83,7 @@
   left: 50%;
   translate: -50% -50%;
   transform: rotate(45deg);
-  background-color: black;
+  background-color: #3a4952;
   border: solid 2px #dae0e5;
 }
 .tooltip-wrapper.left-arrow {
@@ -90,7 +101,7 @@
   left: 0;
   translate: -50% -50%;
   transform: rotate(45deg);
-  background-color: black;
+  background-color: #3a4952;
   border: solid 2px #dae0e5;
 }
 .tooltip-wrapper.right-arrow {
@@ -108,6 +119,6 @@
   left: 100%;
   translate: -50% -50%;
   transform: rotate(45deg);
-  background-color: black;
+  background-color: #3a4952;
   border: solid 2px #dae0e5;
-}</style>
+}</style>

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

@@ -1,3 +1,13 @@
+/**
+ * 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.
+ */
 declare const Tooltip: import("svelte").Component<Record<string, never>, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/Components/DataMatrixIcon.svelte

@@ -1,43 +1,114 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
-	import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
-
-	const { icon, interactive = false, title, oncontextmenu }: DataMatrixIconProps = $props();
-
-	let svgContainer = $state<HTMLDivElement | null>(null);
-
-	$effect(() => {
-		if (svgContainer != null) {
-			// eslint-disable-next-line svelte/no-dom-manipulating
-			svgContainer.innerHTML = '';
-			icon.setAttribute('width', '64');
-			icon.setAttribute('height', '64');
-			// eslint-disable-next-line svelte/no-dom-manipulating
-			svgContainer.appendChild(icon);
-		}
-	});
-</script>
-
-{#if interactive}
-	<button
-		aria-label="Edit Barcode Value"
-		onkeydown={passthrough}
-		title="Right click to edit barcode value for the {title} command"
-		oncontextmenu={(e) => {
-			if (oncontextmenu) {
-				e.preventDefault();
-				oncontextmenu(e);
-			}
-		}}
-	>
-		<div class="fit" bind:this={svgContainer}></div>
-	</button>
-{:else}
-	<div class="fit" bind:this={svgContainer}></div>
-{/if}
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
+	import Icon from './Icon.svelte';
+
+	const {
+		icon,
+		interactive = false,
+		title,
+		oncontextmenu,
+		ariaLabel = 'Edit Barcode Value',
+	}: DataMatrixIconProps = $props();
+
+	let svgContainer = $state<HTMLDivElement | null>(null);
+
+	// Track the last SVG we mounted so the effect only re-runs when the
+	// underlying SVG identity changes. Repeated parent renders that hand
+	// back the same node should NOT force a DOM replacement; each replace
+	// forces layout, which becomes expensive with many barcodes on a screen.
+	let lastSvg: SVGSVGElement | undefined = undefined;
+
+	/**
+	 * Defensively sanitise the SVG before mounting it.
+	 *
+	 * SECURITY: although the prop is branded `DataMatrixSvg` to discourage
+	 * arbitrary callers, the brand is type-only. As defence in depth we
+	 * strip `<script>` nodes plus any `on*` / `href` / `xlink:href`
+	 * attributes from the cloned tree before it enters the document. This
+	 * neutralises stored-XSS sinks (`<script>`, `<image href="javascript:...">`,
+	 * inline event handlers) without depending on caller discipline.
+	 */
+	function sanitiseSvg(node: SVGSVGElement): void {
+		node.querySelectorAll('script').forEach((s) => {
+			s.remove();
+		});
+		node.querySelectorAll('*').forEach((el) => {
+			for (const attr of [...el.attributes]) {
+				const lower = attr.name.toLowerCase();
+				if (lower.startsWith('on') || lower === 'href' || lower === 'xlink:href') {
+					el.removeAttribute(attr.name);
+				}
+			}
+		});
+	}
+
+	$effect(() => {
+		if (icon.kind !== 'svg') {
+			// icon-props branch renders an <Icon> below; nothing for the
+			// SVG mount effect to do, and we clear the stale mount so a
+			// later toggle back to kind: 'svg' re-mounts correctly.
+			if (svgContainer != null && lastSvg !== undefined) {
+				// Mirror of the mount path below; `replaceChildren()` is the
+				// cheapest way to detach the previously cloned SVG.
+				// eslint-disable-next-line svelte/no-dom-manipulating
+				svgContainer.replaceChildren();
+				lastSvg = undefined;
+			}
+			return;
+		}
+		const source = icon.svg;
+		if (svgContainer != null && source !== lastSvg) {
+			// Clone so we never mutate the consumer-supplied node. If the
+			// same SVG is rendered into multiple DataMatrixIcon instances or
+			// reused elsewhere the original keeps its original attributes.
+			const local = source.cloneNode(true) as SVGSVGElement;
+			sanitiseSvg(local);
+			local.setAttribute('width', '64');
+			local.setAttribute('height', '64');
+			// `replaceChildren` is cheaper than `innerHTML = ''` + `appendChild`:
+			// it skips the HTML parse step and only touches the child list.
+			// eslint-disable-next-line svelte/no-dom-manipulating
+			svgContainer.replaceChildren(local);
+			lastSvg = source;
+		}
+	});
+</script>
+
+{#if interactive}
+	<button
+		aria-label={ariaLabel}
+		onkeydown={passthrough}
+		title="Right click to edit barcode value for the {title} command"
+		oncontextmenu={(e) => {
+			if (oncontextmenu) {
+				e.preventDefault();
+				oncontextmenu(e);
+			}
+		}}
+	>
+		<div
+			class="fit"
+			bind:this={svgContainer}
+		>
+			{#if icon.kind === 'icon-props'}
+				<Icon {...icon.iconProps} />
+			{/if}
+		</div>
+	</button>
+{:else}
+	<div
+		class="fit"
+		bind:this={svgContainer}
+	>
+		{#if icon.kind === 'icon-props'}
+			<Icon {...icon.iconProps} />
+		{/if}
+	</div>
+{/if}
+
 <style>button {
   display: contents;
   cursor: pointer;
@@ -46,5 +117,5 @@
 div.fit {
   background-color: #ffffff;
   display: flex;
-  padding: 8px;
-}</style>
+  padding: 0.5rem;
+}</style>