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

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

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

package/dist/components/Choice/choice.css

@@ -0,0 +1,75 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * A control beside its label, with a hint or an error under them. The row is the label, so a
+	 * press anywhere on it toggles the control. It is at least 24px tall (WCAG 2.5.8) and grows
+	 * with the size and density. The control sets --sv-choice-control to its width, so the
+	 * messages line up with the label text.
+	 */
+	.sv-choice {
+		--sv-choice-gap: 0.618em;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		min-inline-size: 0;
+		color: var(--sv-color-text);
+		font-family: var(--sv-font-ui);
+		font-size: var(--sv-size-text);
+		line-height: var(--sv-leading-snug);
+	}
+
+	.sv-choice__row {
+		display: inline-flex;
+		gap: var(--sv-choice-gap);
+		align-items: flex-start;
+		max-inline-size: 100%;
+		padding-block: max(
+			0px,
+			(max(1.5rem, var(--sv-size-height) * var(--sv-density) * 0.618) - 1lh) / 2
+		);
+		cursor: pointer;
+	}
+
+	.sv-choice__label {
+		min-inline-size: 0;
+	}
+
+	.sv-choice__required {
+		margin-inline-start: 0.236em;
+		color: var(--sv-color-error);
+	}
+
+	.sv-choice__messages {
+		padding-inline-start: calc(var(--sv-choice-control) + var(--sv-choice-gap));
+	}
+
+	.sv-choice__hint,
+	.sv-choice__error {
+		margin: 0;
+		font-size: var(--sv-text-xs);
+		line-height: var(--sv-leading-snug);
+	}
+
+	.sv-choice__hint {
+		color: var(--sv-color-text-muted);
+	}
+
+	.sv-choice__error {
+		color: var(--sv-color-error);
+	}
+
+	.sv-choice--invalid {
+		--sv-color: var(--sv-color-error);
+		--sv-on-color: var(--sv-on-error);
+	}
+
+	/*
+	 * The control and its label are muted at φ⁻², as a disabled Button. The hint stays legible:
+	 * it often says why the control is off.
+	 */
+	.sv-choice--disabled > .sv-choice__row {
+		opacity: 0.382;
+		cursor: not-allowed;
+	}
+}

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

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FieldError } from '../../core/form/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+/** The props of a choice's label, help and error, shared by Checkbox and Switch. */
+export interface ChoiceContentProps {
+    /**
+     * The label beside the control: text, or a snippet when it holds a link. A press anywhere on
+     * it toggles the control. Without it, name the control with `aria-label`.
+     */
+    label?: string | Snippet;
+    /** Help under the label. An error replaces it. */
+    hint?: string;
+    /**
+     * An error from outside the control, such as the server's answer: a message, a list of which
+     * the first is shown, or `true` for an invalid state described elsewhere.
+     */
+    error?: FieldError;
+}
+/** What a Choice passes to the control it lays out. Spread it onto the `<input>`. */
+export interface ChoiceControlAttributes {
+    /** The id the hint and the error are named after. */
+    id: string;
+    /** The hint or the error, whichever is shown. */
+    'aria-describedby': string | undefined;
+    /** Set while the choice shows an error. */
+    'aria-invalid': true | undefined;
+    required: boolean;
+    disabled: boolean;
+}
+/** A control beside its label, with a hint or an error under them. Internal. */
+export type ChoiceProps = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Omit<ChoiceContentProps, 'error'> & {
+    /** The id of the control. Generated when not given. */
+    id?: string | null;
+    /** What the choice shows: a message, `true` for an invalid state without one, or `false`. */
+    error?: string | boolean;
+    /** Adds an asterisk to the label. */
+    required?: boolean;
+    /** Mutes the choice. The control carries `disabled` itself. */
+    disabled?: boolean;
+    /** The control, drawn at the start of the label. */
+    children: Snippet<[ChoiceControlAttributes]>;
+}>;

package/dist/components/Choice/types.js

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

package/dist/components/Divider/Divider.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	// A hairline separator. See DividerProps for the props.
+	import './divider.css';
+	import type { DividerProps } from './types.js';
+
+	let {
+		vertical = false,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: DividerProps = $props();
+</script>
+
+<hr
+	bind:this={ref}
+	{...rest}
+	aria-orientation={vertical ? 'vertical' : undefined}
+	class={['sv-divider', vertical && 'sv-divider--vertical', className]}
+/>

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

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

package/dist/components/Divider/divider.css

@@ -0,0 +1,23 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	.sv-divider {
+		flex: none;
+		align-self: stretch;
+		block-size: 0;
+		margin: 0;
+		border: 0;
+		border-block-start: var(--sv-hairline) solid var(--sv-color-border);
+	}
+
+	/* Stretches in a flex row; standing alone in text, it is one line tall. */
+	.sv-divider--vertical {
+		display: inline-block;
+		inline-size: 0;
+		block-size: auto;
+		min-block-size: 1em;
+		border-block-start: 0;
+		border-inline-start: var(--sv-hairline) solid var(--sv-color-border);
+		vertical-align: middle;
+	}
+}

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

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

