@c9up/nebula 0.1.0

package/dist/molecules/Tabs.js

@@ -0,0 +1,109 @@
+/**
+ * Tabs — one panel visible at a time.
+ *
+ * The WAI-ARIA tabs pattern in full: the tab list is a single tab stop with
+ * arrows moving between tabs, each tab points at its panel with
+ * `aria-controls`, and each panel points back with `aria-labelledby`.
+ *
+ * Activation is automatic — moving to a tab selects it — which is the right
+ * default when panels are already rendered and switching costs nothing. The
+ * `activateOnFocus: false` escape hatch exists for panels that fetch on
+ * display, where arrowing past three tabs would fire three requests.
+ *
+ * Hidden panels stay mounted so a form or a scroll position inside one
+ * survives a trip to another tab. `hidden` keeps them out of the layout and
+ * the accessibility tree, which is the behaviour `display: none` would give
+ * without also removing them from the DOM.
+ */
+import { component, html, onMount, onUnmount, signal } from "@c9up/aurora";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { uid } from "../lib/id.js";
+import { read } from "../lib/props.js";
+import { rovingFocus } from "../primitives/rovingFocus.js";
+export const Tabs = component((props) => {
+    const orientation = props.orientation ?? "horizontal";
+    const first = props.items.find((item) => item.disabled !== true);
+    const active = signal(props.defaultValue ?? first?.value ?? "");
+    const listId = uid("tabs-list");
+    // Ids are minted once per tab, up front, because a tab and its panel each
+    // need to name the other — one of them has to know both before rendering.
+    const ids = new Map();
+    for (const item of props.items) {
+        ids.set(item.value, { tab: uid("tab"), panel: uid("tab-panel") });
+    }
+    function select(value) {
+        if (active() === value)
+            return;
+        active(value);
+        props.onValueChange?.(value);
+    }
+    let group;
+    onMount(() => {
+        group = rovingFocus({
+            container: () => document.getElementById(listId),
+            itemSelector: "[role='tab']",
+            orientation,
+            onFocusChange: (item) => {
+                if (props.activateOnFocus === false)
+                    return;
+                const value = item.getAttribute("data-value");
+                if (value !== null)
+                    select(value);
+            },
+            onSelect: (item) => {
+                const value = item.getAttribute("data-value");
+                if (value !== null)
+                    select(value);
+            },
+        });
+        group.sync();
+    });
+    onUnmount(() => group?.destroy());
+    return html `<div
+		data-slot="tabs"
+		data-orientation="${orientation}"
+		class="${() => cn("flex gap-2", orientation === "vertical" ? "flex-row" : "flex-col", read(props.class))}"
+	>
+		<div
+			role="tablist"
+			data-slot="tabs-list"
+			id="${listId}"
+			aria-orientation="${orientation}"
+			class="${() => cn("bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px]", orientation === "vertical" ? "flex-col" : "h-9", read(props.listClass))}"
+		>
+			${props.items.map((item) => renderTab(item, ids, active, select))}
+		</div>
+		${props.items.map((item) => renderPanel(item, ids, active))}
+	</div>`;
+});
+function renderTab(item, ids, active, select) {
+    const id = ids.get(item.value);
+    const selected = () => active() === item.value;
+    return html `<button
+		type="button"
+		role="tab"
+		data-slot="tabs-trigger"
+		data-value="${item.value}"
+		data-state="${() => (selected() ? "active" : "inactive")}"
+		data-disabled="${item.disabled === true ? "" : undefined}"
+		id="${id?.tab}"
+		aria-selected="${() => (selected() ? "true" : "false")}"
+		aria-controls="${id?.panel}"
+		?disabled="${item.disabled === true}"
+		class="data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0"
+		@click="${() => select(item.value)}"
+	>${item.label}</button>`;
+}
+function renderPanel(item, ids, active) {
+    const id = ids.get(item.value);
+    return html `<div
+		role="tabpanel"
+		data-slot="tabs-content"
+		id="${id?.panel}"
+		aria-labelledby="${id?.tab}"
+		tabindex="0"
+		?hidden="${() => active() !== item.value}"
+		class="flex-1 outline-none"
+	>${slot(item.content)}</div>`;
+}

