@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/Dialog.svelte

@@ -0,0 +1,194 @@
+<script module lang="ts">
+	/** What .dialog is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    The dialog draws its own box, title, body, actions and close button:
+	    they are PARTS. */
+	export const PREFIX = 'dialog';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* Where the box sits: centred unless told otherwise. */
+		placement: ['top', 'bottom']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['box', 'title', 'body', 'actions', 'close'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A box over the page, on the native <dialog>. Modal by default —
+	 * `showModal()`: the page behind is inert, focus stays inside, Escape
+	 * closes it — or not (`modal={false}`), and the page stays usable.
+	 *
+	 * The actions sit in a `<form method="dialog">`: a button closes the
+	 * dialog and its `value` becomes the dialog's return value, handed to
+	 * `onClose`. The opening and closing are animated here, not in the CSS.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLDialogAttributes } from 'svelte/elements';
+	import { scale } from 'svelte/transition';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	// `open` and `title` are ours: the first is driven through the element's
+	// methods, the second is a heading. Component events are `onXxx`; the
+	// native lowercase ones still pass through.
+	interface Props
+		extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>,
+			Omit<HTMLDialogAttributes, 'open' | 'title'> {
+		/** Whether it is shown. Bindable: closing from inside sets it back. */
+		open?: boolean;
+		/** Block the page behind it (`showModal`). Default true. */
+		modal?: boolean;
+		/** Draw a close button in the corner. Default true. */
+		closable?: boolean;
+		/** Close on Escape and on a click outside the box. Default true. */
+		dismissible?: boolean;
+		/** Animate opening and closing. Ignored when the visitor asks for reduced motion. */
+		animated?: boolean;
+		/** The heading, as text or as a snippet. */
+		title?: string | Snippet;
+		/** Buttons, inside the `<form method="dialog">`: each one closes with its `value`. */
+		actions?: Snippet;
+		/** After it closed, with the value of the button that closed it ('' otherwise). */
+		onClose?: (value: string) => void;
+		/** The accessible name of the close button. */
+		closeLabel?: string;
+		/** The `<dialog>` itself. Bindable. */
+		element?: HTMLDialogElement;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		modal = true,
+		closable = true,
+		dismissible = true,
+		animated = true,
+		title,
+		actions,
+		onClose,
+		closeLabel = 'Close',
+		element = $bindable(),
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	const uid = $props.id();
+
+	/** The box is in the DOM. Lags `open` while the closing transition runs. */
+	let shown = $state(false);
+	/** The value the dialog will close with, once the box has gone. */
+	let pending = '';
+
+	const reduced = () =>
+		typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+	let duration = $derived(animated ? 150 : 0);
+
+	/* `open` drives the element. Opening is immediate; closing waits for the
+	   box's outro (outroend → finish), unless there is nothing to wait for. */
+	$effect(() => {
+		if (!element) return;
+		if (open && !element.open) {
+			if (modal) element.showModal();
+			else element.show();
+			shown = true;
+		} else if (!open && element.open && shown) {
+			if (!animated || reduced()) finish();
+			else shown = false;
+		}
+	});
+
+	/** Ask to close with a value; the transition runs, then the element closes. */
+	function request(value = '') {
+		pending = value;
+		open = false;
+	}
+
+	function finish() {
+		shown = false;
+		element?.close(pending);
+	}
+
+	/* The element closed — by us, or by the browser on its own. */
+	function closed() {
+		const value = element?.returnValue ?? pending;
+		pending = '';
+		shown = false;
+		open = false;
+		if (element) element.returnValue = '';
+		onClose?.(value);
+	}
+
+	/* Escape: the browser would close at once, skipping the transition. */
+	function cancel(e: Event) {
+		e.preventDefault();
+		if (dismissible) request();
+	}
+
+	/* A form with method="dialog" closes the element as it submits; the
+	   value is taken here and the closing goes through the transition. */
+	function submit(e: SubmitEvent) {
+		e.preventDefault();
+		const by = e.submitter as HTMLButtonElement | null;
+		request(by?.value ?? '');
+	}
+
+	/* A click outside the box lands on the <dialog> itself. Only one that
+	   also STARTED there counts: a text selection dragged out of the box
+	   must not close it. */
+	let downOnOverlay = false;
+	function pointerdown(e: PointerEvent) {
+		downOnOverlay = e.target === element;
+	}
+	function click(e: MouseEvent) {
+		if (dismissible && downOnOverlay && e.target === element) request();
+		downOnOverlay = false;
+	}
+</script>
+
+<dialog
+	{...applied.rest}
+	bind:this={element}
+	class={classes}
+	aria-labelledby={title ? `${uid}-title` : undefined}
+	oncancel={cancel}
+	onclose={closed}
+	onpointerdown={pointerdown}
+	onclick={click}
+>
+	{#if shown}
+		<div
+			class={`${PREFIX}-box`}
+			transition:scale={{ start: 0.95, duration: reduced() ? 0 : duration }}
+			onoutroend={finish}
+		>
+			{#if closable}
+				<form method="dialog" onsubmit={submit}>
+					<button type="submit" class={`${PREFIX}-close`} aria-label={closeLabel} value="">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+					</button>
+				</form>
+			{/if}
+			{#if title}
+				<h2 id={`${uid}-title`} class={`${PREFIX}-title`}>
+					{#if typeof title === 'function'}{@render title()}{:else}{title}{/if}
+				</h2>
+			{/if}
+			{#if children}
+				<div class={`${PREFIX}-body`}>{@render children()}</div>
+			{/if}
+			{#if actions}
+				<form method="dialog" class={`${PREFIX}-actions`} onsubmit={submit}>
+					{@render actions()}
+				</form>
+			{/if}
+		</div>
+	{/if}
+</dialog>

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

@@ -0,0 +1,51 @@
+/** What .dialog is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    The dialog draws its own box, title, body, actions and close button:
+    they are PARTS. */
+export declare const PREFIX = "dialog";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly placement: readonly ["top", "bottom"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["box", "title", "body", "actions", "close"];
+/**
+     * A box over the page, on the native <dialog>. Modal by default —
+     * `showModal()`: the page behind is inert, focus stays inside, Escape
+     * closes it — or not (`modal={false}`), and the page stays usable.
+     *
+     * The actions sit in a `<form method="dialog">`: a button closes the
+     * dialog and its `value` becomes the dialog's return value, handed to
+     * `onClose`. The opening and closing are animated here, not in the CSS.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLDialogAttributes, 'open' | 'title'> {
+    /** Whether it is shown. Bindable: closing from inside sets it back. */
+    open?: boolean;
+    /** Block the page behind it (`showModal`). Default true. */
+    modal?: boolean;
+    /** Draw a close button in the corner. Default true. */
+    closable?: boolean;
+    /** Close on Escape and on a click outside the box. Default true. */
+    dismissible?: boolean;
+    /** Animate opening and closing. Ignored when the visitor asks for reduced motion. */
+    animated?: boolean;
+    /** The heading, as text or as a snippet. */
+    title?: string | Snippet;
+    /** Buttons, inside the `<form method="dialog">`: each one closes with its `value`. */
+    actions?: Snippet;
+    /** After it closed, with the value of the button that closed it ('' otherwise). */
+    onClose?: (value: string) => void;
+    /** The accessible name of the close button. */
+    closeLabel?: string;
+    /** The `<dialog>` itself. Bindable. */
+    element?: HTMLDialogElement;
+    class?: string;
+    children?: Snippet;
+}
+declare const Dialog: import("svelte").Component<Props, {}, "element" | "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/Divider.svelte

@@ -0,0 +1,54 @@
+<script module lang="ts">
+	/** What .divider is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'divider';
+
+	export const AXES = {
+		direction: ['horizontal', 'vertical'],
+		/* Where the content sits along the line. */
+		align: ['start', 'center', 'end'],
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		/* The line's shape. Each family ships its own, or none. */
+		variant: ['dashed', 'dotted', 'thick', 'fade']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['content'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A rule between two things, optionally carrying a word or two.
+	 *
+	 * Without children it is an `<hr>`. With children it is a `separator` whose
+	 * content sits between two lines.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
+		class?: string;
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+	let vertical = $derived(classes.includes(`${PREFIX}-vertical`));
+</script>
+
+{#if children}
+	<div {...applied.rest} class={classes} role="separator" aria-orientation={vertical ? 'vertical' : 'horizontal'}>
+		<span class="divider-content">{@render children()}</span>
+	</div>
+{:else}
+	<hr {...applied.rest} class={classes} aria-orientation={vertical ? 'vertical' : undefined} />
+{/if}

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

@@ -0,0 +1,27 @@
+/** What .divider is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "divider";
+export declare const AXES: {
+    readonly direction: readonly ["horizontal", "vertical"];
+    readonly align: readonly ["start", "center", "end"];
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly variant: readonly ["dashed", "dotted", "thick", "fade"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["content"];
+/**
+     * A rule between two things, optionally carrying a word or two.
+     *
+     * Without children it is an `<hr>`. With children it is a `separator` whose
+     * content sits between two lines.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    class?: string;
+    children?: Snippet;
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/Dock.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+	/** What .dock is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'dock';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['active', 'label'] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLElement> {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<nav {...applied.rest} class={classes}>{@render children?.()}</nav>

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

@@ -0,0 +1,18 @@
+/** What .dock is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "dock";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["active", "label"];
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const Dock: import("svelte").Component<Props, {}, "">;
+type Dock = ReturnType<typeof Dock>;
+export default Dock;

package/dist/components/Drawer.svelte

@@ -0,0 +1,174 @@
+<script module lang="ts">
+	/** What .drawer is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'drawer';
+
+	export const AXES = {
+		/* The edge it slides from. Left when none is given. */
+		side: ['left', 'right', 'top', 'bottom']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['content', 'handle'] as const;
+
+	/** hidden: out of view · peek: its last --drawer-peek in view · open: all of it. */
+	export type DrawerState = 'hidden' | 'peek' | 'open';
+</script>
+
+<script lang="ts">
+	/**
+	 * A panel sliding in from any side, in three states: hidden, peek, open.
+	 *
+	 * `state` is where it starts, read once. From then on the drawer is driven
+	 * by its methods — `bind:this={d}`, then `d.open()`, `d.peek()`, `d.hide()`,
+	 * `d.toggle()` — and reports every change through `onState`. It moves by
+	 * itself only to fall back to its rest state (`peek` if it started peeking,
+	 * else `hidden`): on Escape, or a click on the backdrop. A click on a
+	 * peeking drawer opens it.
+	 *
+	 * `as` picks the element. `dialog` makes `open` modal (backdrop, focus kept
+	 * inside, page inert) while `peek` stays non-modal; `aside`, `nav` and the
+	 * default `div` never block the page — a collapsible menu is a `nav`.
+	 */
+	import { onMount, untrack, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLElement> {
+		/** The element. `dialog` makes the open state modal. */
+		as?: 'div' | 'aside' | 'nav' | 'dialog';
+		/** Where it starts. Read once: use the methods afterwards. */
+		state?: DrawerState;
+		/** Where Escape and the backdrop send it. Defaults to `peek` if it starts peeking, else `hidden`. */
+		rest?: 'hidden' | 'peek';
+		/** After every change of state. */
+		onState?: (state: DrawerState) => void;
+		/** Draw a grip on the inner edge that toggles open and the rest state. */
+		handle?: boolean;
+		handleLabel?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		as = 'div',
+		state: initial = 'hidden',
+		rest: restProp,
+		onState,
+		handle = false,
+		handleLabel = 'Toggle panel',
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	/* Where it starts, read once: afterwards the methods own it. */
+	let current: DrawerState = $state(untrack(() => initial));
+	let restState = $derived(restProp ?? (untrack(() => initial) === 'peek' ? 'peek' : 'hidden'));
+
+	let element: HTMLElement | undefined = $state();
+	const dialog = () => (as === 'dialog' ? (element as HTMLDialogElement | undefined) : undefined);
+
+	/** Puts a <dialog> in the mode the state needs. Hiding waits for the slide. */
+	function sync(next: DrawerState) {
+		const d = dialog();
+		if (!d) return;
+		if (next === 'open') {
+			if (d.open) d.close();
+			d.showModal();
+		} else if (next === 'peek') {
+			if (d.open) d.close();
+			d.show();
+		} else {
+			const done = () => {
+				if (current === 'hidden' && d.open) d.close();
+			};
+			d.addEventListener('transitionend', done, { once: true });
+			setTimeout(done, 500);
+		}
+	}
+
+	function go(next: DrawerState) {
+		if (next === current) return;
+		current = next;
+		sync(next);
+		onState?.(next);
+	}
+
+	export function open() {
+		go('open');
+	}
+	export function peek() {
+		go('peek');
+	}
+	export function hide() {
+		go('hidden');
+	}
+	/** Open, or back to the rest state when open. */
+	export function toggle() {
+		go(current === 'open' ? restState : 'open');
+	}
+	export function getState(): DrawerState {
+		return current;
+	}
+
+	onMount(() => {
+		if (current !== 'hidden') sync(current);
+	});
+
+	/* A dialog's Escape: the browser would close it outright. */
+	function cancel(e: Event) {
+		e.preventDefault();
+		go(restState);
+	}
+
+	function keydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && current === 'open' && as !== 'dialog') {
+			e.stopPropagation();
+			go(restState);
+		}
+	}
+
+	function click(e: MouseEvent) {
+		if (e.defaultPrevented || !element) return;
+		/* A modal dialog's backdrop: the click lands on the element, outside its box. */
+		if (as === 'dialog' && current === 'open' && e.target === element) {
+			const r = element.getBoundingClientRect();
+			const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+			if (!inside) return go(restState);
+		}
+		if (current === 'peek') go('open');
+	}
+</script>
+
+<svelte:element
+	this={as}
+	{...applied.rest}
+	bind:this={element}
+	class={classes}
+	data-state={current}
+	inert={current === 'hidden' && as !== 'dialog' ? true : undefined}
+	oncancel={as === 'dialog' ? cancel : undefined}
+	onkeydown={keydown}
+	onclick={click}
+	role={as === 'div' ? 'region' : undefined}
+>
+	<div class="drawer-content">{@render children?.()}</div>
+	{#if handle}
+		<button
+			type="button"
+			class="drawer-handle"
+			aria-label={handleLabel}
+			aria-expanded={current === 'open'}
+			onclick={(e) => {
+				e.preventDefault();
+				toggle();
+			}}
+		></button>
+	{/if}
+</svelte:element>

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

@@ -0,0 +1,51 @@
+/** What .drawer is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "drawer";
+export declare const AXES: {
+    readonly side: readonly ["left", "right", "top", "bottom"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["content", "handle"];
+/** hidden: out of view · peek: its last --drawer-peek in view · open: all of it. */
+export type DrawerState = 'hidden' | 'peek' | 'open';
+/**
+     * A panel sliding in from any side, in three states: hidden, peek, open.
+     *
+     * `state` is where it starts, read once. From then on the drawer is driven
+     * by its methods — `bind:this={d}`, then `d.open()`, `d.peek()`, `d.hide()`,
+     * `d.toggle()` — and reports every change through `onState`. It moves by
+     * itself only to fall back to its rest state (`peek` if it started peeking,
+     * else `hidden`): on Escape, or a click on the backdrop. A click on a
+     * peeking drawer opens it.
+     *
+     * `as` picks the element. `dialog` makes `open` modal (backdrop, focus kept
+     * inside, page inert) while `peek` stays non-modal; `aside`, `nav` and the
+     * default `div` never block the page — a collapsible menu is a `nav`.
+     */
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLElement> {
+    /** The element. `dialog` makes the open state modal. */
+    as?: 'div' | 'aside' | 'nav' | 'dialog';
+    /** Where it starts. Read once: use the methods afterwards. */
+    state?: DrawerState;
+    /** Where Escape and the backdrop send it. Defaults to `peek` if it starts peeking, else `hidden`. */
+    rest?: 'hidden' | 'peek';
+    /** After every change of state. */
+    onState?: (state: DrawerState) => void;
+    /** Draw a grip on the inner edge that toggles open and the rest state. */
+    handle?: boolean;
+    handleLabel?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {
+    open: () => void;
+    peek: () => void;
+    hide: () => void;
+    toggle: () => void;
+    getState: () => DrawerState;
+}, "">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;