@c9up/nebula 0.1.0

package/dist/lib/id.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Stable element ids.
+ *
+ * Radix leans on React's `useId` to wire ARIA relationships — a trigger's
+ * `aria-controls` has to name the id its content actually carries. Aurora has
+ * no equivalent, and nebula needs one for two reasons: the ARIA wiring above,
+ * and element lookup. Aurora templates have no `ref` directive, so a component
+ * that must measure or focus a node finds it by id inside `onMount()`.
+ *
+ * The counter is monotonic per module instance, so the sequence depends only
+ * on the order components are constructed in. That order is identical on the
+ * server and in the browser for the same tree, which is what makes the ids
+ * survive hydration — the same property React's `useId` relies on.
+ *
+ * `resetIds()` exists for the server: a long-lived process renders many
+ * requests, and without a reset the counter climbs forever and every response
+ * ships different markup, defeating any HTML cache. Call it once per render
+ * pass, before the tree is built.
+ */
+/** Mint an id unique within this render pass. */
+export declare function uid(prefix?: string): string;
+/** Restart the sequence. Call once per SSR render, before building the tree. */
+export declare function resetIds(): void;
+/**
+ * Look an element up by the id a component minted for it.
+ *
+ * Returns `null` off the DOM (SSR) or before mount rather than throwing, so
+ * callers can run the same code in both environments. Every consumer inside
+ * nebula is in `onMount`, where the node is live.
+ */
+export declare function byId(id: string): HTMLElement | null;

package/dist/lib/id.js

@@ -0,0 +1,41 @@
+/**
+ * Stable element ids.
+ *
+ * Radix leans on React's `useId` to wire ARIA relationships — a trigger's
+ * `aria-controls` has to name the id its content actually carries. Aurora has
+ * no equivalent, and nebula needs one for two reasons: the ARIA wiring above,
+ * and element lookup. Aurora templates have no `ref` directive, so a component
+ * that must measure or focus a node finds it by id inside `onMount()`.
+ *
+ * The counter is monotonic per module instance, so the sequence depends only
+ * on the order components are constructed in. That order is identical on the
+ * server and in the browser for the same tree, which is what makes the ids
+ * survive hydration — the same property React's `useId` relies on.
+ *
+ * `resetIds()` exists for the server: a long-lived process renders many
+ * requests, and without a reset the counter climbs forever and every response
+ * ships different markup, defeating any HTML cache. Call it once per render
+ * pass, before the tree is built.
+ */
+let counter = 0;
+/** Mint an id unique within this render pass. */
+export function uid(prefix = "nebula") {
+    counter += 1;
+    return `${prefix}-${counter}`;
+}
+/** Restart the sequence. Call once per SSR render, before building the tree. */
+export function resetIds() {
+    counter = 0;
+}
+/**
+ * Look an element up by the id a component minted for it.
+ *
+ * Returns `null` off the DOM (SSR) or before mount rather than throwing, so
+ * callers can run the same code in both environments. Every consumer inside
+ * nebula is in `onMount`, where the node is live.
+ */
+export function byId(id) {
+    if (typeof document === "undefined")
+        return null;
+    return document.getElementById(id);
+}

package/dist/lib/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The two class helpers shadcn is built on, plus the prop plumbing Aurora
+ * needs in their place.
+ *
+ * `cn` comes from aurora (clsx + tailwind-merge, already written from scratch
+ * there); `cva` is reimplemented here. Between them nebula adds no runtime
+ * dependency at all — the same call the workspace made for `cn` itself.
+ */
+export { type ClassValue, clsx, cn, twMerge } from "./cn.js";
+export { type ClassOverrides, type CompoundVariant, cva, type VariantConfig, type VariantProps, type VariantSelection, type VariantShape, } from "./cva.js";
+export { byId, resetIds, uid } from "./id.js";
+export { accessor, callHandler, type Reactive, read, readOr } from "./props.js";

package/dist/lib/index.js

