@lavalogic/scoria 0.36.0 → 0.37.1

package/dist/Components/Touch/TouchModal.svelte

@@ -1,16 +1,22 @@
-<!-- eslint-disable prefer-const  -->
 <svelte:options runes />
 
-<script lang="ts">
+<script
+	module
+	lang="ts"
+>
 	import { DATAMatrix } from '../../Helpers/Datamatrix.js';
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
 	import { passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { ColourSet } from '../../scss/colours.js';
 	import { Size } from '../../Types/Internal/Size.js';
 	import { onMount } from 'svelte';
 	import Action from '../Action.svelte';
+	import BaseModal from '../Base/BaseModal.svelte';
 	import DataMatrixIcon from '../DataMatrixIcon.svelte';
 	import type { TouchModalProps } from './TouchModalProps.js';
+</script>
 
+<script lang="ts">
 	let {
 		header,
 		buttons,
@@ -36,39 +42,54 @@
 		submitRef = $bindable(),
 	}: TouchModalProps = $props();
 
-	let dialog: HTMLDialogElement | undefined;
-	let form: HTMLFormElement;
+	let open = $state(true);
+	let form: HTMLFormElement | undefined = $state();
 	let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
 	let paused = $state(false);
+	let isActive = $state(false);
 
-	$effect(() => {
-		if (dialog) {
-			dialog.showModal();
-			onShowCallback?.();
-		}
-	});
+	// Pre-compute barcode SVGs once per `buttons` array. Building a DataMatrix
+	// barcode is non-trivial; rebuilding inside the each-block re-runs the
+	// encoder on every render.
+	const barcodeIcons = $derived.by(
+		() => buttons?.map((b) => (b.barcodeValue != null ? DATAMatrix(b.barcodeValue) : null)) ?? []
+	);
 
-	let isActive = false;
+	// Resolve each button's `isValid` once at the component level rather than
+	// inside the each-block. `useAsyncFlag` debounces stale resolutions, holds
+	// the previous value until a new Promise settles, and stops the
+	// `{#await}` flicker the previous implementation exhibited.
+	const buttonValidities = useAsyncFlag(
+		() => Promise.all((buttons ?? []).map((b) => Promise.resolve(b.isValid ?? true))),
+		[] as Array<boolean>
+	);
 
 	onMount(() => {
-		setTimeout(() => {
+		queueMicrotask(() => {
+			onShowCallback?.();
+		});
+
+		const activeTimer = setTimeout(() => {
 			isActive = true;
 		}, 200);
 
 		if (defaultTimer) {
 			timeout = setTimeout(() => {
-				if (dialog && dialog.open) {
+				if (open) {
 					if (defaultTimer.action === 'submit') {
-						form.requestSubmit();
+						form?.requestSubmit();
 						defaultTimer.callback?.();
 					} else {
-						dialog.close();
+						open = false;
 					}
 				}
 			}, defaultTimer.time);
 		}
 
-		return clearTimer;
+		return () => {
+			clearTimeout(activeTimer);
+			clearTimer();
+		};
 	});
 
 	function clearTimer() {
@@ -79,46 +100,57 @@
 	}
 
 	function handleEsc(e: KeyboardEvent) {
-		// e.stopPropagation();
-
 		if (e.key === 'Escape') {
 			e.preventDefault();
 			if (!mandatory) {
-				dialog?.close();
+				open = false;
 			}
 		}
 	}
+
+	function requestClose() {
+		open = false;
+	}
+
+	const dialogClassNames = $derived(
+		[
+			staticHeight ? 'static-height' : null,
+			staticWidth ? 'static-width' : null,
+			noscroll ? 'noscroll' : null,
+		]
+			.filter((c): c is string => c !== null)
+			.join(' ')
+	);
+
+	const dialogStyle = $derived(
+		`--timer: ${defaultTimer ? defaultTimer.time.toString() + 'ms' : 'unset'};` +
+			`--dialog-min-width: ${minWidth};` +
+			`--dialog-min-height: ${minHeight};` +
+			(height != null ? `--dialog-height: ${height};` : '') +
+			(width != null ? `--dialog-width: ${width};` : '')
+	);
 </script>
 
-<dialog
-	style="--timer: {defaultTimer && defaultTimer.time.toString() + 'ms'}; {minWidth &&
-		`--dialog-min-width: ${minWidth};`} {minHeight &&
-		`--dialog-min-height: ${minHeight};`} {height && `--dialog-height: ${height};`} {width &&
-		`--dialog-width: ${width};`}"
-	class:static-height={staticHeight}
-	class:static-width={staticWidth}
-	class:noscroll
-	bind:this={dialog}
+<BaseModal
+	bind:value={open}
 	{onclose}
-	onkeydown={handleEsc}
-	onclick={(e) => {
-		if (e.target === dialog) {
-			if (!mandatory) {
-				dialog.close();
-			}
-		}
-		clearTimer();
-	}}
+	{mandatory}
+	dialogClass={dialogClassNames}
+	{dialogStyle}
 >
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<form
 		method="dialog"
 		bind:this={form}
 		onsubmit={(e) => {
 			e.preventDefault();
+			clearTimer();
 			if (isActive) {
 				onsubmit?.(e);
 			}
 		}}
+		onclick={clearTimer}
 		class="modal-root"
 	>
 		<div class="modal-header">
@@ -132,9 +164,7 @@
 					<div class="close-button">
 						<Action
 							size={Size.Large}
-							onclick={() => {
-								dialog?.close();
-							}}
+							onclick={requestClose}
 							icon={{
 								name: 'cross',
 								size: Size.DoubleXLarge,
@@ -153,7 +183,6 @@
 		</div>
 
 		{#if defaultTimer}
-			<!-- class:paused -->
 			<div class="bar-container">
 				<div
 					class:paused
@@ -178,83 +207,60 @@
 			{@render footer()}
 		{:else if buttons?.length}
 			<div class="modal-footer">
-				{#each buttons as button (button)}
+				{#each buttons as button, index (button.label)}
+					{@const buttonIsValid = buttonValidities.value[index] ?? true}
 					{#if button.callback}
 						<div class="button-barcode-set">
-							{#if button.barcodeValue}
-								{@const icon = DATAMatrix(button.barcodeValue)}
+							{#if barcodeIcons[index]}
 								<DataMatrixIcon
 									title={button.label}
-									{icon}
+									icon={{ kind: 'svg', svg: barcodeIcons[index] }}
 								/>
 							{/if}
-							{#await button.isValid}
-								<button
-									onkeydown={passthrough}
-									disabled
-									class:margin-left={button.margin === 'left'}
-									class:margin-right={button.margin === 'right'}
-									type={button.type ?? 'button'}
-									onclick={button.callback}>{button.label}</button
-								>
-							{:then buttonIsValid}
-								<button
-									class:call-to-action={button.colourSet === ColourSet.CallToAction}
-									class:primary={button.colourSet === ColourSet.Primary}
-									class:secondary-colour={button.colourSet === ColourSet.Secondary}
-									class:warning={button.colourSet === ColourSet.Warning}
-									class:error={button.colourSet === ColourSet.Error}
-									class:info={button.colourSet === ColourSet.Info}
-									onkeydown={passthrough}
-									disabled={buttonIsValid === false}
-									class:margin-left={button.margin === 'left'}
-									class:margin-right={button.margin === 'right'}
-									type={button.type ?? 'button'}
-									onclick={button.callback}>{button.label}</button
-								>
-							{/await}
+							<button
+								class:call-to-action={button.colourSet === ColourSet.CallToAction}
+								class:primary={button.colourSet === ColourSet.Primary}
+								class:secondary-colour={button.colourSet === ColourSet.Secondary}
+								class:warning={button.colourSet === ColourSet.Warning}
+								class:error={button.colourSet === ColourSet.Error}
+								class:info={button.colourSet === ColourSet.Info}
+								onkeydown={passthrough}
+								disabled={!buttonIsValid}
+								class:margin-left={button.margin === 'left'}
+								class:margin-right={button.margin === 'right'}
+								type={button.type ?? 'button'}
+								onclick={button.callback}>{button.label}</button
+							>
 						</div>
 					{:else}
 						<div class="button-barcode-set">
-							{#if button.barcodeValue}
-								{@const icon = DATAMatrix(button.barcodeValue)}
+							{#if barcodeIcons[index]}
 								<DataMatrixIcon
 									title={button.label}
-									{icon}
+									icon={{ kind: 'svg', svg: barcodeIcons[index] }}
 								/>
 							{/if}
-							{#await button.isValid}
-								<button
-									onkeydown={passthrough}
-									disabled
-									class:margin-left={button.margin === 'left'}
-									class:margin-right={button.margin === 'right'}
-									bind:this={submitRef}
-									type={button.type ?? 'submit'}>{button.label}await</button
-								>
-							{:then buttonIsValid}
-								<button
-									class:call-to-action={button.colourSet === ColourSet.CallToAction}
-									class:primary={button.colourSet === ColourSet.Primary}
-									class:secondary-colour={button.colourSet === ColourSet.Secondary}
-									class:warning={button.colourSet === ColourSet.Warning}
-									class:error={button.colourSet === ColourSet.Error}
-									class:info={button.colourSet === ColourSet.Info}
-									onkeydown={passthrough}
-									disabled={buttonIsValid === false || !isValid}
-									class:margin-left={button.margin === 'left'}
-									class:margin-right={button.margin === 'right'}
-									bind:this={submitRef}
-									type={button.type ?? 'submit'}>{button.label}</button
-								>
-							{/await}
+							<button
+								class:call-to-action={button.colourSet === ColourSet.CallToAction}
+								class:primary={button.colourSet === ColourSet.Primary}
+								class:secondary-colour={button.colourSet === ColourSet.Secondary}
+								class:warning={button.colourSet === ColourSet.Warning}
+								class:error={button.colourSet === ColourSet.Error}
+								class:info={button.colourSet === ColourSet.Info}
+								onkeydown={passthrough}
+								disabled={!buttonIsValid || !isValid}
+								class:margin-left={button.margin === 'left'}
+								class:margin-right={button.margin === 'right'}
+								bind:this={submitRef}
+								type={button.type ?? 'submit'}>{button.label}</button
+							>
 						</div>
 					{/if}
 				{/each}
 			</div>
 		{/if}
 	</form>
-</dialog>
+</BaseModal>
 
 <style>dialog {
   overflow: clip;

package/dist/Components/Touch/TouchModalProps.d.ts

@@ -1,27 +1,61 @@
 import type { ButtonProp } from '../../Types/Internal/ButtonProp.js';
 import type { Snippet } from 'svelte';
 import type { DefaultTimer } from './DefaultTimer.js';
+/**
+ * Props for `TouchModal`, the touch-friendly variant of `Modal`. Provides
+ * a `<dialog>`-based modal with a header, optional explanation, body,
+ * and either a footer snippet or a `buttons` array. Each button's
+ * `isValid` flag is resolved through `useAsyncFlag`, so promise-based
+ * validation does not flicker the disabled state on re-render.
+ *
+ * Used as the foundation for the Touch-family modal variants
+ * (`NumberModal`, `TextModal`, `TextAreaModal`, `SelectModal`,
+ * `DateModal`).
+ */
 export interface TouchModalProps {
+    /** Header text shown in the modal title bar. */
     header: string;
+    /** Modal body. Rendered inside the scroll container. */
     children: Snippet;
+    /** Fires after the native `<dialog>` element closes. */
     onclose?: () => void;
+    /** Lay the modal body out in row direction. */
     row?: boolean;
+    /** Allow the row-flowed body to wrap. */
     wrap?: boolean;
+    /** Native form submit handler. The default action prevents the
+     * submission and forwards the event. */
     onsubmit?: (e: SubmitEvent) => void;
-    buttons?: Array<ButtonProp>;
+    /** Buttons rendered into the footer. Provide `footer` to override. */
+    buttons?: ReadonlyArray<ButtonProp>;
+    /** If true, the modal cannot be dismissed via Escape or backdrop click. */
     mandatory?: boolean;
+    /** Fix the dialog to its minimum height regardless of content. */
     staticHeight?: boolean;
+    /** Fix the dialog to its minimum width regardless of content. */
     staticWidth?: boolean;
+    /** CSS length string for the dialog's minimum width. */
     minWidth?: string;
+    /** CSS length string for the dialog's minimum height. */
     minHeight?: string;
+    /** CSS length string for the dialog's width. */
     width?: string;
+    /** CSS length string for the dialog's height. */
     height?: string;
+    /** Fires once the dialog has been shown. */
     onShowCallback?: () => void;
+    /** Two-way bindable reference to the submit button DOM element. */
     submitRef?: HTMLButtonElement | undefined;
+    /** Optional countdown timer that auto-submits or auto-closes. */
     defaultTimer?: DefaultTimer;
+    /** Disables the submit button when false. */
     isValid?: boolean;
+    /** Disable the scroll container, letting overflow be visible. */
     noscroll?: boolean;
+    /** Snippet rendered alongside the header (e.g. extra controls). */
     headerExtra?: Snippet;
+    /** Optional explanation snippet rendered above the body. */
     explanation?: Snippet | undefined;
+    /** Footer snippet that replaces the default buttons row. */
     footer?: Snippet;
 }

package/dist/Components/Touch/UtilityButton.svelte

@@ -8,6 +8,7 @@
 	import { onMount } from 'svelte';
 	import DataMatrixIcon from '../DataMatrixIcon.svelte';
 	import Icon from '../Icon.svelte';
+	import type { DataMatrixSvg } from '../DataMatrixIconProps.js';
 	import type { UtilityButtonProps } from './UtilityButtonProps.js';
 	let {
 		type = 'button',
@@ -18,11 +19,12 @@
 		notifications,
 		ref = $bindable(),
 		disabled = false,
+		label,
 		onEditBarcode,
 		onclick,
 		onfocus,
 		onblur,
-		children
+		children,
 	}: UtilityButtonProps = $props();
 
 	let isMounted = $state(false);
@@ -30,25 +32,32 @@
 	onMount(() => {
 		isMounted = true;
 	});
-	const size = $derived(
-		isMounted
-			? (explicitSize ?? icon instanceof SVGSVGElement)
-				? Size.DoubleXLarge
-				: (icon?.size ?? Size.DoubleXLarge)
-			: Size.DoubleXLarge
-	);
+
+	const size: Size = $derived.by(() => {
+		if (!isMounted) {
+			return Size.DoubleXLarge;
+		}
+		if (explicitSize !== undefined) {
+			return explicitSize;
+		}
+		if (icon instanceof SVGSVGElement) {
+			return Size.DoubleXLarge;
+		}
+		return icon?.size ?? Size.DoubleXLarge;
+	});
 	let slotSpan: HTMLSpanElement | undefined = $state();
 </script>
 
 <button
 	{type}
 	class:call-to-action={colourSet === ColourSet.Primary || colourSet === ColourSet.CallToAction}
-	disabled={disabled ? true : undefined}
+	{disabled}
 	class:left={side == Side.Left}
 	class:right={side == Side.Right}
 	class:top={side == Side.Top}
 	class:bottom={side == Side.Bottom}
 	bind:this={ref}
+	aria-label={label}
 	{onclick}
 	{onfocus}
 	{onblur}
@@ -69,13 +78,22 @@
 			class:bottom={side == Side.Bottom}
 		>
 			{#if icon instanceof SVGSVGElement}
-				<DataMatrixIcon title={slotSpan?.textContent ?? '{unknown}'} {icon} />
+				<!-- SECURITY: UtilityButton accepts a generic SVGSVGElement here for backwards
+				     compatibility. The cast to DataMatrixSvg trusts the caller; DataMatrixIcon
+				     additionally sanitises the cloned subtree before mounting. -->
+				<DataMatrixIcon
+					title={slotSpan?.textContent ?? '{unknown}'}
+					icon={{ kind: 'svg', svg: icon as DataMatrixSvg }}
+				/>
 			{:else}
 				{#if notifications}
 					<span class="notification">{notifications}</span>
 				{/if}
 
-				<Icon {...icon} {size} />
+				<Icon
+					{...icon}
+					{size}
+				/>
 			{/if}
 		</div>
 	{/if}
@@ -143,21 +161,21 @@ button:not([disabled]) span.notification {
   vertical-align: middle;
   border-radius: 50%;
   line-height: 1.5rem;
-  font-size: 0.82rem;
+  font-size: 0.75rem;
 }
 button:not([disabled]) span.utility-label span.notification-on-text {
   position: absolute;
-  right: 12px;
-  bottom: 12px;
+  right: 0.75rem;
+  bottom: 0.75rem;
   background-color: #259fc7;
   color: #ffffff;
-  width: 24px;
-  height: 24px;
+  width: 1.5rem;
+  height: 1.5rem;
   text-align: center;
   vertical-align: middle;
   border-radius: 50%;
-  line-height: 24px;
-  font-size: 0.82rem;
+  line-height: 1.5rem;
+  font-size: 0.75rem;
 }
 button:not([disabled]).call-to-action:not([disabled]) {
   background-color: #259fc7;

package/dist/Components/Touch/UtilityButtonProps.d.ts

@@ -3,18 +3,34 @@ import type { Side } from '../../Types/Internal/Side.js';
 import type { Size } from '../../Types/Internal/Size.js';
 import type { Snippet } from 'svelte';
 import type { PartialIconProps } from '../PartialIconProps.js';
+/** Props for the touch-friendly UtilityButton. */
 export interface UtilityButtonProps {
+    /** Icon descriptor or pre-built SVG element. */
     icon?: PartialIconProps | SVGSVGElement | null;
+    /** Native button type. */
     type?: 'button' | 'submit' | 'reset' | null;
+    /** Semantic colour set. */
     colourSet?: ColourSet;
+    /** Anchor side. */
     side?: Side;
+    /** Explicit icon size override. */
     size?: Size;
+    /** Notification badge text. */
     notifications?: string;
+    /** Bindable button reference. */
     ref?: HTMLButtonElement | undefined;
+    /** Disable interaction. */
     disabled?: boolean;
+    /** Accessible name; wired as aria-label. */
+    label?: string;
+    /** Right-click hook for editing a paired barcode. */
     onEditBarcode?: () => void;
+    /** Click handler. */
     onclick?: ((e: MouseEvent) => void) | undefined;
+    /** Native focus handler. */
     onfocus?: ((e: FocusEvent) => void) | undefined;
+    /** Native blur handler. */
     onblur?: ((e: FocusEvent) => void) | undefined;
+    /** Snippet rendered next to the icon. */
     children?: Snippet;
 }

package/dist/Components/VerticalTabGroup.svelte

@@ -4,10 +4,11 @@
 	lang="ts"
 	generics="CommonDenominator"
 >
+	import { readJSON } from '../Helpers/Storage.js';
 	import { onMount, untrack } from 'svelte';
 	import VerticalTabGroupButton from './VerticalTabGroupButton.svelte';
 	import type { VerticalTabGroupProps } from './VerticalTabGroupProps.js';
-	let {
+	const {
 		name,
 		tabs,
 		selected,
@@ -17,9 +18,14 @@
 		nohistory = false,
 	}: VerticalTabGroupProps<CommonDenominator> = $props();
 
+	const isNonEmptyString = (raw: unknown): raw is string =>
+		typeof raw === 'string' && raw.length > 0;
+
+	const storageKey = (key: string): string => `scoria-vertical-tab-group:${key}:active-tab`;
+
 	onMount(() => {
 		if (name && !nohistory) {
-			const tabName = sessionStorage.getItem(`${name}-active-tab`);
+			const tabName = readJSON(sessionStorage, storageKey(name), isNonEmptyString, '');
 			if (tabName) {
 				tabs.find((it) => it.label === tabName)?.onclick();
 			}
@@ -29,7 +35,11 @@
 	$effect(() => {
 		if (name && selected) {
 			untrack(() => {
-				sessionStorage.setItem(`${name}-active-tab`, selected.label);
+				try {
+					sessionStorage.setItem(storageKey(name), JSON.stringify(selected.label));
+				} catch {
+					// storage unavailable (private browsing, quota); persistence is best-effort
+				}
 			});
 		}
 	});
@@ -41,7 +51,7 @@
 	{style}
 >
 	<div class="tabs">
-		{#each tabs as option (option)}
+		{#each tabs as option (option.label)}
 			<VerticalTabGroupButton
 				{option}
 				selected={selected?.label === option.label}
@@ -85,47 +95,15 @@
   overflow-x: auto;
   max-width: 100%;
   gap: 0.5rem;
-  padding-top: 0.25rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  flex-basis: 52px;
+  padding-top: 0.375rem;
+  padding-left: 1.0005rem;
+  padding-right: 1.0005rem;
+  flex-basis: 3.25rem;
   flex-shrink: 0;
   background-color: #ffffff;
   border-bottom: solid 1px #cbd4da;
   border-top: solid 2px transparent;
 }
-.wrapper .tabs .tab {
-  color: #3a4952;
-  cursor: pointer;
-  font-size: 0.875rem;
-  padding: 0;
-  background-color: transparent;
-  border: none;
-}
-.wrapper .tabs .tab .bordered {
-  border-radius: 4px;
-  padding: 0.25rem 0.75rem;
-  margin-bottom: 0.25rem;
-  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;
-  white-space: nowrap;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: 0.5rem;
-}
-.wrapper .tabs .tab .bordered.invalid {
-  color: #aa1414;
-  background-color: #f9e9e9;
-}
-.wrapper .tabs .tab.selected {
-  border-bottom-color: #259fc7;
-}
-.wrapper .tabs .tab.selected.invalid {
-  border-bottom-color: #aa1414;
-}
-.wrapper .tabs .tab:hover .bordered, .wrapper .tabs .tab.selected:hover .bordered {
-  background-color: #f4f7f9;
-}
 .wrapper .content {
   background-color: #f4f7f9;
   flex-grow: 1;