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

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'];

package/dist/components/Form/Form.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	// A form that checks its fields on submit. See FormProps for the props.
+	import { flushSync } from 'svelte';
+	import DefaultsProvider from '../../core/defaults/DefaultsProvider.svelte';
+	import type { DefaultsConfig } from '../../core/defaults/context.js';
+	import { setFormContext, type FormField } from '../../core/form/context.js';
+	import './form.css';
+	import type { FormProps } from './types.js';
+
+	let {
+		validateOn,
+		disabled = false,
+		onsubmit,
+		onreset,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: FormProps = $props();
+
+	// A registry, not state: nothing renders from it, so a plain Set rather than a SvelteSet.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- never read reactively
+	const fields = new Set<FormField>();
+	setFormContext({
+		get validateOn() {
+			return validateOn;
+		},
+		register(field) {
+			fields.add(field);
+			return () => fields.delete(field);
+		}
+	});
+
+	// Always rendered, so turning `disabled` on and off never remounts the fields.
+	const defaults: DefaultsConfig = $derived(disabled ? { global: { disabled: true } } : {});
+
+	/** Shows the message of every field. Returns `true` when every field is valid. */
+	export function validate(): boolean {
+		let valid = true;
+		for (const field of fields) if (!field.validate()) valid = false;
+		return valid;
+	}
+
+	/** Puts every field back to the value it started with, and hides every message. */
+	export function reset(): void {
+		ref?.reset();
+	}
+
+	/** Hides every message and keeps the values. */
+	export function resetValidation(): void {
+		for (const field of fields) field.resetValidation();
+	}
+
+	function submit(event: SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }) {
+		const invalid = [...fields].filter((field) => !field.validate());
+		if (invalid.length === 0) {
+			onsubmit?.(event);
+			return;
+		}
+		// Stop here, including listeners added later such as SvelteKit's enhance, which would
+		// otherwise send the form anyway.
+		event.preventDefault();
+		event.stopImmediatePropagation();
+		// Focus the first invalid control in document order, once its message is in the DOM, so
+		// its label and error are read out together.
+		flushSync();
+		const controls = invalid
+			.map((field) => field.control())
+			.filter((control): control is HTMLElement => control != null);
+		controls.sort((a, b) =>
+			a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+		);
+		controls[0]?.focus();
+	}
+
+	function afterReset(event: Event & { currentTarget: EventTarget & HTMLFormElement }) {
+		resetValidation();
+		(onreset as ((event: Event) => void) | null | undefined)?.(event);
+	}
+</script>
+
+<form
+	bind:this={ref}
+	{...rest}
+	novalidate
+	class={['sv-form', className]}
+	onsubmit={submit}
+	onreset={afterReset}
+>
+	<DefaultsProvider {defaults}>
+		{@render children?.()}
+	</DefaultsProvider>
+</form>

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

@@ -0,0 +1,8 @@
+import type { FormProps } from './types.js';
+declare const Form: import("svelte").Component<FormProps, {
+    validate: () => boolean;
+    reset: () => void;
+    resetValidation: () => void;
+}, "ref">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/Form/form.css

@@ -0,0 +1,16 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * Fields stack at one rhythm and take the full width; buttons keep their own width. A class
+	 * on the form changes the layout, for example to a row for a search bar.
+	 */
+	.sv-form {
+		display: grid;
+		gap: var(--sv-space-21);
+	}
+
+	.sv-form > :where(.sv-button) {
+		justify-self: start;
+	}
+}

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

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

package/dist/components/Form/index.js

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

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

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+import type { ValidateOn } from '../../core/form/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+/**
+ * A `<form>` that checks its fields when it is submitted. An invalid form does not submit: every
+ * field shows its message and the first invalid one takes focus. A valid form calls `onsubmit`,
+ * or submits as HTML does when there is no `onsubmit`, so SvelteKit form actions work as they
+ * are. Other attributes go to the `<form>`. Through `bind:this` it offers `validate()`,
+ * `reset()` and `resetValidation()`.
+ *
+ * @example
+ * <Form method="POST" onsubmit={(event) => { event.preventDefault(); save(); }}>
+ *   <TextField label="Email" name="email" type="email" required />
+ *   <Button type="submit">Sign up</Button>
+ * </Form>
+ */
+export type FormProps = ElementProps<HTMLFormElement, HTMLFormAttributes, {
+    /**
+     * When the fields show their messages, unless a field sets its own.
+     * @default 'blur'
+     */
+    validateOn?: ValidateOn;
+    /**
+     * Disables every control inside, Buttons included, for example while a submission runs.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Called when the form is submitted and every field is valid. Without it, the form submits
+     * as HTML does; call `event.preventDefault()` to handle the submission yourself.
+     */
+    onsubmit?: (event: SubmitEvent & {
+        currentTarget: EventTarget & HTMLFormElement;
+    }) => void;
+    /** The fields and buttons. */
+    children?: Snippet;
+}>;

