@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Action.svelte

@@ -1,140 +1,138 @@
-<svelte:options runes />
-
-<script module lang="ts">
-	import { TooltipContext } from '../Contexts/TooltipContext.svelte.js';
-	import { Delay } from '../Delay/Delay.js';
-	import { passthrough } from '../Helpers/Helpers.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';
-
-	const paddings: Record<Shape, Record<Size, number>> = {
-		[Shape.Rectangle]: {
-			[Size.Tiny]: 0.125,
-			[Size.Small]: 0.1875,
-			[Size.MediumSmall]: 0.3125,
-			[Size.Medium]: 0.375,
-			[Size.MediumLarge]: 0.5,
-			[Size.Large]: 0.625,
-			[Size.XLarge]: 0.6875,
-			[Size.DoubleXLarge]: 0.8125,
-			[Size.TripleXLarge]: 0.875,
-			[Size.FillWidth]: -1,
-			[Size.FillHeight]: -1
-		},
-		[Shape.Circle]: {
-			[Size.Tiny]: 0.1875,
-			[Size.Small]: 0.5,
-			[Size.MediumSmall]: 0.875,
-			[Size.Medium]: 1.0625,
-			[Size.MediumLarge]: 1.375,
-			[Size.Large]: 1.75,
-			[Size.XLarge]: 1.9375,
-			[Size.DoubleXLarge]: 2.25,
-			[Size.TripleXLarge]: 2.4375,
-			[Size.FillWidth]: -1,
-			[Size.FillHeight]: -1
-		}
-	};
-</script>
-
-<script lang="ts">
-	const {
-		icon,
-		id,
-		border = false,
-		shape = Shape.Rectangle,
-		label,
-		colourSet = ColourSet.Secondary,
-		size = Size.Medium,
-		paddingSize,
-		type = 'button',
-		noTabIndex = false,
-		disabled,
-		backgroundColour,
-		hoverBackgroundColour,
-		'data-type': dataType,
-		onfocus,
-		onblur,
-		onclick,
-		onkeydown: onkeydownProp,
-		style = '',
-		side
-	}: ActionProps = $props();
-
-	const iconSize: Size = $derived(icon.size ?? size);
-
-	const pad: string = $derived.by(() => {
-		const padSize = paddingSize ?? size;
-		return padSize === Size.FillWidth ? '' : `${paddings[shape][padSize]}rem`;
-	});
-
-	function onkeydown(e: KeyboardEvent) {
-		passthrough(e);
-
-		if (document.activeElement === e.target) {
-			onkeydownProp?.(e);
-		}
-	}
-
-	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
-	// const toastContext = getContext<ToastContext>(ToastContext.identifier);
-</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);
-		}
-	}}
-	tabindex={noTabIndex ? -1 : undefined}
-	data-type={dataType}
-	style="{pad ? `--pad: ${pad};` : ''} {backgroundColour
-		? `--background-colour: ${backgroundColour};`
-		: ``} {hoverBackgroundColour
-		? `--hover-background-colour: ${hoverBackgroundColour};`
-		: ``}{style}"
-	class:border
-	class:circular={shape === Shape.Circle}
-	class:primary={colourSet === ColourSet.Primary}
-	class:secondary={colourSet === ColourSet.Secondary}
-	class:auxiliary={colourSet === ColourSet.Auxiliary}
-	class:info={colourSet === ColourSet.Info}
-	class:error={colourSet === ColourSet.Error}
-	class:fill-width={size === Size.FillWidth}
-	class:fill-height={size === Size.FillHeight}
-	{type}
-	{disabled}
-	{onfocus}
-	{onblur}
-	{onkeydown}
-	onclick={(e) => {
-		// toastContext.toast("clicked action")
-		if (label) {
-			tooltipContext.hideTooltip(label);
-		}
-		onclick?.(e);
-	}}
-	aria-label={label}><Icon {...icon} size={iconSize} /></button
->
-
+<svelte:options runes />
+
+<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 type { ActionProps } from './ActionProps.js';
+	import Icon from './Icon.svelte';
+
+	const paddings: Record<Shape, Record<Size, number>> = {
+		[Shape.Rectangle]: {
+			[Size.Tiny]: 0.125,
+			[Size.Small]: 0.1875,
+			[Size.MediumSmall]: 0.3125,
+			[Size.Medium]: 0.375,
+			[Size.MediumLarge]: 0.5,
+			[Size.Large]: 0.625,
+			[Size.XLarge]: 0.6875,
+			[Size.DoubleXLarge]: 0.8125,
+			[Size.TripleXLarge]: 0.875,
+			[Size.FillWidth]: -1,
+			[Size.FillHeight]: -1,
+		},
+		[Shape.Circle]: {
+			[Size.Tiny]: 0.1875,
+			[Size.Small]: 0.5,
+			[Size.MediumSmall]: 0.875,
+			[Size.Medium]: 1.0625,
+			[Size.MediumLarge]: 1.375,
+			[Size.Large]: 1.75,
+			[Size.XLarge]: 1.9375,
+			[Size.DoubleXLarge]: 2.25,
+			[Size.TripleXLarge]: 2.4375,
+			[Size.FillWidth]: -1,
+			[Size.FillHeight]: -1,
+		},
+	};
+</script>
+
+<script lang="ts">
+	const {
+		icon,
+		id,
+		border = false,
+		shape = Shape.Rectangle,
+		label,
+		colourSet = ColourSet.Secondary,
+		size = Size.Medium,
+		paddingSize,
+		type = 'button',
+		noTabIndex = false,
+		disabled,
+		backgroundColour,
+		hoverBackgroundColour,
+		'data-type': dataType,
+		onfocus,
+		onblur,
+		onclick,
+		onkeydown: onkeydownProp,
+		style = '',
+		side,
+		'aria-expanded': ariaExpanded,
+		'aria-controls': ariaControls,
+	}: ActionProps = $props();
+
+	const iconSize: Size = $derived(icon.size ?? size);
+
+	const pad: string = $derived.by(() => {
+		const padSize = paddingSize ?? size;
+		return padSize === Size.FillWidth ? '' : `${paddings[shape][padSize]}rem`;
+	});
+
+	function onkeydown(e: KeyboardEvent) {
+		passthrough(e);
+
+		if (document.activeElement === e.target) {
+			onkeydownProp?.(e);
+		}
+	}
+
+	// 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={tt.onmouseenter}
+	onmouseleave={tt.onmouseleave}
+	tabindex={noTabIndex ? -1 : undefined}
+	data-type={dataType}
+	style="{pad ? `--pad: ${pad};` : ''} {backgroundColour
+		? `--background-colour: ${backgroundColour};`
+		: ``} {hoverBackgroundColour
+		? `--hover-background-colour: ${hoverBackgroundColour};`
+		: ``}{style}"
+	class:border
+	class:circular={shape === Shape.Circle}
+	class:primary={colourSet === ColourSet.Primary}
+	class:secondary={colourSet === ColourSet.Secondary}
+	class:auxiliary={colourSet === ColourSet.Auxiliary}
+	class:info={colourSet === ColourSet.Info}
+	class:error={colourSet === ColourSet.Error}
+	class:fill-width={size === Size.FillWidth}
+	class:fill-height={size === Size.FillHeight}
+	{type}
+	{disabled}
+	{onfocus}
+	{onblur}
+	{onkeydown}
+	onclick={(e) => {
+		tt.onclick();
+		onclick?.(e);
+	}}
+	aria-label={label}
+	aria-expanded={ariaExpanded}
+	aria-controls={ariaControls}
+	><Icon
+		{...icon}
+		size={iconSize}
+	/></button
+>
+
 <style>button {
   color: #3a4952;
   fill: #3a4952;
@@ -211,7 +209,7 @@ button.primary {
   --colour: #ffffff;
 }
 button.info {
-  --colour: #c0c8ce;
+  --colour: #1f81a0;
 }
 button.error {
   --colour: #aa1414;
@@ -230,4 +228,4 @@ button.circular {
 button {
   padding: var(--pad);
   cursor: pointer;
-}</style>
+}</style>

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,127 +1,178 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { AlertContext } from '../Contexts/AlertContext.svelte.js';
-	import { UntypedInputContext } from '../Contexts/UntypedInputContext.svelte.js';
-	import { DATAMatrix } from '../Helpers/Datamatrix.js';
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
-	import { getContext, onMount } from 'svelte';
-	import DataMatrixIcon from './DataMatrixIcon.svelte';
-	import ModalExplanation from './Touch/ModalExplanation.svelte';
-
-	let dialog: HTMLDialogElement | undefined;
-
-	const alertContext = getContext<AlertContext>(AlertContext.identifier);
-
-	$effect(() => {
-		if (dialog) {
-			if (alertContext.showModal) {
-				dialog.showModal();
-			} else {
-				dialog.close();
-			}
-		}
-	});
-
-	const yesIcon = DATAMatrix('[YES]');
-
-	const { registerListener } = getContext<UntypedInputContext>(UntypedInputContext.identifier);
-	onMount(() =>
-		registerListener((value) => {
-			switch (value) {
-				case '[YES]': {
-					alertContext.onYes();
-					break;
-				}
-				case '[NO]': {
-					alertContext.onNo();
-					break;
-				}
-				case '[OTHER]': {
-					alertContext.onOther();
-					break;
-				}
-				default: {
-					console.warn(`Uncaught command \`${value}\``);
-				}
-			}
-
-			return true;
-		})
-	);
-</script>
-
-<!-- onclose={() => (alertContext.showModal = false)} -->
-<dialog
-	bind:this={dialog}
-	onclose={() => {
-		alertContext.onNo();
-	}}
-	onclick={(e) => {
-		if (e.target === dialog) {
-			if (!alertContext.mandatory) {
-				dialog.close();
-			}
-		}
-	}}
->
-	<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>
-
-		{#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}
-				/>
-				<button
-					type="submit"
-					onkeydown={passthrough}
-					onclick={alertContext.onYes}>{alertContext.yesLabel}</button
-				>
-			</div>
-
-			{#if alertContext.otherLabel}
-				{@const otherIcon = DATAMatrix('[OTHER]')}
-				<div class="button-barcode-set">
-					<DataMatrixIcon
-						title="Other"
-						icon={otherIcon}
-					/>
-					<button
-						type="button"
-						onkeydown={passthrough}
-						onclick={alertContext.onOther}>{alertContext.otherLabel}</button
-					>
-				</div>
-			{/if}
-
-			{#if alertContext.noLabel}
-				{@const noIcon = DATAMatrix('[NO]')}
-				<div class="button-barcode-set">
-					<DataMatrixIcon
-						title="No"
-						icon={noIcon}
-					/>
-					<button
-						type="button"
-						onkeydown={passthrough}
-						onclick={alertContext.onNo}>{alertContext.noLabel}</button
-					>
-				</div>
-			{/if}
-		</div>
-	</div>
-</dialog>
-
+<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 { 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 = $state();
+
+	const alertContext = getContext<AlertContext>(AlertContext.identifier);
+	const untypedInputContext = getContext<UntypedInputContext>(UntypedInputContext.identifier);
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+
+	$effect(() => {
+		if (!dialog) {
+			return;
+		}
+		if (alertContext.showModal && !dialog.open) {
+			dialog.showModal();
+		} else if (!alertContext.showModal && dialog.open) {
+			dialog.close();
+		}
+	});
+
+	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 matched = (Object.values(AlertShortcuts) as ReadonlyArray<AlertShortcut>).find(
+				(code) => code === value
+			);
+			switch (matched) {
+				case AlertShortcuts.yes: {
+					alertContext.onYes();
+					return true;
+				}
+				case AlertShortcuts.no: {
+					alertContext.onNo();
+					return true;
+				}
+				case AlertShortcuts.other: {
+					alertContext.onOther();
+					return true;
+				}
+				default: {
+					if (dev) {
+						console.warn(`Uncaught command \`${value}\``);
+					}
+					toastContext.toast(`Unrecognised input: ${value}`);
+					return false;
+				}
+			}
+		});
+	});
+</script>
+
+<dialog
+	bind:this={dialog}
+	aria-modal="true"
+	aria-labelledby="alert-modal-heading"
+	aria-describedby="alert-modal-body"
+	onclose={() => {
+		// 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) {
+			if (!alertContext.mandatory) {
+				dialog.close();
+			}
+		}
+	}}
+>
+	<div class="modal-root">
+		<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}
+			<span>{alertContext.footer}</span>
+		{/if}
+
+		<div class="modal-footer actions">
+			<div class="button-barcode-set">
+				<DataMatrixIcon
+					title={alertContext.yesLabel}
+					icon={{ kind: 'svg', svg: yesIcon }}
+				/>
+				<button
+					type="submit"
+					onkeydown={passthrough}
+					onclick={alertContext.onYes}>{alertContext.yesLabel}</button
+				>
+			</div>
+
+			{#if alertContext.otherLabel}
+				<div class="button-barcode-set">
+					<DataMatrixIcon
+						title={alertContext.otherLabel}
+						icon={{ kind: 'svg', svg: otherIcon }}
+					/>
+					<button
+						type="button"
+						onkeydown={passthrough}
+						onclick={alertContext.onOther}>{alertContext.otherLabel}</button
+					>
+				</div>
+			{/if}
+
+			{#if alertContext.noLabel}
+				<div class="button-barcode-set">
+					<DataMatrixIcon
+						title={alertContext.noLabel}
+						icon={{ kind: 'svg', svg: noIcon }}
+					/>
+					<button
+						type="button"
+						onkeydown={passthrough}
+						onclick={alertContext.onNo}>{alertContext.noLabel}</button
+					>
+				</div>
+			{/if}
+		</div>
+	</div>
+</dialog>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -392,4 +443,4 @@ div.button-barcode-set {
   display: flex;
   flex-flow: row nowrap;
   gap: 1.5rem;
-}</style>
+}</style>