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

package/dist/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	// A box that is checked or not, with its label beside it and validation. See CheckboxProps.
+	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 { useLocale } from '../../core/locale/locale.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import Choice from '../Choice/Choice.svelte';
+	import './checkbox.css';
+	import type { CheckboxDefaults, CheckboxProps } from './types.js';
+
+	let {
+		color,
+		size,
+		density,
+		disabled,
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		required = false,
+		id,
+		'aria-describedby': describedBy,
+		class: className,
+		style,
+		ref = $bindable(null),
+		...rest
+	}: CheckboxProps = $props();
+
+	const resolve = useDefaults<CheckboxDefaults>('Checkbox', {
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		disabled: false
+	});
+	const p = $derived(resolve({ color, size, density, disabled }));
+	const locale = useLocale();
+	// A form reset goes back to the state the box started in, as it does for a form rendered on
+	// the server.
+	const initial = untrack(() => checked ?? false);
+
+	const field = createField<boolean>({
+		value: () => checked ?? false,
+		// Rules run on a checked box only, as they run on a filled field only.
+		empty: (on) => !on,
+		check: (on) => (!on && required ? locale.t('required') : undefined),
+		rules: () => rules,
+		error: () => error,
+		validateOn: () => validateOn,
+		control: () => ref
+	});
+
+	if (DEV) $effect(() => warnUnnamed('Checkbox', ref));
+
+	// A toggle is a whole edit, so it also counts as leaving: the message shows at once, even in
+	// Safari, where a click does not focus the checkbox.
+	function toggled() {
+		field.changed();
+		field.left();
+	}
+</script>
+
+<Choice
+	{id}
+	{label}
+	{hint}
+	error={field.error}
+	{required}
+	disabled={p.disabled}
+	class={[
+		'sv-checkbox',
+		sharedClasses(p, 'Checkbox'),
+		indeterminate && 'sv-checkbox--indeterminate',
+		className
+	]}
+	{style}
+	onchange={toggled}
+>
+	{#snippet children(attributes)}
+		<span class="sv-checkbox__control">
+			<input
+				bind:this={ref}
+				defaultChecked={initial}
+				{...rest}
+				{...attributes}
+				aria-describedby={[describedBy, attributes['aria-describedby']].filter(Boolean).join(' ') ||
+					undefined}
+				type="checkbox"
+				class="sv-checkbox__input"
+				bind:checked
+				bind:indeterminate
+			/>
+			<span class="sv-checkbox__box" aria-hidden="true">
+				<svg class="sv-checkbox__mark" viewBox="0 0 24 24" focusable="false">
+					<path class="sv-checkbox__check" d="M5 12.5l4.5 4.5 9.5-9.5" />
+					<path class="sv-checkbox__dash" d="M6.5 12h11" />
+				</svg>
+			</span>
+		</span>
+	{/snippet}
+</Choice>

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

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

package/dist/components/Checkbox/checkbox.css

@@ -0,0 +1,138 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* The box is as tall as a line of the label, 1.272em with the label's √φ line height. */
+	.sv-checkbox {
+		--sv-checkbox-size: 1.272em;
+		--sv-checkbox-border: calc(var(--sv-hairline) * 1.5);
+		--sv-choice-control: var(--sv-checkbox-size);
+	}
+
+	/*
+	 * The native input lies over the drawn box, invisible, so focus, keys, forms and autofill stay
+	 * native. The box sits on the first line of the label.
+	 */
+	.sv-checkbox__control {
+		position: relative;
+		display: inline-flex;
+		flex: none;
+		margin-block-start: calc((1lh - var(--sv-checkbox-size)) / 2);
+	}
+
+	.sv-checkbox__input {
+		position: absolute;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		margin: 0;
+		opacity: 0;
+		cursor: inherit;
+	}
+
+	/* Never rounder than a quarter of its side, so a checkbox does not pass for a radio. */
+	.sv-checkbox__box {
+		position: relative;
+		display: grid;
+		place-items: center;
+		box-sizing: border-box;
+		inline-size: var(--sv-checkbox-size);
+		block-size: var(--sv-checkbox-size);
+		border: var(--sv-checkbox-border) solid var(--sv-color-border-strong);
+		border-radius: min(var(--sv-radius-sm), var(--sv-checkbox-size) * 0.236);
+		background-color: var(--sv-color-surface);
+		color: var(--sv-on-color);
+		pointer-events: none;
+	}
+
+	/* The fill (before) and the state layer (after) cover the border. */
+	.sv-checkbox__box::before,
+	.sv-checkbox__box::after {
+		content: '';
+		position: absolute;
+		inset: calc(var(--sv-checkbox-border) * -1);
+		border-radius: inherit;
+		opacity: 0;
+	}
+
+	.sv-checkbox__box::before {
+		background-color: var(--sv-color);
+		transform: scale(0.618);
+	}
+
+	.sv-checkbox__box::after {
+		background-color: var(--sv-color-text);
+	}
+
+	.sv-checkbox__mark {
+		position: relative;
+		inline-size: 100%;
+		block-size: 100%;
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 3;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		opacity: 0;
+		transform: scale(0.618);
+	}
+
+	/* A check scales in with its fill; nothing else moves. */
+	.sv-checkbox__box::before,
+	.sv-checkbox__mark {
+		transition:
+			opacity var(--sv-duration-fast) var(--sv-ease),
+			transform var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	.sv-checkbox__input:checked + .sv-checkbox__box::before,
+	.sv-checkbox__input:checked + .sv-checkbox__box .sv-checkbox__mark,
+	.sv-checkbox--indeterminate .sv-checkbox__box::before,
+	.sv-checkbox--indeterminate .sv-checkbox__mark {
+		opacity: 1;
+		transform: none;
+	}
+
+	.sv-checkbox__input:checked + .sv-checkbox__box::after,
+	.sv-checkbox--indeterminate .sv-checkbox__box::after {
+		background-color: var(--sv-on-color);
+	}
+
+	/* The dash stands in for the check while the state is indeterminate. */
+	.sv-checkbox__dash,
+	.sv-checkbox--indeterminate .sv-checkbox__check {
+		display: none;
+	}
+
+	.sv-checkbox--indeterminate .sv-checkbox__dash {
+		display: inline;
+	}
+
+	/*
+	 * Hover and press mix the mark's colour over the box, as they do over a flat Button. The
+	 * disabled guard adds no weight, so an invalid box keeps its error border under the pointer.
+	 */
+	@media (hover: hover) {
+		:where(.sv-checkbox:not(.sv-choice--disabled)) > .sv-choice__row:hover .sv-checkbox__box {
+			border-color: var(--sv-color-text-muted);
+		}
+
+		:where(.sv-checkbox:not(.sv-choice--disabled))
+			> .sv-choice__row:hover
+			.sv-checkbox__box::after {
+			opacity: var(--sv-state-hover);
+		}
+	}
+
+	:where(.sv-checkbox:not(.sv-choice--disabled)) > .sv-choice__row:active .sv-checkbox__box::after {
+		opacity: var(--sv-state-press);
+	}
+
+	.sv-checkbox__input:focus-visible + .sv-checkbox__box {
+		outline: var(--sv-focus-width) solid var(--sv-color);
+		outline-offset: var(--sv-focus-offset);
+	}
+
+	.sv-choice--invalid > .sv-choice__row .sv-checkbox__box {
+		border-color: var(--sv-color-error);
+	}
+}

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

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

package/dist/components/Checkbox/index.js

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

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

@@ -0,0 +1,76 @@
+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 { Color, Density, Size } from '../../core/props/types.js';
+import type { ChoiceContentProps } from '../Choice/types.js';
+/** The Checkbox props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface CheckboxDefaults {
+    /**
+     * The colour of the checked box. An invalid checkbox uses `error`.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * The size of the box and the label text.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the height of the row, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Mutes the checkbox and disables its input.
+     * @default false
+     */
+    disabled: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Checkbox: CheckboxDefaults;
+    }
+}
+type CheckboxOwnProps = Partial<CheckboxDefaults> & ChoiceContentProps & {
+    /**
+     * Whether the box is checked. Bindable.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Shows a dash for a state that is neither checked nor unchecked, such as a "select all"
+     * box over a partly selected list. A press clears it. Bindable.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * What the form submits under `name` while the box is checked.
+     * @default 'on'
+     */
+    value?: string;
+    /** Checks run in order after `required`, with the checked state. The first message is shown. */
+    rules?: readonly Rule<boolean>[];
+    /** When the message shows. Defaults to the form's setting, else `'blur'`. */
+    validateOn?: ValidateOn;
+    /**
+     * The box must be checked, as for accepting terms. Adds an asterisk to the label.
+     * @default false
+     */
+    required?: boolean;
+    /** Inline style of the checkbox's root element. */
+    style?: string | null;
+};
+/**
+ * A box that is checked or not, with its label beside it: the platform's own checkbox, drawn in
+ * the theme. `class` and `style` apply to the root; `id`, `ref`, `name` and every other attribute
+ * go to the `<input type="checkbox">`. The label is the press target, at least 24px tall.
+ *
+ * @example
+ * <Checkbox label="Email me a receipt" name="receipt" bind:checked={receipt} />
+ *
+ * <Checkbox name="terms" required bind:checked={accepted}>
+ *   {#snippet label()}I accept the <a href="/terms">terms of service</a>{/snippet}
+ * </Checkbox>
+ */
+export type CheckboxProps = ElementProps<HTMLInputElement, Omit<HTMLInputAttributes, 'type' | 'children'>, CheckboxOwnProps>;
+export {};