@@ -0,0 +1,12 @@
+/**
+ * The two class helpers shadcn is built on, plus the prop plumbing Aurora
+ * needs in their place.
+ *
+ * `cn` comes from aurora (clsx + tailwind-merge, already written from scratch
+ * there); `cva` is reimplemented here. Between them nebula adds no runtime
+ * dependency at all — the same call the workspace made for `cn` itself.
+ */
+export { clsx, cn, twMerge } from "./cn.js";
+export { cva, } from "./cva.js";
+export { byId, resetIds, uid } from "./id.js";
+export { accessor, callHandler, read, readOr } from "./props.js";

package/dist/lib/motion.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Enter and exit animations for overlays.
+ *
+ * shadcn drives these with `animate-in` / `animate-out` from `tw-animate-css`
+ * — a Tailwind plugin, and a dependency. nebula declares the four keyframes it
+ * needs in `theme.css` and references them through arbitrary animation values,
+ * which every one of the three adapters supports and none of them needs a
+ * plugin for.
+ *
+ * The durations are asymmetric on purpose: entering is slower than leaving.
+ * A surface appearing wants to be noticed, a surface dismissed wants to be out
+ * of the way — matching them makes closing feel sluggish.
+ *
+ * Every string ends in `motion-reduce:animate-none`. That is not only a
+ * courtesy: `onExitFinished` reads the computed style to decide whether to
+ * wait, sees no animation, and removes the node immediately. Reduced motion
+ * therefore gets an instant close rather than a delayed one, with no branch in
+ * the component.
+ */
+import type { Side } from "../primitives/floating.js";
+/** Popovers, menus, selects — scale up from the anchor. */
+export declare const zoomInOut = "data-[state=open]:animate-[nebula-zoom-in_150ms_ease-out] data-[state=closed]:animate-[nebula-zoom-out_120ms_ease-in] motion-reduce:animate-none";
+/** Backdrops and tooltips — no movement, just opacity. */
+export declare const fadeInOut = "data-[state=open]:animate-[nebula-fade-in_150ms_ease-out] data-[state=closed]:animate-[nebula-fade-out_120ms_ease-in] motion-reduce:animate-none";
+/**
+ * Panels that slide in from an edge — Sheet, Drawer.
+ *
+ * The transform is a utility pair rather than a keyframe, because the distance
+ * depends on the panel's own size and only `translate-x-full` knows that.
+ */
+export declare function slideFrom(side: Side): string;

package/dist/lib/motion.js

@@ -0,0 +1,39 @@
+/**
+ * Enter and exit animations for overlays.
+ *
+ * shadcn drives these with `animate-in` / `animate-out` from `tw-animate-css`
+ * — a Tailwind plugin, and a dependency. nebula declares the four keyframes it
+ * needs in `theme.css` and references them through arbitrary animation values,
+ * which every one of the three adapters supports and none of them needs a
+ * plugin for.
+ *
+ * The durations are asymmetric on purpose: entering is slower than leaving.
+ * A surface appearing wants to be noticed, a surface dismissed wants to be out
+ * of the way — matching them makes closing feel sluggish.
+ *
+ * Every string ends in `motion-reduce:animate-none`. That is not only a
+ * courtesy: `onExitFinished` reads the computed style to decide whether to
+ * wait, sees no animation, and removes the node immediately. Reduced motion
+ * therefore gets an instant close rather than a delayed one, with no branch in
+ * the component.
+ */
+/** Popovers, menus, selects — scale up from the anchor. */
+export const zoomInOut = "data-[state=open]:animate-[nebula-zoom-in_150ms_ease-out] data-[state=closed]:animate-[nebula-zoom-out_120ms_ease-in] motion-reduce:animate-none";
+/** Backdrops and tooltips — no movement, just opacity. */
+export const fadeInOut = "data-[state=open]:animate-[nebula-fade-in_150ms_ease-out] data-[state=closed]:animate-[nebula-fade-out_120ms_ease-in] motion-reduce:animate-none";
+/**
+ * Panels that slide in from an edge — Sheet, Drawer.
+ *
+ * The transform is a utility pair rather than a keyframe, because the distance
+ * depends on the panel's own size and only `translate-x-full` knows that.
+ */
+export function slideFrom(side) {
+    const axis = side === "left"
+        ? "data-[state=closed]:-translate-x-full"
+        : side === "right"
+            ? "data-[state=closed]:translate-x-full"
+            : side === "top"
+                ? "data-[state=closed]:-translate-y-full"
+                : "data-[state=closed]:translate-y-full";
+    return `transition-transform duration-300 ease-in-out data-[state=open]:translate-x-0 data-[state=open]:translate-y-0 ${axis} motion-reduce:transition-none`;
+}

