@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/TextInputProps.d.ts

@@ -1,31 +1,88 @@
 import type { InputVariant } from '../Types/Internal/InputVariant.js';
 import type { FormEventHandler } from 'svelte/elements';
 import type { PartialIconProps } from './PartialIconProps.js';
+/**
+ * Props for the {@link TextInput} component.
+ *
+ * The component is intended to be used with `bind:value`. The `value`
+ * prop is `$bindable` inside the component; declare the type as
+ * `string | null` here. `null` represents the explicit empty state
+ * (parity with `NumberInput.value`). `undefined` is treated as empty
+ * by the default-empty initial.
+ */
 export interface TextInputProps {
+    /**
+     * Current text value. Bindable. `null` represents explicit empty.
+     * Defaults to `''` when the consumer does not bind a value.
+     */
     value?: string | null;
+    /** The `type` attribute on the underlying `<input>`. */
     type?: 'text' | 'tel' | 'email';
+    /** Render the "- optional" suffix next to `labelTop`. */
     optional?: boolean;
+    /** `id` on the `<input>`. */
     id?: string;
+    /** Label rendered above the input. */
     labelTop?: string | undefined;
+    /** Label rendered inside the input on the right. */
     labelRight?: string | undefined;
+    /** Native `placeholder` attribute. */
     placeholder?: string | undefined;
+    /** Native `required` attribute. */
     required?: boolean;
+    /** Render variant. See {@link InputVariant}. */
     variant?: InputVariant;
+    /** Disable native text selection on the input. */
     selectNone?: boolean;
+    /** Force the rendered value uppercase via CSS. */
     uppercase?: boolean;
+    /** Native `disabled` attribute. */
     disabled?: boolean;
+    /** Force the invalid visual state. */
     invalid?: boolean;
+    /**
+     * When true the component renders its invalid visual state when
+     * `required` is unmet or `invalid` is true. Defaults to true.
+     */
     showErrorColours?: boolean;
+    /** Icon rendered on the left of the input. */
     leftIcon?: PartialIconProps;
+    /** Icon rendered on the right of the input. */
     rightIcon?: PartialIconProps;
+    /** Disable the left icon (only meaningful when it has `onLeftIconClick`). */
     leftIconDisabled?: boolean;
+    /** Disable the right icon (only meaningful when it has `onRightIconClick`). */
     rightIconDisabled?: boolean;
-    onLeftIconClick?: () => void;
+    /** Click handler for the left icon (turns it into an interactive control). */
+    onLeftIconClick?: (e?: MouseEvent) => void;
+    /** Click handler for the right icon (turns it into an interactive control). */
     onRightIconClick?: () => void;
+    /** Bindable reference to the underlying `<input>` element. */
     inputRef?: HTMLInputElement | undefined;
+    /** `data-type` attribute, used by domain-aware tooling (e.g. barcode scanners). */
     'data-type'?: string;
+    /**
+     * Native `autocomplete` value. Defaults to undefined (browser default).
+     * Set explicitly for credential or address-style fields to opt in to
+     * password-manager / autofill behaviour.
+     */
+    autocomplete?: import('svelte/elements').HTMLInputAttributes['autocomplete'];
+    /**
+     * Native `spellcheck` attribute. Defaults to undefined (browser default).
+     * Disable for codes / identifiers to prevent UA spell-check overlays.
+     */
+    spellcheck?: boolean;
+    /** Blur handler forwarded to the `<input>`. */
     onblur?: (e: FocusEvent) => void;
+    /** Focus handler forwarded to the `<input>`. */
     onfocus?: (e: FocusEvent) => void;
+    /**
+     * Keydown handler forwarded to the `<input>`. The default is
+     * `passthrough` (blur on alphanumeric keypress) so that barcode
+     * scanner workflows continue to work; pass an explicit handler to
+     * override.
+     */
     onkeydown?: (e: KeyboardEvent) => void;
+    /** Input event forwarded to the `<input>`. */
     oninput?: FormEventHandler<HTMLInputElement>;
 }

package/dist/Components/ThreeStateRadio.svelte

