@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Touch/UtilityButton.svelte

@@ -1,93 +1,111 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { ColourSet } from '../../scss/colours.js';
-	import { Side } from '../../Types/Internal/Side.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import { onMount } from 'svelte';
-	import DataMatrixIcon from '../DataMatrixIcon.svelte';
-	import Icon from '../Icon.svelte';
-	import type { UtilityButtonProps } from './UtilityButtonProps.js';
-	let {
-		type = 'button',
-		colourSet = ColourSet.Secondary,
-		icon,
-		side = Side.Top,
-		size: explicitSize,
-		notifications,
-		ref = $bindable(),
-		disabled = false,
-		onEditBarcode,
-		onclick,
-		onfocus,
-		onblur,
-		children
-	}: UtilityButtonProps = $props();
-
-	let isMounted = $state(false);
-
-	onMount(() => {
-		isMounted = true;
-	});
-	const size = $derived(
-		isMounted
-			? (explicitSize ?? icon instanceof SVGSVGElement)
-				? Size.DoubleXLarge
-				: (icon?.size ?? Size.DoubleXLarge)
-			: Size.DoubleXLarge
-	);
-	let slotSpan: HTMLSpanElement | undefined = $state();
-</script>
-
-<button
-	{type}
-	class:call-to-action={colourSet === ColourSet.Primary || colourSet === ColourSet.CallToAction}
-	disabled={disabled ? true : undefined}
-	class:left={side == Side.Left}
-	class:right={side == Side.Right}
-	class:top={side == Side.Top}
-	class:bottom={side == Side.Bottom}
-	bind:this={ref}
-	{onclick}
-	{onfocus}
-	{onblur}
-	oncontextmenu={(e) => {
-		if (onEditBarcode) {
-			e.preventDefault();
-			onEditBarcode();
-		}
-	}}
-	onkeydown={passthrough}
->
-	{#if isMounted && icon}
-		<div
-			class="expand"
-			class:left={side == Side.Left}
-			class:right={side == Side.Right}
-			class:top={side == Side.Top}
-			class:bottom={side == Side.Bottom}
-		>
-			{#if icon instanceof SVGSVGElement}
-				<DataMatrixIcon title={slotSpan?.textContent ?? '{unknown}'} {icon} />
-			{:else}
-				{#if notifications}
-					<span class="notification">{notifications}</span>
-				{/if}
-
-				<Icon {...icon} {size} />
-			{/if}
-		</div>
-	{/if}
-	<span class="utility-label">
-		{#if notifications && icon instanceof SVGSVGElement}
-			<span class="notification-on-text">{notifications}</span>
-		{/if}<span bind:this={slotSpan}
-			>{#if children}{@render children()}{/if}</span
-		>
-	</span>
-</button>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { ColourSet } from '../../scss/colours.js';
+	import { Side } from '../../Types/Internal/Side.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	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',
+		colourSet = ColourSet.Secondary,
+		icon,
+		side = Side.Top,
+		size: explicitSize,
+		notifications,
+		ref = $bindable(),
+		disabled = false,
+		label,
+		onEditBarcode,
+		onclick,
+		onfocus,
+		onblur,
+		children,
+	}: UtilityButtonProps = $props();
+
+	let isMounted = $state(false);
+
+	onMount(() => {
+		isMounted = true;
+	});
+
+	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}
+	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}
+	oncontextmenu={(e) => {
+		if (onEditBarcode) {
+			e.preventDefault();
+			onEditBarcode();
+		}
+	}}
+	onkeydown={passthrough}
+>
+	{#if isMounted && icon}
+		<div
+			class="expand"
+			class:left={side == Side.Left}
+			class:right={side == Side.Right}
+			class:top={side == Side.Top}
+			class:bottom={side == Side.Bottom}
+		>
+			{#if icon instanceof SVGSVGElement}
+				<!-- 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}
+				/>
+			{/if}
+		</div>
+	{/if}
+	<span class="utility-label">
+		{#if notifications && icon instanceof SVGSVGElement}
+			<span class="notification-on-text">{notifications}</span>
+		{/if}<span bind:this={slotSpan}
+			>{#if children}{@render children()}{/if}</span
+		>
+	</span>
+</button>
+
 <style>button {
   background-color: #f4f7f9;
   box-sizing: border-box;
@@ -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;
@@ -176,4 +194,4 @@ button:not([disabled]).call-to-action:not([disabled]):focus, button:not([disable
 }
 button:not([disabled]).call-to-action:not([disabled]):focus {
   outline-offset: -2px;
-}</style>
+}</style>

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

@@ -1,68 +1,78 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="CommonDenominator"
->
-	import { onMount, untrack } from 'svelte';
-	import VerticalTabGroupButton from './VerticalTabGroupButton.svelte';
-	import type { VerticalTabGroupProps } from './VerticalTabGroupProps.js';
-	let {
-		name,
-		tabs,
-		selected,
-		style,
-		noscroll,
-		noTabMessage,
-		nohistory = false,
-	}: VerticalTabGroupProps<CommonDenominator> = $props();
-
-	onMount(() => {
-		if (name && !nohistory) {
-			const tabName = sessionStorage.getItem(`${name}-active-tab`);
-			if (tabName) {
-				tabs.find((it) => it.label === tabName)?.onclick();
-			}
-		}
-	});
-
-	$effect(() => {
-		if (name && selected) {
-			untrack(() => {
-				sessionStorage.setItem(`${name}-active-tab`, selected.label);
-			});
-		}
-	});
-</script>
-
-<div
-	class="wrapper"
-	class:noscroll
-	{style}
->
-	<div class="tabs">
-		{#each tabs as option (option)}
-			<VerticalTabGroupButton
-				{option}
-				selected={selected?.label === option.label}
-			/>
-		{/each}
-	</div>
-
-	<div
-		class="content"
-		class:noscroll
-	>
-		{#if selected}
-			{@render selected.content(selected.args)}
-		{:else}
-			<div class="wrapper bg">
-				<span class="red">{noTabMessage ?? 'No Tab Selected'}</span>
-			</div>
-		{/if}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	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';
+	const {
+		name,
+		tabs,
+		selected,
+		style,
+		noscroll,
+		noTabMessage,
+		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 = readJSON(sessionStorage, storageKey(name), isNonEmptyString, '');
+			if (tabName) {
+				tabs.find((it) => it.label === tabName)?.onclick();
+			}
+		}
+	});
+
+	$effect(() => {
+		if (name && selected) {
+			untrack(() => {
+				try {
+					sessionStorage.setItem(storageKey(name), JSON.stringify(selected.label));
+				} catch {
+					// storage unavailable (private browsing, quota); persistence is best-effort
+				}
+			});
+		}
+	});
+</script>
+
+<div
+	class="wrapper"
+	class:noscroll
+	{style}
+>
+	<div class="tabs">
+		{#each tabs as option (option.label)}
+			<VerticalTabGroupButton
+				{option}
+				selected={selected?.label === option.label}
+			/>
+		{/each}
+	</div>
+
+	<div
+		class="content"
+		class:noscroll
+	>
+		{#if selected}
+			{@render selected.content(selected.args)}
+		{:else}
+			<div class="wrapper bg">
+				<span class="red">{noTabMessage ?? 'No Tab Selected'}</span>
+			</div>
+		{/if}
+	</div>
+</div>
+
 <style>.bg {
   padding: 1.5rem;
   background-color: #f9e9e9;
@@ -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;
@@ -135,4 +113,4 @@
 }
 .wrapper .content.noscroll {
   overflow: visible;
-}</style>
+}</style>

package/dist/Components/VerticalTabGroupButton.svelte

@@ -1,99 +1,60 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
->
-	import { devCatch } from '../Helpers/Helpers.svelte.js';
-	import { Colour } from '../scss/colours.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Icon from './Icon.svelte';
-	import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
-
-	let { option, selected }: TabGroupButtonProps<Args> = $props();
-
-	let disabled = $state(true);
-	let visible = $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') {
-			visible = option.visible;
-		} else if (option.visible == undefined) {
-			visible = true;
-		} else {
-			option.visible
-				.then((v) => {
-					visible = v;
-				})
-				.catch(devCatch);
-		}
-	});
-</script>
-
-<button
-	class:selected
-	{disabled}
-	onclick={() => {
-		option.onclick();
-	}}
-	type="button"
-	class="tab"
-	class:invalid={!isValid}
-	class:hidden={!visible}
->
-	<div
-		class="bordered"
-		class:invalid={!isValid}
-	>
-		{#if option.iconLeft}
-			<Icon
-				{...option.iconLeft}
-				colour={Colour['$brand-primary']}
-			/>
-		{/if}
-		{option.label}
-		{#if !isValid}
-			<Icon
-				name="error"
-				colour={Colour['$error-border']}
-				size={Size.Small}
-			/>
-		{:else if option.iconRight}
-			<Icon
-				colour={Colour['$brand-primary']}
-				size={Size.Small}
-				{...option.iconRight}
-			/>
-		{/if}
-	</div>
-</button>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="Args"
+>
+	import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
+	import { Colour } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
+
+	const { option, selected }: TabGroupButtonProps<Args> = $props();
+
+	const isValid = useAsyncFlag(() => option.isValid, true);
+	const disabled = useAsyncFlag(() => option.disabled, false);
+	const visible = useAsyncFlag(() => option.visible, true);
+</script>
+
+<button
+	class:selected
+	disabled={disabled.value}
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	class:invalid={!isValid.value}
+	class:hidden={!visible.value}
+>
+	<div
+		class="bordered"
+		class:invalid={!isValid.value}
+	>
+		{#if option.iconLeft}
+			<Icon
+				{...option.iconLeft}
+				colour={Colour['$brand-primary']}
+			/>
+		{/if}
+		{option.label}
+		{#if !isValid.value}
+			<Icon
+				name="error"
+				colour={Colour['$error-border']}
+				size={Size.Small}
+			/>
+		{:else if option.iconRight}
+			<Icon
+				colour={Colour['$brand-primary']}
+				size={Size.Small}
+				{...option.iconRight}
+			/>
+		{/if}
+	</div>
+</button>
+
 <style>button.tab.hidden {
   display: none !important;
 }
@@ -123,7 +84,7 @@
 .tab .bordered {
   border-radius: 4px;
   padding: 0.5rem 0.75rem;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.375rem;
   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;
@@ -140,4 +101,4 @@
 }
 .tab.selected.invalid {
   border-bottom-color: #aa1414;
-}</style>
+}</style>

package/dist/Components/VerticalTabGroupProps.d.ts

@@ -1,10 +1,23 @@
+import type { ScoriaStorageKey } from '../Types/Internal/Misc.js';
 import type { TabOption } from '../Types/Internal/TabOption.js';
+/**
+ * Props for VerticalTabGroup, the top-aligned tab strip with content
+ * pane below. Supports sessionStorage-backed history when `name` is set.
+ */
 export interface VerticalTabGroupProps<CommonDenominator> {
-    name?: string;
-    tabs: Array<TabOption<CommonDenominator>>;
+    /** When set, the last selected tab is persisted under
+     *  `scoria-vertical-tab-group:${name}:active-tab` in sessionStorage. */
+    name?: ScoriaStorageKey;
+    /** The tabs to render. Keyed by `option.label`. */
+    tabs: ReadonlyArray<TabOption<CommonDenominator>>;
+    /** Currently selected tab. */
     selected?: TabOption<CommonDenominator>;
+    /** Inline style passthrough; consider `style:` directives at call site instead. */
     style?: string;
+    /** Disable internal scroll containers. */
     noscroll?: boolean;
+    /** Empty-state message shown when no tab is selected. */
     noTabMessage?: string;
+    /** Suppress on-mount history restore even when `name` is set. */
     nohistory?: boolean;
 }