@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/NumberInput.svelte

@@ -1,146 +1,156 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Icon from './Icon.svelte';
-	import type { NumberInputProps } from './NumberInputProps.js';
-	let {
-		id,
-		value = $bindable(), // FIXME why is undefined allowed here?
-		min,
-		max,
-		labelTop,
-		labelRight,
-		placeholder,
-		required = false,
-		variant = InputVariant.Default,
-		decimal = false,
-		invalid = false,
-		showErrorColours = true,
-		disabled,
-		optional,
-		leftIcon,
-		rightIcon,
-		onLeftIconClick,
-		onRightIconClick,
-
-		onblur,
-		onfocus,
-		onkeydown,
-		oninput,
-
-		inputRef = $bindable(),
-		'data-type': dataType,
-	}: NumberInputProps = $props();
-
-	// NOTE cannot alter signature because it's passed by a use: directive
-	function numberValidator(_node: HTMLInputElement, _newValue: number | null) {
-		return {
-			update(newValue: number) {
-				const underMinimum = min != undefined && min > newValue;
-				const overMaximum = max != undefined && max < newValue;
-
-				value = isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue;
-			},
-		};
-	}
-
-	let isInvalid = $derived(
-		showErrorColours && ((required && (value == null || value.toString().trim() === '')) || invalid)
-	);
-</script>
-
-<div
-	class="error-wrapper"
-	class:for-modal={variant == InputVariant.Modal}
-	class:for-table={variant == InputVariant.Table}
->
-	<label
-		class:for-modal={variant == InputVariant.Modal}
-		class:for-table={variant == InputVariant.Table}
-	>
-		{#if labelTop}
-			<span
-				class="top-label"
-				class:for-default={variant === InputVariant.Default}
-				class:invalid={isInvalid}
-				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-			>
-			{#if variant === InputVariant.Default}
-				<span
-					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}
-		>
-			{#if leftIcon}
-				<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}
-			<input
-				{id}
-				class:invalid={isInvalid}
-				class:for-default={variant === InputVariant.Default}
-				data-type={dataType}
-				use:numberValidator={value}
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={rightIcon != undefined || (labelRight && variant == InputVariant.Modal)}
-				class:for-modal={variant == InputVariant.Modal}
-				type="number"
-				bind:value
-				{onblur}
-				{onfocus}
-				{onkeydown}
-				{oninput}
-				bind:this={inputRef}
-				{placeholder}
-				{required}
-				{disabled}
-				{min}
-				{max}
-				step={decimal ? 0.01 : 1}
-			/>
-			{#if rightIcon}
-				<Icon
-					name={rightIcon.name}
-					size={rightIcon.size ?? Size.Medium}
-					colour={rightIcon.colour}
-					float
-					right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
-					top="50%"
-					anchorX="0"
-					anchorY="-50%"
-					clickable={!!onRightIconClick}
-					onclick={onRightIconClick}
-				/>
-			{/if}
-			{#if labelRight}
-				<span
-					class="right-label inset"
-					class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
-				>
-			{/if}
-		</div>
-	</label>
-</div>
-
+<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';
+	import type { NumberInputProps } from './NumberInputProps.js';
+	let {
+		id,
+		value = $bindable(null),
+		min,
+		max,
+		labelTop,
+		labelRight,
+		placeholder,
+		required = false,
+		variant = InputVariant.Default,
+		decimal = false,
+		invalid = false,
+		showErrorColours = true,
+		disabled,
+		optional,
+		leftIcon,
+		rightIcon,
+		onLeftIconClick,
+		onRightIconClick,
+
+		onblur,
+		onfocus,
+		onkeydown = passthrough,
+		oninput,
+
+		inputRef = $bindable(),
+		'data-type': dataType,
+	}: NumberInputProps = $props();
+
+	function clamp(e: Event): void {
+		const raw = (e.target as HTMLInputElement).value;
+		if (raw === '') {
+			if (value !== null) {
+				value = null;
+			}
+			return;
+		}
+		const next = Number(raw);
+		if (isNaN(next)) {
+			return;
+		}
+		const lo = min ?? -Infinity;
+		const hi = max ?? Infinity;
+		const clamped = Math.max(lo, Math.min(hi, next));
+		if (clamped !== value) {
+			value = clamped;
+		}
+	}
+
+	const isInvalid = $derived(showErrorColours && ((required && value == null) || invalid));
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<label
+		class:for-modal={variant == InputVariant.Modal}
+		class:for-table={variant == InputVariant.Table}
+	>
+		{#if labelTop}
+			<span
+				class="top-label"
+				class:for-default={variant === InputVariant.Default}
+				class:invalid={isInvalid}
+				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+			{#if variant === InputVariant.Default}
+				<span
+					aria-hidden="true"
+					class="border"
+					class:invalid={isInvalid}
+					>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+				>
+			{/if}
+		{/if}
+		<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={cssLength('0.75rem')}
+					top={cssLength('50%')}
+					anchorX={cssLength('0')}
+					anchorY={cssLength('-50%')}
+					clickable={!!onLeftIconClick}
+					onclick={onLeftIconClick}
+				/>
+			{/if}
+			<input
+				{id}
+				class:invalid={isInvalid}
+				class:for-default={variant === InputVariant.Default}
+				data-type={dataType}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={rightIcon != undefined || (labelRight && variant == InputVariant.Modal)}
+				class:for-modal={variant == InputVariant.Modal}
+				type="number"
+				aria-invalid={isInvalid || undefined}
+				bind:value
+				{onblur}
+				{onfocus}
+				{onkeydown}
+				oninput={(e) => {
+					clamp(e);
+					oninput?.(e);
+				}}
+				bind:this={inputRef}
+				{placeholder}
+				{required}
+				{disabled}
+				{min}
+				{max}
+				step={decimal ? 0.01 : 1}
+			/>
+			{#if rightIcon}
+				<Icon
+					name={rightIcon.name}
+					size={rightIcon.size ?? Size.Medium}
+					colour={rightIcon.colour}
+					float
+					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 inset"
+					class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
+				>
+			{/if}
+		</div>
+	</label>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -379,5 +389,5 @@ input[type=number] {
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
-  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
-}</style>
+  margin: 0;
+}</style>

package/dist/Components/NumberInputProps.d.ts

@@ -1,29 +1,66 @@
 import type { InputVariant } from '../Types/Internal/InputVariant.js';
 import type { FormEventHandler } from 'svelte/elements';
 import type { PartialIconProps } from './PartialIconProps.js';
+/**
+ * Props for the {@link NumberInput} component.
+ *
+ * `value` is `number | null`; `null` represents the explicit empty
+ * state. The component will clamp the value to `[min, max]` on every
+ * input event when those bounds are provided.
+ */
 export interface NumberInputProps {
+    /** Current numeric value. Bindable. `null` represents explicit empty. */
     value: number | null;
+    /** Render the "- optional" suffix next to `labelTop`. */
     optional?: boolean;
+    /** `id` on the `<input>`. */
     id?: string | undefined;
+    /** Lower bound used for native validation and runtime clamping. */
     min?: number | undefined;
+    /** Upper bound used for native validation and runtime clamping. */
     max?: number | undefined;
+    /** 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;
+    /**
+     * When false (default) the input restricts to integers and uses step=1.
+     * When true, `step=0.01` is applied and decimal entry is accepted.
+     */
     decimal?: boolean;
+    /** Force the invalid visual state. */
     invalid?: boolean;
+    /** When true, render invalid visuals for unmet `required`/`invalid`. */
     showErrorColours?: boolean;
+    /** Native `disabled` attribute. */
     disabled?: boolean | undefined;
+    /** Icon rendered on the left of the input. */
     leftIcon?: PartialIconProps | undefined;
+    /** Icon rendered on the right of the input. */
     rightIcon?: PartialIconProps | undefined;
+    /** Click handler for the left icon. */
     onLeftIconClick?: ((e: MouseEvent) => void) | undefined;
+    /** Click handler for the right icon. */
     onRightIconClick?: ((e: MouseEvent) => void) | undefined;
+    /** Bindable reference to the underlying `<input>` element. */
     inputRef?: HTMLInputElement | undefined;
+    /** `data-type` attribute, used by domain-aware tooling. */
     'data-type'?: string;
+    /** 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>`. Defaults to `passthrough`. */
     onkeydown?: (e: KeyboardEvent) => void;
+    /**
+     * Input event forwarded to the `<input>`. Fires AFTER the internal
+     * clamp step.
+     */
     oninput?: FormEventHandler<HTMLInputElement>;
 }

package/dist/Components/PageHeading.svelte

@@ -1,38 +1,27 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import type { Snippet } from 'svelte';
-
-	export interface PageHeadingProps {
-		children: Snippet;
-		subtitle?: Snippet | undefined;
-		extras?: Snippet | undefined;
-	}
-</script>
-
-<script lang="ts">
-	let { children, subtitle, extras }: PageHeadingProps = $props();
-</script>
-
-<div class="outer">
-	<div class="column">
-		<h1>{@render children()}</h1>
-		<div class="one-line">
-			{#if subtitle}
-				{@render subtitle()}
-			{/if}
-		</div>
-	</div>
-	{#if extras}
-		<div class="buttons">
-			{@render extras()}
-		</div>
-	{/if}
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import type { PageHeadingProps } from './PageHeadingProps.js';
+
+	let { children, subtitle, extras }: PageHeadingProps = $props();
+</script>
+
+<div class="outer">
+	<div class="column">
+		<h1>{@render children()}</h1>
+		<div class="one-line">
+			{#if subtitle}
+				{@render subtitle()}
+			{/if}
+		</div>
+	</div>
+	{#if extras}
+		<div class="buttons">
+			{@render extras()}
+		</div>
+	{/if}
+</div>
+
 <style>.outer {
   padding: 1.5rem;
   display: flex;
@@ -76,4 +65,4 @@
   fill: #647d8e;
   color: #647d8e;
   font-size: 0.875rem;
-}</style>
+}</style>

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

@@ -1,9 +1,4 @@
-import type { Snippet } from 'svelte';
-export interface PageHeadingProps {
-    children: Snippet;
-    subtitle?: Snippet | undefined;
-    extras?: Snippet | undefined;
-}
+import type { PageHeadingProps } from './PageHeadingProps.js';
 declare const PageHeading: import("svelte").Component<PageHeadingProps, {}, "">;
 type PageHeading = ReturnType<typeof PageHeading>;
 export default PageHeading;

package/dist/Components/PageHeadingProps.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+export interface PageHeadingProps {
+    /**
+     * Title snippet rendered inside the `<h1>`. Must produce a single,
+     * short line of text - this heading is also the semantic page
+     * landmark for screen readers, so prefer plain text and avoid block
+     * markup.
+     */
+    children: Snippet;
+    /**
+     * Optional sub-title rendered beneath the title in a one-line slot.
+     * Use for a status, breadcrumb tail, or short description. Wraps to
+     * a single visual row; longer content will be truncated by the
+     * surrounding mixin.
+     */
+    subtitle?: Snippet | undefined;
+    /**
+     * Optional trailing snippet rendered in a right-aligned button row.
+     * Use for primary page actions (Save, Edit, ...) or status chips
+     * such as `Bubble`. Omit for headings without actions.
+     */
+    extras?: Snippet | undefined;
+}

package/dist/Components/PageHeadingProps.js

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

package/dist/Components/PasswordInput.svelte

@@ -1,75 +1,87 @@
-<svelte:options runes />
-
-<script lang="ts">
-	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 { InputProps } from './InputProps.js';
-	let {
-		value = $bindable(''),
-		label = undefined,
-		placeholder = undefined,
-		required = false,
-		disabled = undefined,
-		showInput = $bindable(false),
-		leftIcon = undefined,
-		inputRef = $bindable(),
-		...inputEvents
-	}: InputProps = $props();
-
-	// let inputRef: HTMLInputElement | undefined = undefined;
-
-	function toggleVisibility() {
-		showInput = !showInput;
-		inputRef?.focus();
-	}
-</script>
-
-<div class="error-wrapper">
-	<label>
-		{#if label}
-			<span class="for-default">{label}</span>
-			<span class="border">{label}</span>
-		{/if}
-		<!-- style="--background-colour: {leftIcon?.backgroundColour};" -->
-		<div class="icon-container">
-			{#if leftIcon}
-				<Icon
-					name={leftIcon.name}
-					size={leftIcon.size ?? Size.Medium}
-					float
-					left="0.75rem"
-					top="50%"
-					anchorX="0"
-					anchorY="-50%"
-				/>
-			{/if}
-			<input
-				class="for-default"
-				{...inputEvents}
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={true}
-				{...{ type: showInput ? 'text' : 'password' }}
-				bind:value
-				bind:this={inputRef}
-				{placeholder}
-				{required}
-				{disabled}
-			/>
-
-			<div class="right-icon">
-				<Action
-					colourSet={showInput ? ColourSet.Secondary : ColourSet.Auxiliary}
-					icon={{ name: 'assessment' }}
-					size={Size.MediumSmall}
-					onclick={toggleVisibility}
-				/>
-			</div>
-		</div>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { cssLength, passthrough } 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,
+		onkeydown = passthrough,
+	}: 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%;
@@ -303,4 +315,4 @@ label.for-table input {
 
 td {
   --input-border: none;
-}</style>
+}</style>

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

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