@lavalogic/scoria 0.37.44 → 0.37.46

package/dist/Components/PasswordInput.svelte

@@ -1,90 +1,90 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { cssLength } from '../Helpers/Helpers.svelte.js';
-	import { ColourSet } from '../scss/colours.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Action from './Action.svelte';
-	import Icon from './Icon.svelte';
-	import type { PasswordInputProps } from './PasswordInputProps.js';
-	let {
-		value = $bindable(''),
-		label = undefined,
-		placeholder = undefined,
-		required = false,
-		disabled = undefined,
-		showInput = $bindable(false),
-		leftIcon = undefined,
-		inputRef = $bindable(),
-		autocomplete = 'current-password',
-		onblur,
-		onfocus,
-		// No default `onkeydown` - see TextInput.svelte for the rationale.
-		// The legacy default (`passthrough`) blurred the input on every
-		// alphanumeric keystroke and made the field unusable.
-		onkeydown,
-	}: PasswordInputProps = $props();
-
-	function toggleVisibility(): void {
-		showInput = !showInput;
-		inputRef?.focus();
-	}
-</script>
-
-<div class="error-wrapper">
-	<label>
-		{#if label}
-			<span class="for-default">{label}</span>
-			<span
-				aria-hidden="true"
-				class="border">{label}</span
-			>
-		{/if}
-		<div class="icon-container">
-			{#if leftIcon}
-				<Icon
-					name={leftIcon.name}
-					size={leftIcon.size ?? Size.Medium}
-					float
-					left={cssLength('0.75rem')}
-					top={cssLength('50%')}
-					anchorX={cssLength('0')}
-					anchorY={cssLength('-50%')}
-				/>
-			{/if}
-			<input
-				class="for-default"
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={true}
-				type={showInput ? 'text' : 'password'}
-				{autocomplete}
-				autocapitalize="none"
-				autocorrect="off"
-				spellcheck="false"
-				data-form-type="password"
-				bind:value
-				bind:this={inputRef}
-				{onblur}
-				{onfocus}
-				{onkeydown}
-				{placeholder}
-				{required}
-				{disabled}
-			/>
-
-			<div class="right-icon">
-				<Action
-					label={showInput ? 'Hide password' : 'Show password'}
-					colourSet={showInput ? ColourSet.Secondary : ColourSet.Auxiliary}
-					icon={{ name: showInput ? 'visibility-off' : 'visibility' }}
-					size={Size.MediumSmall}
-					onclick={toggleVisibility}
-				/>
-			</div>
-		</div>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { cssLength } from '../Helpers/Helpers.svelte.js';
+	import { ColourSet } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Action from './Action.svelte';
+	import Icon from './Icon.svelte';
+	import type { PasswordInputProps } from './PasswordInputProps.js';
+	let {
+		value = $bindable(''),
+		label = undefined,
+		placeholder = undefined,
+		required = false,
+		disabled = undefined,
+		showInput = $bindable(false),
+		leftIcon = undefined,
+		inputRef = $bindable(),
+		autocomplete = 'current-password',
+		onblur,
+		onfocus,
+		// No default `onkeydown` - see TextInput.svelte for the rationale.
+		// The legacy default (`passthrough`) blurred the input on every
+		// alphanumeric keystroke and made the field unusable.
+		onkeydown,
+	}: PasswordInputProps = $props();
+
+	function toggleVisibility(): void {
+		showInput = !showInput;
+		inputRef?.focus();
+	}
+</script>
+
+<div class="error-wrapper">
+	<label>
+		{#if label}
+			<span class="for-default">{label}</span>
+			<span
+				aria-hidden="true"
+				class="border">{label}</span
+			>
+		{/if}
+		<div class="icon-container">
+			{#if leftIcon}
+				<Icon
+					name={leftIcon.name}
+					size={leftIcon.size ?? Size.Medium}
+					float
+					left={cssLength('0.75rem')}
+					top={cssLength('50%')}
+					anchorX={cssLength('0')}
+					anchorY={cssLength('-50%')}
+				/>
+			{/if}
+			<input
+				class="for-default"
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={true}
+				type={showInput ? 'text' : 'password'}
+				{autocomplete}
+				autocapitalize="none"
+				autocorrect="off"
+				spellcheck="false"
+				data-form-type="password"
+				bind:value
+				bind:this={inputRef}
+				{onblur}
+				{onfocus}
+				{onkeydown}
+				{placeholder}
+				{required}
+				{disabled}
+			/>
+
+			<div class="right-icon">
+				<Action
+					label={showInput ? 'Hide password' : 'Show password'}
+					colourSet={showInput ? ColourSet.Secondary : ColourSet.Auxiliary}
+					icon={{ name: showInput ? 'visibility-off' : 'visibility' }}
+					size={Size.MediumSmall}
+					onclick={toggleVisibility}
+				/>
+			</div>
+		</div>
+	</label>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -318,4 +318,4 @@ label.for-table input {
 
 td {
   --input-border: none;
-}</style>
+}</style>

package/dist/Components/Portal.svelte

@@ -1,36 +1,36 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { browser } from '$app/environment';
-	import type { PortalProps } from './PortalProps.js';
-
-	let { target = browser ? globalThis.document.body : undefined, children }: PortalProps = $props();
-
-	let ref: HTMLElement | undefined = $state();
-	let lastTarget: HTMLElement | undefined;
-
-	$effect(() => {
-		// Identity guard: only re-parent when `target` actually changes.
-		// `appendChild` already moves the node when called, so this avoids
-		// unnecessary detach/attach when an upstream `$state` target
-		// re-fires the effect without changing identity.
-		if (target && ref && target !== lastTarget) {
-			if (target.ownerDocument === globalThis.document) {
-				target.appendChild(ref);
-				lastTarget = target;
-			}
-		}
-
-		// Cleanup is necessary, not redundant: without it, the appended
-		// node would remain inside `target` after the Portal unmounts,
-		// because `target` outlives the component.
-		return () => {
-			ref?.parentNode?.removeChild(ref);
-			lastTarget = undefined;
-		};
-	});
-</script>
-
-<div bind:this={ref}>
-	{@render children()}
-</div>
+<svelte:options runes />
+
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import type { PortalProps } from './PortalProps.js';
+
+	let { target = browser ? globalThis.document.body : undefined, children }: PortalProps = $props();
+
+	let ref: HTMLElement | undefined = $state();
+	let lastTarget: HTMLElement | undefined;
+
+	$effect(() => {
+		// Identity guard: only re-parent when `target` actually changes.
+		// `appendChild` already moves the node when called, so this avoids
+		// unnecessary detach/attach when an upstream `$state` target
+		// re-fires the effect without changing identity.
+		if (target && ref && target !== lastTarget) {
+			if (target.ownerDocument === globalThis.document) {
+				target.appendChild(ref);
+				lastTarget = target;
+			}
+		}
+
+		// Cleanup is necessary, not redundant: without it, the appended
+		// node would remain inside `target` after the Portal unmounts,
+		// because `target` outlives the component.
+		return () => {
+			ref?.parentNode?.removeChild(ref);
+			lastTarget = undefined;
+		};
+	});
+</script>
+
+<div bind:this={ref}>
+	{@render children()}
+</div>

package/dist/Components/ProgressBubble.svelte

@@ -1,110 +1,109 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
-	import { getCanvasContext } from '../Helpers/Helpers.svelte.js';
-	import type { BubbleColour } from './BubbleColour.js';
-	import type { ProgressBubbleProps } from './ProgressBubbleProps.js';
-
-	const { value, colours }: ProgressBubbleProps = $props();
-
-	const current = $derived(value[0]);
-	const total = $derived(value[1]);
-	const progress = $derived(`${current}/${total}`);
-
-	// Clamp the percentage so callers passing `current > total` do not
-	// blow past the bar's edge.
-	const percent = $derived(Math.min((current / total) * 100, 100));
-
-	let progressBarRef: HTMLDivElement | undefined = $state();
-
-	// Observed inline-size of the filled bar. A `ResizeObserver` is used
-	// instead of `getBoundingClientRect()` inside an `$effect`: the latter
-	// forces a synchronous layout flush on every `progress` change, which
-	// is expensive inside a table with many `ProgressBubble` cells. The
-	// observer notifies us only when the bar's actual rendered size
-	// changes, and does so via a microtask scheduled by the browser so we
-	// never force layout ourselves.
-	let barWidth = $state(0);
-	$effect(() => {
-		if (!progressBarRef) {
-			return;
-		}
-		const ro = new ResizeObserver((entries) => {
-			const entry = entries[0];
-			barWidth = entry.borderBoxSize[0]?.inlineSize ?? entry.contentRect.width;
-		});
-		ro.observe(progressBarRef);
-		return () => {
-			ro.disconnect();
-		};
-	});
-
-	// Whether the `current/total` label fits inside the filled bar.
-	// Measured via a memoised offscreen canvas so we do not trigger
-	// layout.
-	const fitsInProgressBar = $derived.by(() => {
-		const textWidth = getCanvasContext()?.measureText(`__${progress}__`).width ?? 0;
-		return barWidth > textWidth;
-	});
-
-	// `colours` may be a bare `BubbleColour`, a Promise resolving to one,
-	// or undefined. Routed through `useAsyncFlag` which (a) cancels stale
-	// Promises via a sequence ticket so the freshest value always wins,
-	// (b) reports errors through `ToastContext` when one is mounted, and
-	// (c) falls back to `undefined` while no resolution is available.
-	const awaitedColoursFlag = useAsyncFlag<BubbleColour | undefined>(() => colours, undefined);
-	const awaitedColours = $derived(awaitedColoursFlag.value);
-
-	// Precompute the wrapper and bar style strings. Each colour comes
-	// from the trusted `Colour` registry (see `Bubble.svelte` security
-	// note) so interpolation into `style="..."` is safe.
-	const wrapperStyle = $derived(
-		awaitedColours
-			? `--bar-background-colour: ${awaitedColours.backgroundColour}; --text-colour: ${awaitedColours.colour};`
-			: ''
-	);
-	const barStyle = $derived(`width: ${percent}%;`);
-</script>
-
-<div
-	class="progress-wrapper"
-	style={wrapperStyle}
->
-	<!--
-		Native `<progress>` is kept as a fallback for assistive tech that
-		ignores ARIA progressbar roles. Previously it was `display: none`,
-		which removed it from the accessibility tree; it is now visually
-		hidden (off-screen, zero opacity, but still in the layout tree).
-	-->
-	<progress
-		class="visually-hidden"
-		value={current}
-		max={total}>{progress}</progress
-	>
-
-	<div
-		class="progress-background"
-		role="progressbar"
-		aria-valuenow={current}
-		aria-valuemin={0}
-		aria-valuemax={total}
-		aria-valuetext={progress}
-	>
-		<div
-			class:fits={fitsInProgressBar}
-			class="progress-value"
-			bind:this={progressBarRef}
-			style={barStyle}
-		>
-			<span
-				class:fits={fitsInProgressBar}
-				class="progress-text">{progress}</span
-			>
-		</div>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
+	import { getCanvasContext } from '../Helpers/Helpers.svelte.js';
+	import type { BubbleColour } from './BubbleColour.js';
+	import type { ProgressBubbleProps } from './ProgressBubbleProps.js';
+
+	const { value, colours }: ProgressBubbleProps = $props();
+
+	const current = $derived(value[0]);
+	const total = $derived(value[1]);
+	const progress = $derived(`${current}/${total}`);
+
+	// Clamp the percentage so callers passing `current > total` do not
+	// blow past the bar's edge.
+	const percent = $derived(Math.min((current / total) * 100, 100));
+
+	let progressBarRef: HTMLDivElement | undefined = $state();
+
+	// Observed inline-size of the filled bar. A `ResizeObserver` is used
+	// instead of `getBoundingClientRect()` inside an `$effect`: the latter
+	// forces a synchronous layout flush on every `progress` change, which
+	// is expensive inside a table with many `ProgressBubble` cells. The
+	// observer notifies us only when the bar's actual rendered size
+	// changes, and does so via a microtask scheduled by the browser so we
+	// never force layout ourselves.
+	let barWidth = $state(0);
+	$effect(() => {
+		if (!progressBarRef) {
+			return;
+		}
+		const ro = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			barWidth = entry.borderBoxSize[0]?.inlineSize ?? entry.contentRect.width;
+		});
+		ro.observe(progressBarRef);
+		return () => {
+			ro.disconnect();
+		};
+	});
+
+	// Whether the `current/total` label fits inside the filled bar.
+	// Measured via a memoised offscreen canvas so we do not trigger
+	// layout.
+	const fitsInProgressBar = $derived.by(() => {
+		const textWidth = getCanvasContext()?.measureText(`__${progress}__`).width ?? 0;
+		return barWidth > textWidth;
+	});
+
+	// `colours` may be a bare `BubbleColour`, a Promise resolving to one,
+	// or undefined. Routed through `useAsyncFlag` which (a) cancels stale
+	// Promises via a sequence ticket so the freshest value always wins,
+	// (b) reports errors through `ToastContext` when one is mounted, and
+	// (c) falls back to `undefined` while no resolution is available.
+	const awaitedColoursFlag = useAsyncFlag<BubbleColour | undefined>(() => colours, undefined);
+	const awaitedColours = $derived(awaitedColoursFlag.value);
+
+	// Precompute the wrapper and bar style strings. Each colour comes
+	// from the trusted `Colour` registry (see `Bubble.svelte` security
+	// note) so interpolation into `style="..."` is safe.
+	const wrapperStyle = $derived(
+		awaitedColours
+			? `--bar-background-colour: ${awaitedColours.backgroundColour}; --text-colour: ${awaitedColours.colour};`
+			: ''
+	);
+	const barStyle = $derived(`width: ${percent}%;`);
+</script>
+
+<div
+	class="progress-wrapper"
+	style={wrapperStyle}
+>
+	<!--
+		Native `<progress>` is kept as a fallback for assistive tech that
+		ignores ARIA progressbar roles. Visually hidden rather than
+		`display: none` so the element stays in the accessibility tree.
+	-->
+	<progress
+		class="visually-hidden"
+		value={current}
+		max={total}>{progress}</progress
+	>
+
+	<div
+		class="progress-background"
+		role="progressbar"
+		aria-valuenow={current}
+		aria-valuemin={0}
+		aria-valuemax={total}
+		aria-valuetext={progress}
+	>
+		<div
+			class:fits={fitsInProgressBar}
+			class="progress-value"
+			bind:this={progressBarRef}
+			style={barStyle}
+		>
+			<span
+				class:fits={fitsInProgressBar}
+				class="progress-text">{progress}</span
+			>
+		</div>
+	</div>
+</div>
+
 <style>.progress-wrapper {
   width: 100%;
   height: 100%;
@@ -173,4 +172,4 @@
 }
 .progress-text.fits {
   color: var(--text-colour, #3a4952);
-}</style>
+}</style>

package/dist/Components/ProgressBubbleProps.d.ts

@@ -10,9 +10,9 @@ import type { BubbleColour } from './BubbleColour.js';
 export interface ProgressBubbleProps {
     /**
      * Labelled `[current, total]` tuple. The first slot is the amount
-     * progressed; the second is the upper bound. Previously typed as
-     * `[number, number]`; the labelled-tuple variant compiles
-     * identically but documents the position in the editor's tooltip.
+     * progressed; the second is the upper bound. The labelled-tuple form
+     * compiles identically to `[number, number]` but surfaces the slot
+     * names in the editor's tooltip.
      */
     value: [current: number, total: number];
     /**