@@ -1,126 +1,133 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import { Ternary } from '../Types/Internal/Ternary.js';
-	import { untrack } from 'svelte';
-	import Action from './Action.svelte';
-	import type { ThreeStateRadioProps } from './ThreeStateRadioProps.js';
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(Ternary.Neutral),
-		// id = generateShortUUID(),
-		label,
-		disabled,
-		isValid,
-		onchange,
-		noDisabled = false,
-		yesDisabled = false,
-		neutralDisabled = false,
-		noLabel,
-		yesLabel,
-		neutralLabel,
-		noIcon,
-		yesIcon,
-		neutralIcon
-	}: ThreeStateRadioProps = $props();
-
-	let textValue = $state('');
-
-	$effect(() => {
-		void value;
-		untrack(() => {
-			if (value === Ternary.False && textValue !== '0') {
-				textValue = '0';
-			} else if (value === Ternary.Neutral && textValue !== '-1') {
-				textValue = '-1';
-			} else if (value === Ternary.True && textValue !== '1') {
-				textValue = '1';
-			}
-		});
-	});
-
-	$effect(() => {
-		void textValue;
-		untrack(() => {
-			if (textValue === '0' && value !== Ternary.False) {
-				value = Ternary.False;
-				onchange?.(Ternary.False);
-			} else if (textValue === '-1' && value !== Ternary.Neutral) {
-				value = Ternary.Neutral;
-				onchange?.(Ternary.Neutral);
-			} else if (textValue === '1' && value !== Ternary.True) {
-				value = Ternary.True;
-				onchange?.(Ternary.True);
-			}
-		});
-	});
-</script>
-
-<div class="text-label" class:invalid={isValid === false}>
-	{#if label != undefined}
-		<span>{label}</span>
-	{/if}
-
-	<div class="radios">
-		<label>
-			<Action
-				disabled={disabled || noDisabled}
-				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'circle-cross',
-					...noIcon,
-					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5']
-				}}
-				label={noLabel ?? 'No'}
-				onclick={() => {
-					textValue = '0';
-				}}
-			/>
-			<input disabled={disabled || noDisabled} type="radio" bind:group={textValue} value="0" />
-		</label>
-		<label>
-			<Action
-				disabled={disabled || neutralDisabled}
-				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'database',
-					...neutralIcon,
-					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5']
-				}}
-				label={neutralLabel ?? 'Allow system to decide'}
-				onclick={() => {
-					textValue = '-1';
-				}}
-			/>
-			<input
-				disabled={disabled || neutralDisabled}
-				type="radio"
-				bind:group={textValue}
-				value="-1"
-			/>
-		</label>
-		<label>
-			<Action
-				disabled={disabled || yesDisabled}
-				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'circle-tick',
-					...yesIcon,
-					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5']
-				}}
-				label={yesLabel ?? 'Yes'}
-				onclick={() => {
-					textValue = '1';
-				}}
-			/>
-			<input disabled={disabled || yesDisabled} type="radio" bind:group={textValue} value="1" />
-		</label>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import { Ternary } from '../Types/Internal/Ternary.js';
+	import Action from './Action.svelte';
+	import type { ThreeStateRadioProps } from './ThreeStateRadioProps.js';
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(Ternary.Neutral),
+		label,
+		disabled,
+		isValid,
+		onchange,
+		noDisabled = false,
+		yesDisabled = false,
+		neutralDisabled = false,
+		noLabel,
+		yesLabel,
+		neutralLabel,
+		noIcon,
+		yesIcon,
+		neutralIcon,
+	}: ThreeStateRadioProps = $props();
+
+	function setValue(next: Ternary): void {
+		if (next === value) {
+			return;
+		}
+		value = next;
+		void onchange?.(next);
+	}
+</script>
+
+<div
+	class="text-label"
+	class:invalid={isValid === false}
+>
+	{#if label != undefined}
+		<span>{label}</span>
+	{/if}
+
+	<div
+		class="radios"
+		role="radiogroup"
+		aria-label={label}
+	>
+		<label>
+			<Action
+				disabled={disabled || noDisabled}
+				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'circle-cross',
+					...noIcon,
+					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5'],
+				}}
+				label={noLabel ?? 'No'}
+				onclick={() => {
+					setValue(Ternary.False);
+				}}
+			/>
+			<input
+				disabled={disabled || noDisabled}
+				type="radio"
+				value="0"
+				checked={value === Ternary.False}
+				aria-label={noLabel ?? 'No'}
+				onchange={() => {
+					setValue(Ternary.False);
+				}}
+			/>
+		</label>
+		<label>
+			<Action
+				disabled={disabled || neutralDisabled}
+				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'database',
+					...neutralIcon,
+					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5'],
+				}}
+				label={neutralLabel ?? 'Allow system to decide'}
+				onclick={() => {
+					setValue(Ternary.Neutral);
+				}}
+			/>
+			<input
+				disabled={disabled || neutralDisabled}
+				type="radio"
+				value="-1"
+				checked={value === Ternary.Neutral}
+				aria-label={neutralLabel ?? 'Allow system to decide'}
+				onchange={() => {
+					setValue(Ternary.Neutral);
+				}}
+			/>
+		</label>
+		<label>
+			<Action
+				disabled={disabled || yesDisabled}
+				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'circle-tick',
+					...yesIcon,
+					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5'],
+				}}
+				label={yesLabel ?? 'Yes'}
+				onclick={() => {
+					setValue(Ternary.True);
+				}}
+			/>
+			<input
+				disabled={disabled || yesDisabled}
+				type="radio"
+				value="1"
+				checked={value === Ternary.True}
+				aria-label={yesLabel ?? 'Yes'}
+				onchange={() => {
+					setValue(Ternary.True);
+				}}
+			/>
+		</label>
+	</div>
+</div>
+
 <style>.text-label {
   box-sizing: border-box;
   height: max(var(--input-height, 3rem), 2rem);
@@ -180,25 +187,15 @@
   background-color: #f4f7f9;
   cursor: default;
 }
