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

package/dist/components/ButtonGroup/index.js

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

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

@@ -0,0 +1,48 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Rounded, Size, Variant } from '../../core/props/types.js';
+/**
+ * The ButtonGroup props that `DefaultsProvider` and `UIProvider` can set for a subtree. The
+ * group passes them on to its Buttons.
+ */
+export interface ButtonGroupDefaults {
+    /**
+     * The variant of the Buttons.
+     * @default 'outlined'
+     */
+    variant: Variant;
+    /**
+     * The size of the Buttons.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * The density of the Buttons.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * The colour of the Buttons.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * The rounding of the group's outer corners; inner corners are square.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        ButtonGroup: ButtonGroupDefaults;
+    }
+}
+/**
+ * Buttons joined into one control: shared borders, square inner corners, and the same
+ * variant, size, density and colour unless a Button says otherwise. Give it an `aria-label`.
+ */
+export type ButtonGroupProps = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<ButtonGroupDefaults> & {
+    /** The Buttons. */
+    children?: Snippet;
+}>;

package/dist/components/ButtonGroup/types.js

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

package/dist/components/Card/Card.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	// A surface with a header, content and actions. See CardProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './card.css';
+	import type { CardDefaults, CardProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		density,
+		rounded,
+		title,
+		subtitle,
+		level,
+		prepend,
+		append,
+		actions,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: CardProps = $props();
+
+	const resolve = useDefaults<CardDefaults>('Card', {
+		variant: 'elevated',
+		color: 'neutral',
+		density: 'default',
+		rounded: true
+	});
+	const p = $derived(resolve({ variant, color, density, rounded }));
+</script>
+
+<div bind:this={ref} {...rest} class={['sv-card', sharedClasses(p, 'Card'), className]}>
+	{#if title || subtitle || prepend || append}
+		<div class="sv-card__header">
+			{#if prepend}<div class="sv-card__prepend">{@render prepend()}</div>{/if}
+			{#if title || subtitle}
+				<div class="sv-card__heading">
+					{#if title}
+						<svelte:element this={level ? `h${level}` : 'div'} class="sv-card__title">
+							{title}
+						</svelte:element>
+					{/if}
+					{#if subtitle}<div class="sv-card__subtitle">{subtitle}</div>{/if}
+				</div>
+			{/if}
+			{#if append}<div class="sv-card__append">{@render append()}</div>{/if}
+		</div>
+	{/if}
+	{@render children?.()}
+	{#if actions}<div class="sv-card__actions">{@render actions()}</div>{/if}
+</div>

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

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

package/dist/components/Card/card.css

@@ -0,0 +1,62 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* Sections a φ step apart inside Fibonacci padding, both times the density. */
+	.sv-card {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--sv-space-13) * var(--sv-density));
+		box-sizing: border-box;
+		min-inline-size: 0;
+		padding: calc(var(--sv-space-21) * var(--sv-density));
+		border: var(--sv-hairline) solid var(--sv-variant-border);
+		border-radius: var(--sv-rounded, var(--sv-radius-lg));
+		background-color: var(--sv-variant-bg);
+		box-shadow: var(--sv-variant-shadow);
+		color: var(--sv-variant-fg);
+		font-size: var(--sv-text-sm);
+		line-height: var(--sv-leading-normal);
+	}
+
+	/* A neutral outline is the theme's border, not the text colour. */
+	.sv-card.sv-variant-outlined.sv-color-neutral {
+		--sv-variant-border: var(--sv-color-border);
+	}
+
+	.sv-card__header {
+		display: flex;
+		gap: var(--sv-space-13);
+		align-items: center;
+	}
+
+	.sv-card__heading {
+		display: grid;
+		flex: 1;
+		gap: var(--sv-space-3);
+		min-inline-size: 0;
+	}
+
+	.sv-card__title {
+		margin: 0;
+		font: var(--sv-weight-display) var(--sv-text-lg) / var(--sv-leading-snug) var(--sv-font-display);
+		letter-spacing: var(--sv-tracking-display);
+	}
+
+	.sv-card__subtitle {
+		font-size: var(--sv-text-xs);
+	}
+
+	.sv-card__prepend,
+	.sv-card__append {
+		display: flex;
+		flex: none;
+		align-items: center;
+	}
+
+	.sv-card__actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sv-space-8);
+		align-items: center;
+	}
+}

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

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

package/dist/components/Card/index.js

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

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

@@ -0,0 +1,56 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Rounded, Variant } from '../../core/props/types.js';
+/** The Card props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface CardDefaults {
+    /**
+     * Visual weight: a raised surface by default.
+     * @default 'elevated'
+     */
+    variant: Variant;
+    /**
+     * The colour the variant is painted with. Neutral cards use the theme's surface, text and
+     * border colours.
+     * @default 'neutral'
+     */
+    color: Color;
+    /**
+     * Multiplies the padding and the space between sections.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Card: CardDefaults;
+    }
+}
+/**
+ * A surface that groups content about one thing: a header, the content and actions. Links
+ * and buttons inside it are what is clickable, not the card.
+ */
+export type CardProps = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<CardDefaults> & {
+    /** The title, in the header. */
+    title?: string;
+    /** A line under the title. */
+    subtitle?: string;
+    /**
+     * Makes the title a heading of this level (`<h2>`, `<h3>`…), so it is in the page's
+     * outline. Without it the title is styled text.
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Content before the title, such as an avatar or an icon. */
+    prepend?: Snippet;
+    /** Content after the title, such as a menu button. */
+    append?: Snippet;
+    /** Buttons or links at the bottom. */
+    actions?: Snippet;
+    /** The content. */
+    children?: Snippet;
+}>;

package/dist/components/Card/types.js

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

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>