package/dist/components/Checkbox/types.js

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

package/dist/components/Chip/Chip.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	// A tag, a filter, an action or a link, as a compact pill. See ChipProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sveltierError } from '../../core/errors/errors.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './chip.css';
+	import type { ChipDefaults, ChipProps } from './types.js';
+
+	let {
+		variant,
+		size,
+		density,
+		color,
+		rounded,
+		disabled,
+		selected = $bindable(),
+		closable = false,
+		closeLabel,
+		onclose,
+		href,
+		onclick,
+		prepend,
+		append,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ChipProps = $props();
+
+	const resolve = useDefaults<ChipDefaults>('Chip', {
+		variant: 'tonal',
+		size: 'sm',
+		density: 'default',
+		color: 'neutral',
+		rounded: true,
+		disabled: false
+	});
+	const p = $derived(resolve({ variant, size, density, color, rounded, disabled }));
+	const locale = useLocale();
+
+	const toggle = $derived(selected !== undefined);
+	const tag = $derived.by(() => {
+		const element = href != null ? 'a' : toggle || onclick ? 'button' : 'span';
+		// A close button inside a button or a link would nest one control in another.
+		if (closable && element !== 'span') {
+			throw sveltierError(
+				'SV4001',
+				'Chip: a closable chip cannot also be a button or a link, since its close button would sit inside it. Put the action in a Button next to the chip.'
+			);
+		}
+		return element;
+	});
+	const action = $derived(tag !== 'span');
+
+	function click(event: MouseEvent) {
+		if (p.disabled) {
+			event.preventDefault();
+			return;
+		}
+		if (toggle) selected = !selected;
+		(onclick as ((event: MouseEvent) => void) | null | undefined)?.(event);
+	}
+
+	const CHECK = 'M4 12.5 5.5 11l4 4 9-9L20 7.5 9.5 18z';
+	const CLOSE =
+		'M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4z';
+</script>
+
+<svelte:element
+	this={tag}
+	bind:this={ref}
+	{...rest}
+	href={tag === 'a' && !p.disabled ? href : undefined}
+	type={tag === 'button' ? 'button' : undefined}
+	role={tag === 'a' && p.disabled ? 'link' : undefined}
+	disabled={(tag === 'button' && p.disabled) || undefined}
+	aria-disabled={(tag === 'a' && p.disabled) || undefined}
+	aria-pressed={toggle ? selected : undefined}
+	class={[
+		'sv-chip',
+		sharedClasses({ ...p, variant: selected ? 'flat' : p.variant }, 'Chip'),
+		action && 'sv-chip--action',
+		p.disabled && 'sv-chip--disabled',
+		className
+	]}
+	onclick={action ? click : undefined}
+>
+	{#if selected}
+		<span class="sv-chip__prepend">
+			<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={CHECK} /></svg>
+		</span>
+	{:else if prepend}
+		<span class="sv-chip__prepend">{@render prepend()}</span>
+	{/if}
+	{#if children}<span class="sv-chip__label">{@render children()}</span>{/if}
+	{#if append}<span class="sv-chip__append">{@render append()}</span>{/if}
+	{#if closable}
+		<button
+			type="button"
+			class="sv-chip__close"
+			aria-label={closeLabel ?? locale.t('close')}
+			disabled={p.disabled}
+			onclick={() => onclose?.()}
+		>
+			<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={CLOSE} /></svg>
+		</button>
+	{/if}
+</svelte:element>

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

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

package/dist/components/Chip/chip.css

@@ -0,0 +1,101 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* A pill a control tall; text follows size only. */
+	.sv-chip {
+		position: relative;
+		isolation: isolate;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.382em;
+		box-sizing: border-box;
+		max-inline-size: 100%;
+		block-size: calc(var(--sv-size-height) * var(--sv-density));
+		margin: 0;
+		padding: 0 calc(var(--sv-size-height) * var(--sv-density) * 0.382);
+		border: var(--sv-hairline) solid var(--sv-variant-border);
+		border-radius: var(--sv-rounded, var(--sv-radius-full));
+		background-color: var(--sv-variant-bg);
+		box-shadow: var(--sv-variant-shadow);
+		color: var(--sv-variant-fg);
+		font: var(--sv-weight-medium) var(--sv-size-text) / 1 var(--sv-font-ui);
+		text-decoration: none;
+		white-space: nowrap;
+		vertical-align: middle;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	/* Pressable chips use the same state layer as Button. */
+	.sv-chip--action {
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.sv-chip--action::before {
+		content: '';
+		position: absolute;
+		inset: calc(var(--sv-hairline) * -1);
+		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-chip--action:where(:not(.sv-chip--disabled)):hover::before {
+			opacity: var(--sv-state-hover);
+		}
+	}
+
+	.sv-chip--action:where(:not(.sv-chip--disabled)):active::before {
+		opacity: var(--sv-state-press);
+	}
+
+	.sv-chip--disabled {
+		opacity: 0.382;
+		cursor: not-allowed;
+	}
+
+	.sv-chip__label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.sv-chip__prepend,
+	.sv-chip__append {
+		display: inline-flex;
+	}
+
+	:where(.sv-chip) svg {
+		inline-size: 1.272em;
+		block-size: 1.272em;
+	}
+
+	/* The close button: a round target at the end, tinted on hover. */
+	.sv-chip__close {
+		display: inline-grid;
+		place-items: center;
+		inline-size: 1.618em;
+		block-size: 1.618em;
+		margin-inline-end: -0.382em;
+		padding: 0;
+		border: 0;
+		border-radius: 50%;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+	}
+
+	@media (hover: hover) {
+		.sv-chip__close:hover {
+			background-color: color-mix(in oklch, currentColor var(--sv-state-hover), transparent);
+		}
+	}
+
+	.sv-chip__close svg {
+		inline-size: 1em;
+		block-size: 1em;
+	}
+}

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

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

package/dist/components/Chip/index.js

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

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

@@ -0,0 +1,69 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Rounded, Size, Variant } from '../../core/props/types.js';
+/** The Chip props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface ChipDefaults {
+    /**
+     * Visual weight. A selected chip is `flat`.
+     * @default 'tonal'
+     */
+    variant: Variant;
+    /**
+     * Height and text size.
+     * @default 'sm'
+     */
+    size: Size;
+    /**
+     * Multiplies the height and padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * The colour the variant is painted with.
+     * @default 'neutral'
+     */
+    color: Color;
+    /**
+     * Corner rounding. `true` keeps the pill.
+     * @default true
+     */
+    rounded: Rounded;
+    /**
+     * A disabled chip cannot be pressed; a disabled link loses its `href`.
+     * @default false
+     */
+    disabled: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Chip: ChipDefaults;
+    }
+}
+/**
+ * A compact label: a tag (optionally `closable`), a filter that toggles (`selected`), an
+ * action (`onclick`) or a link (`href`).
+ */
+export type ChipProps = ElementProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement, HTMLAttributes<HTMLSpanElement> & HTMLButtonAttributes & HTMLAnchorAttributes, Partial<ChipDefaults> & {
+    /**
+     * Makes the chip a toggle button (`aria-pressed`) that flips it when pressed: a filter.
+     * Bindable. Shows a check while selected.
+     */
+    selected?: boolean;
+    /**
+     * Adds a button that removes the chip by calling `onclose`. Only for chips that are not
+     * themselves buttons or links.
+     * @default false
+     */
+    closable?: boolean;
+    /** The name of the close button, such as `Remove Euro`. Defaults to the locale's `close`. */
+    closeLabel?: string;
+    /** Called by the close button. */
+    onclose?: () => void;
+    /** Content before the label, usually an icon or an avatar. */
+    prepend?: Snippet;
+    /** Content after the label. */
+    append?: Snippet;
+    /** The label. */
+    children?: Snippet;
+}>;

package/dist/components/Chip/types.js

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

package/dist/components/Choice/Choice.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	// A control beside its label, with a hint or an error under them: the layout Checkbox and
+	// Switch share. See ChoiceProps.
+	import './choice.css';
+	import type { ChoiceProps } from './types.js';
+
+	let {
+		id: idProp,
+		label,
+		hint,
+		error = false,
+		required = false,
+		disabled = false,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ChoiceProps = $props();
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+	const message = $derived(typeof error === 'string' ? error : undefined);
+</script>
+
+<div
+	bind:this={ref}
+	{...rest}
+	class={[
+		'sv-choice',
+		error !== false && 'sv-choice--invalid',
+		disabled && 'sv-choice--disabled',
+		className
+	]}
+>
+	<!-- The label wraps the control, so a press anywhere on it toggles the control. -->
+	<label class="sv-choice__row">
+		{@render children({
+			id,
+			'aria-describedby': message ? `${id}-error` : hint ? `${id}-hint` : undefined,
+			'aria-invalid': error !== false || undefined,
+			required,
+			disabled
+		})}
+		{#if label}
+			<span class="sv-choice__label"
+				>{#if typeof label === 'string'}{label}{:else}{@render label()}{/if}{#if required}<span
+						class="sv-choice__required"
+						aria-hidden="true">*</span
+					>{/if}</span
+			>
+		{/if}
+	</label>
+	<div class="sv-choice__messages">
+		{#if hint && !message}<p class="sv-choice__hint" id="{id}-hint">{hint}</p>{/if}
+		<!-- Announces an error that appears after the user has moved on. -->
+		<div aria-live="polite">
+			{#if message}<p class="sv-choice__error" id="{id}-error">{message}</p>{/if}
+		</div>
+	</div>
+</div>