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

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;

package/dist/components/List/ListItem.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	// A row of a List: text, a link or a button. See ListItemProps for the props.
+	import './list.css';
+	import type { ListItemProps } from './types.js';
+
+	let {
+		title,
+		subtitle,
+		href,
+		target,
+		rel,
+		onclick,
+		active = false,
+		disabled = false,
+		prepend,
+		append,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ListItemProps = $props();
+
+	const tag = $derived(href != null ? 'a' : onclick ? 'button' : 'div');
+</script>
+
+<li
+	bind:this={ref}
+	{...rest}
+	class={[
+		'sv-list-item',
+		active && 'sv-list-item--active',
+		disabled && 'sv-list-item--disabled',
+		className
+	]}
+>
+	<svelte:element
+		this={tag}
+		class="sv-list-item__main"
+		href={tag === 'a' && !disabled ? href : undefined}
+		target={tag === 'a' ? target : undefined}
+		rel={tag === 'a' ? rel : undefined}
+		type={tag === 'button' ? 'button' : undefined}
+		role={tag === 'a' && disabled ? 'link' : undefined}
+		disabled={(tag === 'button' && disabled) || undefined}
+		aria-disabled={(tag === 'a' && disabled) || undefined}
+		aria-current={tag === 'a' && active ? 'page' : undefined}
+		onclick={tag === 'button' ? onclick : undefined}
+	>
+		{#if prepend}<span class="sv-list-item__prepend">{@render prepend()}</span>{/if}
+		<span class="sv-list-item__text">
+			{#if title}<span class="sv-list-item__title">{title}</span>{/if}
+			{#if subtitle}<span class="sv-list-item__subtitle">{subtitle}</span>{/if}
+			{@render children?.()}
+		</span>
+	</svelte:element>
+	{#if append}<span class="sv-list-item__append">{@render append()}</span>{/if}
+</li>

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

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

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

@@ -0,0 +1,3 @@
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
+export type { ListDefaults, ListItemProps, ListProps } from './types.js';

package/dist/components/List/index.js

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

package/dist/components/List/list.css

@@ -0,0 +1,127 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	.sv-list {
+		display: grid;
+		margin: 0;
+		padding: calc(var(--sv-space-5) * var(--sv-density)) 0;
+		list-style: none;
+	}
+
+	.sv-list-item {
+		display: flex;
+		align-items: center;
+		min-inline-size: 0;
+	}
+
+	/* The row: a control tall, its text a φ step from what is before it. */
+	.sv-list-item__main {
+		position: relative;
+		isolation: isolate;
+		display: flex;
+		flex: 1;
+		gap: var(--sv-space-13);
+		align-items: center;
+		box-sizing: border-box;
+		min-inline-size: 0;
+		min-block-size: calc(var(--sv-control-md) * var(--sv-density));
+		margin: 0;
+		padding: calc(var(--sv-space-5) * var(--sv-density))
+			calc(var(--sv-space-13) * var(--sv-density));
+		border: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		font-size: var(--sv-text-sm);
+		line-height: var(--sv-leading-snug);
+		text-align: start;
+		text-decoration: none;
+	}
+
+	/* Rows that act share Button's state layer. */
+	:is(a, button).sv-list-item__main {
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:is(a, button).sv-list-item__main::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+		border-radius: inherit;
+		background-color: currentColor;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	@media (hover: hover) {
+		.sv-list-item:not(.sv-list-item--disabled) :is(a, button).sv-list-item__main:hover::before {
+			opacity: var(--sv-state-hover);
+		}
+	}
+
+	.sv-list-item:not(.sv-list-item--disabled) :is(a, button).sv-list-item__main:active::before {
+		opacity: var(--sv-state-press);
+	}
+
+	/* Navigation: rounded rows, set in from the edges. */
+	.sv-list--nav {
+		padding-inline: var(--sv-space-5);
+	}
+
+	.sv-list--nav .sv-list-item__main {
+		border-radius: var(--sv-radius-md);
+	}
+
+	.sv-list-item--active .sv-list-item__main {
+		background-color: color-mix(in oklch, var(--sv-color) var(--sv-tonal-wash), transparent);
+		color: color-mix(in oklch, var(--sv-color) var(--sv-tonal-text-mix), var(--sv-color-text));
+		font-weight: var(--sv-weight-medium);
+	}
+
+	.sv-list-item--disabled {
+		opacity: 0.382;
+	}
+
+	.sv-list-item--disabled .sv-list-item__main {
+		cursor: not-allowed;
+	}
+
+	.sv-list-item__prepend,
+	.sv-list-item__append {
+		display: flex;
+		flex: none;
+		align-items: center;
+	}
+
+	.sv-list-item__append {
+		padding-inline-end: calc(var(--sv-space-13) * var(--sv-density));
+		font-size: var(--sv-text-sm);
+	}
+
+	:where(.sv-list-item__prepend, .sv-list-item__append) svg {
+		inline-size: 1.272em;
+		block-size: 1.272em;
+	}
+
+	.sv-list-item__text {
+		display: grid;
+		flex: 1;
+		gap: var(--sv-space-2);
+		min-inline-size: 0;
+	}
+
+	.sv-list-item__title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.sv-list-item__subtitle {
+		color: var(--sv-color-text-subtle);
+		font-size: var(--sv-text-xs);
+		font-weight: var(--sv-weight-regular);
+	}
+}

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

@@ -0,0 +1,67 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLiAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density } from '../../core/props/types.js';
+/** The List props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface ListDefaults {
+    /**
+     * Multiplies the height and padding of its items.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * The colour of the active item.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * Rounded rows set in from the edges, for navigation.
+     * @default false
+     */
+    nav: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        List: ListDefaults;
+    }
+}
+/** A list of rows: `ListItem`s. Density and colour are set here, for every item. */
+export type ListProps = ElementProps<HTMLUListElement, HTMLAttributes<HTMLUListElement>, Partial<ListDefaults> & {
+    /** The `ListItem`s. */
+    children?: Snippet;
+}>;
+/**
+ * A row of a `List`. With `href` it is a link and with `onclick` a button, filling the row;
+ * `append` stays outside it, so it can hold controls of its own.
+ */
+export type ListItemProps = ElementProps<HTMLLIElement, HTMLLiAttributes, {
+    /** The main line. */
+    title?: string;
+    /** A second line, under the title. */
+    subtitle?: string;
+    /** Makes the row a link. */
+    href?: string;
+    /** Where a link opens, as on `<a>`. */
+    target?: HTMLAnchorAttributes['target'];
+    /** The relationship of a link, as on `<a>`. */
+    rel?: string;
+    /** Makes the row a button that calls this. */
+    onclick?: (event: MouseEvent) => void;
+    /**
+     * The current page or the selected row: tinted in the list's colour, and
+     * `aria-current="page"` on a link.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * A disabled row cannot be pressed; a disabled link loses its `href`.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Content before the text, such as an avatar or an icon. */
+    prepend?: Snippet;
+    /** Content after the row's link or button, such as a value or a menu button. */
+    append?: Snippet;
+    /** More content under the title and subtitle. */
+    children?: Snippet;
+}>;

package/dist/components/List/types.js

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