@c9up/nebula 0.1.0

package/dist/molecules/Attachment.js

@@ -0,0 +1,103 @@
+/**
+ * Attachment — a file carried by a message.
+ *
+ * Two shapes from one component: an image renders as a thumbnail, anything
+ * else as a chip with a name and a size. Splitting them into two components
+ * would push the choice onto the caller, who usually has a MIME type and no
+ * opinion.
+ *
+ * The size is formatted in binary units because that is what a file manager
+ * shows for the same file — a "1.2 MB" here and a "1.1 MiB" there for one
+ * upload reads as a bug.
+ *
+ * A removable attachment is a `<button>` beside the link, never a click
+ * handler on the chip itself. Merging the two makes "open" and "delete" the
+ * same gesture, distinguished only by where you land.
+ */
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { XIcon } from "../lib/icons.js";
+import { read } from "../lib/props.js";
+/**
+ * Human-readable byte count, binary units.
+ *
+ * Deliberately not `Intl.NumberFormat`'s `unit: "byte"` style: it only speaks
+ * decimal units (kB, MB), which disagrees with every desktop file manager.
+ */
+export function formatBytes(bytes) {
+    if (!Number.isFinite(bytes) || bytes < 0)
+        return "";
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ["KB", "MB", "GB", "TB"];
+    let value = bytes / 1024;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit += 1;
+    }
+    // One decimal below 10, none above — "9.4 MB" is useful, "941.3 MB" is noise.
+    return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+export const Attachment = component((props) => {
+    const isImage = props.type?.startsWith("image/") === true;
+    const preview = props.previewSrc ?? props.href;
+    const removeButton = props.onRemove === undefined
+        ? null
+        : html `<button
+					type="button"
+					data-slot="attachment-remove"
+					aria-label="${`Remove ${props.name}`}"
+					class="text-muted-foreground hover:text-foreground absolute end-1 top-1 rounded-sm bg-background/80 p-0.5 transition-colors"
+					@click="${() => props.onRemove?.()}"
+				>${XIcon({ class: "size-3.5" })}</button>`;
+    if (isImage && preview !== undefined) {
+        return html `<div
+			data-slot="attachment"
+			data-kind="image"
+			class="${() => cn("relative w-fit overflow-hidden rounded-md border", read(props.class))}"
+		>
+			<a href="${props.href}" class="block">
+				<img
+					src="${preview}"
+					alt="${props.name}"
+					loading="lazy"
+					class="max-h-48 max-w-64 object-cover"
+				/>
+			</a>
+			${removeButton}
+		</div>`;
+    }
+    const body = html `<span
+			data-slot="attachment-icon"
+			aria-hidden="true"
+			class="bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded text-[0.625rem] font-medium uppercase"
+		>${extensionOf(props.name)}</span>
+		<span class="flex min-w-0 flex-col">
+			<span class="truncate text-sm font-medium">${props.name}</span>
+			${props.size === undefined
+        ? null
+        : html `<span class="text-muted-foreground text-xs tabular-nums"
+						>${formatBytes(props.size)}</span
+					>`}
+		</span>`;
+    return html `<div
+		data-slot="attachment"
+		data-kind="file"
+		class="${() => cn("bg-background relative flex w-fit max-w-64 items-center gap-2 rounded-md border p-2 pe-7", read(props.class))}"
+	>
+		${props.href === undefined
+        ? html `<span class="flex min-w-0 items-center gap-2">${body}</span>`
+        : html `<a href="${props.href}" class="flex min-w-0 items-center gap-2 hover:underline"
+					>${body}</a
+				>`}
+		${removeButton}
+	</div>`;
+});
+/** The extension, for the icon tile. `"report.final.pdf"` → `"pdf"`. */
+function extensionOf(name) {
+    const dot = name.lastIndexOf(".");
+    if (dot <= 0 || dot === name.length - 1)
+        return "?";
+    return name.slice(dot + 1).slice(0, 4);
+}