package/dist/lib/props.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Reactive prop plumbing.
+ *
+ * React components take plain values and re-render. Aurora never re-renders —
+ * a binding stays live because the value handed to it is a signal or a plain
+ * accessor function, which the renderer wraps in an `effect()`. So every
+ * nebula prop that can change over time is typed `Reactive<T>`: pass a
+ * constant when it never moves, pass `() => count() > 3` when it does.
+ *
+ *   Button({ disabled: true })              // static
+ *   Button({ disabled: () => !form.valid })  // live
+ *
+ * `read()` collapses either form to a value. `accessor()` does the opposite —
+ * it hands the renderer something it can always subscribe to, which is what
+ * you want inside a template so the static case does not silently freeze a
+ * binding that a sibling prop makes dynamic.
+ */
+/** A prop value that may be constant or recomputed on demand. */
+export type Reactive<T> = T | (() => T);
+/**
+ * Collapse a reactive prop to its current value.
+ *
+ * An absent prop stays `undefined` rather than throwing, because that is
+ * exactly what `cva` wants: an axis left `undefined` falls back to its default
+ * variant. It lets a component forward props straight through —
+ * `buttonVariants({ variant: read(props.variant) })` — with no per-prop
+ * presence check, which is the difference between two lines and ten in every
+ * component in the library.
+ */
+export declare function read<T>(value: Reactive<T>): T;
+export declare function read<T>(value: Reactive<T> | undefined): T | undefined;
+/** Collapse an optional reactive prop, falling back when it is absent. */
+export declare function readOr<T>(value: Reactive<T> | undefined, fallback: T): T;
+/**
+ * Turn any prop into an accessor the renderer can subscribe to.
+ *
+ * Templates should bind `${accessor(props.disabled, false)}` rather than
+ * `${readOr(props.disabled, false)}`: the second reads once at construction
+ * and the attribute never updates again.
+ */
+export declare function accessor<T>(value: Reactive<T> | undefined, fallback: T): () => T;
+/**
+ * Call a handler if one was supplied.
+ *
+ * Saves every component the `props.onClick?.(event)` dance and keeps the
+ * optional-callback shape identical across the library.
+ */
+export declare function callHandler<A extends readonly unknown[]>(handler: ((...args: A) => void) | undefined, ...args: A): void;

package/dist/lib/props.js

@@ -0,0 +1,59 @@
+/**
+ * Reactive prop plumbing.
+ *
+ * React components take plain values and re-render. Aurora never re-renders —
+ * a binding stays live because the value handed to it is a signal or a plain
+ * accessor function, which the renderer wraps in an `effect()`. So every
+ * nebula prop that can change over time is typed `Reactive<T>`: pass a
+ * constant when it never moves, pass `() => count() > 3` when it does.
+ *
+ *   Button({ disabled: true })              // static
+ *   Button({ disabled: () => !form.valid })  // live
+ *
+ * `read()` collapses either form to a value. `accessor()` does the opposite —
+ * it hands the renderer something it can always subscribe to, which is what
+ * you want inside a template so the static case does not silently freeze a
+ * binding that a sibling prop makes dynamic.
+ */
+/**
+ * Is this prop the accessor form?
+ *
+ * A type predicate rather than a cast: `Reactive<T>` where `T` is itself a
+ * function type is genuinely ambiguous, and nebula resolves it one way on
+ * purpose — a function always means "call me". No nebula prop is typed to
+ * receive a function as its *value*; callbacks (`onClick`, `onValueChange`)
+ * have their own prop types and never pass through here.
+ */
+function isAccessor(value) {
+    return typeof value === "function";
+}
+export function read(value) {
+    if (value === undefined)
+        return undefined;
+    return isAccessor(value) ? value() : value;
+}
+/** Collapse an optional reactive prop, falling back when it is absent. */
+export function readOr(value, fallback) {
+    if (value === undefined)
+        return fallback;
+    return isAccessor(value) ? value() : value;
+}
+/**
+ * Turn any prop into an accessor the renderer can subscribe to.
+ *
+ * Templates should bind `${accessor(props.disabled, false)}` rather than
+ * `${readOr(props.disabled, false)}`: the second reads once at construction
+ * and the attribute never updates again.
+ */
+export function accessor(value, fallback) {
+    return () => readOr(value, fallback);
+}
+/**
+ * Call a handler if one was supplied.
+ *
+ * Saves every component the `props.onClick?.(event)` dance and keeps the
+ * optional-callback shape identical across the library.
+ */
+export function callHandler(handler, ...args) {
+    handler?.(...args);
+}

