@lavalogic/scoria 0.40.14 → 0.40.15

package/dist/Components/Touch/UtilityButton.svelte

@@ -1,111 +1,90 @@
-<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>
-
+<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";
+let { type = "button", colourSet = ColourSet.Secondary, icon, side = Side.Top, size: explicitSize, notifications, ref = $bindable(), disabled = false, label, onEditBarcode, onclick, onfocus, onblur, children } = $props();
+let isMounted = $state(false);
+onMount(() => {
+	isMounted = true;
+});
+const 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 = $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;
@@ -194,4 +173,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/VerticalTabGroup.svelte

@@ -1,81 +1,63 @@
-<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,
-		dense = 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();
-			}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="CommonDenominator"
+>import { readJSON } from "../Helpers/Storage.js";
+import { onMount, untrack } from "svelte";
+import VerticalTabGroupButton from "./VerticalTabGroupButton.svelte";
+const { name, tabs, selected, style, noscroll, noTabMessage, nohistory = false, dense = false } = $props();
+const isNonEmptyString = (raw) => typeof raw === "string" && raw.length > 0;
+const storageKey = (key) => `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
-	class:dense
-	{style}
->
-	<div class="tabs">
-		{#each tabs as option (option.label)}
-			<VerticalTabGroupButton
-				{option}
-				selected={selected?.label === option.label}
-			/>
-		{/each}
-	</div>
-
-	<div
-		class="content"
-		class:noscroll
-		class:dense
-	>
-		{#if selected}
-			{@render selected.content(selected.args)}
-		{:else}
-			<div class="wrapper bg">
-				<span class="red">{noTabMessage ?? 'No Tab Selected'}</span>
-			</div>
-		{/if}
-	</div>
-</div>
-
+	}
+});
+$effect(() => {
+	if (name && selected) {
+		untrack(() => {
+			try {
+				sessionStorage.setItem(storageKey(name), JSON.stringify(selected.label));
+			} catch {}
+		});
+	}
+});
+</script>
+
+<div
+	class="wrapper"
+	class:noscroll
+	class:dense
+	{style}
+>
+	<div class="tabs">
+		{#each tabs as option (option.label)}
+			<VerticalTabGroupButton
+				{option}
+				selected={selected?.label === option.label}
+			/>
+		{/each}
+	</div>
+
+	<div
+		class="content"
+		class:noscroll
+		class:dense
+	>
+		{#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;
@@ -124,4 +106,4 @@
 .wrapper .content.dense {
   flex-grow: 0;
   overflow: visible;
-}</style>
+}</style>

package/dist/Components/VerticalTabGroupButton.svelte

@@ -1,60 +1,56 @@
-<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>
-
+<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";
+const { option, selected } = $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;
 }
@@ -101,4 +97,4 @@
 }
 .tab.selected.invalid {
   border-bottom-color: #aa1414;
-}</style>
+}</style>

package/dist/Helpers/Datamatrix.d.ts

@@ -1,19 +1,19 @@
-import type { DataMatrixSvg } from '../Components/DataMatrixIconProps.js';
-
-export interface IDatamatrixOptions {
-	msg: string;
-	dim?: number;
-	rct?: number;
-	pad?: number;
-	pal?: [string, string];
-	vrb?: number;
-}
-
-/**
- * Build a DATAMatrix barcode SVG. The returned element is branded as
- * {@link DataMatrixSvg} so it can be passed directly to
- * `DataMatrixIcon` without further casting. The underlying JS
- * implementation produces a vanilla `SVGSVGElement`; the brand is a
- * compile-time discipline only.
- */
-export declare function DATAMatrix(value: IDatamatrixOptions | string): DataMatrixSvg;
+import type { DataMatrixSvg } from '../Components/DataMatrixIconProps.js';
+
+export interface IDatamatrixOptions {
+	msg: string;
+	dim?: number;
+	rct?: number;
+	pad?: number;
+	pal?: [string, string];
+	vrb?: number;
+}
+
+/**
+ * Build a DATAMatrix barcode SVG. The returned element is branded as
+ * {@link DataMatrixSvg} so it can be passed directly to
+ * `DataMatrixIcon` without further casting. The underlying JS
+ * implementation produces a vanilla `SVGSVGElement`; the brand is a
+ * compile-time discipline only.
+ */
+export declare function DATAMatrix(value: IDatamatrixOptions | string): DataMatrixSvg;