package/dist/molecules/ToggleGroup.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ToggleGroup — a row of toggles acting as one control.
+ *
+ * `type` decides both the behaviour and the semantics, and they have to move
+ * together. `"single"` is a radio group: one value, `role="radio"` on each
+ * button, and picking one clears the rest. `"multiple"` is a set of
+ * independent toggle buttons, each with `aria-pressed`.
+ *
+ * Getting that pairing wrong is the usual bug here — a single-select group
+ * announcing each option as "pressed" tells a screen-reader user they can turn
+ * several on at once.
+ *
+ * The classes come from `Toggle`'s own `cva`, so a grouped button and a
+ * standalone one cannot drift apart. Only the corner rounding is overridden,
+ * to weld the row into one shape.
+ */
+import { type ToggleVariants } from "../atoms/Toggle.js";
+import type { Child } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export interface ToggleGroupItem {
+    value: string;
+    label: Child;
+    /** Required when the label is an icon alone. */
+    ariaLabel?: string;
+    disabled?: boolean;
+}
+export interface ToggleGroupProps {
+    items: readonly ToggleGroupItem[];
+    type?: "single" | "multiple";
+    defaultValue?: string | readonly string[];
+    variant?: Reactive<ToggleVariants["variant"]>;
+    size?: Reactive<ToggleVariants["size"]>;
+    disabled?: Reactive<boolean>;
+    class?: Reactive<string>;
+    onValueChange?: (value: readonly string[]) => void;
+}
+export declare const ToggleGroup: (props?: ToggleGroupProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/ToggleGroup.js

@@ -0,0 +1,68 @@
+/**
+ * ToggleGroup — a row of toggles acting as one control.
+ *
+ * `type` decides both the behaviour and the semantics, and they have to move
+ * together. `"single"` is a radio group: one value, `role="radio"` on each
+ * button, and picking one clears the rest. `"multiple"` is a set of
+ * independent toggle buttons, each with `aria-pressed`.
+ *
+ * Getting that pairing wrong is the usual bug here — a single-select group
+ * announcing each option as "pressed" tells a screen-reader user they can turn
+ * several on at once.
+ *
+ * The classes come from `Toggle`'s own `cva`, so a grouped button and a
+ * standalone one cannot drift apart. Only the corner rounding is overridden,
+ * to weld the row into one shape.
+ */
+import { component, html, signal } from "@c9up/aurora";
+import { toggleVariants } from "../atoms/Toggle.js";
+import { cn } from "../lib/cn.js";
+import { read, readOr } from "../lib/props.js";
+export const ToggleGroup = component((props) => {
+    const type = props.type ?? "single";
+    const selected = signal(props.defaultValue === undefined
+        ? []
+        : typeof props.defaultValue === "string"
+            ? [props.defaultValue]
+            : props.defaultValue);
+    function toggle(value) {
+        const current = selected();
+        const next = type === "single"
+            ? current.includes(value)
+                ? []
+                : [value]
+            : current.includes(value)
+                ? current.filter((entry) => entry !== value)
+                : [...current, value];
+        selected(next);
+        props.onValueChange?.(next);
+    }
+    return html `<div
+		data-slot="toggle-group"
+		role="${type === "single" ? "radiogroup" : "group"}"
+		class="${() => cn("group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs", read(props.class))}"
+		data-variant="${() => readOr(props.variant, "default")}"
+	>
+		${props.items.map((item) => renderItem(item, props, type, selected, toggle))}
+	</div>`;
+});
+function renderItem(item, props, type, selected, toggle) {
+    const on = () => selected().includes(item.value);
+    return html `<button
+		type="button"
+		data-slot="toggle-group-item"
+		data-state="${() => (on() ? "on" : "off")}"
+		data-value="${item.value}"
+		role="${type === "single" ? "radio" : undefined}"
+		aria-checked="${() => (type === "single" ? (on() ? "true" : "false") : undefined)}"
+		aria-pressed="${() => (type === "multiple" ? (on() ? "true" : "false") : undefined)}"
+		aria-label="${item.ariaLabel}"
+		?disabled="${() => item.disabled === true || readOr(props.disabled, false)}"
+		class="${() => toggleVariants({
+        variant: read(props.variant),
+        size: read(props.size),
+        class: "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l aria-checked:bg-accent aria-checked:text-accent-foreground",
+    })}"
+		@click="${() => toggle(item.value)}"
+	>${item.label}</button>`;
+}

package/dist/molecules/Typography.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Typography — prose styles for content nebula does not otherwise own.
+ *
+ * shadcn documents these as copy-paste snippets rather than shipping them as
+ * components, which leaves every app to re-derive the same scale. They are
+ * cheap to ship and they are what keeps a marketing page, a changelog and an
+ * empty state reading as one product.
+ *
+ * `text-balance` on headings and `text-pretty` on body copy do the work here:
+ * they stop a two-word orphan on the last line of a heading and a single word
+ * ending a paragraph, which is most of what separates typeset text from text.
+ */
+import { type StyledProps } from "../lib/styled.js";
+export type TypographyProps = StyledProps;
+export declare const H1: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const H2: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const H3: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const H4: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const P: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const Blockquote: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const InlineCode: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const List: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const Lead: (props?: StyledProps) => import("@c9up/aurora").TemplateResult;
+export declare const Large: (props?: StyledProps) => import("@c9up/aurora").TemplateResult;
+export declare const Small: (props?: StyledProps) => import("@c9up/aurora").TemplateResult;
+export declare const Muted: (props?: StyledProps) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Typography.js

@@ -0,0 +1,67 @@
+/**
+ * Typography — prose styles for content nebula does not otherwise own.
+ *
+ * shadcn documents these as copy-paste snippets rather than shipping them as
+ * components, which leaves every app to re-derive the same scale. They are
+ * cheap to ship and they are what keeps a marketing page, a changelog and an
+ * empty state reading as one product.
+ *
+ * `text-balance` on headings and `text-pretty` on body copy do the work here:
+ * they stop a two-word orphan on the last line of a heading and a single word
+ * ending a paragraph, which is most of what separates typeset text from text.
+ */
+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 H1 = component((props) => {
+    return html `<h1
+		id="${props.id}"
+		class="${() => cn("scroll-m-20 text-4xl font-extrabold tracking-tight text-balance", read(props.class))}"
+	>${slot(props.children)}</h1>`;
+});
+export const H2 = component((props) => {
+    return html `<h2
+		id="${props.id}"
+		class="${() => cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", read(props.class))}"
+	>${slot(props.children)}</h2>`;
+});
+export const H3 = component((props) => {
+    return html `<h3
+		id="${props.id}"
+		class="${() => cn("scroll-m-20 text-2xl font-semibold tracking-tight", read(props.class))}"
+	>${slot(props.children)}</h3>`;
+});
+export const H4 = component((props) => {
+    return html `<h4
+		id="${props.id}"
+		class="${() => cn("scroll-m-20 text-xl font-semibold tracking-tight", read(props.class))}"
+	>${slot(props.children)}</h4>`;
+});
+export const P = component((props) => {
+    return html `<p
+		id="${props.id}"
+		class="${() => cn("leading-7 text-pretty [&:not(:first-child)]:mt-6", read(props.class))}"
+	>${slot(props.children)}</p>`;
+});
+export const Blockquote = component((props) => {
+    return html `<blockquote
+		id="${props.id}"
+		class="${() => cn("mt-6 border-l-2 pl-6 italic", read(props.class))}"
+	>${slot(props.children)}</blockquote>`;
+});
+export const InlineCode = component((props) => {
+    return html `<code
+		class="${() => cn("bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold", read(props.class))}"
+	>${slot(props.children)}</code>`;
+});
+export const List = component((props) => {
+    return html `<ul
+		class="${() => cn("my-6 ml-6 list-disc [&>li]:mt-2", read(props.class))}"
+	>${slot(props.children)}</ul>`;
+});
+export const Lead = styledDiv("lead", "text-muted-foreground text-xl text-pretty");
+export const Large = styledDiv("large", "text-lg font-semibold");
+export const Small = styledDiv("small", "text-sm leading-none font-medium");
+export const Muted = styledDiv("muted", "text-muted-foreground text-sm");

package/dist/molecules/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Molecules — assemblies of atoms, and small state machines.
+ *
+ * A component lands here when it composes other nebula components, or owns
+ * state that spans more than one element (Accordion's open set, Tabs'
+ * selection, InputOTP's characters). What it does *not* do is escape its own
+ * DOM position: nothing here portals, traps focus, or floats. Those are
+ * organisms.
+ *
+ * Compound components are data-driven — `Accordion({ items: [...] })`, not
+ * `<Accordion><AccordionItem>`. shadcn's compound API is a React-context
+ * artifact; Aurora has no context, and the alternatives (a factory returning
+ * bound parts, a handle threaded through props) are more machinery for less
+ * clarity. The rendered markup is unchanged, so shadcn's CSS and its examples
+ * still read across.
+ */
+export { Accordion, type AccordionItem, type AccordionProps, } from "./Accordion.js";
+export { Alert, AlertDescription, type AlertProps, AlertTitle, type AlertVariants, alertVariants, } from "./Alert.js";
+export { Attachment, type AttachmentProps, formatBytes, } from "./Attachment.js";
+export { Breadcrumb, type BreadcrumbProps, type Crumb } from "./Breadcrumb.js";
+export { Bubble, type BubbleProps, type BubbleReaction, type BubbleVariants, bubbleVariants, } from "./Bubble.js";
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, } from "./ButtonGroup.js";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, } from "./Card.js";
+export { Collapsible, type CollapsibleProps } from "./Collapsible.js";
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyProps, EmptyTitle, } from "./Empty.js";
+export { Field, FieldGroup, type FieldIds, type FieldProps, FieldSeparator, fieldIds, } from "./Field.js";
+export { InputGroup, InputGroupAddon, type InputGroupProps, inputGroupControlClasses, } from "./InputGroup.js";
+export { InputOTP, type InputOTPProps } from "./InputOTP.js";
+export { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, type ItemVariants, itemVariants, } from "./Item.js";
+export { Message, type MessageProps } from "./Message.js";
+export { type PageSlot, Pagination, type PaginationProps, pageWindow, } from "./Pagination.js";
+export { RadioGroup, type RadioGroupProps, type RadioOption, } from "./RadioGroup.js";
+export { Resizable, type ResizableProps } from "./Resizable.js";
+export { Table, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, TableHeader, type TableProps, TableRow, type TableRowProps, } from "./Table.js";
+export { type TabItem, Tabs, type TabsProps } from "./Tabs.js";
+export { ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, } from "./ToggleGroup.js";
+export { Blockquote, H1, H2, H3, H4, InlineCode, Large, Lead, List, Muted, P, Small, type TypographyProps, } from "./Typography.js";

