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

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>

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/Dialog/Dialog.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	// A modal dialog in the middle of the screen, on the shared modal shell. See DialogProps.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import { pop } from '../../primitives/motion/motion.js';
+	import Modal from '../Modal/Modal.svelte';
+	import type { DialogDefaults, DialogProps } from './types.js';
+
+	let {
+		size,
+		density,
+		rounded,
+		open = $bindable(false),
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: DialogProps = $props();
+
+	const resolve = useDefaults<DialogDefaults>('Dialog', {
+		size: 'md',
+		density: 'default',
+		rounded: true
+	});
+	const p = $derived(resolve({ size, density, rounded }));
+</script>
+
+<Modal
+	{...rest}
+	component="Dialog"
+	placement="center"
+	panelClass={sharedClasses(p, 'Dialog')}
+	enter={pop}
+	class={['sv-dialog', className]}
+	bind:open
+	bind:ref
+/>

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

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

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

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

package/dist/components/Dialog/index.js

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

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

@@ -0,0 +1,50 @@
+import type { HTMLDialogAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Density, Rounded, Size } from '../../core/props/types.js';
+import type { ModalContentProps } from '../Modal/types.js';
+/** The Dialog props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface DialogDefaults {
+    /**
+     * The width of the panel, from `xs` (21rem) to `xl` (55rem).
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius for large surfaces.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Dialog: DialogDefaults;
+    }
+}
+/**
+ * A modal dialog: the platform's own `<dialog>`, in the top layer, with the rest of the page
+ * inert and still. Focus moves into it and returns to the control that opened it; Escape and a
+ * press on the backdrop close it unless it is `persistent`. `class`, `style`, `ref` and other
+ * attributes go to the `<dialog>`.
+ *
+ * @example
+ * <Dialog title="Delete this card?" bind:open>
+ *   {#snippet trigger(attributes)}<Button {...attributes} color="error">Delete</Button>{/snippet}
+ *   The card stops working at once. Payments already made are kept.
+ *   {#snippet actions({ close })}
+ *     <Button variant="text" onclick={close}>Keep it</Button>
+ *     <Button color="error" onclick={remove}>Delete</Button>
+ *   {/snippet}
+ * </Dialog>
+ */
+export type DialogProps = ElementProps<HTMLDialogElement, Omit<HTMLDialogAttributes, 'open' | 'title' | 'children'>, Partial<DialogDefaults> & ModalContentProps & {
+    /**
+     * The panel fills the screen, as on a phone.
+     * @default false
+     */
+    fullscreen?: boolean;
+}>;

package/dist/components/Dialog/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;