package/dist/lib/styled.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Purely presentational parts.
+ *
+ * A compound component like Card is one interesting element and half a dozen
+ * styled boxes — `CardHeader`, `CardContent`, `CardFooter` and friends carry a
+ * class string, a `data-slot`, and nothing else. Written out longhand that is
+ * eight near-identical lines each, thirty times over, and the differences that
+ * matter get lost in the repetition.
+ *
+ * So the boxes are declared, not written:
+ *
+ *   export const CardHeader = styledDiv("card-header", "flex flex-col gap-1.5 px-6")
+ *
+ * Only for parts with no behaviour. The moment one needs an event, a piece of
+ * state or an ARIA relationship it gets written out in full — hiding those
+ * behind a factory is how a component becomes hard to read, which matters
+ * doubly here because the registry copies this source into user projects for
+ * them to edit.
+ */
+import { type TemplateResult } from "@c9up/aurora";
+import { type Slot } from "./children.js";
+import { type Reactive } from "./props.js";
+export interface StyledProps {
+    children?: Slot;
+    class?: Reactive<string>;
+    id?: string;
+}
+/** A `<div>` carrying a `data-slot` and a base class list. */
+export declare function styledDiv(name: string, base: string): (props?: StyledProps) => TemplateResult;
+/** The same, as an inline `<span>`. */
+export declare function styledSpan(name: string, base: string): (props?: StyledProps) => TemplateResult;

package/dist/lib/styled.js

@@ -0,0 +1,39 @@
+/**
+ * Purely presentational parts.
+ *
+ * A compound component like Card is one interesting element and half a dozen
+ * styled boxes — `CardHeader`, `CardContent`, `CardFooter` and friends carry a
+ * class string, a `data-slot`, and nothing else. Written out longhand that is
+ * eight near-identical lines each, thirty times over, and the differences that
+ * matter get lost in the repetition.
+ *
+ * So the boxes are declared, not written:
+ *
+ *   export const CardHeader = styledDiv("card-header", "flex flex-col gap-1.5 px-6")
+ *
+ * Only for parts with no behaviour. The moment one needs an event, a piece of
+ * state or an ARIA relationship it gets written out in full — hiding those
+ * behind a factory is how a component becomes hard to read, which matters
+ * doubly here because the registry copies this source into user projects for
+ * them to edit.
+ */
+import { component, html } from "@c9up/aurora";
+import { slot } from "./children.js";
+import { cn } from "./cn.js";
+import { read } from "./props.js";
+/** A `<div>` carrying a `data-slot` and a base class list. */
+export function styledDiv(name, base) {
+    return component((props) => html `<div
+				data-slot="${name}"
+				id="${props.id}"
+				class="${() => cn(base, read(props.class))}"
+			>${slot(props.children)}</div>`);
+}
+/** The same, as an inline `<span>`. */
+export function styledSpan(name, base) {
+    return component((props) => html `<span
+				data-slot="${name}"
+				id="${props.id}"
+				class="${() => cn(base, read(props.class))}"
+			>${slot(props.children)}</span>`);
+}