package/dist/molecules/Breadcrumb.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Breadcrumb — the trail back up the hierarchy.
+ *
+ * `aria-label="breadcrumb"` on the `<nav>` and `aria-current="page"` on the
+ * last entry. Both matter: the label is how a screen reader distinguishes this
+ * navigation from the other landmarks on the page, and `aria-current` is what
+ * tells the user which crumb is where they are — the visual weight change does
+ * not carry that.
+ *
+ * The separators are `aria-hidden` and marked `role="presentation"`. Read
+ * aloud, a chevron between every crumb is noise; the list structure already
+ * conveys the sequence.
+ */
+import type { Child } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export interface Crumb {
+    label: Child;
+    /** Absent on the current page, and on a collapsed ellipsis. */
+    href?: string;
+    /** Renders an ellipsis standing in for hidden ancestors. */
+    ellipsis?: boolean;
+}
+export interface BreadcrumbProps {
+    items: readonly Crumb[];
+    /** Replaces the chevron between entries. */
+    separator?: Child;
+    class?: Reactive<string>;
+}
+export declare const Breadcrumb: (props?: BreadcrumbProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Breadcrumb.js

@@ -0,0 +1,73 @@
+/**
+ * Breadcrumb — the trail back up the hierarchy.
+ *
+ * `aria-label="breadcrumb"` on the `<nav>` and `aria-current="page"` on the
+ * last entry. Both matter: the label is how a screen reader distinguishes this
+ * navigation from the other landmarks on the page, and `aria-current` is what
+ * tells the user which crumb is where they are — the visual weight change does
+ * not carry that.
+ *
+ * The separators are `aria-hidden` and marked `role="presentation"`. Read
+ * aloud, a chevron between every crumb is noise; the list structure already
+ * conveys the sequence.
+ */
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { ChevronRightIcon, MoreHorizontalIcon } from "../lib/icons.js";
+import { read } from "../lib/props.js";
+export const Breadcrumb = component((props) => {
+    return html `<nav
+		data-slot="breadcrumb"
+		aria-label="breadcrumb"
+		class="${() => cn(read(props.class))}"
+	>
+		<ol
+			data-slot="breadcrumb-list"
+			class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5"
+		>
+			${props.items.map((item, index) => renderCrumb(item, index === props.items.length - 1, index > 0, props.separator))}
+		</ol>
+	</nav>`;
+});
+function renderCrumb(item, isLast, needsSeparator, separator) {
+    return [
+        needsSeparator
+            ? html `<li
+					data-slot="breadcrumb-separator"
+					role="presentation"
+					aria-hidden="true"
+					class="[&>svg]:size-3.5"
+				>${separator ?? ChevronRightIcon()}</li>`
+            : null,
+        html `<li data-slot="breadcrumb-item" class="inline-flex items-center gap-1.5">
+			${renderCrumbBody(item, isLast)}
+		</li>`,
+    ];
+}
+function renderCrumbBody(item, isLast) {
+    if (item.ellipsis === true) {
+        return html `<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			class="flex size-9 items-center justify-center"
+		>
+			${MoreHorizontalIcon({ class: "size-4" })}
+			<span class="sr-only">More</span>
+		</span>`;
+    }
+    if (isLast || item.href === undefined) {
+        return html `<span
+			data-slot="breadcrumb-page"
+			role="link"
+			aria-disabled="true"
+			aria-current="page"
+			class="text-foreground font-normal"
+		>${item.label}</span>`;
+    }
+    return html `<a
+		data-slot="breadcrumb-link"
+		href="${item.href}"
+		class="hover:text-foreground transition-colors"
+	>${item.label}</a>`;
+}

package/dist/molecules/Bubble.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Bubble — conversational content in a speech bubble.
+ *
+ * Alignment is **logical**, not physical: `align: "end"` uses `ms-auto` and an
+ * inline-end tail, so the same message sits on the right in English and on the
+ * left in Arabic without the caller knowing which. Writing `ml-auto` here would
+ * have been shorter and would have put every outgoing message on the wrong side
+ * of an RTL conversation.
+ *
+ * The collapse is `line-clamp` plus a toggle rather than a max-height with
+ * overflow hidden. `line-clamp` cuts at a line boundary and adds the ellipsis
+ * itself; a height cut slices through the middle of a line of text, which is
+ * the tell of a hand-rolled version.
+ *
+ * Reactions are a `<ul>`, and each one is a toggle button with
+ * `aria-pressed` — not a decorative span. A reaction the user can add is a
+ * control, and a count nobody can operate belongs in the message text.
+ */
+import { type Slot } from "../lib/children.js";
+import { type VariantProps } from "../lib/cva.js";
+import { type Reactive } from "../lib/props.js";
+export declare const bubbleVariants: (props?: (import("../index.js").VariantSelection<{
+    variant: {
+        default: string;
+        accent: string;
+        outline: string;
+        ghost: string;
+    };
+    align: {
+        start: string;
+        end: string;
+    };
+}> & import("../index.js").ClassOverrides) | undefined) => string;
+export type BubbleVariants = VariantProps<typeof bubbleVariants>;
+export interface BubbleReaction {
+    emoji: string;
+    count?: number;
+    /** The current user has reacted with this one. */
+    active?: boolean;
+    onToggle?: () => void;
+}
+export interface BubbleProps {
+    children?: Slot;
+    variant?: Reactive<BubbleVariants["variant"]>;
+    align?: Reactive<BubbleVariants["align"]>;
+    reactions?: readonly BubbleReaction[];
+    /** Clamp long content behind a toggle. */
+    collapsible?: boolean;
+    /** Lines shown while collapsed. Default `6`. */
+    collapsedLines?: number;
+    /** Label for the expand toggle. Default `"Show more"`. */
+    expandLabel?: string;
+    collapseLabel?: string;
+    class?: Reactive<string>;
+}
+export declare const Bubble: (props?: BubbleProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Bubble.js

@@ -0,0 +1,92 @@
+/**
+ * Bubble — conversational content in a speech bubble.
+ *
+ * Alignment is **logical**, not physical: `align: "end"` uses `ms-auto` and an
+ * inline-end tail, so the same message sits on the right in English and on the
+ * left in Arabic without the caller knowing which. Writing `ml-auto` here would
+ * have been shorter and would have put every outgoing message on the wrong side
+ * of an RTL conversation.
+ *
+ * The collapse is `line-clamp` plus a toggle rather than a max-height with
+ * overflow hidden. `line-clamp` cuts at a line boundary and adds the ellipsis
+ * itself; a height cut slices through the middle of a line of text, which is
+ * the tell of a hand-rolled version.
+ *
+ * Reactions are a `<ul>`, and each one is a toggle button with
+ * `aria-pressed` — not a decorative span. A reaction the user can add is a
+ * control, and a count nobody can operate belongs in the message text.
+ */
+import { component, html, signal } from "@c9up/aurora";
+import { slot } from "../lib/children.js";
+import { cva } from "../lib/cva.js";
+import { read } from "../lib/props.js";
+export const bubbleVariants = cva("relative w-fit max-w-[min(36rem,80%)] rounded-lg px-3 py-2 text-sm break-words", {
+    variants: {
+        variant: {
+            default: "bg-muted text-foreground",
+            accent: "bg-primary text-primary-foreground",
+            outline: "border bg-background text-foreground",
+            ghost: "text-foreground px-0",
+        },
+        align: {
+            // Logical margins, so the side follows the writing direction.
+            start: "me-auto",
+            end: "ms-auto",
+        },
+    },
+    defaultVariants: { variant: "default", align: "start" },
+});
+export const Bubble = component((props) => {
+    const expanded = signal(false);
+    const lines = props.collapsedLines ?? 6;
+    const bodyClass = () => {
+        if (props.collapsible !== true || expanded())
+            return "";
+        // An arbitrary value, because line-clamp-N only exists for 1–6 and the
+        // caller can ask for any depth.
+        return `line-clamp-[${lines}]`;
+    };
+    return html `<div
+		data-slot="bubble"
+		class="${() => bubbleVariants({
+        variant: read(props.variant),
+        align: read(props.align),
+        class: read(props.class),
+    })}"
+	>
+		<div data-slot="bubble-content" class="${bodyClass}">${slot(props.children)}</div>
+		${props.collapsible !== true
+        ? null
+        : html `<button
+					type="button"
+					data-slot="bubble-toggle"
+					aria-expanded="${() => (expanded() ? "true" : "false")}"
+					class="mt-1 text-xs font-medium underline-offset-4 hover:underline"
+					@click="${() => expanded(!expanded())}"
+				>${() => expanded()
+            ? (props.collapseLabel ?? "Show less")
+            : (props.expandLabel ?? "Show more")}</button>`}
+		${props.reactions === undefined || props.reactions.length === 0
+        ? null
+        : html `<ul data-slot="bubble-reactions" class="mt-1.5 flex flex-wrap gap-1">
+					${props.reactions.map(renderReaction)}
+				</ul>`}
+	</div>`;
+});
+function renderReaction(reaction) {
+    return html `<li>
+		<button
+			type="button"
+			data-slot="bubble-reaction"
+			aria-pressed="${reaction.active === true ? "true" : "false"}"
+			aria-label="${`${reaction.emoji}${reaction.count === undefined ? "" : `, ${reaction.count}`}`}"
+			class="bg-background/60 hover:bg-background aria-pressed:border-primary aria-pressed:bg-primary/10 flex h-6 items-center gap-1 rounded-full border px-1.5 text-xs transition-colors"
+			@click="${() => reaction.onToggle?.()}"
+		>
+			<span aria-hidden="true">${reaction.emoji}</span>
+			${reaction.count === undefined
+        ? null
+        : html `<span class="tabular-nums">${reaction.count}</span>`}
+		</button>
+	</li>`;
+}

package/dist/molecules/ButtonGroup.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ButtonGroup — buttons welded into one control.
+ *
+ * `role="group"` with a label, so a screen reader announces the set before its
+ * members rather than three unrelated buttons in a row.
+ *
+ * The rounding and border collapsing are done with `:first-child` /
+ * `:last-child` selectors on the group rather than props on each button. That
+ * is what lets the members stay ordinary `Button` calls — adding one does not
+ * mean re-deciding which button is now on the end.
+ */
+import { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export interface ButtonGroupProps {
+    children?: Slot;
+    orientation?: "horizontal" | "vertical";
+    /** Announced before the group's contents. */
+    label?: string;
+    class?: Reactive<string>;
+}
+export declare const ButtonGroup: (props?: ButtonGroupProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const ButtonGroupSeparator: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const ButtonGroupText: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/ButtonGroup.js

@@ -0,0 +1,30 @@
+/**
+ * ButtonGroup — buttons welded into one control.
+ *
+ * `role="group"` with a label, so a screen reader announces the set before its
+ * members rather than three unrelated buttons in a row.
+ *
+ * The rounding and border collapsing are done with `:first-child` /
+ * `:last-child` selectors on the group rather than props on each button. That
+ * is what lets the members stay ordinary `Button` calls — adding one does not
+ * mean re-deciding which button is now on the end.
+ */
+import { component, html } from "@c9up/aurora";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { read } from "../lib/props.js";
+import { styledDiv } from "../lib/styled.js";
+export const ButtonGroup = component((props) => {
+    const vertical = props.orientation === "vertical";
+    return html `<div
+		data-slot="button-group"
+		role="group"
+		aria-label="${props.label}"
+		data-orientation="${vertical ? "vertical" : "horizontal"}"
+		class="${() => cn("flex w-fit items-stretch", vertical
+        ? "flex-col [&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px"
+        : "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px", "[&>*]:focus-visible:z-10 [&>*]:focus:z-10", read(props.class))}"
+	>${slot(props.children)}</div>`;
+});
+export const ButtonGroupSeparator = styledDiv("button-group-separator", "bg-input relative !m-0 self-stretch w-px");
+export const ButtonGroupText = styledDiv("button-group-text", "bg-muted text-muted-foreground flex items-center gap-2 border px-4 text-sm font-medium");

package/dist/molecules/Card.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Card — a bordered surface holding one unit of content.
+ *
+ * Seven parts, all presentational. The only one worth explaining is
+ * `CardAction`: it is grid-positioned into the header's second column so a
+ * button or menu trigger sits opposite the title without the header needing a
+ * flex wrapper and a spacer. The header switches to two columns only when an
+ * action is present, via `has-data-[slot=card-action]`.
+ */
+export type { StyledProps as CardProps } from "../lib/styled.js";
+export declare const Card: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const CardHeader: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const CardTitle: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const CardDescription: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const CardAction: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const CardContent: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const CardFooter: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Card.js

@@ -0,0 +1,17 @@
+/**
+ * Card — a bordered surface holding one unit of content.
+ *
+ * Seven parts, all presentational. The only one worth explaining is
+ * `CardAction`: it is grid-positioned into the header's second column so a
+ * button or menu trigger sits opposite the title without the header needing a
+ * flex wrapper and a spacer. The header switches to two columns only when an
+ * action is present, via `has-data-[slot=card-action]`.
+ */
+import { styledDiv } from "../lib/styled.js";
+export const Card = styledDiv("card", "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm");
+export const CardHeader = styledDiv("card-header", "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6");
+export const CardTitle = styledDiv("card-title", "leading-none font-semibold");
+export const CardDescription = styledDiv("card-description", "text-muted-foreground text-sm");
+export const CardAction = styledDiv("card-action", "col-start-2 row-span-2 row-start-1 self-start justify-self-end");
+export const CardContent = styledDiv("card-content", "px-6");
+export const CardFooter = styledDiv("card-footer", "flex items-center px-6 [.border-t]:pt-6");

package/dist/molecules/Collapsible.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Collapsible — a trigger that shows and hides a panel.
+ *
+ * Two things differ from Radix, both deliberate.
+ *
+ * **The API.** Radix composes through React context: `<Collapsible>` publishes
+ * state that `<CollapsibleTrigger>` and `<CollapsibleContent>` read from
+ * anywhere below it. Aurora has no context, and the usual workarounds — a
+ * factory returning bound parts, or threading a handle through props — trade a
+ * real problem for a clumsier one. So the parts are props: `trigger` and
+ * `children`. The rendered markup is identical to shadcn's; only the call
+ * shape changes.
+ *
+ * **The animation.** Radix measures the content and publishes its height as
+ * `--radix-collapsible-content-height` for the keyframes to interpolate,
+ * because `height: auto` is not animatable. A CSS grid whose single row goes
+ * from `0fr` to `1fr` animates the same transition with no measurement, no
+ * resize observer, and no stale height when the content changes while closed.
+ *
+ * The closed panel stays in the DOM — that is what makes the transition
+ * possible — so it is marked `inert`. Without it the panel keeps its tab stops
+ * and stays in the accessibility tree, and a keyboard user tabs into content
+ * that is not on screen.
+ */
+import { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export interface CollapsibleProps {
+    /** The clickable summary. Rendered inside a button. */
+    trigger?: Slot;
+    /** The panel revealed when open. */
+    children?: Slot;
+    open?: Reactive<boolean>;
+    defaultOpen?: boolean;
+    disabled?: Reactive<boolean>;
+    onOpenChange?: (open: boolean) => void;
+    class?: Reactive<string>;
+    triggerClass?: Reactive<string>;
+    contentClass?: Reactive<string>;
+}
+export declare const Collapsible: (props?: CollapsibleProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Collapsible.js

@@ -0,0 +1,71 @@
+/**
+ * Collapsible — a trigger that shows and hides a panel.
+ *
+ * Two things differ from Radix, both deliberate.
+ *
+ * **The API.** Radix composes through React context: `<Collapsible>` publishes
+ * state that `<CollapsibleTrigger>` and `<CollapsibleContent>` read from
+ * anywhere below it. Aurora has no context, and the usual workarounds — a
+ * factory returning bound parts, or threading a handle through props — trade a
+ * real problem for a clumsier one. So the parts are props: `trigger` and
+ * `children`. The rendered markup is identical to shadcn's; only the call
+ * shape changes.
+ *
+ * **The animation.** Radix measures the content and publishes its height as
+ * `--radix-collapsible-content-height` for the keyframes to interpolate,
+ * because `height: auto` is not animatable. A CSS grid whose single row goes
+ * from `0fr` to `1fr` animates the same transition with no measurement, no
+ * resize observer, and no stale height when the content changes while closed.
+ *
+ * The closed panel stays in the DOM — that is what makes the transition
+ * possible — so it is marked `inert`. Without it the panel keeps its tab stops
+ * and stays in the accessibility tree, and a keyboard user tabs into content
+ * that is not on screen.
+ */
+import { component, html } from "@c9up/aurora";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { uid } from "../lib/id.js";
+import { read, readOr } from "../lib/props.js";
+import { controllable } from "../primitives/controllable.js";
+export const Collapsible = component((props) => {
+    const state = controllable({
+        value: props.open,
+        initial: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    const contentId = uid("collapsible-content");
+    const triggerId = uid("collapsible-trigger");
+    const toggle = () => {
+        if (readOr(props.disabled, false))
+            return;
+        state.set(!state.current());
+    };
+    return html `<div
+		data-slot="collapsible"
+		data-state="${() => (state.current() ? "open" : "closed")}"
+		class="${() => cn("flex flex-col", read(props.class))}"
+	>
+		<button
+			type="button"
+			data-slot="collapsible-trigger"
+			id="${triggerId}"
+			aria-expanded="${() => (state.current() ? "true" : "false")}"
+			aria-controls="${contentId}"
+			?disabled="${() => readOr(props.disabled, false)}"
+			class="${() => cn("flex items-center justify-between gap-2 outline-none disabled:opacity-50", read(props.triggerClass))}"
+			@click="${toggle}"
+		>${slot(props.trigger)}</button>
+		<div
+			data-slot="collapsible-content"
+			id="${contentId}"
+			role="region"
+			aria-labelledby="${triggerId}"
+			?inert="${() => !state.current()}"
+			class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+			style="${() => `grid-template-rows: ${state.current() ? "1fr" : "0fr"}`}"
+		>
+			<div class="${() => cn("overflow-hidden", read(props.contentClass))}">${slot(props.children)}</div>
+		</div>
+	</div>`;
+});

package/dist/molecules/Empty.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Empty — the placeholder for a list, table or panel with nothing in it.
+ *
+ * Worth having as a component rather than ad-hoc markup, because an empty
+ * state is where an app most often falls back to a bare "No results" and
+ * leaves the user without a next step. The parts push towards the useful
+ * shape: an icon, a title, a sentence of explanation, and something to do
+ * about it.
+ */
+export type { StyledProps as EmptyProps } from "../lib/styled.js";
+export declare const Empty: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const EmptyHeader: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const EmptyMedia: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const EmptyTitle: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const EmptyDescription: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const EmptyContent: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Empty.js

@@ -0,0 +1,16 @@
+/**
+ * Empty — the placeholder for a list, table or panel with nothing in it.
+ *
+ * Worth having as a component rather than ad-hoc markup, because an empty
+ * state is where an app most often falls back to a bare "No results" and
+ * leaves the user without a next step. The parts push towards the useful
+ * shape: an icon, a title, a sentence of explanation, and something to do
+ * about it.
+ */
+import { styledDiv } from "../lib/styled.js";
+export const Empty = styledDiv("empty", "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12");
+export const EmptyHeader = styledDiv("empty-header", "flex max-w-sm flex-col items-center gap-2 text-center");
+export const EmptyMedia = styledDiv("empty-media", "bg-muted text-muted-foreground mb-2 flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-5");
+export const EmptyTitle = styledDiv("empty-title", "text-lg font-medium tracking-tight");
+export const EmptyDescription = styledDiv("empty-description", "text-muted-foreground text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4");
+export const EmptyContent = styledDiv("empty-content", "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance");

package/dist/molecules/Field.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Field — a form control with its label, hint and error.
+ *
+ * The reason this exists rather than each form writing the four elements by
+ * hand is the wiring. A control must point at its description and its error
+ * with `aria-describedby`, and at its own label with `for`/`id`. Done by hand
+ * that is three ids to invent and keep in step per field, and the failure is
+ * silent — a sighted user sees the error, a screen-reader user does not.
+ *
+ * `Field` mints the ids and returns them, so the control gets them by
+ * destructuring rather than by convention:
+ *
+ *   const email = fieldIds()
+ *   Field({
+ *     ids: email,
+ *     label: "Email",
+ *     error: () => errors.email,
+ *     children: Input({ id: email.control, describedBy: email.describedBy, invalid: … }),
+ *   })
+ *
+ * The error slot is reactive and empty-tolerant: passing `() => errors.email`
+ * renders nothing until there is something to render, so a field does not
+ * reserve a blank line for an error that has not happened.
+ */
+import type { Child, Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export interface FieldIds {
+    /** Put on the control. The label's `for` points here. */
+    readonly control: string;
+    readonly label: string;
+    readonly description: string;
+    readonly error: string;
+    /** Ready-made `aria-describedby` naming both the description and the error. */
+    readonly describedBy: string;
+}
+/** Mint the id set for one field. Call once, in the component that owns it. */
+export declare function fieldIds(): FieldIds;
+export interface FieldProps {
+    ids: FieldIds;
+    label?: Child;
+    /** The control itself. */
+    children?: Slot;
+    /** Static help text under the control. */
+    description?: Child;
+    /** Validation message. Reactive — renders nothing while absent. */
+    error?: Reactive<string | undefined>;
+    required?: boolean;
+    disabled?: Reactive<boolean>;
+    orientation?: "vertical" | "horizontal";
+    class?: Reactive<string>;
+}
+export declare const Field: (props?: FieldProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const FieldGroup: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const FieldSeparator: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;