@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/TextArea.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
+	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import Icon from './Icon.svelte';
@@ -19,7 +20,7 @@
 		uppercase = false,
 		disabled,
 		invalid = false,
-		showErrorColours = false,
+		showErrorColours = true,
 		optional = false,
 		leftIcon,
 		rightIcon,
@@ -28,17 +29,22 @@
 		rows = 4,
 
 		textAreaRef = $bindable(),
+		autocomplete,
+		spellcheck,
 		onblur,
-		onfocus
+		onfocus,
+		onkeydown = passthrough,
+		oninput,
 	}: TextAreaProps = $props();
 
-	let isInvalid = $derived(showErrorColours && ((required && value.trim() === '') || invalid));
+	const isInvalid = $derived(showErrorColours && ((required && value.trim() === '') || invalid));
 </script>
 
-<label class:for-modal={variant === InputVariant.Modal} class:max-width={maxWidth}>
-	<!-- HACK removed label for modals for now because I couldn't think of a decent style that doesn't interfere with scrolling -->
+<label
+	class:for-modal={variant === InputVariant.Modal}
+	class:max-width={maxWidth}
+>
 	{#if labelTop && variant !== InputVariant.Modal}
-		<!-- <span class="top-label" class:invalid={isInvalid}>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span> -->
 		<span
 			class="top-label"
 			class:for-default={variant === InputVariant.Default}
@@ -46,23 +52,28 @@
 			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
 		>
 		{#if variant === InputVariant.Default}
-			<span class="border" class:invalid={isInvalid}
+			<span
+				aria-hidden="true"
+				class="border"
+				class:invalid={isInvalid}
 				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
 			>
 		{/if}
 	{/if}
-	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
-	<div class="icon-container" class:for-modal={variant == InputVariant.Modal}>
+	<div
+		class="icon-container"
+		class:for-modal={variant == InputVariant.Modal}
+	>
 		{#if leftIcon}
 			<Icon
 				name={leftIcon.name}
 				size={leftIcon.size ?? Size.Medium}
 				colour={leftIcon.colour}
 				float
-				left="0.75rem"
-				top="50%"
-				anchorX="0"
-				anchorY="-50%"
+				left={cssLength('0.75rem')}
+				top={cssLength('50%')}
+				anchorX={cssLength('0')}
+				anchorY={cssLength('-50%')}
 				clickable={!!onLeftIconClick}
 				onclick={onLeftIconClick}
 			/>
@@ -76,9 +87,14 @@
 			class:right-pad={rightIcon != undefined}
 			class:for-modal={variant == InputVariant.Modal}
 			class:max-width={maxWidth}
+			autocomplete={autocomplete ?? 'off'}
+			spellcheck={spellcheck ?? true}
+			aria-invalid={isInvalid || undefined}
 			bind:value
 			{onblur}
 			{onfocus}
+			{onkeydown}
+			{oninput}
 			{rows}
 			bind:this={textAreaRef}
 			{placeholder}
@@ -91,16 +107,19 @@
 				size={rightIcon.size ?? Size.Medium}
 				colour={rightIcon.colour}
 				float
-				right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
-				top="50%"
-				anchorX="0"
-				anchorY="-50%"
+				right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
+				top={cssLength('50%')}
+				anchorX={cssLength('0')}
+				anchorY={cssLength('-50%')}
 				clickable={!!onRightIconClick}
 				onclick={onRightIconClick}
 			/>
 		{/if}
 		{#if labelRight}
-			<span class="right-label" class:for-modal={variant == InputVariant.Modal}>{labelRight}</span>
+			<span
+				class="right-label"
+				class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
+			>
 		{/if}
 	</div>
 </label>

package/dist/Components/TextAreaProps.d.ts

@@ -1,26 +1,63 @@
 import type { InputVariant } from '../Types/Internal/InputVariant.js';
+import type { FormEventHandler } from 'svelte/elements';
 import type { PartialIconProps } from './PartialIconProps.js';
+/**
+ * Props for the {@link TextArea} component.
+ *
+ * Mirrors {@link TextInputProps} where applicable. `value` is `string`
+ * (non-nullable) by design.
+ */
 export interface TextAreaProps {
+    /** Current text value. Bindable. */
     value: string;
+    /** Blur handler forwarded to the `<textarea>`. */
     onblur?: (e: FocusEvent) => void;
+    /** Focus handler forwarded to the `<textarea>`. */
     onfocus?: (e: FocusEvent) => void;
+    /** Keydown handler. Defaults to `passthrough`. */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Input event forwarded to the `<textarea>`. */
+    oninput?: FormEventHandler<HTMLTextAreaElement>;
+    /** Label rendered above the textarea. */
     labelTop?: string | undefined;
+    /** Label rendered inside the textarea on the right. */
     labelRight?: string;
+    /** Native `placeholder` attribute. */
     placeholder?: string | undefined;
+    /** Native `required` attribute. */
     required?: boolean;
+    /** Render variant. See {@link InputVariant}. */
     variant?: InputVariant;
+    /** Disable native text selection on the textarea. */
     selectNone?: boolean;
+    /** Render the "- optional" suffix next to `labelTop`. */
     optional?: boolean;
+    /** Force the rendered value uppercase via CSS. */
     uppercase?: boolean;
+    /** Native `disabled` attribute. */
     disabled?: boolean;
+    /** Force the invalid visual state. */
     invalid?: boolean;
+    /** Constrain the textarea to its `max-width`. Defaults to false. */
     maxWidth?: boolean;
+    /** When true, render invalid visuals for unmet `required`/`invalid`. Defaults to true. */
     showErrorColours?: boolean;
+    /** Icon rendered on the left of the textarea. */
     leftIcon?: PartialIconProps;
+    /** Icon rendered on the right of the textarea. */
     rightIcon?: PartialIconProps;
+    /** Click handler for the left icon. */
     onLeftIconClick?: () => void;
+    /** Click handler for the right icon. */
     onRightIconClick?: () => void;
+    /** Number of visual rows. Must be a positive integer. Defaults to 4. */
     rows?: number;
+    /** Bindable reference to the underlying `<textarea>`. */
     textAreaRef?: HTMLTextAreaElement | undefined;
+    /** Suppress the resize handle. */
     noresize?: boolean;
+    /** Native `autocomplete` value. Defaults to `'off'`. */
+    autocomplete?: import('svelte/elements').HTMLTextareaAttributes['autocomplete'];
+    /** Native `spellcheck` attribute. Defaults to `true`. */
+    spellcheck?: boolean;
 }

package/dist/Components/TextInput.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { isValidEmailAddress } from '../Helpers/Helpers.svelte.js';
+	import { cssLength, isValidEmailAddress, passthrough } from '../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../scss/colours.js';
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
 	import { Size } from '../Types/Internal/Size.js';
@@ -23,7 +23,6 @@
 		invalid = false,
 		showErrorColours = true,
 		rightIconDisabled = false,
-		// leftIconDisabled = false,
 		leftIcon,
 		rightIcon,
 		type,
@@ -31,16 +30,23 @@
 		onRightIconClick,
 		inputRef = $bindable(),
 		'data-type': dataType,
+		autocomplete,
+		spellcheck,
 		onblur,
 		onfocus,
-		onkeydown,
+		onkeydown = passthrough,
 		oninput,
 	}: TextInputProps = $props();
 
-	let isInvalid = $derived(
+	const isInvalid = $derived(
 		showErrorColours &&
 			!disabled &&
-			((required && (!value?.trim() || (type == 'email' && !isValidEmailAddress(value)))) ||
+			((required &&
+				(!value?.trim() ||
+					(type == 'email' &&
+						value.length >= 3 &&
+						value.includes('@') &&
+						!isValidEmailAddress(value)))) ||
 				invalid)
 	);
 </script>
@@ -63,6 +69,7 @@
 			>
 			{#if variant === InputVariant.Default}
 				<span
+					aria-hidden="true"
 					class="border"
 					class:invalid={isInvalid}
 					>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
@@ -74,19 +81,28 @@
 			class:for-modal={variant == InputVariant.Modal}
 		>
 			{#if leftIcon}
-				<!-- TODO make this identical to right icon -->
-				<Icon
-					name={leftIcon.name}
-					size={leftIcon.size ?? Size.Medium}
-					colour={leftIcon.colour}
-					float
-					left="0.75rem"
-					top="50%"
-					anchorX="0"
-					anchorY="-50%"
-					clickable={!!onLeftIconClick}
-					onclick={() => onLeftIconClick?.()}
-				/>
+				{#if onLeftIconClick}
+					<div class="left-icon">
+						<Action
+							noTabIndex
+							colourSet={ColourSet.Auxiliary}
+							icon={leftIcon}
+							size={Size.Medium}
+							onclick={onLeftIconClick}
+						/>
+					</div>
+				{:else}
+					<Icon
+						name={leftIcon.name}
+						size={leftIcon.size ?? Size.Medium}
+						colour={leftIcon.colour}
+						float
+						left={cssLength('0.75rem')}
+						top={cssLength('50%')}
+						anchorX={cssLength('0')}
+						anchorY={cssLength('-50%')}
+					/>
+				{/if}
 			{/if}
 			<input
 				{id}
@@ -99,6 +115,9 @@
 				class:for-modal={variant == InputVariant.Modal}
 				data-type={dataType}
 				type={type ?? 'text'}
+				autocomplete={autocomplete ?? (type === 'email' ? 'email' : 'off')}
+				spellcheck={spellcheck ?? false}
+				aria-invalid={isInvalid || undefined}
 				bind:value
 				{onblur}
 				{onfocus}
@@ -126,10 +145,10 @@
 							size={rightIcon.size ?? Size.Medium}
 							colour={rightIcon.colour ?? Colour['$font-disabled']}
 							float
-							right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
-							top="50%"
-							anchorX="0"
-							anchorY="-50%"
+							right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
+							top={cssLength('50%')}
+							anchorX={cssLength('0')}
+							anchorY={cssLength('-50%')}
 						/>
 					{/if}
 				</div>

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,9 +1,11 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<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>
@@ -11,7 +13,6 @@
 <script lang="ts">
 	let {
 		value = $bindable(Ternary.Neutral),
-		// id = generateShortUUID(),
 		label,
 		disabled,
 		isValid,
@@ -24,47 +25,31 @@
 		neutralLabel,
 		noIcon,
 		yesIcon,
-		neutralIcon
+		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);
-			}
-		});
-	});
+	function setValue(next: Ternary): void {
+		if (next === value) {
+			return;
+		}
+		value = next;
+		void onchange?.(next);
+	}
 </script>
 
-<div class="text-label" class:invalid={isValid === false}>
+<div
+	class="text-label"
+	class:invalid={isValid === false}
+>
 	{#if label != undefined}
 		<span>{label}</span>
 	{/if}
 
-	<div class="radios">
+	<div
+		class="radios"
+		role="radiogroup"
+		aria-label={label}
+	>
 		<label>
 			<Action
 				disabled={disabled || noDisabled}
@@ -72,14 +57,23 @@
 				icon={{
 					name: 'circle-cross',
 					...noIcon,
-					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5']
+					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5'],
 				}}
 				label={noLabel ?? 'No'}
 				onclick={() => {
-					textValue = '0';
+					setValue(Ternary.False);
+				}}
+			/>
+			<input
+				disabled={disabled || noDisabled}
+				type="radio"
+				value="0"
+				checked={value === Ternary.False}
+				aria-label={noLabel ?? 'No'}
+				onchange={() => {
+					setValue(Ternary.False);
 				}}
 			/>
-			<input disabled={disabled || noDisabled} type="radio" bind:group={textValue} value="0" />
 		</label>
 		<label>
 			<Action
@@ -88,18 +82,22 @@
 				icon={{
 					name: 'database',
 					...neutralIcon,
-					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5']
+					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5'],
 				}}
 				label={neutralLabel ?? 'Allow system to decide'}
 				onclick={() => {
-					textValue = '-1';
+					setValue(Ternary.Neutral);
 				}}
 			/>
 			<input
 				disabled={disabled || neutralDisabled}
 				type="radio"
-				bind:group={textValue}
 				value="-1"
+				checked={value === Ternary.Neutral}
+				aria-label={neutralLabel ?? 'Allow system to decide'}
+				onchange={() => {
+					setValue(Ternary.Neutral);
+				}}
 			/>
 		</label>
 		<label>
@@ -109,14 +107,23 @@
 				icon={{
 					name: 'circle-tick',
 					...yesIcon,
-					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5']
+					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5'],
 				}}
 				label={yesLabel ?? 'Yes'}
 				onclick={() => {
-					textValue = '1';
+					setValue(Ternary.True);
+				}}
+			/>
+			<input
+				disabled={disabled || yesDisabled}
+				type="radio"
+				value="1"
+				checked={value === Ternary.True}
+				aria-label={yesLabel ?? 'Yes'}
+				onchange={() => {
+					setValue(Ternary.True);
 				}}
 			/>
-			<input disabled={disabled || yesDisabled} type="radio" bind:group={textValue} value="1" />
 		</label>
 	</div>
 </div>
@@ -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;
+  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;
 }