@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/StepButton.svelte

@@ -1,72 +1,67 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
->
-	import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
-	import { useTooltip } from '../Helpers/useTooltip.svelte.js';
-	import { Colour } from '../scss/colours.js';
-	import { Side } from '../Types/Internal/Side.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Icon from './Icon.svelte';
-	import type { StepButtonProps } from './StepButtonProps.js';
-
-	const { option, selected, index }: StepButtonProps<Args> = $props();
-
-	const isValid = useAsyncFlag(() => option.isValid, true);
-	const disabled = useAsyncFlag(() => option.disabled, false);
-	const visible = useAsyncFlag(() => option.visible, true);
-
-	// Shared tooltip lifecycle: hover handlers plus unmount-time teardown
-	// (load-bearing because StepButton lives inside StepForm which
-	// re-renders the tab strip on every step change).
-	const tt = useTooltip({
-		text: () => option.label,
-		arrow: () => Side.Top,
-	});
-</script>
-
-<button
-	class:selected
-	disabled={disabled.value}
-	onclick={() => {
-		option.onclick();
-	}}
-	type="button"
-	class="tab"
-	class:invalid={!isValid.value}
-	class:hidden={!visible.value}
-	onmouseenter={tt.onmouseenter}
-	onmouseleave={tt.onmouseleave}
->
-	<div
-		class="bordered"
-		class:invalid={!isValid.value}
-	>
-		{#if option.iconLeft}
-			<Icon
-				{...option.iconLeft}
-				colour={Colour['$brand-primary']}
-			/>
-		{/if}
-		{index + 1}
-		{#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 { useTooltip } from "../Helpers/useTooltip.svelte.js";
+import { Colour } from "../scss/colours.js";
+import { Side } from "../Types/Internal/Side.js";
+import { Size } from "../Types/Internal/Size.js";
+import Icon from "./Icon.svelte";
+const { option, selected, index } = $props();
+const isValid = useAsyncFlag(() => option.isValid, true);
+const disabled = useAsyncFlag(() => option.disabled, false);
+const visible = useAsyncFlag(() => option.visible, true);
+// Shared tooltip lifecycle: hover handlers plus unmount-time teardown
+// (load-bearing because StepButton lives inside StepForm which
+// re-renders the tab strip on every step change).
+const tt = useTooltip({
+	text: () => option.label,
+	arrow: () => Side.Top
+});
+</script>
+
+<button
+	class:selected
+	disabled={disabled.value}
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	class:invalid={!isValid.value}
+	class:hidden={!visible.value}
+	onmouseenter={tt.onmouseenter}
+	onmouseleave={tt.onmouseleave}
+>
+	<div
+		class="bordered"
+		class:invalid={!isValid.value}
+	>
+		{#if option.iconLeft}
+			<Icon
+				{...option.iconLeft}
+				colour={Colour['$brand-primary']}
+			/>
+		{/if}
+		{index + 1}
+		{#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;
 }
@@ -107,4 +102,4 @@
   color: #aa1414;
   border-color: #aa1414;
   background-color: #f9e9e9;
-}</style>
+}</style>

package/dist/Components/StepForm.svelte

@@ -1,142 +1,122 @@
-<svelte:options runes />
-
-<script
-	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';
-	import Button from './Button.svelte';
-	import StepButton from './StepButton.svelte';
-	import type { StepFormProps } from './StepFormProps.js';
-
-	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 = readJSON(sessionStorage, storageKey(name), isNonEmptyString, '');
-			if (tabName) {
-				steps.find((it) => it.label === tabName)?.onclick();
-			}
+<svelte:options runes />
+
+<script
+	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";
+import Button from "./Button.svelte";
+import StepButton from "./StepButton.svelte";
+const { name, steps, currentStep, noscroll = false, noStepMessage = "No Step Selected" } = $props();
+const isNonEmptyString = (raw) => typeof raw === "string" && raw.length > 0;
+const storageKey = (key) => `scoria-step-form:${key}:active-step`;
+onMount(() => {
+	if (name) {
+		const tabName = readJSON(sessionStorage, storageKey(name), isNonEmptyString, "");
+		if (tabName) {
+			steps.find((it) => it.label === tabName)?.onclick();
 		}
-	});
-
-	const indexOfCurrent = $derived(currentStep ? steps.indexOf(currentStep) : -1);
-
-	const isReachable = (step: { disabled?: unknown; visible?: unknown } | undefined): boolean => {
-		if (step == null) {
-			return true;
+	}
+});
+const indexOfCurrent = $derived(currentStep ? steps.indexOf(currentStep) : -1);
+const isReachable = (step) => {
+	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 candidate = steps.at(i);
+		if (candidate == null) {
+			return null;
 		}
-		// 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 candidate = steps.at(i);
-			if (candidate == null) {
-				return null;
-			}
-			if (isReachable(candidate)) {
-				return candidate;
-			}
+		if (isReachable(candidate)) {
+			return candidate;
 		}
-		return null;
-	});
-
-	const next = $derived.by(() => {
-		for (let i = indexOfCurrent + 1; i < steps.length; i++) {
-			const candidate = steps.at(i);
-			if (candidate == null) {
-				return null;
-			}
-			if (isReachable(candidate)) {
-				return candidate;
-			}
+	}
+	return null;
+});
+const next = $derived.by(() => {
+	for (let i = indexOfCurrent + 1; i < steps.length; i++) {
+		const candidate = steps.at(i);
+		if (candidate == null) {
+			return null;
 		}
-		return null;
-	});
-
-	$effect(() => {
-		if (name && currentStep) {
-			untrack(() => {
-				try {
-					sessionStorage.setItem(storageKey(name), JSON.stringify(currentStep.label));
-				} catch {
-					// storage unavailable (private browsing, quota); persistence is best-effort
-				}
-			});
+		if (isReachable(candidate)) {
+			return candidate;
 		}
-	});
-</script>
-
-<div
-	class:noscroll
-	class="wrapper"
->
-	<div class="tabs">
-		{#each steps as option, index (option.label)}
-			<StepButton
-				{option}
-				{index}
-				selected={currentStep?.label === option.label}
-			/>
-		{/each}
-		<div class="divider"></div>
-
-		<div class="steps">
-			<Button
-				size={Size.Small}
-				fullWidth
-				disabled={!previous}
-				onclick={() => {
-					previous?.onclick();
-				}}
-				colourSet={ColourSet.Secondary}>Previous</Button
-			>
-			<Button
-				size={Size.Small}
-				fullWidth
-				onclick={() => {
-					next?.onclick();
-				}}
-				disabled={!next}
-				colourSet={ColourSet.Primary}>Next</Button
-			>
-		</div>
-	</div>
-
-	<div
-		class:noscroll
-		class="content"
-	>
-		{#if currentStep}
-			{@render currentStep.content(currentStep.args)}
-		{:else}
-			<div class="wrapper bg">
-				<span class="red">{noStepMessage}</span>
-			</div>
-		{/if}
-	</div>
-</div>
-
+	}
+	return null;
+});
+$effect(() => {
+	if (name && currentStep) {
+		untrack(() => {
+			try {
+				sessionStorage.setItem(storageKey(name), JSON.stringify(currentStep.label));
+			} catch {}
+		});
+	}
+});
+</script>
+
+<div
+	class:noscroll
+	class="wrapper"
+>
+	<div class="tabs">
+		{#each steps as option, index (option.label)}
+			<StepButton
+				{option}
+				{index}
+				selected={currentStep?.label === option.label}
+			/>
+		{/each}
+		<div class="divider"></div>
+
+		<div class="steps">
+			<Button
+				size={Size.Small}
+				fullWidth
+				disabled={!previous}
+				onclick={() => {
+					previous?.onclick();
+				}}
+				colourSet={ColourSet.Secondary}>Previous</Button
+			>
+			<Button
+				size={Size.Small}
+				fullWidth
+				onclick={() => {
+					next?.onclick();
+				}}
+				disabled={!next}
+				colourSet={ColourSet.Primary}>Next</Button
+			>
+		</div>
+	</div>
+
+	<div
+		class:noscroll
+		class="content"
+	>
+		{#if currentStep}
+			{@render currentStep.content(currentStep.args)}
+		{:else}
+			<div class="wrapper bg">
+				<span class="red">{noStepMessage}</span>
+			</div>
+		{/if}
+	</div>
+</div>
+
 <style>.bg {
   padding: 1.5rem;
   background-color: #f9e9e9;
@@ -192,4 +172,4 @@
 }
 .wrapper .content.noscroll {
   overflow: visible;
-}</style>
+}</style>

package/dist/Components/Switch.svelte

@@ -1,71 +1,59 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { generateWeakId } from '../Helpers/Helpers.svelte.js';
-	import type { SwitchProps } from './SwitchProps.js';
-
-	let {
-		value = $bindable(false),
-		id = generateWeakId(),
-		label,
-		disabled,
-		isValid,
-		onchange,
-	}: SwitchProps = $props();
-
-	let mirror: HTMLInputElement | undefined = $state();
-
-	const toggle = () => {
-		if (disabled) {
-			return;
-		}
-		const next = !value;
-		value = next;
-		if (mirror && onchange) {
-			mirror.checked = next;
-			mirror.dispatchEvent(new Event('change', { bubbles: true }));
-		}
-	};
-</script>
-
-<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>
-		</div>
-	</button>
-
-	<input
-		name={id}
-		{onchange}
-		type="checkbox"
-		tabindex="-1"
-		aria-hidden="true"
-		checked={value}
-		bind:this={mirror}
-	/>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">import { generateWeakId } from "../Helpers/Helpers.svelte.js";
+let { value = $bindable(false), id = generateWeakId(), label, disabled, isValid, onchange } = $props();
+let mirror = $state();
+const toggle = () => {
+	if (disabled) {
+		return;
+	}
+	const next = !value;
+	value = next;
+	if (mirror && onchange) {
+		mirror.checked = next;
+		mirror.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+};
+</script>
+
+<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>
+		</div>
+	</button>
+
+	<input
+		name={id}
+		{onchange}
+		type="checkbox"
+		tabindex="-1"
+		aria-hidden="true"
+		checked={value}
+		bind:this={mirror}
+	/>
+</div>
+
 <style>.switch-wrapper {
   display: contents;
 }
@@ -174,4 +162,4 @@
 
 input {
   display: none;
-}</style>
+}</style>