@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/LoadingAnimation.svelte

@@ -1,21 +1,18 @@
 <svelte:options runes />
 
-<script
-	lang="ts"
-	module
->
-	export interface LoadingAnimationProps {
-		showText?: boolean;
-	}
-</script>
-
 <script lang="ts">
 	import { loadingText } from '../Helpers/Helpers.svelte.js';
+	import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
 
-	let { showText = true }: LoadingAnimationProps = $props();
+	const { showText = true, label = 'Loading' }: LoadingAnimationProps = $props();
 </script>
 
-<div class="container">
+<div
+	class="container"
+	role="status"
+	aria-live="polite"
+	aria-label={label}
+>
 	<div id="cube">
 		<div class="front"></div>
 		<div class="front">
@@ -30,8 +27,8 @@
 </div>
 
 <style>.container {
-  width: 100px;
-  height: 100px;
+  width: var(--loading-animation-size, 100px);
+  height: var(--loading-animation-size, 100px);
   position: relative;
   perspective: 1000px;
 }
@@ -40,11 +37,15 @@
   height: 100%;
   position: absolute;
   transform-style: preserve-3d;
-  animation: rotatecube 10s infinite;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .container #cube {
+    animation: rotatecube 10s infinite;
+  }
 }
 .container #cube div {
-  width: 100px;
-  height: 100px;
+  width: var(--loading-animation-size, 100px);
+  height: var(--loading-animation-size, 100px);
   display: block;
   position: absolute;
   border: none;
@@ -58,7 +59,7 @@
   text-align: left;
   font-size: 1rem;
   font-weight: bold;
-  font-family: arial;
+  font-family: inherit;
   color: #ffffff;
 }
 
@@ -100,7 +101,6 @@
 }
 
 .top {
-  /*   background: rgba(255,0,255,.5); */
   outline: 1px solid black;
 }
 

package/dist/Components/LoadingAnimation.svelte.d.ts

@@ -1,6 +1,4 @@
-export interface LoadingAnimationProps {
-    showText?: boolean;
-}
+import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
 declare const LoadingAnimation: import("svelte").Component<LoadingAnimationProps, {}, "">;
 type LoadingAnimation = ReturnType<typeof LoadingAnimation>;
 export default LoadingAnimation;

package/dist/Components/LoadingAnimationProps.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Props for the {@link LoadingAnimation} cube indicator.
+ */
+export interface LoadingAnimationProps {
+    /**
+     * Whether the animated cube should display the loading text inside the
+     * front face. Defaults to `true`. Set to `false` when the parent already
+     * renders a textual message and the cube should be purely decorative.
+     */
+    showText?: boolean;
+    /**
+     * Optional accessible label used for the `aria-label` of the
+     * status region. Defaults to `'Loading'`.
+     */
+    label?: string;
+}

package/dist/Components/LoadingAnimationProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/LoadingModal.svelte

@@ -1,27 +1,20 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface LoadingModalProps {
-		showModal: boolean;
-		message?: string | undefined;
-	}
-</script>
-
 <script lang="ts">
 	import LoadingAnimation from './LoadingAnimation.svelte';
+	import type { LoadingModalProps } from './LoadingModalProps.js';
 
-	let { showModal, message }: LoadingModalProps = $props();
+	const { showModal, message }: LoadingModalProps = $props();
 