package/dist/components/Divider/index.js

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

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+/** A hairline between groups of content: an `<hr>`, which assistive technology reads as a separator. */
+export type DividerProps = ElementProps<HTMLHRElement, HTMLAttributes<HTMLHRElement>, {
+    /**
+     * Runs top to bottom, between items in a row, and stretches to the row's height.
+     * @default false
+     */
+    vertical?: boolean;
+}>;

package/dist/components/Divider/types.js

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

package/dist/components/Field/Field.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	// A label, a box for a control, and its hint or error. See FieldProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { readError } from '../../core/form/field.svelte.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './field.css';
+	import { FIELD_VARIANTS, type FieldDefaults, type FieldProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		size,
+		density,
+		rounded,
+		disabled,
+		id: idProp,
+		label,
+		hint,
+		error,
+		required = false,
+		readonly = false,
+		prepend,
+		append,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: FieldProps = $props();
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+	const resolve = useDefaults<FieldDefaults>('Field', {
+		variant: 'outlined',
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		rounded: true,
+		disabled: false
+	});
+	const p = $derived(resolve({ variant, color, size, density, rounded, disabled }));
+	const shown = $derived(readError(error));
+	const message = $derived(typeof shown === 'string' ? shown : undefined);
+
+	// A press anywhere in the box focuses the control, as a press on the label does, except on
+	// something that takes focus itself (the control, a button in `append`).
+	const FOCUSABLE = 'input, textarea, select, button, a[href], [tabindex]';
+
+	function press(event: PointerEvent) {
+		const box = event.currentTarget as HTMLElement;
+		const hit = (event.target as Element).closest(FOCUSABLE);
+		const control = box.querySelector<HTMLElement>('.sv-field__control');
+		if ((hit && box.contains(hit)) || !control || p.disabled) return;
+		event.preventDefault();
+		control.focus();
+	}
+</script>
+
+<div
+	bind:this={ref}
+	{...rest}
+	class={[
+		'sv-field',
+		sharedClasses(p, 'Field', FIELD_VARIANTS),
+		shown !== false && 'sv-field--invalid',
+		p.disabled && 'sv-field--disabled',
+		readonly && 'sv-field--readonly',
+		className
+	]}
+>
+	{#if label}
+		<label class="sv-field__label" for={id} id="{id}-label"
+			>{label}{#if required}<span class="sv-field__required" aria-hidden="true">*</span>{/if}</label
+		>
+	{/if}
+	<!-- The label and the control are the accessible targets; this only widens the pointer target. -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="sv-field__box" onpointerdown={press}>
+		{#if prepend}<span class="sv-field__prepend">{@render prepend()}</span>{/if}
+		{@render children({
+			id,
+			class: 'sv-field__control',
+			'aria-describedby': message ? `${id}-error` : hint ? `${id}-hint` : undefined,
+			'aria-invalid': shown !== false || undefined,
+			required,
+			disabled: p.disabled,
+			readonly
+		})}
+		{#if append}<span class="sv-field__append">{@render append()}</span>{/if}
+	</div>
+	{#if hint && !message}<p class="sv-field__hint" id="{id}-hint">{hint}</p>{/if}
+	<!-- Announces an error that appears after the user has moved on. -->
+	<div class="sv-field__alert" aria-live="polite">
+		{#if message}<p class="sv-field__error" id="{id}-error">{message}</p>{/if}
+	</div>
+</div>

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

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

package/dist/components/Field/field.css

@@ -0,0 +1,210 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * A label above a box above a hint or an error. The box is as tall as a Button of the same
+	 * size and density. Its border is --sv-field-border; the accent of a focused or invalid
+	 * field is a layer in --sv-color whose opacity changes.
+	 */
+	.sv-field {
+		--sv-field-border: var(--sv-color-border-strong);
+		display: flex;
+		flex-direction: column;
+		min-inline-size: 0;
+		font-family: var(--sv-font-ui);
+	}
+
+	/* The theme's label voice: Heritage and Maison set it in tracked capitals. */
+	.sv-field__label {
+		align-self: flex-start;
+		margin-block-end: var(--sv-space-8);
+		color: var(--sv-color-text);
+		font-size: var(--sv-label-size);
+		font-weight: var(--sv-weight-medium);
+		line-height: var(--sv-leading-snug);
+		letter-spacing: var(--sv-label-tracking);
+		text-transform: var(--sv-label-transform);
+	}
+
+	.sv-field__required {
+		margin-inline-start: 0.236em;
+		color: var(--sv-color-error);
+	}
+
+	.sv-field__box {
+		position: relative;
+		isolation: isolate;
+		display: flex;
+		align-items: center;
+		gap: 0.618em;
+		box-sizing: border-box;
+		min-block-size: calc(var(--sv-size-height) * var(--sv-density));
+		padding-inline: calc(var(--sv-size-height) * var(--sv-density) * 0.382);
+		border: var(--sv-hairline) solid var(--sv-field-border);
+		/* A control that grows to several lines sets --sv-field-radius, so it never turns oval. */
+		border-radius: var(--sv-rounded, var(--sv-field-radius, var(--sv-radius-md)));
+		color: var(--sv-color-text);
+		font-size: var(--sv-size-text);
+		line-height: var(--sv-leading-snug);
+		cursor: text;
+	}
+
+	.sv-field__box::after {
+		content: '';
+		position: absolute;
+		inset: calc(var(--sv-hairline) * -1);
+		border: var(--sv-focus-width) solid var(--sv-color);
+		border-radius: inherit;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	.sv-field__box:focus-within::after {
+		opacity: 1;
+	}
+
+	@media (hover: hover) {
+		.sv-field:where(:not(.sv-field--disabled, .sv-field--readonly)) .sv-field__box:hover {
+			--sv-field-border: var(--sv-color-text-muted);
+		}
+	}
+
+	.sv-field--invalid,
+	.sv-field--invalid .sv-field__box:hover {
+		--sv-color: var(--sv-color-error);
+		--sv-field-border: var(--sv-color-error);
+	}
+
+	/* Variants. Tonal is a wash of the text colour, not of the accent. */
+	.sv-variant-tonal > .sv-field__box {
+		border-width: 0 0 var(--sv-hairline);
+		border-end-start-radius: 0;
+		border-end-end-radius: 0;
+		background-color: color-mix(in oklch, var(--sv-color-text) 5%, transparent);
+	}
+
+	.sv-variant-text > .sv-field__box {
+		border-width: 0 0 var(--sv-hairline);
+		border-radius: 0;
+		padding-inline: 0;
+	}
+
+	.sv-variant-tonal > .sv-field__box::after,
+	.sv-variant-text > .sv-field__box::after {
+		border-width: 0 0 var(--sv-focus-width);
+	}
+
+	.sv-variant-elevated > .sv-field__box {
+		border-color: transparent;
+		background-color: var(--sv-color-surface);
+		box-shadow: var(--sv-shadow);
+	}
+
+	.sv-field--invalid.sv-variant-elevated > .sv-field__box {
+		border-color: var(--sv-field-border);
+	}
+
+	.sv-variant-plain > .sv-field__box {
+		border-color: transparent;
+		padding-inline: 0;
+	}
+
+	/* A plain field draws no box, so its focus is the theme's ring. */
+	.sv-variant-plain > .sv-field__box::after {
+		content: none;
+	}
+
+	.sv-variant-plain > .sv-field__box:focus-within {
+		outline: var(--sv-focus-width) solid var(--sv-color);
+		outline-offset: var(--sv-focus-offset);
+	}
+
+	/* Muted at φ⁻², as a disabled Button. */
+	.sv-field--disabled {
+		opacity: 0.382;
+	}
+
+	.sv-field--disabled .sv-field__box {
+		cursor: not-allowed;
+	}
+
+	.sv-field--readonly .sv-field__box {
+		cursor: default;
+	}
+
+	.sv-field__prepend,
+	.sv-field__append {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		color: var(--sv-color-text-muted);
+	}
+
+	:where(.sv-field__prepend, .sv-field__append) > svg {
+		inline-size: 1.272em;
+		block-size: 1.272em;
+	}
+
+	/* Padding, not margin: an app's paragraph reset (p { margin: 0 }) would win over a layer. */
+	.sv-field__hint,
+	.sv-field__error {
+		margin: 0;
+		padding-block-start: var(--sv-space-5);
+		font-size: var(--sv-text-xs);
+		line-height: var(--sv-leading-snug);
+	}
+
+	.sv-field__hint {
+		color: var(--sv-color-text-muted);
+	}
+
+	.sv-field__error {
+		color: var(--sv-color-error);
+	}
+
+	/*
+	 * The control fills the box; the box shows focus. Text is at least 16px on touch screens,
+	 * where smaller text makes iOS zoom into the page on focus.
+	 */
+	.sv-field__control {
+		flex: 1;
+		align-self: stretch;
+		min-inline-size: 0;
+		box-sizing: border-box;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		letter-spacing: inherit;
+		appearance: none;
+	}
+
+	.sv-field__control:focus-visible {
+		outline: none;
+	}
+
+	.sv-field__control::placeholder {
+		color: var(--sv-color-text-subtle);
+		opacity: 1;
+	}
+
+	.sv-field__control:disabled {
+		cursor: not-allowed;
+	}
+
+	/* Autofill keeps the field's colours: the browser's tint is delayed for good. */
+	.sv-field__control:autofill {
+		transition:
+			background-color 0s 600000s,
+			color 0s 600000s;
+	}
+
+	@media (pointer: coarse) {
+		.sv-field__control {
+			font-size: max(1rem, 1em);
+		}
+	}
+}

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

@@ -0,0 +1,3 @@
+export { default as Field } from './Field.svelte';
+export { FIELD_VARIANTS } from './types.js';
+export type { FieldContentProps, FieldControlAttributes, FieldDefaults, FieldProps, FieldVariant } from './types.js';

package/dist/components/Field/index.js

@@ -0,0 +1,2 @@
+export { default as Field } from './Field.svelte';
+export { FIELD_VARIANTS } from './types.js';

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

@@ -0,0 +1,109 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FieldError } from '../../core/form/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Rounded, Size } from '../../core/props/types.js';
+/** The variants a boxed field takes, a subset of the shared `VARIANTS`. */
+export declare const FIELD_VARIANTS: readonly ["outlined", "tonal", "elevated", "text", "plain"];
+/**
+ * How a field's box is drawn: `outlined` (a border), `tonal` (a wash with a rule under it),
+ * `elevated` (a surface with a shadow), `text` (only the rule) and `plain` (nothing, for a field
+ * inside another component).
+ */
+export type FieldVariant = (typeof FIELD_VARIANTS)[number];
+/** The Field props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface FieldDefaults {
+    /**
+     * How the box is drawn.
+     * @default 'outlined'
+     */
+    variant: FieldVariant;
+    /**
+     * The accent of the focused field. An invalid field uses `error`.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * Height and text size, matching a Button of the same size.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the height and padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius.
+     * @default true
+     */
+    rounded: Rounded;
+    /**
+     * Mutes the field and disables its control.
+     * @default false
+     */
+    disabled: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Field: FieldDefaults;
+    }
+}
+/** What a Field passes to the control it wraps. Spread it onto the control element. */
+export interface FieldControlAttributes {
+    /** The id the label points at. */
+    id: string;
+    /** `sv-field__control`: fills the box and takes its text style. */
+    class: string;
+    /** The hint or the error, whichever is shown. */
+    'aria-describedby': string | undefined;
+    /** Set while the field shows an error. */
+    'aria-invalid': true | undefined;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+}
+/** The props of a field's label, help and error, shared by every boxed field. */
+export interface FieldContentProps {
+    /** The visible label, linked to the control. Without it, name the control with `aria-label`. */
+    label?: string;
+    /** Help under the field. An error replaces it. */
+    hint?: string;
+    /**
+     * An error from outside the field, such as the server's answer: a message, a list of which
+     * the first is shown, or `true` for an invalid state described elsewhere.
+     */
+    error?: FieldError;
+    /** Content at the start of the box, usually an icon. */
+    prepend?: Snippet;
+    /** Content at the end of the box: an icon, a unit or a button. */
+    append?: Snippet;
+}
+/**
+ * A label, a box for a control, and its hint or error. Wrap your own control in it: the
+ * children snippet receives the id, ARIA links and state to spread onto the control. Other
+ * attributes go to the root element.
+ *
+ * @example
+ * <Field label="Start date" hint="The first payment goes out on this day" required>
+ *   {#snippet children(attributes)}
+ *     <input type="date" name="start" {...attributes} bind:value={start} />
+ *   {/snippet}
+ * </Field>
+ */
+export type FieldProps = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<FieldDefaults> & FieldContentProps & {
+    /** The id of the control. Generated when not given. */
+    id?: string | null;
+    /**
+     * Adds an asterisk to the label. The control carries `required` itself.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The control can be read and focused but not changed.
+     * @default false
+     */
+    readonly?: boolean;
+    /** The control. Spread the attributes it receives onto it. */
+    children: Snippet<[FieldControlAttributes]>;
+}>;

package/dist/components/Field/types.js

@@ -0,0 +1,2 @@
+/** The variants a boxed field takes, a subset of the shared `VARIANTS`. */
+export const FIELD_VARIANTS = ['outlined', 'tonal', 'elevated', 'text', 'plain'];