package/dist/molecules/index.js

@@ -0,0 +1,37 @@
+/**
+ * Molecules — assemblies of atoms, and small state machines.
+ *
+ * A component lands here when it composes other nebula components, or owns
+ * state that spans more than one element (Accordion's open set, Tabs'
+ * selection, InputOTP's characters). What it does *not* do is escape its own
+ * DOM position: nothing here portals, traps focus, or floats. Those are
+ * organisms.
+ *
+ * Compound components are data-driven — `Accordion({ items: [...] })`, not
+ * `<Accordion><AccordionItem>`. shadcn's compound API is a React-context
+ * artifact; Aurora has no context, and the alternatives (a factory returning
+ * bound parts, a handle threaded through props) are more machinery for less
+ * clarity. The rendered markup is unchanged, so shadcn's CSS and its examples
+ * still read across.
+ */
+export { Accordion, } from "./Accordion.js";
+export { Alert, AlertDescription, AlertTitle, alertVariants, } from "./Alert.js";
+export { Attachment, formatBytes, } from "./Attachment.js";
+export { Breadcrumb } from "./Breadcrumb.js";
+export { Bubble, bubbleVariants, } from "./Bubble.js";
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, } from "./ButtonGroup.js";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
+export { Collapsible } from "./Collapsible.js";
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "./Empty.js";
+export { Field, FieldGroup, FieldSeparator, fieldIds, } from "./Field.js";
+export { InputGroup, InputGroupAddon, inputGroupControlClasses, } from "./InputGroup.js";
+export { InputOTP } from "./InputOTP.js";
+export { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle, itemVariants, } from "./Item.js";
+export { Message } from "./Message.js";
+export { Pagination, pageWindow, } from "./Pagination.js";
+export { RadioGroup, } from "./RadioGroup.js";
+export { Resizable } from "./Resizable.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./Table.js";
+export { Tabs } from "./Tabs.js";
+export { ToggleGroup, } from "./ToggleGroup.js";
+export { Blockquote, H1, H2, H3, H4, InlineCode, Large, Lead, List, Muted, P, Small, } from "./Typography.js";