package/dist/molecules/Accordion.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Accordion — a stack of collapsible sections.
+ *
+ * Data-driven rather than composed: an accordion is a list, and describing it
+ * as one is both shorter to write and the only shape that lets the group
+ * enforce `type: "single"` — which needs to know about every section at once,
+ * something Radix can only do through context.
+ *
+ * The keyboard behaviour is the WAI-ARIA accordion pattern, delegated to
+ * `rovingFocus` over the headers: arrows move between sections, Home and End
+ * jump to the ends, and the headers are one tab stop rather than one each.
+ */
+import type { Child, Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export interface AccordionItem {
+    /** Stable key. Used for the open-state set and for the ARIA ids. */
+    value: string;
+    /** The header content. */
+    trigger: Child;
+    /** The panel content. */
+    content: Slot;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: readonly AccordionItem[];
+    /** `"single"` closes the open section when another opens. Default `"single"`. */
+    type?: "single" | "multiple";
+    /** Open at first render. A string, or several for `type: "multiple"`. */
+    defaultValue?: string | readonly string[];
+    /** `"single"` accordions can normally be closed entirely. */
+    collapsible?: boolean;
+    onValueChange?: (open: readonly string[]) => void;
+    class?: Reactive<string>;
+}
+export declare const Accordion: (props?: AccordionProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Accordion.js

@@ -0,0 +1,117 @@
+/**
+ * Accordion — a stack of collapsible sections.
+ *
+ * Data-driven rather than composed: an accordion is a list, and describing it
+ * as one is both shorter to write and the only shape that lets the group
+ * enforce `type: "single"` — which needs to know about every section at once,
+ * something Radix can only do through context.
+ *
+ * The keyboard behaviour is the WAI-ARIA accordion pattern, delegated to
+ * `rovingFocus` over the headers: arrows move between sections, Home and End
+ * jump to the ends, and the headers are one tab stop rather than one each.
+ */
+import { component, html, onMount, onUnmount, signal } from "@c9up/aurora";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { ChevronDownIcon } from "../lib/icons.js";
+import { uid } from "../lib/id.js";
+import { read } from "../lib/props.js";
+import { rovingFocus } from "../primitives/rovingFocus.js";
+export const Accordion = component((props) => {
+    const type = props.type ?? "single";
+    const open = signal(normaliseInitial(props.defaultValue));
+    const rootId = uid("accordion");
+    function isOpen(value) {
+        return open().includes(value);
+    }
+    function toggle(value) {
+        const current = open();
+        const next = nextOpenSet(current, value, type, props.collapsible !== false);
+        open(next);
+        props.onValueChange?.(next);
+    }
+    // Roving focus is attached after mount because it queries the container for
+    // its items, and the container does not exist until then.
+    let group;
+    onMount(() => {
+        group = rovingFocus({
+            container: () => document.getElementById(rootId),
+            itemSelector: "[data-slot='accordion-trigger']",
+            orientation: "vertical",
+        });
+        group.sync();
+    });
+    onUnmount(() => group?.destroy());
+    return html `<div
+		data-slot="accordion"
+		id="${rootId}"
+		class="${() => cn("flex w-full flex-col", read(props.class))}"
+	>
+		${props.items.map((item) => renderItem(item, isOpen, toggle))}
+	</div>`;
+});
+function renderItem(item, isOpen, toggle) {
+    const triggerId = uid("accordion-trigger");
+    const panelId = uid("accordion-panel");
+    const state = () => (isOpen(item.value) ? "open" : "closed");
+    return html `<div
+		data-slot="accordion-item"
+		data-state="${state}"
+		class="border-b last:border-b-0"
+	>
+		<h3 class="flex">
+			<button
+				type="button"
+				data-slot="accordion-trigger"
+				data-nebula-item
+				data-state="${state}"
+				data-disabled="${item.disabled === true ? "" : undefined}"
+				id="${triggerId}"
+				aria-expanded="${() => (isOpen(item.value) ? "true" : "false")}"
+				aria-controls="${panelId}"
+				?disabled="${item.disabled === true}"
+				class="focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
+				@click="${() => toggle(item.value)}"
+			>
+				${item.trigger}
+				${ChevronDownIcon({
+        class: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200",
+    })}
+			</button>
+		</h3>
+		<div
+			data-slot="accordion-content"
+			id="${panelId}"
+			role="region"
+			aria-labelledby="${triggerId}"
+			?inert="${() => !isOpen(item.value)}"
+			class="grid text-sm transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+			style="${() => `grid-template-rows: ${isOpen(item.value) ? "1fr" : "0fr"}`}"
+		>
+			<div class="overflow-hidden"><div class="pt-0 pb-4">${slot(item.content)}</div></div>
+		</div>
+	</div>`;
+}
+function normaliseInitial(value) {
+    if (value === undefined)
+        return [];
+    return typeof value === "string" ? [value] : value;
+}
+/**
+ * The open set after activating `value`.
+ *
+ * `collapsible: false` on a single accordion is what stops the last open
+ * section from closing — the pattern used when one section must always be
+ * showing, and the reason this is not simply a toggle.
+ */
+function nextOpenSet(current, value, type, collapsible) {
+    const isOpen = current.includes(value);
+    if (type === "multiple") {
+        return isOpen
+            ? current.filter((entry) => entry !== value)
+            : [...current, value];
+    }
+    if (isOpen)
+        return collapsible ? [] : current;
+    return [value];
+}

package/dist/molecules/Alert.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Alert — an inline message about the surrounding content.
+ *
+ * `role="alert"` only for the destructive variant. The role is a live region:
+ * it interrupts a screen reader the moment the element appears. That is right
+ * for an error and wrong for the informational variant, which would talk over
+ * whatever the user was reading to announce something they did not ask about.
+ *
+ * The grid layout is what lets an optional leading icon align with the title
+ * while the description wraps under both, without either part knowing whether
+ * the other is present.
+ */
+import { type Slot } from "../lib/children.js";
+import { type VariantProps } from "../lib/cva.js";
+import { type Reactive } from "../lib/props.js";
+export declare const alertVariants: (props?: (import("../index.js").VariantSelection<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}> & import("../index.js").ClassOverrides) | undefined) => string;
+export type AlertVariants = VariantProps<typeof alertVariants>;
+export interface AlertProps {
+    children?: Slot;
+    variant?: Reactive<AlertVariants["variant"]>;
+    class?: Reactive<string>;
+}
+export declare const Alert: (props?: AlertProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const AlertTitle: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const AlertDescription: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Alert.js

@@ -0,0 +1,35 @@
+/**
+ * Alert — an inline message about the surrounding content.
+ *
+ * `role="alert"` only for the destructive variant. The role is a live region:
+ * it interrupts a screen reader the moment the element appears. That is right
+ * for an error and wrong for the informational variant, which would talk over
+ * whatever the user was reading to announce something they did not ask about.
+ *
+ * The grid layout is what lets an optional leading icon align with the title
+ * while the description wraps under both, without either part knowing whether
+ * the other is present.
+ */
+import { component, html } from "@c9up/aurora";
+import { slot } from "../lib/children.js";
+import { cva } from "../lib/cva.js";
+import { read, readOr } from "../lib/props.js";
+import { styledDiv } from "../lib/styled.js";
+export const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    variants: {
+        variant: {
+            default: "bg-card text-card-foreground",
+            destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+        },
+    },
+    defaultVariants: { variant: "default" },
+});
+export const Alert = component((props) => {
+    return html `<div
+		data-slot="alert"
+		role="${() => (readOr(props.variant, "default") === "destructive" ? "alert" : "note")}"
+		class="${() => alertVariants({ variant: read(props.variant), class: read(props.class) })}"
+	>${slot(props.children)}</div>`;
+});
+export const AlertTitle = styledDiv("alert-title", "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight");
+export const AlertDescription = styledDiv("alert-description", "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed");

package/dist/molecules/Attachment.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 { type Reactive } from "../lib/props.js";
+export interface AttachmentProps {
+    name: string;
+    /** Bytes. Omitted for something not yet uploaded. */
+    size?: number;
+    /** MIME type. Anything under `image/` renders as a thumbnail. */
+    type?: string;
+    /** Opens the file. Without it the chip is inert. */
+    href?: string;
+    /** Thumbnail source, for an image. Defaults to `href`. */
+    previewSrc?: string;
+    /** Shows a remove button. */
+    onRemove?: () => void;
+    class?: Reactive<string>;
+}
+/**
+ * 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 declare function formatBytes(bytes: number): string;
+export declare const Attachment: (props?: AttachmentProps | undefined) => import("@c9up/aurora").TemplateResult;