-.text-label:disabled .switch {
-  background-color: #f4f7f9;
-}
-.text-label:disabled .switch .switch-inner.on {
-  background-color: #647d8e;
-}
-.text-label:disabled .switch .switch-inner:not(.on) {
-  border-color: #647d8e;
-}
-.text-label:not([disabled]):hover .switch-inner.on {
-  background-color: #1f81a0;
-}
-.text-label:not([disabled]):hover .switch-inner:not(.on) {
-  border-color: #3a4952;
-}
-.text-label:not([disabled]):hover .track:not(.on) {
-  background-color: #3a4952;
-}
 
 input {
-  display: none;
-}</style>
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}</style>

package/dist/Components/ThreeStateRadioProps.d.ts

@@ -1,19 +1,47 @@
 import type { Ternary } from '../Types/Internal/Ternary.js';
 import type { PartialIconProps } from './PartialIconProps.js';
+/**
+ * Props for the {@link ThreeStateRadio} component.
+ *
+ * Renders three `Action` buttons backed by hidden but accessible
+ * `<input type="radio">` elements. Selection is driven by the
+ * {@link Ternary} value: `False`, `Neutral`, `True`. The default
+ * value is `Ternary.Neutral`.
+ */
 export interface ThreeStateRadioProps {
+    /** Visible heading rendered before the radio group. */
     label?: string;
+    /**
+     * Current value. Bindable. Defaults to {@link Ternary.Neutral}.
+     */
     value?: Ternary;
-    onchange?: (value: Ternary) => void;
+    /**
+     * Change handler. May return `void` or a `Promise<void>` for
+     * consumers that need to do async work on selection.
+     */
+    onchange?: (value: Ternary) => void | Promise<void>;
+    /** `id` on the group (reserved; not currently rendered). */
     id?: string;
+    /** Disable all three options. */
     disabled?: boolean;
+    /** When `false`, render the invalid visual state. */
     isValid?: boolean;
+    /** Disable only the "False" option. */
     noDisabled?: boolean;
+    /** Disable only the "True" option. */
     yesDisabled?: boolean;
+    /** Disable only the "Neutral" option. */
     neutralDisabled?: boolean;
+    /** Accessible label for the "False" option (defaults to "No"). */
     noLabel?: string;
+    /** Accessible label for the "True" option (defaults to "Yes"). */
     yesLabel?: string;
+    /** Accessible label for the "Neutral" option. */
     neutralLabel?: string;
+    /** Icon override for the "False" option. */
     noIcon?: PartialIconProps;
+    /** Icon override for the "True" option. */
     yesIcon?: PartialIconProps;
+    /** Icon override for the "Neutral" option. */
     neutralIcon?: PartialIconProps;
 }

package/dist/Components/Touch/BoolCard.svelte

