@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/AccordionGroup.svelte

@@ -8,6 +8,7 @@
 
 	import { cubicOut } from 'svelte/easing';
 	import { slide } from 'svelte/transition';
+	import { usePrefersReducedMotion } from '../Helpers/prefersReducedMotion.svelte.js';
 	import type { AccordionGroupProps } from './AccordionGroupProps.js';
 
 	let {
@@ -17,6 +18,9 @@
 		noRadius = false,
 		grow = false,
 	}: AccordionGroupProps<CommonDenominator> = $props();
+
+	const reducedMotion = usePrefersReducedMotion();
+	const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
 </script>
 
 <div
@@ -24,7 +28,7 @@
 	class:no-radius={noRadius}
 	class:grow
 >
-	{#each tabs as option (option)}
+	{#each tabs as option (option.label)}
 		{@const isSelected = selected === option}
 		<AccordionGroupButton
 			{option}
@@ -32,7 +36,7 @@
 			selected={isSelected}
 		/>
 		{#if isSelected}
-			<div transition:slide={{ duration: 200, easing: cubicOut }}>
+			<div transition:slide={{ duration: slideDuration, easing: cubicOut }}>
 				{@render selected.content(selected.args)}
 			</div>
 		{/if}

package/dist/Components/AccordionGroupButton.svelte

@@ -4,119 +4,119 @@
 	lang="ts"
 	generics="Args"
 >
-	import { devCatch } from '../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../scss/colours.js';
+	import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
+	import { Colour } from '../scss/colours.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import type { AccordionGroupButtonProps } from './AccordionGroupButtonProps.js';
-	import Action from './Action.svelte';
 	import Icon from './Icon.svelte';
 
-	let {
+	const {
 		option,
 		selected: isSelected,
 		noRadius = false,
 	}: AccordionGroupButtonProps<Args> = $props();
 
-	let disabled = $state(true);
-	let isVisible = $state(true);
-	let isValid = $state(true);
-
-	$effect(() => {
-		if (typeof option.isValid === 'boolean') {
-			isValid = option.isValid;
-		} else {
-			option.isValid
-				?.then((v) => {
-					isValid = v;
-				})
-				.catch(devCatch);
-		}
-	});
-	$effect(() => {
-		if (typeof option.disabled === 'boolean') {
-			disabled = option.disabled;
-		} else if (option.disabled == undefined) {
-			disabled = false;
-		} else {
-			option.disabled
-				.then((v) => {
-					disabled = v;
-				})
-				.catch(devCatch);
-		}
-	});
-
-	$effect(() => {
-		if (typeof option.visible === 'boolean') {
-			isVisible = option.visible;
-		} else if (option.visible == undefined) {
-			isVisible = true;
-		} else {
-			option.visible
-				.then((v) => {
-					isVisible = v;
-				})
-				.catch(devCatch);
-		}
-	});
+	const isValid = useAsyncFlag(() => option.isValid, true);
+	const disabled = useAsyncFlag(() => option.disabled, false);
+	const isVisible = useAsyncFlag(() => option.visible, true);
 </script>
 
+<!--
+	Single-button row: the whole header is one interactive element, with the
+	expand chevron rendered as decorative content of that same button. This
+	resolves the previous a11y issue (a nested toggle inside the row read as
+	two interactive elements). The `extras` snippet is intentionally placed
+	OUTSIDE the button so that consumers passing interactive content into
+	`extras` don't create nested-button markup.
+-->
 <div
+	class="tab-wrapper"
 	class:isSelected
-	class="tab"
-	class:invalid={!isValid}
-	class:hidden={!isVisible}
+	class:invalid={!isValid.value}
+	class:hidden={!isVisible.value}
 	class:no-radius={noRadius}
 >
-	{#if typeof option.label == 'string'}
-		{option.label}
-	{:else}
-		{@render option.label()}
-	{/if}
-	<div class="spacer"></div>
+	<button
+		type="button"
+		class="tab"
+		disabled={disabled.value}
+		aria-expanded={isSelected}
+		aria-label={isSelected ? 'Collapse section' : 'Expand section'}
+		onclick={() => {
+			option.onclick();
+		}}
+	>
+		{#if typeof option.label == 'string'}
+			<span class="label">{option.label}</span>
+		{:else}
+			{@render option.label()}
+		{/if}
+		<div class="spacer"></div>
 
-	{#if option.extras}
-		{@render option.extras()}
-	{/if}
-	{#if !isValid}
+		{#if !isValid.value}
+			<Icon
+				name="error"
+				colour={Colour['$error-border']}
+				size={Size.Small}
+			/>
+		{/if}
 		<Icon
-			name="error"
-			colour={Colour['$error-border']}
-			size={Size.Small}
+			name={isSelected ? 'circle-minus' : 'circle-plus'}
+			colour={Colour['$primary-blue-13']}
+			size={Size.Medium}
 		/>
+	</button>
+	{#if option.extras}
+		<div class="extras">
+			{@render option.extras()}
+		</div>
 	{/if}
-	<Action
-		icon={{ name: isSelected ? 'circle-minus' : 'circle-plus' }}
-		backgroundColour="transparent"
-		colourSet={ColourSet.Info}
-		{disabled}
-		onclick={() => {
-			option.onclick();
-		}}
-	/>
 </div>
 
-<style>.tab {
+<style>.tab-wrapper {
+  position: relative;
+  background-color: #f4f7f9;
+  border-bottom: solid 1px #cbd4da;
+}
+.tab-wrapper.hidden {
+  display: none !important;
+}
+
+.tab {
   color: #3a4952;
   font-size: 1rem;
   font-weight: 500;
-  padding: 1rem;
+  padding: 1.0005rem;
   border: none;
+  background: transparent;
   text-align: start;
+  cursor: pointer;
   display: flex;
   flex-flow: row nowrap;
   flex-shrink: 1;
   align-items: center;
   width: 100%;
   gap: 1.5rem;
-  position: relative;
   transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
-  background-color: #f4f7f9;
-  border-bottom: solid 1px #cbd4da;
 }
-.tab.hidden {
-  display: none !important;
+.tab[disabled] {
+  cursor: default;
+  opacity: 0.6;
 }
 .tab .spacer {
   margin: auto;
+}
+.tab .label {
+  text-align: start;
+}
+
+.extras {
+  position: absolute;
+  right: 4.5005rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  pointer-events: auto;
 }</style>

package/dist/Components/AccordionGroupButtonProps.d.ts

@@ -1,21 +1,40 @@
+import type { AsyncFlag } from '../Types/Internal/AsyncFlag.js';
 import type { Snippet } from 'svelte';
-import type { IconProps } from './IconProps.js';
+import type { PartialIconProps } from './PartialIconProps.js';
+/**
+ * Props for AccordionGroupButton, the header row of an accordion section.
+ */
 export interface AccordionGroupButtonProps<Args> {
+    /** The section descriptor whose header is being rendered. */
     option: AccordionGroupOption<Args>;
+    /** Whether this section is currently expanded. */
     selected: boolean;
+    /** Strip the corner radius for sections joined to other surfaces. */
     noRadius?: boolean;
 }
+/**
+ * Describes one expandable section inside AccordionGroup. The header
+ * `label` may be either a plain string or a Snippet for richer markup.
+ */
 export interface AccordionGroupOption<Args> {
+    /** Header label. String values are rendered directly; snippets render via `@render`. */
     label: string | Snippet;
+    /** Body content. Receives `args` so the parent can pass typed context. */
     content: Snippet<[Args]>;
+    /** Optional extra snippet rendered next to the header before the expand action. */
     extras?: Snippet;
+    /** Invoked when the user expands or collapses this section. */
     onclick: () => void;
+    /** Args forwarded to `content`. */
     args: Args;
-    iconLeft?: IconProps;
-    iconRight?: IconProps;
-    isValid?: boolean | Promise<boolean>;
-    /** default false */
-    disabled?: boolean | Promise<boolean>;
-    /** default true */
-    visible?: boolean | Promise<boolean>;
+    /** Icon rendered to the left of the header. */
+    iconLeft?: PartialIconProps;
+    /** Icon rendered to the right of the header. */
+    iconRight?: PartialIconProps;
+    /** AsyncFlag of a boolean. Section is rendered invalid when this resolves to false. */
+    isValid?: AsyncFlag<boolean>;
+    /** AsyncFlag of a boolean. Disables the expand action when true. Defaults to false. */
+    disabled?: AsyncFlag<boolean>;
+    /** AsyncFlag of a boolean. Hides the section when this resolves to false. Defaults to true. */
+    visible?: AsyncFlag<boolean>;
 }

package/dist/Components/AccordionGroupProps.d.ts

@@ -1,8 +1,16 @@
 import type { TabOption } from '../Types/Internal/TabOption.js';
+/**
+ * Props for AccordionGroup, a stacked list of expandable sections.
+ */
 export interface AccordionGroupProps<CommonDenominator> {
+    /** Optional name used for future history persistence (not currently wired). */
     name?: string;
+    /** Strip the outer border radius. */
     noRadius?: boolean;
+    /** Stretch to fill the parent's flex axis. */
     grow?: boolean;
-    tabs: Array<TabOption<CommonDenominator>>;
-    selected: TabOption<CommonDenominator> | undefined;
+    /** The sections to render. Keyed by `option.label`. */
+    tabs: ReadonlyArray<TabOption<CommonDenominator>>;
+    /** Currently expanded section, matched by reference. */
+    selected?: TabOption<CommonDenominator>;
 }

package/dist/Components/Action.svelte

@@ -1,14 +1,15 @@
 <svelte:options runes />
 
-<script module lang="ts">
-	import { TooltipContext } from '../Contexts/TooltipContext.svelte.js';
-	import { Delay } from '../Delay/Delay.js';
+<script
+	module
+	lang="ts"
+>
 	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import { useTooltip } from '../Helpers/useTooltip.svelte.js';
 	import { Shape } from '../Types/Internal/Shape.js';
 	import { Side } from '../Types/Internal/Side.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import { ColourSet } from '../scss/colours.js';
-	import { getContext } from 'svelte';
 	import type { ActionProps } from './ActionProps.js';
 	import Icon from './Icon.svelte';
 
@@ -24,7 +25,7 @@
 			[Size.DoubleXLarge]: 0.8125,
 			[Size.TripleXLarge]: 0.875,
 			[Size.FillWidth]: -1,
-			[Size.FillHeight]: -1
+			[Size.FillHeight]: -1,
 		},
 		[Shape.Circle]: {
 			[Size.Tiny]: 0.1875,
@@ -37,8 +38,8 @@
 			[Size.DoubleXLarge]: 2.25,
 			[Size.TripleXLarge]: 2.4375,
 			[Size.FillWidth]: -1,
-			[Size.FillHeight]: -1
-		}
+			[Size.FillHeight]: -1,
+		},
 	};
 </script>
 
@@ -63,7 +64,9 @@
 		onclick,
 		onkeydown: onkeydownProp,
 		style = '',
-		side
+		side,
+		'aria-expanded': ariaExpanded,
+		'aria-controls': ariaControls,
 	}: ActionProps = $props();
 
 	const iconSize: Size = $derived(icon.size ?? size);
@@ -81,29 +84,21 @@
 		}
 	}
 
-	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
-	// const toastContext = getContext<ToastContext>(ToastContext.identifier);
+	// Shared tooltip lifecycle: hover handlers plus unmount-time teardown.
+	// Action lives inside short-lived hosts (table rows, modal panels,
+	// accordion content) so the cleanup is load-bearing - without it,
+	// churn leaves the global tooltip painting against a node that no
+	// longer exists.
+	const tt = useTooltip({
+		text: () => label,
+		arrow: () => side ?? Side.Left,
+	});
 </script>
 
 <button
 	{id}
-	onmouseenter={(e) => {
-		if (label) {
-			// TODO test currentTarget here
-			const rect = (e.target as HTMLButtonElement).getBoundingClientRect();
-			tooltipContext.showTooltip({
-				text: label,
-				arrow: side ?? Side.Left,
-				delay: Delay.Default,
-				rect
-			});
-		}
-	}}
-	onmouseleave={() => {
-		if (label) {
-			tooltipContext.hideTooltip(label);
-		}
-	}}
+	onmouseenter={tt.onmouseenter}
+	onmouseleave={tt.onmouseleave}
 	tabindex={noTabIndex ? -1 : undefined}
 	data-type={dataType}
 	style="{pad ? `--pad: ${pad};` : ''} {backgroundColour
@@ -126,13 +121,16 @@
 	{onblur}
 	{onkeydown}
 	onclick={(e) => {
-		// toastContext.toast("clicked action")
-		if (label) {
-			tooltipContext.hideTooltip(label);
-		}
+		tt.onclick();
 		onclick?.(e);
 	}}
-	aria-label={label}><Icon {...icon} size={iconSize} /></button
+	aria-label={label}
+	aria-expanded={ariaExpanded}
+	aria-controls={ariaControls}
+	><Icon
+		{...icon}
+		size={iconSize}
+	/></button
 >
 
 <style>button {
@@ -211,7 +209,7 @@ button.primary {
   --colour: #ffffff;
 }
 button.info {
-  --colour: #c0c8ce;
+  --colour: #1f81a0;
 }
 button.error {
   --colour: #aa1414;

package/dist/Components/ActionProps.d.ts

@@ -1,4 +1,4 @@
-import type { ColourSet } from '../scss/colours.js';
+import type { Colour, ColourSet } from '../scss/colours.js';
 import type { Shape } from '../Types/Internal/Shape.js';
 import type { Side } from '../Types/Internal/Side.js';
 import type { Size } from '../Types/Internal/Size.js';
@@ -14,12 +14,32 @@ export interface ActionProps {
     type?: 'button' | 'submit';
     disabled?: boolean;
     noTabIndex?: boolean;
-    backgroundColour?: string;
-    hoverBackgroundColour?: string;
+    /**
+     * Background colour drawn from the `Colour` palette. Pass values
+     * like `Colour['$transparent-0']` or `Colour['$brand-dark']`.
+     *
+     * BREAKING (vNext): was `string`; now must be a `Colour` value.
+     * Migrate ad-hoc CSS colour strings (e.g. `'transparent'`) to the
+     * matching palette entry.
+     */
+    backgroundColour?: Colour | undefined;
+    /** Hover-state background colour; see {@link backgroundColour}. */
+    hoverBackgroundColour?: Colour | undefined;
     label?: string;
     ['data-type']?: string;
     style?: string;
     side?: Side;
+    /**
+     * Forwarded as `aria-expanded` on the rendered `<button>`. Use this
+     * when the Action toggles a disclosure (e.g. collapse / expand) so
+     * screen readers announce the current state.
+     */
+    ['aria-expanded']?: boolean;
+    /**
+     * Forwarded as `aria-controls` on the rendered `<button>`. Set to
+     * the id of the region this Action shows or hides.
+     */
+    ['aria-controls']?: string;
     onfocus?: (e: FocusEvent) => void;
     onblur?: (e: FocusEvent) => void;
     onclick?: (e: MouseEvent) => void;

package/dist/Components/AlertModal.svelte

@@ -1,61 +1,106 @@
 <svelte:options runes />
 
+<script
+	lang="ts"
+	module
+>
+	import { DATAMatrix } from '../Helpers/Datamatrix.js';
+
+	// Frozen const map of scanner shortcut codes recognised by AlertModal.
+	// Using `Object.values` to drive comparisons keeps the strings off the
+	// hot path and gives us a single place to register new codes.
+	const AlertShortcuts = Object.freeze({
+		yes: '[YES]',
+		no: '[NO]',
+		other: '[OTHER]',
+	} as const);
+	type AlertShortcut = (typeof AlertShortcuts)[keyof typeof AlertShortcuts];
+
+	// Barcode icons are derived from literal constants. Build them once at
+	// module load so they are not re-encoded on every render.
+	const yesIcon = DATAMatrix(AlertShortcuts.yes);
+	const noIcon = DATAMatrix(AlertShortcuts.no);
+	const otherIcon = DATAMatrix(AlertShortcuts.other);
+</script>
+
 <script lang="ts">
 	import { AlertContext } from '../Contexts/AlertContext.svelte.js';
+	import { ToastContext } from '../Contexts/ToastContext.svelte.js';
 	import { UntypedInputContext } from '../Contexts/UntypedInputContext.svelte.js';
-	import { DATAMatrix } from '../Helpers/Datamatrix.js';
 	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import { dev } from '$app/environment';
 	import { getContext, onMount } from 'svelte';
 	import DataMatrixIcon from './DataMatrixIcon.svelte';
 	import ModalExplanation from './Touch/ModalExplanation.svelte';
 
-	let dialog: HTMLDialogElement | undefined;
+	let dialog: HTMLDialogElement | undefined = $state();
 
 	const alertContext = getContext<AlertContext>(AlertContext.identifier);
+	const untypedInputContext = getContext<UntypedInputContext>(UntypedInputContext.identifier);
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
 	$effect(() => {
-		if (dialog) {
-			if (alertContext.showModal) {
-				dialog.showModal();
-			} else {
-				dialog.close();
-			}
+		if (!dialog) {
+			return;
+		}
+		if (alertContext.showModal && !dialog.open) {
+			dialog.showModal();
+		} else if (!alertContext.showModal && dialog.open) {
+			dialog.close();
 		}
 	});
 
-	const yesIcon = DATAMatrix('[YES]');
+	onMount(() => {
+		return untypedInputContext.registerListener((value) => {
+			// Only react when this AlertModal is the active dialog. This keeps
+			// stray scanner reads from being interpreted as a confirmation when
+			// the alert is not on-screen.
+			if (!alertContext.showModal) {
+				return false;
+			}
 
-	const { registerListener } = getContext<UntypedInputContext>(UntypedInputContext.identifier);
-	onMount(() =>
-		registerListener((value) => {
-			switch (value) {
-				case '[YES]': {
+			const matched = (Object.values(AlertShortcuts) as ReadonlyArray<AlertShortcut>).find(
+				(code) => code === value
+			);
+			switch (matched) {
+				case AlertShortcuts.yes: {
 					alertContext.onYes();
-					break;
+					return true;
 				}
-				case '[NO]': {
+				case AlertShortcuts.no: {
 					alertContext.onNo();
-					break;
+					return true;
 				}
-				case '[OTHER]': {
+				case AlertShortcuts.other: {
 					alertContext.onOther();
-					break;
+					return true;
 				}
 				default: {
-					console.warn(`Uncaught command \`${value}\``);
+					if (dev) {
+						console.warn(`Uncaught command \`${value}\``);
+					}
+					toastContext.toast(`Unrecognised input: ${value}`);
+					return false;
 				}
 			}
-
-			return true;
-		})
-	);
+		});
+	});
 </script>
 
-<!-- onclose={() => (alertContext.showModal = false)} -->
 <dialog
 	bind:this={dialog}
+	aria-modal="true"
+	aria-labelledby="alert-modal-heading"
+	aria-describedby="alert-modal-body"
 	onclose={() => {
-		alertContext.onNo();
+		// Only auto-fire `onNo` if a "No" action was actually configured.
+		// Closing an alert (with no `noLabel`) should resolve cleanly without
+		// pretending the user rejected it.
+		if (alertContext.noLabel != null) {
+			alertContext.onNo();
+		} else {
+			alertContext.onYes();
+		}
 	}}
 	onclick={(e) => {
 		if (e.target === dialog) {
@@ -66,21 +111,29 @@
 	}}
 >
 	<div class="modal-root">
-		<h3 class="modal-heading">{alertContext.header}</h3>
-
-		<!-- <div class="modal-main pre-line">{$body}</div> -->
-		<div class="modal-main pre-line"><ModalExplanation>{alertContext.body}</ModalExplanation></div>
+		<h3
+			id="alert-modal-heading"
+			class="modal-heading"
+		>
+			{alertContext.header}
+		</h3>
+
+		<div
+			id="alert-modal-body"
+			class="modal-main pre-line"
+		>
+			<ModalExplanation>{alertContext.body}</ModalExplanation>
+		</div>
 
 		{#if alertContext.footer}
-			<!-- TODO either remove this part and make buttons the "footer", or allow consumer to pass an element -->
 			<span>{alertContext.footer}</span>
 		{/if}
 
 		<div class="modal-footer actions">
 			<div class="button-barcode-set">
 				<DataMatrixIcon
-					title="Yes"
-					icon={yesIcon}
+					title={alertContext.yesLabel}
+					icon={{ kind: 'svg', svg: yesIcon }}
 				/>
 				<button
 					type="submit"
@@ -90,11 +143,10 @@
 			</div>
 
 			{#if alertContext.otherLabel}
-				{@const otherIcon = DATAMatrix('[OTHER]')}
 				<div class="button-barcode-set">
 					<DataMatrixIcon
-						title="Other"
-						icon={otherIcon}
+						title={alertContext.otherLabel}
+						icon={{ kind: 'svg', svg: otherIcon }}
 					/>
 					<button
 						type="button"
@@ -105,11 +157,10 @@
 			{/if}
 
 			{#if alertContext.noLabel}
-				{@const noIcon = DATAMatrix('[NO]')}
 				<div class="button-barcode-set">
 					<DataMatrixIcon
-						title="No"
-						icon={noIcon}
+						title={alertContext.noLabel}
+						icon={{ kind: 'svg', svg: noIcon }}
 					/>
 					<button
 						type="button"