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

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	// A modal <dialog> in the top layer with a panel: the shell of Dialog and Sheet. See
+	// ModalProps.
+	import { createAttachmentKey, type Attachment } from 'svelte/attachments';
+	import { DEV, warnUnnamed } from '#dev';
+	import { useLocale } from '../../core/locale/locale.js';
+	import type { CloseReason, TriggerAttributes } from '../../core/overlay/types.js';
+	import { getToasts } from '../../core/toast/toast.svelte.js';
+	import ToastOutlet from '../../core/toast/ToastOutlet.svelte';
+	import { focusTrap } from '../../primitives/focus/focus-trap.js';
+	import { dismissable } from '../../primitives/layer/dismissable.js';
+	import { fade } from '../../primitives/motion/motion.js';
+	import { scrollLock } from '../../primitives/scroll-lock/scroll-lock.js';
+	import './modal.css';
+	import type { ModalProps } from './types.js';
+
+	let {
+		component,
+		placement,
+		panelClass,
+		enter,
+		open = $bindable(false),
+		title,
+		children,
+		actions,
+		trigger,
+		persistent = false,
+		closable = false,
+		closeLabel,
+		fullscreen = false,
+		onclose,
+		id: idProp,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ModalProps = $props();
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+	const locale = useLocale();
+
+	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';
+
+	// The control that opened it: focus goes back to it, as Safari does not focus a clicked
+	// button by itself.
+	let opener = $state<HTMLElement | null>(null);
+	const capture: Attachment<HTMLElement> = (node) => {
+		opener = node;
+		return () => {
+			if (opener === node) opener = null;
+		};
+	};
+	const OPENER = createAttachmentKey();
+	const triggerAttributes: TriggerAttributes = $derived({
+		'aria-haspopup': 'dialog',
+		'aria-controls': open ? id : undefined,
+		onclick: () => (open = true),
+		[OPENER]: capture
+	});
+
+	function close(reason: CloseReason) {
+		if (!open) return;
+		open = false;
+		onclose?.(reason);
+	}
+
+	// The top layer, with the rest of the page inert.
+	const modal: Attachment<HTMLDialogElement> = (dialog) => {
+		dialog.showModal();
+		if (DEV) warnUnnamed(component, dialog, 'a title');
+	};
+
+	// The rest of the page is inert under a modal dialog, toasts included, so they show in the
+	// dialog while it is open, and go back to the page as soon as it starts to close.
+	const toasts = getToasts();
+	const outlet = {};
+	let toastRegion = $state<HTMLElement | null>(null);
+	$effect(() => {
+		if (open && toasts) return toasts.register(outlet);
+	});
+
+	// Escape is left to the layer stack, so nested layers close one at a time. The browser may
+	// still close the dialog itself: Chrome does after repeated presses, and a form with
+	// method="dialog" does on submit. Either way the state follows, with the likely reason.
+	let escaped = false;
+	function cancel(event: Event) {
+		event.preventDefault();
+		escaped = true;
+	}
+</script>
+
+{#if trigger}{@render trigger(triggerAttributes)}{/if}
+
+{#if open}
+	<dialog
+		bind:this={ref}
+		aria-labelledby={title ? `${id}-title` : undefined}
+		{...rest}
+		{id}
+		class={['sv-modal', `sv-modal--${placement}`, fullscreen && 'sv-modal--fullscreen', className]}
+		{@attach modal}
+		{@attach scrollLock()}
+		{@attach focusTrap({ returnFocus: opener ?? true })}
+		oncancel={cancel}
+		onclose={() => close(escaped ? 'escape' : 'action')}
+		transition:fade
+	>
+		<!-- The scrim is the dialog itself, so a press beside the panel is a press outside it. -->
+		<div
+			class={['sv-modal__panel', panelClass]}
+			{@attach dismissable({
+				onDismiss: close,
+				escape: !persistent,
+				outside: !persistent,
+				inside: () => [toastRegion]
+			})}
+			transition:enter
+		>
+			{#if title || closable}
+				<header class="sv-modal__header">
+					{#if title}<h2 class="sv-modal__title" id="{id}-title">{title}</h2>{/if}
+					{#if closable}
+						<button
+							type="button"
+							class="sv-modal__close"
+							aria-label={closeLabel ?? locale.t('close')}
+							onclick={() => close('action')}
+						>
+							<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
+								><path d={CLOSE} /></svg
+							>
+						</button>
+					{/if}
+				</header>
+			{/if}
+			{#if children}<div class="sv-modal__body">{@render children()}</div>{/if}
+			{#if actions}
+				<footer class="sv-modal__actions">
+					{@render actions({ close: () => close('action') })}
+				</footer>
+			{/if}
+		</div>
+		{#if toasts}<ToastOutlet {toasts} {outlet} bind:ref={toastRegion} />{/if}
+	</dialog>
+{/if}

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

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

package/dist/components/Modal/modal.css

@@ -0,0 +1,150 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * The <dialog> is the whole viewport: a scrim with the panel on it, so a press beside the panel
+	 * is a press outside it. The scrim comes with the theme: its ink over a light theme,
+	 * its background over a dark one, so custom themes get one in their own tone too.
+	 */
+	.sv-modal {
+		position: fixed;
+		inset: 0;
+		box-sizing: border-box;
+		display: grid;
+		place-items: center;
+		inline-size: 100%;
+		max-inline-size: none;
+		block-size: 100%;
+		max-block-size: none;
+		margin: 0;
+		padding: var(--sv-space-21);
+		overflow: hidden;
+		border: 0;
+		background: var(--sv-color-scrim);
+		color: var(--sv-color-text);
+		overscroll-behavior: contain;
+	}
+
+	.sv-modal::backdrop {
+		background: transparent;
+	}
+
+	/* The panel: a large surface, as wide as its size allows, as tall as the screen at most. */
+	.sv-modal__panel {
+		--sv-modal-pad: calc(var(--sv-space-21) * var(--sv-density));
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		inline-size: 100%;
+		max-inline-size: var(--sv-modal-width);
+		max-block-size: 100%;
+		border-radius: var(--sv-rounded, var(--sv-radius-xl));
+		background-color: var(--sv-color-surface);
+		box-shadow: var(--sv-shadow);
+		font-family: var(--sv-font-ui);
+		font-size: var(--sv-text-md);
+		line-height: var(--sv-leading-normal);
+	}
+
+	/* Widths on a half step of φ: 21, 27, 34, 44 and 55rem. */
+	.sv-modal__panel.sv-size-xs {
+		--sv-modal-width: 21rem;
+	}
+
+	.sv-modal__panel.sv-size-sm {
+		--sv-modal-width: 27rem;
+	}
+
+	.sv-modal__panel.sv-size-md {
+		--sv-modal-width: 34rem;
+	}
+
+	.sv-modal__panel.sv-size-lg {
+		--sv-modal-width: 44rem;
+	}
+
+	.sv-modal__panel.sv-size-xl {
+		--sv-modal-width: 55rem;
+	}
+
+	.sv-modal__header {
+		display: flex;
+		flex: none;
+		gap: var(--sv-space-13);
+		align-items: flex-start;
+		padding: var(--sv-modal-pad) var(--sv-modal-pad) 0;
+	}
+
+	/* The heading in the theme's display voice, as a Card title. */
+	.sv-modal__title {
+		flex: 1;
+		min-inline-size: 0;
+		margin: 0;
+		font: var(--sv-weight-display) var(--sv-text-xl) / var(--sv-leading-snug) var(--sv-font-display);
+		letter-spacing: var(--sv-tracking-display);
+	}
+
+	.sv-modal__close {
+		display: inline-grid;
+		flex: none;
+		place-items: center;
+		inline-size: 2.058rem;
+		block-size: 2.058rem;
+		margin-block: -0.236rem;
+		margin-inline-end: -0.382rem;
+		padding: 0;
+		border: 0;
+		border-radius: var(--sv-radius-full);
+		background: transparent;
+		color: var(--sv-color-text-muted);
+		cursor: pointer;
+	}
+
+	@media (hover: hover) {
+		.sv-modal__close:hover {
+			background-color: color-mix(in oklch, currentColor var(--sv-state-hover), transparent);
+		}
+	}
+
+	.sv-modal__close svg {
+		inline-size: 1.272rem;
+		block-size: 1.272rem;
+	}
+
+	/* The body scrolls; the heading and the actions stay. */
+	.sv-modal__body {
+		flex: 1;
+		min-block-size: 0;
+		padding: var(--sv-modal-pad);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+
+	.sv-modal__header + .sv-modal__body {
+		padding-block-start: var(--sv-space-13);
+	}
+
+	.sv-modal__actions {
+		display: flex;
+		flex: none;
+		flex-wrap: wrap;
+		gap: var(--sv-space-8);
+		justify-content: flex-end;
+		padding: 0 var(--sv-modal-pad) var(--sv-modal-pad);
+	}
+
+	.sv-modal__header:last-child,
+	.sv-modal__body:last-child {
+		padding-block-end: var(--sv-modal-pad);
+	}
+
+	.sv-modal--fullscreen {
+		padding: 0;
+	}
+
+	.sv-modal--fullscreen > .sv-modal__panel {
+		max-inline-size: none;
+		block-size: 100%;
+		border-radius: 0;
+	}
+}

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

@@ -0,0 +1,54 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue, HTMLDialogAttributes } from 'svelte/elements';
+import type { TransitionConfig } from 'svelte/transition';
+import type { CloseReason, TriggerAttributes } from '../../core/overlay/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { SheetSide } from '../Sheet/types.js';
+/** The props Dialog and Sheet share. */
+export interface ModalContentProps {
+    /**
+     * Whether it is open. Bindable; it sets this to `false` when it closes itself.
+     * @default false
+     */
+    open?: boolean;
+    /** The heading, which also names it. Without it, name it with `aria-label`. */
+    title?: string;
+    /** The body. */
+    children?: Snippet;
+    /** Buttons at the end. `close()` closes it with the reason `'action'`. */
+    actions?: Snippet<[{
+        close: () => void;
+    }]>;
+    /** The control that opens it. Spread the attributes it receives onto it. */
+    trigger?: Snippet<[TriggerAttributes]>;
+    /**
+     * Escape and a press on the backdrop do not close it: an answer is needed.
+     * @default false
+     */
+    persistent?: boolean;
+    /**
+     * Adds a close button to the heading.
+     * @default false
+     */
+    closable?: boolean;
+    /**
+     * The accessible name of the close button.
+     * @default 'Close' (from the locale)
+     */
+    closeLabel?: string;
+    /** Called when it closes itself, with the reason. */
+    onclose?: (reason: CloseReason) => void;
+}
+/** A modal `<dialog>` with a panel, the shell of Dialog and Sheet. Internal. */
+export type ModalProps = ElementProps<HTMLDialogElement, Omit<HTMLDialogAttributes, 'open' | 'title' | 'children'>, ModalContentProps & {
+    /** The component's name, for development warnings. */
+    component: string;
+    /** Where the panel sits: in the centre (a dialog) or against an edge (a sheet). */
+    placement: 'center' | SheetSide;
+    /** The shared-prop classes of the panel. */
+    panelClass: ClassValue;
+    /** How the panel comes in and goes: a dialog pops, a sheet slides. */
+    enter: (node: Element) => TransitionConfig;
+    /** The panel fills the screen. */
+    fullscreen?: boolean;
+}>;

package/dist/components/Modal/types.js

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

package/dist/components/NativeSelect/NativeSelect.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" generics="T extends string | number">
+	// One choice from a list, as the platform's own select in a Field. See NativeSelectProps.
+	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 type { Rule } from '../../core/form/types.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import Field from '../Field/Field.svelte';
+	import './native-select.css';
+	import type { NativeSelectDefaults, NativeSelectProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		size,
+		density,
+		rounded,
+		disabled,
+		options,
+		value = $bindable(null),
+		placeholder,
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		required = false,
+		prepend,
+		id,
+		'aria-describedby': describedBy,
+		class: className,
+		style,
+		ref = $bindable(null),
+		...rest
+	}: NativeSelectProps<T> = $props();
+
+	const resolve = useDefaults<NativeSelectDefaults>('NativeSelect', {
+		variant: 'outlined',
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		rounded: true,
+		disabled: false
+	});
+	const p = $derived(resolve({ variant, color, size, density, rounded, disabled }));
+	const locale = useLocale();
+
+	// The choice a form reset goes back to: the one the select started with.
+	const initial = untrack(() => value ?? null);
+
+	const field = createField<T | null>({
+		value: () => value ?? null,
+		empty: (choice) => choice === null,
+		check: (choice) => (choice === null && required ? locale.t('required') : undefined),
+		// Rules never see null: an empty choice skips them.
+		rules: () => rules as readonly Rule<T | null>[] | undefined,
+		error: () => error,
+		validateOn: () => validateOn,
+		control: () => ref
+	});
+
+	if (DEV) $effect(() => warnUnnamed('NativeSelect', ref));
+
+	// Leaving means focus went outside the field.
+	function leave(event: FocusEvent) {
+		const root = event.currentTarget as HTMLElement;
+		if (!root.contains(event.relatedTarget as Node | null)) field.left();
+	}
+</script>
+
+<Field
+	{...p}
+	{id}
+	{label}
+	{hint}
+	error={field.error}
+	{required}
+	{prepend}
+	class={[
+		'sv-native-select',
+		placeholder !== undefined && value == null && 'sv-native-select--empty',
+		className
+	]}
+	{style}
+	oninput={field.changed}
+	onfocusout={leave}
+>
+	{#snippet children(attributes)}
+		<select
+			bind:this={ref}
+			{...rest}
+			{...attributes}
+			aria-describedby={[describedBy, attributes['aria-describedby']].filter(Boolean).join(' ') ||
+				undefined}
+			bind:value={() => value ?? '', (next: T | '') => (value = next === '' ? null : next)}
+		>
+			{#if placeholder !== undefined}
+				<option value="" disabled={required} selected={initial === null}>{placeholder}</option>
+			{/if}
+			{#each options as option (option.value)}
+				<option
+					value={option.value}
+					disabled={option.disabled}
+					selected={Object.is(option.value, initial)}>{option.label}</option
+				>
+			{/each}
+		</select>
+	{/snippet}
+</Field>

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

@@ -0,0 +1,25 @@
+import type { NativeSelectProps } from './types.js';
+declare function $$render<T extends string | number>(): {
+    props: NativeSelectProps<T>;
+    exports: {};
+    bindings: "ref" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NativeSelect: $$IsomorphicComponent;
+type NativeSelect<T extends string | number> = InstanceType<typeof NativeSelect<T>>;
+export default NativeSelect;

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

@@ -0,0 +1,2 @@
+export { default as NativeSelect } from './NativeSelect.svelte';
+export type { NativeSelectDefaults, NativeSelectOption, NativeSelectProps } from './types.js';

package/dist/components/NativeSelect/index.js

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

package/dist/components/NativeSelect/native-select.css

@@ -0,0 +1,45 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	.sv-native-select > .sv-field__box {
+		cursor: pointer;
+	}
+
+	/* Room at the end for the arrow, which the text never runs under. */
+	.sv-native-select .sv-field__control {
+		padding-inline-end: calc(1.272em + var(--sv-space-8));
+		text-overflow: ellipsis;
+		cursor: inherit;
+	}
+
+	/* The placeholder reads as one, as in a text field; the list keeps the text colour. */
+	.sv-native-select--empty .sv-field__control {
+		color: var(--sv-color-text-subtle);
+	}
+
+	.sv-native-select .sv-field__control option {
+		color: var(--sv-color-text);
+	}
+
+	/*
+	 * The arrow: a mask filled with the muted text colour. It lets presses through to the select,
+	 * so the whole box opens the list.
+	 */
+	.sv-native-select > .sv-field__box::before {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-end: calc(var(--sv-size-height) * var(--sv-density) * 0.382);
+		inline-size: 1.272em;
+		block-size: 1.272em;
+		margin-block: auto;
+		background-color: var(--sv-color-text-muted);
+		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
+			center / contain no-repeat;
+		pointer-events: none;
+	}
+
+	.sv-native-select:where(.sv-variant-text, .sv-variant-plain) > .sv-field__box::before {
+		inset-inline-end: 0;
+	}
+}

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

@@ -0,0 +1,58 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+import type { Rule, ValidateOn } from '../../core/form/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { FieldContentProps, FieldDefaults } from '../Field/types.js';
+/** The NativeSelect props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export type NativeSelectDefaults = FieldDefaults;
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        NativeSelect: NativeSelectDefaults;
+    }
+}
+/** One choice of a NativeSelect. */
+export interface NativeSelectOption<T extends string | number = string> {
+    /** The value, never the empty string, which stands for no choice. */
+    value: T;
+    /** What the option says. */
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * One choice from a list, as the platform's own `<select>` in a Field: the phone's picker and the
+ * browser's keyboard behaviour come for free. `class` and `style` apply to the field; `id`, `ref`,
+ * `name` and other attributes go to the `<select>`. The end of the box holds its arrow, so there
+ * is no `append`.
+ *
+ * @example
+ * <NativeSelect
+ *   label="Country"
+ *   name="country"
+ *   placeholder="Choose a country"
+ *   required
+ *   options={[
+ *     { value: 'gb', label: 'United Kingdom' },
+ *     { value: 'vn', label: 'Vietnam' }
+ *   ]}
+ *   bind:value={country}
+ * />
+ */
+export type NativeSelectProps<T extends string | number = string> = ElementProps<HTMLSelectElement, HTMLSelectAttributes, Partial<NativeSelectDefaults> & Omit<FieldContentProps, 'append'> & {
+    /** The choices, in order. */
+    options: readonly NativeSelectOption<T>[];
+    /** The chosen value, or `null` for none. Bindable. */
+    value?: T | null;
+    /** A first option that stands for no choice, such as "Choose a country". */
+    placeholder?: string;
+    /** Checks run in order after `required`, with the chosen value. The first message is shown. */
+    rules?: readonly Rule<T>[];
+    /** When the message shows. Defaults to the form's setting, else `'blur'`. */
+    validateOn?: ValidateOn;
+    /**
+     * A choice must be made. Adds an asterisk to the label, and the placeholder cannot be chosen
+     * again once the user has picked something.
+     * @default false
+     */
+    required?: boolean;
+    /** Inline style of the field's root element. */
+    style?: string | null;
+}>;

package/dist/components/NativeSelect/types.js

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