@@ -1,54 +1,47 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import type { Snippet } from 'svelte';
-	import Icon from '../Icon.svelte';
-	import type { IconProps } from '../IconProps.js';
-
-	export interface BoolCardProps {
-		value?: boolean;
-		disabled?: boolean | undefined;
-		onclick?: (e: MouseEvent) => void;
-		children?: Snippet;
-		nowidth?: boolean;
-		size?: Size;
-	}
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(false),
-		disabled,
-		onclick,
-		children,
-		nowidth,
-		size = Size.Medium
-	}: BoolCardProps = $props();
-
-	const iconName = $derived(value ? 'circle-tick' : ('circle' as IconProps['name']));
-</script>
-
-<button
-	class:small={size == Size.Small}
-	onkeydown={passthrough}
-	disabled={disabled || undefined}
-	class:nowidth
-	type="button"
-	class="card"
-	class:ticked={value}
-	{onclick}
->
-	{#if children}
-		<span class="value" class:small={size == Size.Small}>{@render children()}</span>{/if}<Icon
-		name={iconName}
-		size={Size.DoubleXLarge}
-		colour={value ? Colour['$ui-white'] : undefined}
-	/>
-</button>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { passthrough } 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 { BoolCardProps } from './BoolCardProps.js';
+	import type { IconProps } from '../IconProps.js';
+
+	let {
+		value = $bindable(false),
+		disabled,
+		onclick,
+		children,
+		nowidth,
+		size = Size.Medium,
+	}: BoolCardProps = $props();
+
+	const iconName = $derived(value ? 'circle-tick' : ('circle' as IconProps['name']));
+</script>
+
+<button
+	class:small={size == Size.Small}
+	onkeydown={passthrough}
+	disabled={disabled || undefined}
+	aria-pressed={value}
+	class:nowidth
+	type="button"
+	class="card"
+	class:ticked={value}
+	{onclick}
+>
+	{#if children}
+		<span
+			class="value"
+			class:small={size == Size.Small}>{@render children()}</span
+		>{/if}<Icon
+		name={iconName}
+		size={Size.DoubleXLarge}
+		colour={value ? Colour['$ui-white'] : undefined}
+	/>
+</button>
+
 <style>button.card {
   color: #3a4952;
   fill: #3a4952;
@@ -178,4 +171,4 @@ button.card .value.small {
   font-size: 1.1875rem;
   font-weight: 600;
   padding: 0;
-}</style>
+}</style>

package/dist/Components/Touch/BoolCard.svelte.d.ts

@@ -1,13 +1,4 @@
-import { Size } from '../../Types/Internal/Size.js';
-import type { Snippet } from 'svelte';
-export interface BoolCardProps {
-    value?: boolean;
-    disabled?: boolean | undefined;
-    onclick?: (e: MouseEvent) => void;
-    children?: Snippet;
-    nowidth?: boolean;
-    size?: Size;
-}
+import type { BoolCardProps } from './BoolCardProps.js';
 declare const BoolCard: import("svelte").Component<BoolCardProps, {}, "value">;
 type BoolCard = ReturnType<typeof BoolCard>;
 export default BoolCard;

package/dist/Components/Touch/BoolCardProps.d.ts

@@ -0,0 +1,21 @@
+import type { Size } from '../../Types/Internal/Size.js';
+import type { Snippet } from 'svelte';
+/**
+ * Props for `BoolCard`, a touch-friendly toggle card that flips between
+ * checked and unchecked states. Pressing the card fires `onclick`; the
+ * caller is expected to update the bound `value`.
+ */
+export interface BoolCardProps {
+    /** Two-way bindable boolean state. Defaults to false. */
+    value?: boolean;
+    /** Disable click handling and visually mute the card. */
+    disabled?: boolean | undefined;
+    /** Click handler. Fires on touch/click. */
+    onclick?: (e: MouseEvent) => void;
+    /** Optional label snippet rendered alongside the tick icon. */
+    children?: Snippet;
+    /** Render without enforcing 100% width (defaults to filling the parent). */
+    nowidth?: boolean;
+    /** Visual size of the card. Defaults to Size.Medium. */
+    size?: Size;
+}

package/dist/Components/Touch/BoolCardProps.js

@@ -0,0 +1 @@
+export {};