package/dist/organisms/AlertDialog.d.ts

@@ -0,0 +1,40 @@
+/**
+ * AlertDialog — a modal that interrupts to ask something.
+ *
+ * The differences from Dialog are all about refusing to be dismissed by
+ * accident, because the user is being asked to confirm something they cannot
+ * undo:
+ *
+ * - `role="alertdialog"`, which tells assistive technology this is not merely
+ *   a window but a message requiring a response.
+ * - No close button and no backdrop dismissal. Both are the "click somewhere
+ *   else and it goes away" gesture, and an accidental dismissal of "delete
+ *   this?" reads as a cancel — the safe answer — but leaves the user unsure
+ *   which one they gave.
+ * - Escape still closes. It is unambiguous and deliberate, and taking it away
+ *   would trap a keyboard user in the dialog.
+ * - Focus starts on **Cancel**, not the action. The destructive button is the
+ *   one the user must reach for on purpose.
+ */
+import type { Child } from "../lib/children.js";
+import { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export interface AlertDialogProps {
+    trigger?: Slot;
+    title: Child;
+    description: Child;
+    /** Label for the confirming action. Default `"Continue"`. */
+    actionLabel?: Child;
+    /** Label for the way out. Default `"Cancel"`. */
+    cancelLabel?: Child;
+    /** Styles the action as destructive. */
+    destructive?: boolean;
+    open?: Reactive<boolean>;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    triggerClass?: Reactive<string>;
+    contentClass?: Reactive<string>;
+}
+export declare const AlertDialog: (props?: AlertDialogProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/organisms/AlertDialog.js

@@ -0,0 +1,104 @@
+/**
+ * AlertDialog — a modal that interrupts to ask something.
+ *
+ * The differences from Dialog are all about refusing to be dismissed by
+ * accident, because the user is being asked to confirm something they cannot
+ * undo:
+ *
+ * - `role="alertdialog"`, which tells assistive technology this is not merely
+ *   a window but a message requiring a response.
+ * - No close button and no backdrop dismissal. Both are the "click somewhere
+ *   else and it goes away" gesture, and an accidental dismissal of "delete
+ *   this?" reads as a cancel — the safe answer — but leaves the user unsure
+ *   which one they gave.
+ * - Escape still closes. It is unambiguous and deliberate, and taking it away
+ *   would trap a keyboard user in the dialog.
+ * - Focus starts on **Cancel**, not the action. The destructive button is the
+ *   one the user must reach for on purpose.
+ */
+import { component, html } from "@c9up/aurora";
+import { buttonVariants } from "../atoms/Button.js";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { uid } from "../lib/id.js";
+import { fadeInOut, zoomInOut } from "../lib/motion.js";
+import { read } from "../lib/props.js";
+import { controllable } from "../primitives/controllable.js";
+import { modalSurface } from "../primitives/modalSurface.js";
+import { dialogBackdropClasses, dialogPanelClasses } from "./Dialog.js";
+export const AlertDialog = component((props) => {
+    const triggerId = uid("alert-dialog-trigger");
+    const panelId = uid("alert-dialog-panel");
+    const titleId = uid("alert-dialog-title");
+    const descriptionId = uid("alert-dialog-description");
+    const cancelId = uid("alert-dialog-cancel");
+    const state = controllable({
+        value: props.open,
+        initial: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    function cancel() {
+        props.onCancel?.();
+        state.set(false);
+    }
+    function confirm() {
+        props.onConfirm?.();
+        state.set(false);
+    }
+    modalSurface({
+        open: () => state.current(),
+        onClose: cancel,
+        panel: (root) => root.querySelector(`#${CSS.escape(panelId)}`),
+        initialFocus: (panel) => panel.querySelector(`#${CSS.escape(cancelId)}`),
+        returnFocus: () => document.getElementById(triggerId),
+        dismissOnOutside: false,
+        content: () => html `<div data-slot="alert-dialog-overlay" class="${cn("fixed inset-0 z-50", fadeInOut)}">
+				<div class="${dialogBackdropClasses}"></div>
+				<div
+					data-slot="alert-dialog-content"
+					id="${panelId}"
+					role="alertdialog"
+					aria-modal="true"
+					aria-labelledby="${titleId}"
+					aria-describedby="${descriptionId}"
+					tabindex="-1"
+					class="${cn(dialogPanelClasses, zoomInOut, read(props.contentClass))}"
+				>
+					<div class="flex flex-col gap-2 text-center sm:text-left">
+						<h2 id="${titleId}" class="text-lg font-semibold">${props.title}</h2>
+						<p id="${descriptionId}" class="text-muted-foreground text-sm">
+							${props.description}
+						</p>
+					</div>
+					<div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+						<button
+							type="button"
+							id="${cancelId}"
+							data-slot="alert-dialog-cancel"
+							class="${buttonVariants({ variant: "outline" })}"
+							@click="${cancel}"
+						>${props.cancelLabel ?? "Cancel"}</button>
+						<button
+							type="button"
+							data-slot="alert-dialog-action"
+							class="${buttonVariants({
+            variant: props.destructive === true ? "destructive" : "default",
+        })}"
+							@click="${confirm}"
+						>${props.actionLabel ?? "Continue"}</button>
+					</div>
+				</div>
+			</div>`,
+    });
+    if (props.trigger === undefined) {
+        return html `<span data-slot="alert-dialog" hidden></span>`;
+    }
+    return html `<button
+		type="button"
+		data-slot="alert-dialog-trigger"
+		id="${triggerId}"
+		aria-haspopup="dialog"
+		class="${() => cn(read(props.triggerClass))}"
+		@click="${() => state.set(true)}"
+	>${slot(props.trigger)}</button>`;
+});

package/dist/organisms/Calendar.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Calendar — a month grid for picking a date.
+ *
+ * shadcn wraps `react-day-picker`, which brings `date-fns` with it. nebula
+ * uses `Date` and `Intl`, which cover everything this needs: month lengths and
+ * leap years come from `Date`, and weekday and month names come from
+ * `Intl.DateTimeFormat` in the user's locale for free — which is more than a
+ * hardcoded English array would give.
+ *
+ * Dates are handled at local midnight throughout. A calendar cell means "this
+ * day", not "this instant", and mixing the two is how a date picker ends up
+ * off by one for users west of UTC: `new Date("2026-03-14")` parses as UTC
+ * midnight, which is the 13th in New York.
+ *
+ * The keyboard model is the WAI-ARIA grid pattern, and it is what makes the
+ * control usable at all without a pointer: arrows move a day, PageUp/PageDown
+ * move a month, Home and End jump to the ends of the week. Only one cell is
+ * ever tabbable — the focused day — so Tab leaves the grid instead of walking
+ * through thirty-one buttons.
+ */
+import { type Reactive } from "../lib/props.js";
+/**
+ * A span of days. `to` is absent while the second end is still being picked —
+ * that half-open state is what the hover preview renders against, so it is
+ * part of the type rather than something the component hides internally.
+ */
+export interface DateRange {
+    readonly from: Date;
+    readonly to?: Date;
+}
+export interface CalendarProps {
+    /**
+     * `"range"` picks a span in two clicks. Default `"single"`.
+     *
+     * The two modes carry their value in separate props rather than one union.
+     * A union would make every read of `value` a narrowing exercise for the
+     * caller as much as for this file, and the two `onChange` shapes genuinely
+     * differ — a range handler that receives a bare `Date` has no way to say
+     * which end moved.
+     */
+    mode?: "single" | "range";
+    /** Selected day, in `"single"` mode. Local midnight. */
+    value?: Reactive<Date | undefined>;
+    defaultValue?: Date;
+    /** Selected span, in `"range"` mode. */
+    range?: Reactive<DateRange | undefined>;
+    defaultRange?: DateRange;
+    /** Month shown at first render. Defaults to the selection, then today. */
+    defaultMonth?: Date;
+    min?: Date;
+    max?: Date;
+    /** Rule out individual days — weekends, holidays, taken slots. */
+    disabled?: (date: Date) => boolean;
+    /** `0` Sunday, `1` Monday. Defaults to the locale's own first day. */
+    weekStartsOn?: number;
+    locale?: string;
+    class?: Reactive<string>;
+    /** `"single"` mode. */
+    onValueChange?: (date: Date) => void;
+    /** `"range"` mode. Fires on both clicks — `to` is absent after the first. */
+    onRangeChange?: (range: DateRange) => void;
+}
+/** Local midnight of the given day — the canonical form for a calendar date. */
+export declare function startOfDay(date: Date): Date;
+export declare function isSameDay(a: Date, b: Date): boolean;
+export declare function addDays(date: Date, days: number): Date;
+export declare function addMonths(date: Date, months: number): Date;
+/**
+ * The six-week grid covering a month.
+ *
+ * Always six weeks, always 42 cells, even when five would do. A grid that
+ * changes height between months makes the whole popover jump as you page
+ * through it.
+ */
+export declare function monthGrid(month: Date, weekStartsOn: number): Date[];
+/** Where a day sits within a span. `"single"` is a span of one day. */
+export type RangePosition = "single" | "start" | "end" | "middle" | "none";
+/**
+ * Place a day relative to a span.
+ *
+ * `end` is passed in rather than read off the range because it may be the
+ * *preview* end — wherever the pointer is, before the second click. Keeping
+ * that decision at the call site is what lets this stay a pure function over
+ * three dates, which is the part worth testing exhaustively.
+ */
+export declare function rangePosition(date: Date, range: DateRange | undefined, end: Date | undefined): RangePosition;
+/**
+ * The span after clicking `date`.
+ *
+ * A click before the fixed start restarts the span rather than producing an
+ * inverted one. Silently swapping the ends would be the other option, and it
+ * is worse: the user who clicked the 3rd after the 10th almost always meant to
+ * start again, not to select the week between them.
+ */
+export declare function nextRange(current: DateRange | undefined, date: Date): DateRange;
+export declare const Calendar: (props?: CalendarProps | undefined) => import("@c9up/aurora").TemplateResult;