@sepale/components 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,93 @@
+/** What .kanban is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "kanban";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly gap: readonly ["none", "tight", "loose"];
+};
+export declare const FLAGS: {
+    readonly loading: "Fade the columns while new items are on their way.";
+};
+export declare const PARTS: readonly ["column", "column-over", "column-head", "column-title", "column-count", "column-body", "column-foot", "column-empty", "item", "item-selected", "item-dirty", "item-dragged", "marker"];
+export type KanbanColumn = {
+    id: string;
+    /** Defaults to the id. */
+    title?: string;
+};
+export type KanbanMove<Item> = {
+    item: Item;
+    /** The column it leaves. */
+    from: string;
+    /** The column it lands in: `from` when it only changed places. */
+    to: string;
+    /** Its place in `to`, counted without the item itself. */
+    index: number;
+};
+/**
+     * Items in columns, one column per state they can be in. Like a table or a
+     * grid it knows nothing of where its items come from, and it moves nothing:
+     * dragging a card, or Shift + an arrow key on it, calls `onMove`, and the
+     * items only change when the caller changes them. Without `onMove` the board
+     * is read-only.
+     *
+     * The drag is the browser's own, which brings the drag image, Escape to
+     * cancel and the scrolling at the edges. An item naming a column that is not
+     * in `columns` is not drawn.
+     */
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<Item>(): {
+    props: {
+        readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        readonly gap?: "none" | "tight" | "loose" | undefined;
+    } & {
+        loading?: boolean | undefined;
+    } & {
+        background?: string;
+    } & HTMLAttributes<HTMLDivElement> & {
+        /** The items: your data, as is, each column keeping their order. */
+        items?: Item[];
+        /** The columns, in order. */
+        columns: KanbanColumn[];
+        /** The id of the column an item belongs to. */
+        columnOf: (item: Item) => string;
+        /** How one item is drawn, given its place in its column. */
+        item: Snippet<[Item, number]>;
+        /** An item's identity, for `selected`, `dirty` and keyed rendering. Defaults to its index. */
+        key?: (item: Item, index: number) => string;
+        /** Replaces a column's title and count. */
+        head?: Snippet<[KanbanColumn, Item[]]>;
+        /** Drawn under a column's items: an add button, usually. */
+        foot?: Snippet<[KanbanColumn]>;
+        /** Drawn in a column with no items. */
+        empty?: Snippet<[KanbanColumn]>;
+        /** Keys of the items to draw as selected. */
+        selected?: Iterable<string>;
+        /** Keys of the items to draw as changed and not yet saved. */
+        dirty?: Iterable<string>;
+        /** An item was dropped somewhere new. Given, it makes the items movable. */
+        onMove?: (move: KanbanMove<Item>) => void;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Kanban: $$IsomorphicComponent;
+type Kanban<Item> = InstanceType<typeof Kanban<Item>>;
+export default Kanban;

package/dist/components/Label.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+	/** What .label is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    Inline text, on its own or inside a field as a prefix/suffix
+	    (`.input > .label`). The label that floats over a field is
+	    FloatingLabel — a different component, not a setting of this one
+	    (ADR 0009). */
+	export const PREFIX = 'label';
+
+	export const AXES = {} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLLabelAttributes {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: klass = '', children, ...axes }: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+</script>
+
+<label {...applied.rest} class={cx(PREFIX, applied.classes, klass)}>{@render children?.()}</label>

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

@@ -0,0 +1,21 @@
+/** What .label is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    Inline text, on its own or inside a field as a prefix/suffix
+    (`.input > .label`). The label that floats over a field is
+    FloatingLabel — a different component, not a setting of this one
+    (ADR 0009). */
+export declare const PREFIX = "label";
+export declare const AXES: {};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLLabelAttributes {
+    class?: string;
+    children?: Snippet;
+}
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/LaptopFrame.svelte

@@ -0,0 +1,44 @@
+<script module lang="ts">
+	/** What .laptop-frame is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'laptop-frame';
+
+	export const AXES = {} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['lid', 'screen', 'base'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A laptop drawn around content: a lid holding a 16:10 screen that scrolls,
+	 * on a wider base. Its width is `--laptop-frame-width`.
+	 */
+	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<HTMLDivElement> {
+		class?: string;
+		/** What the screen shows. */
+		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));
+</script>
+
+<div {...applied.rest} class={classes}>
+	<div class="laptop-frame-lid">
+		<div class="laptop-frame-screen">{@render children?.()}</div>
+	</div>
+	<div class="laptop-frame-base" aria-hidden="true"></div>
+</div>

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

@@ -0,0 +1,21 @@
+/** What .laptop-frame is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "laptop-frame";
+export declare const AXES: {};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["lid", "screen", "base"];
+/**
+     * A laptop drawn around content: a lid holding a 16:10 screen that scrolls,
+     * on a wider base. Its width is `--laptop-frame-width`.
+     */
+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<HTMLDivElement> {
+    class?: string;
+    /** What the screen shows. */
+    children?: Snippet;
+}
+declare const LaptopFrame: import("svelte").Component<Props, {}, "">;
+type LaptopFrame = ReturnType<typeof LaptopFrame>;
+export default LaptopFrame;

package/dist/components/List.svelte

@@ -0,0 +1,95 @@
+<script module lang="ts">
+	/** What .list is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    The list draws its own rows: `.list-row` is a PART, not something a
+	    caller opts into. What goes INSIDE a row is the caller's, three ways —
+	    a string, a `row` snippet for every row at once, or a snippet in place
+	    of one entry. The wrapper and its class stay ours either way. */
+	export const PREFIX = 'list';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* A floating list of things to pick from, rather than a block of rows. */
+		variant: ['suggestions']
+	} as const;
+
+	export const FLAGS = {
+		loading: 'Fade the rows while new ones are on their way.'
+	} as const;
+	export const PARTS = ['row', 'row-selected', 'row-dirty', 'col-grow', 'col-wrap', 'empty'] as const;
+</script>
+
+<script lang="ts" generics="Row">
+	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<HTMLUListElement> {
+		/**
+		 * The rows. An entry is your data — rendered by `row`, or as text when
+		 * there is no `row` — or a snippet standing in for that one row.
+		 */
+		rows?: (Row | Snippet)[];
+		/**
+		 * How to draw every row that is data. Written once for the whole list;
+		 * an entry that is itself a snippet skips it.
+		 */
+		row?: Snippet<[Row]>;
+		/** A row's identity, for `selected`, `dirty` and keyed rendering. Defaults to its index. */
+		key?: (row: Row, index: number) => string;
+		/** Drawn in place of the rows when there are none. */
+		empty?: Snippet;
+		/** Keys of the rows to draw as selected. */
+		selected?: Iterable<string>;
+		/** Keys of the rows to draw as changed and not yet saved. */
+		dirty?: Iterable<string>;
+		class?: string;
+	}
+
+	let {
+		rows = [],
+		row,
+		key = (_row: Row, i: number) => String(i),
+		empty,
+		selected,
+		dirty,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let selectedSet = $derived(new Set(selected ?? []));
+	let dirtySet = $derived(new Set(dirty ?? []));
+
+	/* A snippet has no runtime marker — compiled, it is a plain function — so
+	   `typeof` is the only test. Fine as long as a row is never a function.
+	   A guard rather than an inline `typeof`, because `Row` is generic and
+	   TypeScript cannot rule out a callable `Row` on its own. */
+	const isSnippet = (entry: Row | Snippet): entry is Snippet => typeof entry === 'function';
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<ul {...applied.rest} class={classes}>
+	{#each rows as entry, i (isSnippet(entry) ? `snippet-${i}` : key(entry, i))}
+		{@const k = isSnippet(entry) ? String(i) : key(entry, i)}
+		<li
+			class={cx(
+				`${PREFIX}-row`,
+				selectedSet.has(k) && `${PREFIX}-row-selected`,
+				dirtySet.has(k) && `${PREFIX}-row-dirty`
+			)}
+		>
+			{#if isSnippet(entry)}
+				{@render entry()}
+			{:else if row}
+				{@render row(entry)}
+			{:else}
+				{entry}
+			{/if}
+		</li>
+	{:else}
+		{#if empty}<li class={`${PREFIX}-empty`}>{@render empty()}</li>{/if}
+	{/each}
+</ul>

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

@@ -0,0 +1,69 @@
+/** What .list is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    The list draws its own rows: `.list-row` is a PART, not something a
+    caller opts into. What goes INSIDE a row is the caller's, three ways —
+    a string, a `row` snippet for every row at once, or a snippet in place
+    of one entry. The wrapper and its class stay ours either way. */
+export declare const PREFIX = "list";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["suggestions"];
+};
+export declare const FLAGS: {
+    readonly loading: "Fade the rows while new ones are on their way.";
+};
+export declare const PARTS: readonly ["row", "row-selected", "row-dirty", "col-grow", "col-wrap", "empty"];
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<Row>(): {
+    props: {
+        readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        readonly variant?: "suggestions" | undefined;
+    } & {
+        loading?: boolean | undefined;
+    } & {
+        background?: string;
+    } & HTMLAttributes<HTMLUListElement> & {
+        /**
+         * The rows. An entry is your data — rendered by `row`, or as text when
+         * there is no `row` — or a snippet standing in for that one row.
+         */
+        rows?: (Row | Snippet)[];
+        /**
+         * How to draw every row that is data. Written once for the whole list;
+         * an entry that is itself a snippet skips it.
+         */
+        row?: Snippet<[Row]>;
+        /** A row's identity, for `selected`, `dirty` and keyed rendering. Defaults to its index. */
+        key?: (row: Row, index: number) => string;
+        /** Drawn in place of the rows when there are none. */
+        empty?: Snippet;
+        /** Keys of the rows to draw as selected. */
+        selected?: Iterable<string>;
+        /** Keys of the rows to draw as changed and not yet saved. */
+        dirty?: Iterable<string>;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const List: $$IsomorphicComponent;
+type List<Row> = InstanceType<typeof List<Row>>;
+export default List;

package/dist/components/Loading.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+	/** What .loading is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'loading';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* Which indicator is drawn. They share nothing but the name, so this is
+		   one exclusive axis with no better word than `variant`. */
+		variant: ['spinner', 'dots', 'ring', 'ball', 'bars', 'infinity']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] 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<HTMLSpanElement> {
+		class?: string;
+	}
+
+	// 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 = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<span {...applied.rest} class={classes}></span>

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

@@ -0,0 +1,17 @@
+/** What .loading is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "loading";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["spinner", "dots", "ring", "ball", "bars", "infinity"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLSpanElement> {
+    class?: string;
+}
+declare const Loading: import("svelte").Component<Props, {}, "">;
+type Loading = ReturnType<typeof Loading>;
+export default Loading;

package/dist/components/Menu.svelte

@@ -0,0 +1,144 @@
+<script module lang="ts">
+	/** What .menu is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    The menu draws its own rows, so every class below the root is a PART:
+	    nobody opts into `.menu-item` or `.menu-active`, they follow from the
+	    data. A divider is an item with `divider: true` — an empty <li>. */
+	export const PREFIX = 'menu';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* A menu runs down the page unless it is told to run across it. */
+		direction: ['horizontal']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['item', 'active', 'disabled', 'toggle', 'sub', 'sub-closed', 'title'] as const;
+
+	import type { Snippet } from 'svelte';
+
+	/** One row of a menu: a link, a section title, a divider, or a group. */
+	export interface MenuNode {
+		/** The row's text, or a snippet drawing whatever belongs in its place. */
+		label?: string | Snippet;
+		/** A section heading rather than a row — renders `.menu-title`. */
+		title?: string | Snippet;
+		/** A blank separator between two groups — an empty <li>. */
+		divider?: boolean;
+		/** Where the row goes. Without it the row is a <button>. */
+		href?: string;
+		/** Mark it as where the visitor currently is. */
+		active?: boolean;
+		/** Unreachable, and drawn as such. */
+		disabled?: boolean;
+		/** A nested group. Supplying it turns the row into its toggle. */
+		items?: MenuNode[];
+		/** Whether that group starts open. Open by default. */
+		open?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	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<HTMLUListElement> {
+		/**
+		 * The rows, nested as deep as needed. A node's `label` and `title` take
+		 * a snippet as readily as a string, for the one row that differs.
+		 */
+		items?: MenuNode[];
+		/**
+		 * How to draw the inside of every row. Written once for the whole menu;
+		 * a node whose own `label` is a snippet skips it.
+		 */
+		row?: Snippet<[MenuNode]>;
+		/** Called when a row without an href is chosen. */
+		onSelect?: (node: MenuNode) => void;
+		class?: string;
+	}
+
+	let { items = [], row, onSelect, class: klass = '', ...axes }: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	// Open/closed lives here, keyed by the row's path, so the caller can hand
+	// over plain data and still get a working disclosure. `node.open` is the
+	// starting point; once a row is clicked, this map wins.
+	const uid = $props.id();
+	let toggled = $state<Record<string, boolean>>({});
+	const isOpen = (key: string, node: MenuNode) => toggled[key] ?? node.open ?? true;
+
+	function rowClass(node: MenuNode, group: boolean) {
+		return cx(
+			`${PREFIX}-item`,
+			group && `${PREFIX}-toggle`,
+			node.active && `${PREFIX}-active`,
+			node.disabled && `${PREFIX}-disabled`
+		);
+	}
+</script>
+
+{#snippet text(value: string | Snippet | undefined)}
+	{#if typeof value === 'function'}{@render value()}{:else}{value}{/if}
+{/snippet}
+
+{#snippet inside(node: MenuNode)}
+	{#if typeof node.label === 'function'}{@render node.label()}
+	{:else if row}{@render row(node)}
+	{:else}{node.label}{/if}
+{/snippet}
+
+{#snippet rows(nodes: MenuNode[], path: string)}
+	{#each nodes as node, i (path + i)}
+		{@const key = path + i}
+		{#if node.divider}
+			<li></li>
+		{:else if node.title !== undefined}
+			<li class={`${PREFIX}-title`}>{@render text(node.title)}</li>
+		{:else if node.items?.length}
+			<li>
+				<button
+					type="button"
+					class={rowClass(node, true)}
+					disabled={node.disabled}
+					aria-expanded={isOpen(key, node)}
+					aria-controls="{uid}-{key}"
+					onclick={() => (toggled[key] = !isOpen(key, node))}
+				>{@render inside(node)}</button>
+				<!-- As in Collapse: a closed sub-menu is inert, so Tab skips its rows. -->
+				<ul
+					id="{uid}-{key}"
+					class={cx(`${PREFIX}-sub`, !isOpen(key, node) && `${PREFIX}-sub-closed`)}
+					inert={!isOpen(key, node)}
+				>
+					{@render rows(node.items, key + '.')}
+				</ul>
+			</li>
+		{:else if node.href}
+			<li>
+				<a
+					class={rowClass(node, false)}
+					href={node.disabled ? undefined : node.href}
+					aria-disabled={node.disabled ? 'true' : undefined}
+					aria-current={node.active ? 'page' : undefined}
+				>{@render inside(node)}</a>
+			</li>
+		{:else}
+			<li>
+				<button
+					type="button"
+					class={rowClass(node, false)}
+					disabled={node.disabled}
+					onclick={() => onSelect?.(node)}
+				>{@render inside(node)}</button>
+			</li>
+		{/if}
+	{/each}
+{/snippet}
+
+<ul {...applied.rest} class={classes}>{@render rows(items, '')}</ul>

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

@@ -0,0 +1,53 @@
+/** What .menu is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    The menu draws its own rows, so every class below the root is a PART:
+    nobody opts into `.menu-item` or `.menu-active`, they follow from the
+    data. A divider is an item with `divider: true` — an empty <li>. */
+export declare const PREFIX = "menu";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly direction: readonly ["horizontal"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["item", "active", "disabled", "toggle", "sub", "sub-closed", "title"];
+import type { Snippet } from 'svelte';
+/** One row of a menu: a link, a section title, a divider, or a group. */
+export interface MenuNode {
+    /** The row's text, or a snippet drawing whatever belongs in its place. */
+    label?: string | Snippet;
+    /** A section heading rather than a row — renders `.menu-title`. */
+    title?: string | Snippet;
+    /** A blank separator between two groups — an empty <li>. */
+    divider?: boolean;
+    /** Where the row goes. Without it the row is a <button>. */
+    href?: string;
+    /** Mark it as where the visitor currently is. */
+    active?: boolean;
+    /** Unreachable, and drawn as such. */
+    disabled?: boolean;
+    /** A nested group. Supplying it turns the row into its toggle. */
+    items?: MenuNode[];
+    /** Whether that group starts open. Open by default. */
+    open?: boolean;
+}
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLUListElement> {
+    /**
+     * The rows, nested as deep as needed. A node's `label` and `title` take
+     * a snippet as readily as a string, for the one row that differs.
+     */
+    items?: MenuNode[];
+    /**
+     * How to draw the inside of every row. Written once for the whole menu;
+     * a node whose own `label` is a snippet skips it.
+     */
+    row?: Snippet<[MenuNode]>;
+    /** Called when a row without an href is chosen. */
+    onSelect?: (node: MenuNode) => void;
+    class?: string;
+}
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/MobileFrame.svelte

@@ -0,0 +1,41 @@
+<script module lang="ts">
+	/** What .mobile-frame is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'mobile-frame';
+
+	export const AXES = {} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['screen'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A phone drawn around content — for showcases and screenshots, not an
+	 * emulator. Its width is `--mobile-frame-width`; the height follows.
+	 */
+	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<HTMLDivElement> {
+		class?: string;
+		/** What the screen shows. It scrolls. */
+		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));
+</script>
+
+<div {...applied.rest} class={classes}>
+	<div class="mobile-frame-screen">{@render children?.()}</div>
+</div>