@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/StepForm.svelte

@@ -4,6 +4,7 @@
 	lang="ts"
 	generics="CommonDenominator"
 >
+	import { readJSON } from '../Helpers/Storage.js';
 	import { ColourSet } from '../scss/colours.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import { onMount, untrack } from 'svelte';
@@ -11,11 +12,22 @@
 	import StepButton from './StepButton.svelte';
 	import type { StepFormProps } from './StepFormProps.js';
 
-	let { name, steps, currentStep, noscroll = false }: StepFormProps<CommonDenominator> = $props();
+	const {
+		name,
+		steps,
+		currentStep,
+		noscroll = false,
+		noStepMessage = 'No Step Selected',
+	}: StepFormProps<CommonDenominator> = $props();
+
+	const isNonEmptyString = (raw: unknown): raw is string =>
+		typeof raw === 'string' && raw.length > 0;
+
+	const storageKey = (key: string): string => `scoria-step-form:${key}:active-step`;
 
 	onMount(() => {
 		if (name) {
-			const tabName = sessionStorage.getItem(`${name}-active-tab`);
+			const tabName = readJSON(sessionStorage, storageKey(name), isNonEmptyString, '');
 			if (tabName) {
 				steps.find((it) => it.label === tabName)?.onclick();
 			}
@@ -24,12 +36,26 @@
 
 	const indexOfCurrent = $derived(currentStep ? steps.indexOf(currentStep) : -1);
 
+	const isReachable = (step: { disabled?: unknown; visible?: unknown } | undefined): boolean => {
+		if (step == null) {
+			return true;
+		}
+		// disabled may be a Promise; treat anything non-strictly-true as "reachable"
+		const disabled = step.disabled;
+		const visible = step.visible;
+		const isDisabled = disabled === true;
+		const isHidden = visible === false;
+		return !isDisabled && !isHidden;
+	};
+
 	const previous = $derived.by(() => {
 		for (let i = indexOfCurrent - 1; i > -1; i--) {
-			const next = steps.at(i);
-
-			if (next == null || !next.disabled || next.visible != false) {
-				return next ?? null;
+			const candidate = steps.at(i);
+			if (candidate == null) {
+				return null;
+			}
+			if (isReachable(candidate)) {
+				return candidate;
 			}
 		}
 		return null;
@@ -37,10 +63,12 @@
 
 	const next = $derived.by(() => {
 		for (let i = indexOfCurrent + 1; i < steps.length; i++) {
-			const next = steps.at(i);
-
-			if (next == null || !next.disabled || next.visible != false) {
-				return next ?? null;
+			const candidate = steps.at(i);
+			if (candidate == null) {
+				return null;
+			}
+			if (isReachable(candidate)) {
+				return candidate;
 			}
 		}
 		return null;
@@ -49,7 +77,11 @@
 	$effect(() => {
 		if (name && currentStep) {
 			untrack(() => {
-				sessionStorage.setItem(`${name}-active-tab`, currentStep.label);
+				try {
+					sessionStorage.setItem(storageKey(name), JSON.stringify(currentStep.label));
+				} catch {
+					// storage unavailable (private browsing, quota); persistence is best-effort
+				}
 			});
 		}
 	});
@@ -60,7 +92,7 @@
 	class="wrapper"
 >
 	<div class="tabs">
-		{#each steps as option, index (index)}
+		{#each steps as option, index (option.label)}
 			<StepButton
 				{option}
 				{index}
@@ -99,7 +131,7 @@
 			{@render currentStep.content(currentStep.args)}
 		{:else}
 			<div class="wrapper bg">
-				<span class="red">No Step Selected</span>
+				<span class="red">{noStepMessage}</span>
 			</div>
 		{/if}
 	</div>
@@ -118,10 +150,10 @@
 .steps {
   display: flex;
   flex-flow: row nowrap;
-  width: 252px;
-  padding: 4px;
+  width: 15.75rem;
+  padding: 0.375rem;
   justify-content: center;
-  gap: 1rem;
+  gap: 1.0005rem;
 }
 
 .wrapper {
@@ -140,49 +172,17 @@
   flex-flow: row nowrap;
   overflow-x: auto;
   max-width: 100%;
-  gap: 1rem;
+  gap: 1.0005rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  flex-basis: 64px;
+  padding-left: 1.250625rem;
+  padding-right: 1.250625rem;
+  flex-basis: 4rem;
   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;

package/dist/Components/StepFormProps.d.ts

@@ -1,7 +1,21 @@
+import type { ScoriaStorageKey } from '../Types/Internal/Misc.js';
 import type { TabOption } from '../Types/Internal/TabOption.js';
+/**
+ * Props for StepForm, the multi-step navigator built on StepButton.
+ * Persists the current step under `scoria-step-form:${name}:active-step` in
+ * sessionStorage when `name` is set - namespaced so it cannot collide
+ * with `VerticalTabGroup` or any future tab consumer.
+ */
 export interface StepFormProps<CommonDenominator> {
-    steps: Array<TabOption<CommonDenominator>>;
+    /** The ordered list of steps. Keyed by `option.label`. */
+    steps: ReadonlyArray<TabOption<CommonDenominator>>;
+    /** The currently active step, matched by reference. */
     currentStep: TabOption<CommonDenominator> | undefined;
-    name?: string;
+    /** When set, persist the active step's label in sessionStorage and
+     *  restore on mount. */
+    name?: ScoriaStorageKey;
+    /** Disable internal scroll containers. */
     noscroll?: boolean;
+    /** Empty-state message shown when no step is selected. */
+    noStepMessage?: string;
 }

package/dist/Components/Switch.svelte

@@ -1,39 +1,76 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
+	import { generateWeakId } from '../Helpers/Helpers.svelte.js';
 	import type { SwitchProps } from './SwitchProps.js';
+
 	let {
-		value = false,
-		id = generateShortUUID(),
+		value = $bindable(false),
+		id = generateWeakId(),
 		label,
 		disabled,
 		isValid,
-		onchange
+		onchange,
 	}: SwitchProps = $props();
 
-	let ref: HTMLInputElement | undefined = $state();
-</script>
+	let mirror: HTMLInputElement | undefined = $state();
 
-<button
-	class="text-label"
-	class:invalid={isValid === false}
-	type="button"
-	onclick={() => ref?.click()}
-	{disabled}
->
-	<span>{label}</span>
+	const toggle = () => {
+		if (disabled) {
+			return;
+		}
+		const next = !value;
+		value = next;
+		if (mirror && onchange) {
+			mirror.checked = next;
+			mirror.dispatchEvent(new Event('change', { bubbles: true }));
+		}
+	};
+</script>
 
-	<input {id} name={id} {onchange} type="checkbox" {disabled} checked={value} bind:this={ref} />
+<div class="switch-wrapper">
+	<button
+		{id}
+		class="text-label"
+		class:invalid={isValid === false}
+		type="button"
+		role="switch"
+		aria-checked={value}
+		aria-label={label}
+		onclick={toggle}
+		{disabled}
+	>
+		<span>{label}</span>
 
-	<div class="switch">
-		<div class="switch-inner" class:on={value}>
-			<div class="track" class:on={value}></div>
+		<div class="switch">
+			<div
+				class="switch-inner"
+				class:on={value}
+			>
+				<div
+					class="track"
+					class:on={value}
+				></div>
+			</div>
 		</div>
-	</div>
-</button>
+	</button>
+
+	<input
+		name={id}
+		{onchange}
+		type="checkbox"
+		tabindex="-1"
+		aria-hidden="true"
+		checked={value}
+		bind:this={mirror}
+	/>
+</div>
+
+<style>.switch-wrapper {
+  display: contents;
+}
 
-<style>.text-label {
+.text-label {
   height: max(var(--input-height, 3rem), 2rem);
   width: var(--input-width, 100%);
   color: #3a4952;
@@ -58,10 +95,10 @@
   border-color: #aa1414;
   color: #aa1414;
 }
-.text-label.invalid:focus-within {
+.text-label.invalid:focus-visible {
   outline: solid 1px #aa1414;
 }
-.text-label:focus-within {
+.text-label:focus-visible {
   outline: solid 1px #259fc7;
 }
 .text-label span {
@@ -98,7 +135,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   border-left: solid 1px #cbd4da;
-  width: 64px;
+  width: 4rem;
   height: 100%;
   background-color: #f4f7f9;
   display: flex;
@@ -107,11 +144,11 @@
   justify-content: center;
 }
 .switch .switch-inner {
-  transition: all ease-out 0.15s 0s;
+  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, translate 0.15s ease-out;
   border: solid 1px #cbd4da;
-  border-radius: 15px;
-  width: 40px;
-  height: 24px;
+  border-radius: 0.9375rem;
+  width: 2.5rem;
+  height: 1.5rem;
   background-color: white;
   display: flex;
   flex-flow: row nowrap;
@@ -123,11 +160,11 @@
   border-color: transparent;
 }
 .switch .switch-inner .track {
-  transition: all ease-out 0.15s 0s;
+  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, translate 0.15s ease-out;
   background-color: #adbbc5;
   border-radius: 50%;
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
   translate: -45% 0;
 }
 .switch .switch-inner .track.on {

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

@@ -1,4 +1,4 @@
 import type { SwitchProps } from './SwitchProps.js';
-declare const Switch: import("svelte").Component<SwitchProps, {}, "">;
+declare const Switch: import("svelte").Component<SwitchProps, {}, "value">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/Components/SwitchProps.d.ts

@@ -1,9 +1,55 @@
 import type { ChangeEventHandler } from 'svelte/elements';
 export interface SwitchProps {
+    /**
+     * Visible label rendered next to the toggle. Also doubles as the
+     * `aria-label` on the underlying `<button role="switch">` element so
+     * that screen-reader users hear the same string regardless of the
+     * visual presentation. Required for accessibility.
+     */
     label: string;
+    /**
+     * Bindable on/off state. Use `bind:value` to two-way bind the toggle
+     * from a parent. The component flips this value on click and reflects
+     * it through `aria-checked` so assistive technologies announce the
+     * current state.
+     *
+     * @default false
+     */
     value: boolean;
+    /**
+     * Called after the user toggles the switch and `value` has been
+     * flipped. Fires as a native `change` event on a hidden mirror
+     * checkbox so the prop shape stays compatible with existing
+     * `<input type="checkbox">` change handlers (i.e.
+     * `event.currentTarget.checked` matches the new `value`).
+     */
     onchange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * DOM id placed on the visible `<button role="switch">`. If omitted
+     * a stable per-instance id is generated lazily.
+     *
+     * Note: because the visible toggle is a `<button>`, an external
+     * `<label for={id}>` will not move focus or trigger a toggle when
+     * clicked - those behaviours are reserved for form controls.
+     * Pass the user-visible label through the `label` prop instead, or
+     * place the `Switch` next to a `<label>` whose `for` attribute is
+     * absent.
+     */
     id?: string;
+    /**
+     * When true the switch is non-interactive and styled as disabled.
+     * Reflected on the underlying `<button>` so keyboard focus skips
+     * it and pointer events are ignored.
+     */
     disabled?: boolean;
+    /**
+     * Optional validity flag. When `false`, the switch renders in the
+     * error palette. The prop is left as a plain boolean rather than
+     * `AsyncFlag<boolean>` because Switch does not surface async
+     * validation feedback on its own - it merely paints the error
+     * border when a parent has determined the value is invalid. If
+     * future workorders introduce async-validating switches, migrate
+     * this prop via `useAsyncFlag(() => isValid, true)`.
+     */
     isValid?: boolean;
 }

package/dist/Components/Table/Body/HeightData.d.ts

@@ -1,6 +1 @@
-import type { TableBodyProps } from './TableBodyProps.js';
-export interface HeightData<T extends object> {
-    index: number;
-    applyTo: Array<TableBodyProps<T>['side']>;
-    maxHeight: number;
-}
+export {};

package/dist/Components/Table/Body/HeightData.js

@@ -1 +1,9 @@
+// File scheduled for deletion. The HeightData envelope was the
+// per-row height-reconciliation glue between the three TableBody
+// panes (left / centre / right). The div+grid refactor collapses the
+// three panes into one grid container so the browser handles row
+// alignment natively; height reconciliation is no longer required.
+//
+// Kept as an empty module until the next housekeeping pass removes it
+// from the tree. No exports.
 export {};