package/dist/components/Form/types.js

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

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	// An icon from path data or any SVG of your own. See IconProps for the props.
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './icon.css';
+	import type { IconProps } from './types.js';
+
+	let {
+		path,
+		viewBox = '0 0 24 24',
+		size,
+		color,
+		label,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: IconProps = $props();
+</script>
+
+<span
+	bind:this={ref}
+	{...rest}
+	role={label ? 'img' : undefined}
+	aria-label={label}
+	aria-hidden={label ? undefined : 'true'}
+	class={[
+		'sv-icon',
+		sharedClasses({ size, color }, 'Icon'),
+		color && 'sv-icon--colored',
+		className
+	]}
+>
+	{#if path}
+		<svg class="sv-icon__paths" {viewBox} aria-hidden="true"><path d={path} /></svg>
+	{:else}
+		{@render children?.()}
+	{/if}
+</span>

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

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

package/dist/components/Icon/icon.css

@@ -0,0 +1,33 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* φ^½ of the text: the same proportion as icons in buttons. */
+	.sv-icon {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		justify-content: center;
+		inline-size: 1.272em;
+		block-size: 1.272em;
+		line-height: 1;
+		vertical-align: -0.236em;
+	}
+
+	/* Only an icon with its own size reads the shared size; otherwise it follows its text. */
+	.sv-icon:is(.sv-size-xs, .sv-size-sm, .sv-size-md, .sv-size-lg, .sv-size-xl) {
+		font-size: var(--sv-size-text);
+	}
+
+	.sv-icon--colored {
+		color: var(--sv-color);
+	}
+
+	.sv-icon > svg {
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	.sv-icon__paths {
+		fill: currentColor;
+	}
+}

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

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

package/dist/components/Icon/index.js

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

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

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Size } from '../../core/props/types.js';
+/**
+ * An icon: SVG path data, or any icon of your own as `children`. Decorative unless it has a
+ * `label`.
+ */
+export type IconProps = ElementProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>, {
+    /**
+     * SVG path data, filled with the current colour: the format of path-based icon sets such
+     * as Material Design Icons. Several shapes go in one string (`M… Z M… Z`).
+     */
+    path?: string;
+    /**
+     * The coordinate box of `path`.
+     * @default '0 0 24 24'
+     */
+    viewBox?: string;
+    /**
+     * The text size the icon is drawn at, φ^½ larger. Without it, the icon follows the text
+     * around it.
+     */
+    size?: Size;
+    /** The icon's colour. Without it, the icon takes the colour of the text around it. */
+    color?: Color;
+    /**
+     * A name for an icon that means something on its own, for assistive technology. Without
+     * it, the icon is decorative and hidden from it.
+     */
+    label?: string;
+    /** Any other icon (an `<svg>`, an icon component), sized and coloured like a path. */
+    children?: Snippet;
+}>;

package/dist/components/Icon/types.js

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

package/dist/components/List/List.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	// A list of ListItems. See ListProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './list.css';
+	import type { ListDefaults, ListProps } from './types.js';
+
+	let {
+		density,
+		color,
+		nav,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ListProps = $props();
+
+	const resolve = useDefaults<ListDefaults>('List', {
+		density: 'default',
+		color: 'primary',
+		nav: false
+	});
+	const p = $derived(resolve({ density, color, nav }));
+</script>
+
+<!-- role="list": Safari drops the list semantics of a list without bullets. -->
+<ul
+	bind:this={ref}
+	{...rest}
+	role="list"
+	class={[
+		'sv-list',
+		sharedClasses({ density: p.density, color: p.color }, 'List'),
+		p.nav && 'sv-list--nav',
+		className
+	]}
+>
+	{@render children?.()}
+</ul>

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

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