@sveltier/ui 0.0.0-stage → 0.1.0-alpha.0

package/dist/components/NativeSelect/NativeSelect.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" generics="T extends string | number">
+	// One choice from a list, as the platform's own select in a Field. See NativeSelectProps.
+	import { untrack } from 'svelte';
+	import { DEV, warnUnnamed } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { createField } from '../../core/form/field.svelte.js';
+	import type { Rule } from '../../core/form/types.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import Field from '../Field/Field.svelte';
+	import './native-select.css';
+	import type { NativeSelectDefaults, NativeSelectProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		size,
+		density,
+		rounded,
+		disabled,
+		options,
+		value = $bindable(null),
+		placeholder,
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		required = false,
+		prepend,
+		id,
+		'aria-describedby': describedBy,
+		class: className,
+		style,
+		ref = $bindable(null),
+		...rest
+	}: NativeSelectProps<T> = $props();
+
+	const resolve = useDefaults<NativeSelectDefaults>('NativeSelect', {
+		variant: 'outlined',
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		rounded: true,
+		disabled: false
+	});
+	const p = $derived(resolve({ variant, color, size, density, rounded, disabled }));
+	const locale = useLocale();
+
+	// The choice a form reset goes back to: the one the select started with.
+	const initial = untrack(() => value ?? null);
+
+	const field = createField<T | null>({
+		value: () => value ?? null,
+		empty: (choice) => choice === null,
+		check: (choice) => (choice === null && required ? locale.t('required') : undefined),
+		// Rules never see null: an empty choice skips them.
+		rules: () => rules as readonly Rule<T | null>[] | undefined,
+		error: () => error,
+		validateOn: () => validateOn,
+		control: () => ref
+	});
+
+	if (DEV) $effect(() => warnUnnamed('NativeSelect', ref));
+
+	// Leaving means focus went outside the field.
+	function leave(event: FocusEvent) {
+		const root = event.currentTarget as HTMLElement;
+		if (!root.contains(event.relatedTarget as Node | null)) field.left();
+	}
+</script>
+
+<Field
+	{...p}
+	{id}
+	{label}
+	{hint}
+	error={field.error}
+	{required}
+	{prepend}
+	class={[
+		'sv-native-select',
+		placeholder !== undefined && value == null && 'sv-native-select--empty',
+		className
+	]}
+	{style}
+	oninput={field.changed}
+	onfocusout={leave}
+>
+	{#snippet children(attributes)}
+		<select
+			bind:this={ref}
+			{...rest}
+			{...attributes}
+			aria-describedby={[describedBy, attributes['aria-describedby']].filter(Boolean).join(' ') ||
+				undefined}
+			bind:value={() => value ?? '', (next: T | '') => (value = next === '' ? null : next)}
+		>
+			{#if placeholder !== undefined}
+				<option value="" disabled={required} selected={initial === null}>{placeholder}</option>
+			{/if}
+			{#each options as option (option.value)}
+				<option
+					value={option.value}
+					disabled={option.disabled}
+					selected={Object.is(option.value, initial)}>{option.label}</option
+				>
+			{/each}
+		</select>
+	{/snippet}
+</Field>

package/dist/components/NativeSelect/NativeSelect.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { NativeSelectProps } from './types.js';
+declare function $$render<T extends string | number>(): {
+    props: NativeSelectProps<T>;
+    exports: {};
+    bindings: "ref" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NativeSelect: $$IsomorphicComponent;
+type NativeSelect<T extends string | number> = InstanceType<typeof NativeSelect<T>>;
+export default NativeSelect;

package/dist/components/NativeSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NativeSelect } from './NativeSelect.svelte';
+export type { NativeSelectDefaults, NativeSelectOption, NativeSelectProps } from './types.js';

package/dist/components/NativeSelect/index.js

@@ -0,0 +1 @@
+export { default as NativeSelect } from './NativeSelect.svelte';

package/dist/components/NativeSelect/native-select.css

@@ -0,0 +1,45 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	.sv-native-select > .sv-field__box {
+		cursor: pointer;
+	}
+
+	/* Room at the end for the arrow, which the text never runs under. */
+	.sv-native-select .sv-field__control {
+		padding-inline-end: calc(1.272em + var(--sv-space-8));
+		text-overflow: ellipsis;
+		cursor: inherit;
+	}
+
+	/* The placeholder reads as one, as in a text field; the list keeps the text colour. */
+	.sv-native-select--empty .sv-field__control {
+		color: var(--sv-color-text-subtle);
+	}
+
+	.sv-native-select .sv-field__control option {
+		color: var(--sv-color-text);
+	}
+
+	/*
+	 * The arrow: a mask filled with the muted text colour. It lets presses through to the select,
+	 * so the whole box opens the list.
+	 */
+	.sv-native-select > .sv-field__box::before {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-end: calc(var(--sv-size-height) * var(--sv-density) * 0.382);
+		inline-size: 1.272em;
+		block-size: 1.272em;
+		margin-block: auto;
+		background-color: var(--sv-color-text-muted);
+		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
+			center / contain no-repeat;
+		pointer-events: none;
+	}
+
+	.sv-native-select:where(.sv-variant-text, .sv-variant-plain) > .sv-field__box::before {
+		inset-inline-end: 0;
+	}
+}

package/dist/components/NativeSelect/types.d.ts

@@ -0,0 +1,58 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+import type { Rule, ValidateOn } from '../../core/form/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { FieldContentProps, FieldDefaults } from '../Field/types.js';
+/** The NativeSelect props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export type NativeSelectDefaults = FieldDefaults;
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        NativeSelect: NativeSelectDefaults;
+    }
+}
+/** One choice of a NativeSelect. */
+export interface NativeSelectOption<T extends string | number = string> {
+    /** The value, never the empty string, which stands for no choice. */
+    value: T;
+    /** What the option says. */
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * One choice from a list, as the platform's own `<select>` in a Field: the phone's picker and the
+ * browser's keyboard behaviour come for free. `class` and `style` apply to the field; `id`, `ref`,
+ * `name` and other attributes go to the `<select>`. The end of the box holds its arrow, so there
+ * is no `append`.
+ *
+ * @example
+ * <NativeSelect
+ *   label="Country"
+ *   name="country"
+ *   placeholder="Choose a country"
+ *   required
+ *   options={[
+ *     { value: 'gb', label: 'United Kingdom' },
+ *     { value: 'vn', label: 'Vietnam' }
+ *   ]}
+ *   bind:value={country}
+ * />
+ */
+export type NativeSelectProps<T extends string | number = string> = ElementProps<HTMLSelectElement, HTMLSelectAttributes, Partial<NativeSelectDefaults> & Omit<FieldContentProps, 'append'> & {
+    /** The choices, in order. */
+    options: readonly NativeSelectOption<T>[];
+    /** The chosen value, or `null` for none. Bindable. */
+    value?: T | null;
+    /** A first option that stands for no choice, such as "Choose a country". */
+    placeholder?: string;
+    /** Checks run in order after `required`, with the chosen value. The first message is shown. */
+    rules?: readonly Rule<T>[];
+    /** When the message shows. Defaults to the form's setting, else `'blur'`. */
+    validateOn?: ValidateOn;
+    /**
+     * A choice must be made. Adds an asterisk to the label, and the placeholder cannot be chosen
+     * again once the user has picked something.
+     * @default false
+     */
+    required?: boolean;
+    /** Inline style of the field's root element. */
+    style?: string | null;
+}>;

package/dist/components/NativeSelect/types.js

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

package/dist/components/NumberField/NumberField.svelte

@@ -0,0 +1,246 @@
+<script lang="ts">
+	// A number in a Field: typed in the locale's format, stepped with the keyboard or buttons, and
+	// validated. See NumberFieldProps for the props.
+	import { untrack } from 'svelte';
+	import { checkValue, DEV, warnUnnamed } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { createField } from '../../core/form/field.svelte.js';
+	import { numberConstraintMessage, parseNumber } from '../../core/form/number.js';
+	import type { Rule } from '../../core/form/types.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import Field from '../Field/Field.svelte';
+	import './number-field.css';
+	import type { NumberFieldDefaults, NumberFieldProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		size,
+		density,
+		rounded,
+		disabled,
+		value = $bindable(null),
+		min,
+		max,
+		step,
+		format,
+		controls = true,
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		required = false,
+		readonly = false,
+		name,
+		prepend,
+		append,
+		id,
+		'aria-describedby': describedBy,
+		onkeydown,
+		class: className,
+		style,
+		ref = $bindable(null),
+		...rest
+	}: NumberFieldProps = $props();
+
+	const resolve = useDefaults<NumberFieldDefaults>('NumberField', {
+		variant: 'outlined',
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		rounded: true,
+		disabled: false
+	});
+	const p = $derived(resolve({ variant, color, size, density, rounded, disabled }));
+	const locale = useLocale();
+	const uid = $props.id();
+	const inputId = $derived(id ?? uid);
+
+	/** The number written in the locale; empty for no number. */
+	const show = (number: number | null) =>
+		number === null || !Number.isFinite(number)
+			? ''
+			: locale.formatNumber(number, format ?? { maximumFractionDigits: 20 });
+
+	// What the input shows, and what it means: a number, null for empty, NaN for not a number. A
+	// form reset goes back to the text the field started with.
+	const initial = untrack(() => show(value ?? null));
+	let text = $state(initial);
+	let parsed = $state<number | null>(untrack(() => value ?? null));
+
+	// A value set from outside, not typed, is written in the locale format.
+	$effect(() => {
+		const next = value ?? null;
+		if (
+			!Object.is(
+				next,
+				untrack(() => parsed)
+			)
+		) {
+			parsed = next;
+			text = show(next);
+		}
+	});
+
+	const field = createField<number | null>({
+		value: () => parsed,
+		empty: (number) => number === null,
+		check: (number) => numberConstraintMessage(number, { required, min, max, step }, locale),
+		// Rules never see an empty or unreadable value: the checks above stop those first.
+		rules: () => rules as readonly Rule<number | null>[] | undefined,
+		error: () => error,
+		validateOn: () => validateOn,
+		control: () => ref
+	});
+
+	if (DEV) {
+		$effect(() => {
+			warnUnnamed('NumberField', ref);
+			// A currency or percent sign in the field would make the text unreadable as a number.
+			checkValue(
+				'NumberField',
+				'format.style',
+				format?.style,
+				['decimal'],
+				'Put a currency or a unit in prepend or append.'
+			);
+		});
+	}
+
+	const places = (number: number | undefined) => (String(number ?? '').split('.')[1] ?? '').length;
+	// The keys and buttons move by step, or by 1 when no step is set (and then any number is
+	// valid). Enough decimals for the step and its starting point, so 0.1 + 0.2 lands on 0.3.
+	const increment = $derived(step ?? 1);
+	const decimals = $derived(Math.max(places(increment), places(min)));
+	const inert = $derived(p.disabled || readonly);
+	const current = $derived(parsed !== null && Number.isFinite(parsed) ? parsed : null);
+
+	// Called for typing and for a form reset alike, so the value always follows the text.
+	function read(next: string) {
+		text = next;
+		const number = parseNumber(next, locale.locale);
+		parsed = number;
+		if (number === null || Number.isFinite(number)) value = number;
+	}
+
+	/** Sets a number the keys or buttons chose, within min and max. */
+	function commit(number: number) {
+		const bounded = Math.min(max ?? Infinity, Math.max(min ?? -Infinity, number));
+		const next = Number(bounded.toFixed(decimals));
+		parsed = next;
+		value = next;
+		text = show(next);
+		field.changed();
+	}
+
+	// Moves along the steps counted from min, as a native number input does: from a value between
+	// two steps, up goes to the next one and down to the previous one. Empty starts at min, or 0.
+	function stepBy(steps: number) {
+		if (inert) return;
+		const start = min ?? 0;
+		if (current === null) return commit(start);
+		const offset = (current - start) / increment;
+		const from = steps > 0 ? Math.floor(offset + 1e-9) : Math.ceil(offset - 1e-9);
+		commit(start + (from + steps) * increment);
+	}
+
+	function keydown(event: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+		(onkeydown as ((event: KeyboardEvent) => void) | null | undefined)?.(event);
+		if (event.defaultPrevented || inert) return;
+		const moves: Record<string, (() => void) | undefined> = {
+			ArrowUp: () => stepBy(1),
+			ArrowDown: () => stepBy(-1),
+			PageUp: () => stepBy(10),
+			PageDown: () => stepBy(-10),
+			Home: min == null ? undefined : () => commit(min),
+			End: max == null ? undefined : () => commit(max)
+		};
+		const move = moves[event.key];
+		if (!move) return;
+		event.preventDefault();
+		move();
+	}
+
+	// Leaving means focus went outside the field, not to a button in it. The number is then
+	// written in the locale format.
+	function leave(event: FocusEvent) {
+		const root = event.currentTarget as HTMLElement;
+		if (root.contains(event.relatedTarget as Node | null)) return;
+		if (current !== null) text = show(current);
+		field.left();
+	}
+
+	// Only whole numbers, and no minus sign, can use the numeric keypad.
+	const integer = $derived(step != null && decimals === 0);
+</script>
+
+{#snippet end()}
+	{@render append?.()}
+	{#if controls}
+		<span class="sv-number-field__steps">
+			<button
+				type="button"
+				class="sv-number-field__step"
+				tabindex="-1"
+				aria-label={locale.t('decrease')}
+				aria-controls={inputId}
+				disabled={inert || (min != null && current !== null && current <= min)}
+				onpointerdown={(event) => event.preventDefault()}
+				onclick={() => stepBy(-1)}
+			>
+				<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14" /></svg>
+			</button>
+			<button
+				type="button"
+				class="sv-number-field__step"
+				tabindex="-1"
+				aria-label={locale.t('increase')}
+				aria-controls={inputId}
+				disabled={inert || (max != null && current !== null && current >= max)}
+				onpointerdown={(event) => event.preventDefault()}
+				onclick={() => stepBy(1)}
+			>
+				<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+			</button>
+		</span>
+	{/if}
+{/snippet}
+
+<Field
+	{...p}
+	id={inputId}
+	{label}
+	{hint}
+	error={field.error}
+	{required}
+	{readonly}
+	{prepend}
+	append={controls || append ? end : undefined}
+	class={['sv-number-field', className]}
+	{style}
+	oninput={field.changed}
+	onfocusout={leave}
+>
+	{#snippet children(attributes)}
+		<input
+			bind:this={ref}
+			defaultValue={initial}
+			{...rest}
+			{...attributes}
+			aria-describedby={[describedBy, attributes['aria-describedby']].filter(Boolean).join(' ') ||
+				undefined}
+			type="text"
+			role="spinbutton"
+			inputmode={min != null && min >= 0 && integer ? 'numeric' : 'decimal'}
+			autocomplete="off"
+			aria-valuenow={current ?? undefined}
+			aria-valuemin={min}
+			aria-valuemax={max}
+			aria-valuetext={current === null ? undefined : text}
+			bind:value={() => text, read}
+			onkeydown={keydown}
+		/>
+		{#if name}<input type="hidden" {name} value={current ?? ''} />{/if}
+	{/snippet}
+</Field>

package/dist/components/NumberField/NumberField.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NumberFieldProps } from './types.js';
+declare const NumberField: import("svelte").Component<NumberFieldProps, {}, "ref" | "value">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;

package/dist/components/NumberField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NumberField } from './NumberField.svelte';
+export type { NumberFieldDefaults, NumberFieldProps } from './types.js';

package/dist/components/NumberField/index.js

@@ -0,0 +1 @@
+export { default as NumberField } from './NumberField.svelte';

package/dist/components/NumberField/number-field.css

@@ -0,0 +1,74 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* Digits keep one width, so numbers that change or stack line up. */
+	.sv-number-field .sv-field__control {
+		font-variant-numeric: tabular-nums;
+	}
+
+	.sv-number-field .sv-field__append {
+		align-self: stretch;
+	}
+
+	.sv-number-field__steps {
+		display: flex;
+		align-items: center;
+		gap: var(--sv-space-2);
+		margin-inline-end: calc(var(--sv-size-height) * var(--sv-density) * -0.146);
+	}
+
+	/* Square, φ⁻¹ of the field's height, and never under 24px (WCAG 2.5.8). */
+	.sv-number-field__step {
+		--sv-step: max(1.5rem, calc(var(--sv-size-height) * var(--sv-density) * 0.618));
+		position: relative;
+		display: grid;
+		place-items: center;
+		inline-size: var(--sv-step);
+		block-size: var(--sv-step);
+		padding: 0;
+		border: 0;
+		border-radius: var(--sv-radius-sm);
+		background: none;
+		color: var(--sv-color-text-muted);
+		cursor: pointer;
+	}
+
+	/* The state layer, as on a Button: only its opacity changes. */
+	.sv-number-field__step::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background-color: currentColor;
+		opacity: 0;
+		transition: opacity var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	@media (hover: hover) {
+		.sv-number-field__step:enabled:hover {
+			color: var(--sv-color-text);
+		}
+
+		.sv-number-field__step:enabled:hover::before {
+			opacity: var(--sv-state-hover);
+		}
+	}
+
+	.sv-number-field__step:enabled:active::before {
+		opacity: var(--sv-state-press);
+	}
+
+	.sv-number-field__step:disabled {
+		opacity: 0.382;
+		cursor: not-allowed;
+	}
+
+	.sv-number-field__step svg {
+		inline-size: 1.272em;
+		block-size: 1.272em;
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 1.75;
+		stroke-linecap: round;
+	}
+}

package/dist/components/NumberField/types.d.ts

@@ -0,0 +1,73 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Rule, ValidateOn } from '../../core/form/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { FieldContentProps, FieldDefaults } from '../Field/types.js';
+/** The NumberField props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export type NumberFieldDefaults = FieldDefaults;
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        NumberField: NumberFieldDefaults;
+    }
+}
+type NumberFieldOwnProps = Partial<NumberFieldDefaults> & FieldContentProps & {
+    /** The number, or `null` when the field is empty. Bindable. */
+    value?: number | null;
+    /** The smallest value. The keys and buttons stop here; a smaller typed value is an error. */
+    min?: number;
+    /** The largest value. The keys and buttons stop here; a larger typed value is an error. */
+    max?: number;
+    /**
+     * How far the arrow keys and the buttons move; Page Up and Page Down move ten steps. When
+     * set, a typed value off the steps, counted from `min`, is an error. When not set, they move
+     * by 1 and any number is accepted, decimals included.
+     */
+    step?: number;
+    /**
+     * How the number is written once the user leaves the field, as `Intl.NumberFormat` options
+     * in the app's locale: digits only, such as `{ minimumFractionDigits: 2 }`, so the user can
+     * edit what they see. Put a currency or a unit in `prepend` or `append`.
+     * @default { maximumFractionDigits: 20 }
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Shows decrease and increase buttons at the end of the field.
+     * @default true
+     */
+    controls?: boolean;
+    /** Checks run in order after the HTML constraints, with the number. The first message is shown. */
+    rules?: readonly Rule<number>[];
+    /** When the message shows. Defaults to the form's setting, else `'blur'`. */
+    validateOn?: ValidateOn;
+    /**
+     * The field must not be empty. Adds an asterisk to the label.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The number can be read and copied but not changed.
+     * @default false
+     */
+    readonly?: boolean;
+    /** Submits the plain number, such as `1234.5`, under this name in a form. */
+    name?: string;
+    /** Inline style of the field's root element. */
+    style?: string | null;
+};
+/**
+ * A number typed in the app's locale, stepped with the arrow keys or the buttons, and checked
+ * against `min`, `max` and `step`. The field shows the number formatted, for example
+ * `1,234.50`, and binds and submits the plain number. `class` and `style` apply to the field;
+ * `id`, `ref` and other attributes go to the `<input>`.
+ *
+ * @example
+ * <NumberField
+ *   label="Quantity"
+ *   name="quantity"
+ *   min={1}
+ *   max={99}
+ *   required
+ *   bind:value={quantity}
+ * />
+ */
+export type NumberFieldProps = ElementProps<HTMLInputElement, HTMLInputAttributes, NumberFieldOwnProps>;
+export {};

package/dist/components/NumberField/types.js

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