-	let dialog: HTMLDialogElement | undefined;
+	let dialog: HTMLDialogElement | undefined = $state();
 
 	$effect(() => {
-		if (dialog && showModal) {
-			dialog.showModal();
+		if (!dialog) {
+			return;
 		}
-	});
-
-	$effect(() => {
-		if (!showModal && dialog) {
+		if (showModal && !dialog.open) {
+			dialog.showModal();
+		} else if (!showModal && dialog.open) {
 			dialog.close();
 		}
 	});
@@ -35,12 +28,17 @@
 	}
 </script>
 
-<dialog bind:this={dialog} onkeydown={uncloseable}>
+<dialog
+	bind:this={dialog}
+	onkeydown={uncloseable}
+	aria-label={message ?? 'Loading'}
+	aria-live="polite"
+>
 	<div class="modal-root">
 		{#if message}
 			<p>{message}</p>
 		{/if}
-		<LoadingAnimation />
+		<LoadingAnimation showText={!message} />
 	</div>
 </dialog>
 
@@ -310,9 +308,9 @@ dialog .modal-root p {
   z-index: 99999;
   translate: -50% -80%;
   user-select: none;
-  text-shadow: 0px 0px 3px black;
-  background-color: rgba(100, 100, 100, 0.6);
+  text-shadow: 0px 0px 3px #000000;
+  background-color: rgba(0, 0, 0, 0.4);
   border-radius: 4px;
   padding: 1rem;
-  color: white;
+  color: #ffffff;
 }</style>

package/dist/Components/LoadingModal.svelte.d.ts

@@ -1,7 +1,4 @@
-export interface LoadingModalProps {
-    showModal: boolean;
-    message?: string | undefined;
-}
+import type { LoadingModalProps } from './LoadingModalProps.js';
 declare const LoadingModal: import("svelte").Component<LoadingModalProps, {}, "">;
 type LoadingModal = ReturnType<typeof LoadingModal>;
 export default LoadingModal;

package/dist/Components/LoadingModalProps.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Props for the {@link LoadingModal} non-dismissible loading dialog.
+ */
+export interface LoadingModalProps {
+    /**
+     * Whether the modal should currently be shown. Bind from a flag the
+     * parent toggles when an async action begins/ends. The dialog cannot
+     * be closed by Escape or by clicking the backdrop; only flipping this
+     * prop to `false` will close it.
+     */
+    showModal: boolean;
+    /**
+     * Optional message rendered above the cube. When omitted the
+     * cube displays its built-in `loadingText` label instead.
+     */
+    message?: string | undefined;
+}

package/dist/Components/LoadingModalProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/LoadingOverlay.svelte

@@ -1,22 +1,20 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface LoadingOverlayProps {
-		message?: string | undefined;
-		absolute?: boolean | undefined;
-		borderRadius?: string | undefined;
-	}
-</script>
-
 <script lang="ts">
 	import LoadingAnimation from './LoadingAnimation.svelte';
-	let { message, absolute, borderRadius }: LoadingOverlayProps = $props();
+	import type { LoadingOverlayProps } from './LoadingOverlayProps.js';
+
+	const { message, absolute, borderRadius }: LoadingOverlayProps = $props();
 </script>
 
 <div
 	class="loading-overlay"
 	class:absolute
-	style={borderRadius ? `border-radius: ${borderRadius};` : undefined}
+	role="status"
+	aria-live="polite"
+	style={borderRadius != null && borderRadius.length > 0
+		? `border-radius: ${borderRadius};`
+		: undefined}
 >
 	{#if message}
 		<p>{message}</p>
@@ -47,11 +45,11 @@
   z-index: 99999;
   translate: -50% -80%;
   user-select: none;
-  text-shadow: 0px 0px 3px black;
-  background-color: rgba(100, 100, 100, 0.6);
+  text-shadow: 0px 0px 3px #000000;
+  background-color: rgba(0, 0, 0, 0.4);
   border-radius: 4px;
   padding: 1rem;
-  color: white;
+  color: #ffffff;
 }
 .loading-overlay.absolute {
   position: absolute;

package/dist/Components/LoadingOverlay.svelte.d.ts

@@ -1,8 +1,4 @@
-export interface LoadingOverlayProps {
-    message?: string | undefined;
-    absolute?: boolean | undefined;
-    borderRadius?: string | undefined;
-}
+import type { LoadingOverlayProps } from './LoadingOverlayProps.js';
 declare const LoadingOverlay: import("svelte").Component<LoadingOverlayProps, {}, "">;
 type LoadingOverlay = ReturnType<typeof LoadingOverlay>;
 export default LoadingOverlay;

package/dist/Components/LoadingOverlayProps.d.ts

@@ -0,0 +1,28 @@
+import type { CssLength } from '../Types/Internal/Misc.js';
+/**
+ * Props for the {@link LoadingOverlay} floating progress veil.
+ */
+export interface LoadingOverlayProps {
+    /**
+     * Optional message rendered above the animation. When omitted the
+     * cube renders with its built-in `loadingText`.
+     */
+    message?: string | undefined;
+    /**
+     * When `true` the overlay uses `position: absolute` and fills its
+     * nearest positioned ancestor instead of the viewport. Use this
+     * when overlaying a modal or panel rather than the whole page.
+     * Defaults to `false`.
+     */
+    absolute?: boolean | undefined;
+    /**
+     * Branded CSS length for the overlay backdrop's border-radius
+     * (e.g. `cssLength('4px')`). Use when overlaying a rounded
+     * container so the veil follows the container shape.
+     *
+     * BREAKING (vNext): was `string`; now requires the `CssLength`
+     * brand. Migrate `borderRadius="4px"` to
+     * `borderRadius={cssLength('4px')}`.
+     */
+    borderRadius?: CssLength | undefined;
+}

package/dist/Components/LoadingOverlayProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Modal.svelte

@@ -5,38 +5,14 @@
 	lang="ts"
 >
 	import { DATAMatrix } from '../Helpers/Datamatrix.js';
-	import { devCatch, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
 	import { ColourSet } from '../scss/colours.js';
-	import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
 	import { Size } from '../Types/Internal/Size.js';
-	import { onMount, tick, type Snippet } from 'svelte';
+	import { onMount } from 'svelte';
 	import Action from './Action.svelte';
+	import BaseModal from './Base/BaseModal.svelte';
 	import DataMatrixIcon from './DataMatrixIcon.svelte';
-	import type { DefaultTimer } from './Touch/DefaultTimer.js';
-
-	export interface ModalProps {
-		header: string | Snippet;
-		children: Snippet;
-		onclose?: () => void;
-
-		onsubmit?: ((e: SubmitEvent) => void) | undefined;
-		buttons?: Array<ButtonProp>;
-		mandatory?: boolean | undefined;
-		staticHeight?: boolean | undefined;
-		staticWidth?: boolean | undefined;
-		minWidth?: string | undefined;
-		minHeight?: string | undefined;
-		width?: string | undefined;
-		height?: string | undefined;
-		onShowCallback?: () => void;
-		submitRef?: HTMLButtonElement;
-		defaultTimer?: DefaultTimer;
-		isValid?: boolean | undefined;
-		noscroll?: boolean | undefined;
-		headerExtra?: Snippet;
-		explanation?: Snippet;
-		footer?: Snippet;
-	}
+	import type { ModalProps } from './ModalProps.js';
 </script>
 
 <script lang="ts">
@@ -61,44 +37,53 @@
 		children,
 		footer,
 		onclose,
+		autofocusSelector,
 	}: ModalProps = $props();
 
-	let dialog: HTMLDialogElement | undefined;
-	let form: HTMLFormElement;
+	// `open` drives BaseModal's bindable `value`. Default true (the
+	// legacy "open immediately on mount" semantic). Flipping it to
+	// false closes the dialog; BaseModal will fire `onclose` after
+	// the native `close` event.
+	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(() => {
-		void dialog;
-		// HACK tick helps with Portal shenanigans. will be removed if a better solution comes up
-		tick()
-			.then(() => {
-				if (dialog) {
-					dialog.showModal();
-					onShowCallback?.();
-				}
-			})
-			.catch(devCatch);
-	});
+	// 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;
 	onMount(() => {
-		setTimeout(() => {
+		// Fire onShowCallback after BaseModal has had a chance to call
+		// `showModal()`. BaseModal uses a tick() internally so we match
+		// that with a microtask here.
+		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();
 					} else {
-						dialog.close();
+						open = false;
 					}
 				}
 			}, defaultTimer.time);
 		}
 
-		return clearTimer;
+		return () => {
+			clearTimeout(activeTimer);
+			clearTimer();
+		};
 	});
 
 	function clearTimer() {
@@ -109,46 +94,62 @@
 	}
 
 	function handleEsc(e: KeyboardEvent) {
+		// Forwarded to the Action button's onkeydown so an Escape press
+		// while the close icon has focus still closes the dialog rather
+		// than triggering the button's default activation.
 		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'};` +
+			(minWidth != null ? `--dialog-min-width: ${minWidth};` : '') +
+			(minHeight != null ? `--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}
+	{autofocusSelector}
+	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">
@@ -161,7 +162,7 @@
 						<div class="close-button">
 							<Action
 								size={Size.DoubleXLarge}
-								onclick={() => dialog?.close()}
+								onclick={requestClose}
 								icon={{
 									name: 'cross',
 								}}
@@ -182,7 +183,6 @@
 		</div>
 
 		{#if defaultTimer}
-			<!-- class:paused -->
 			<div class="bar-container">
 				<div
 					class:paused
@@ -205,14 +205,13 @@
 			{@render footer()}
 		{:else if buttons?.length}
 			<div class="modal-footer">
-				{#each buttons as button (button)}
+				{#each buttons as button, index (button.label)}
 					{#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}
 							<button
@@ -225,11 +224,10 @@
 						</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}
 							<button
@@ -246,7 +244,7 @@
 			</div>
 		{/if}
 	</form>
-</dialog>
+</BaseModal>
 
 <style>dialog {
   overflow: clip;
@@ -493,10 +491,7 @@ button {
   border-radius: 4px;
 }
 
-dialog {
-  overflow: visible;
-}
-
+/* dialog itself is rendered by BaseModal; only inner-content rules live here. */
 form.modal-root {
   overflow: visible;
 }

package/dist/Components/Modal.svelte.d.ts

@@ -1,28 +1,4 @@
-import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
-import { type Snippet } from 'svelte';
-import type { DefaultTimer } from './Touch/DefaultTimer.js';
-export interface ModalProps {
-    header: string | Snippet;
-    children: Snippet;
-    onclose?: () => void;
-    onsubmit?: ((e: SubmitEvent) => void) | undefined;
-    buttons?: Array<ButtonProp>;
-    mandatory?: boolean | undefined;
-    staticHeight?: boolean | undefined;
-    staticWidth?: boolean | undefined;
-    minWidth?: string | undefined;
-    minHeight?: string | undefined;
-    width?: string | undefined;
-    height?: string | undefined;
-    onShowCallback?: () => void;
-    submitRef?: HTMLButtonElement;
-    defaultTimer?: DefaultTimer;
-    isValid?: boolean | undefined;
-    noscroll?: boolean | undefined;
-    headerExtra?: Snippet;
-    explanation?: Snippet;
-    footer?: Snippet;
-}
+import type { ModalProps } from './ModalProps.js';
 declare const Modal: import("svelte").Component<ModalProps, {}, "submitRef">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/Components/ModalProps.d.ts

@@ -0,0 +1,65 @@
+import type { Snippet } from 'svelte';
+import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
+import type { CssLength } from '../Types/Internal/Misc.js';
+import type { DefaultTimer } from './Touch/DefaultTimer.js';
+/**
+ * Props for the {@link Modal} dialog primitive.
+ */
+export interface ModalProps {
+    /** Header label rendered at the top. Accepts a string or a snippet. */
+    header: string | Snippet;
+    /** Snippet rendered as the modal body. */
+    children: Snippet;
+    /** Fired when the dialog is closed (Escape, backdrop click, programmatic close). */
+    onclose?: () => void;
+    /** Submit handler invoked on form submission inside the modal. */
+    onsubmit?: ((e: SubmitEvent) => void) | undefined;
+    /** Optional array of action buttons rendered in the footer. */
+    buttons?: ReadonlyArray<ButtonProp>;
+    /**
+     * When `true` the modal cannot be dismissed by Escape or backdrop click.
+     * Only programmatic close (via `submitRef`, button callback or `onsubmit`)
+     * will dismiss it. Use sparingly.
+     */
+    mandatory?: boolean | undefined;
+    /** Lock the modal to a fixed height. */
+    staticHeight?: boolean | undefined;
+    /** Lock the modal to a fixed width. */
+    staticWidth?: boolean | undefined;
+    /**
+     * Minimum width as a branded CSS length value (e.g.
+     * `cssLength('40rem')`).
+     *
+     * BREAKING (vNext): was `string`; now requires the `CssLength`
+     * brand.
+     */
+    minWidth?: CssLength | undefined;
+    /** Minimum height as a branded CSS length value. See {@link minWidth}. */
+    minHeight?: CssLength | undefined;
+    /** Explicit width as a branded CSS length value. See {@link minWidth}. */
+    width?: CssLength | undefined;
+    /** Explicit height as a branded CSS length value. See {@link minWidth}. */
+    height?: CssLength | undefined;
+    /** Fired once the dialog has been shown (after `tick()`). */
+    onShowCallback?: () => void;
+    /** Bindable reference to the submit-type button in the footer. */
+    submitRef?: HTMLButtonElement;
+    /** Optional countdown timer that auto-submits or auto-closes the modal. */
+    defaultTimer?: DefaultTimer;
+    /** Whether the submit button should currently be enabled. Defaults to `true`. */
+    isValid?: boolean | undefined;
+    /** Disable scrolling inside the modal body. */
+    noscroll?: boolean | undefined;
+    /** Optional snippet rendered alongside the header (e.g. status pill). */
+    headerExtra?: Snippet;
+    /** Optional explanatory snippet rendered above `children`. */
+    explanation?: Snippet;
+    /** Optional custom footer snippet that overrides `buttons`. */
+    footer?: Snippet;
+    /**
+     * Optional CSS selector identifying the element to focus when the modal
+     * opens. When omitted the browser focuses the first focusable element
+     * inside the dialog. Pass e.g. `'input[name="email"]'` to pin focus.
+     */
+    autofocusSelector?: string | undefined;
+}

package/dist/Components/ModalProps.js

@@ -0,0 +1 @@
+export {};