@c9up/nebula 0.1.0

package/dist/organisms/Questionnaire.js

@@ -0,0 +1,235 @@
+/**
+ * Questionnaire — a survey, one question per step.
+ *
+ * Composed rather than reimplemented: `RadioGroup`, `Checkbox`, `Input`,
+ * `Textarea`, `Progress` and `Button` already exist, so this file is the state
+ * machine over them — which question is showing, what has been answered, and
+ * whether the reader may move on.
+ *
+ * Three decisions worth stating, because each has an obvious wrong answer:
+ *
+ * **The step counter is announced.** A visual progress bar tells a sighted
+ * reader they are on question 3 of 8. `aria-live="polite"` on the counter is
+ * what tells everyone else, and without it the survey is a series of
+ * unexplained page changes.
+ *
+ * **Answers survive going back.** Moving to the previous question and forward
+ * again keeps what was typed. The alternative — clearing on navigation —
+ * punishes the reader for checking what they said a moment ago.
+ *
+ * **A required question blocks Next, and says why.** Disabling the button
+ * silently is the common version, and it leaves the reader clicking a dead
+ * control with no explanation. The message appears only after an attempt, so
+ * the survey does not open by telling you that you have done nothing wrong yet.
+ */
+import { component, html, signal } from "@c9up/aurora";
+import { Button } from "../atoms/Button.js";
+import { Checkbox } from "../atoms/Checkbox.js";
+import { Input } from "../atoms/Input.js";
+import { Progress } from "../atoms/Progress.js";
+import { Textarea } from "../atoms/Textarea.js";
+import { cn } from "../lib/cn.js";
+import { uid } from "../lib/id.js";
+import { read } from "../lib/props.js";
+import { RadioGroup } from "../molecules/RadioGroup.js";
+function isSingle(question) {
+    return question.type === "single";
+}
+function isMultiple(question) {
+    return question.type === "multiple";
+}
+/** Narrow an answer to the set form, for a multiple-choice question. */
+function asSet(answer) {
+    if (answer === undefined)
+        return [];
+    return typeof answer === "string" ? [answer] : answer;
+}
+/** Narrow an answer to the single form. */
+function asValue(answer) {
+    if (answer === undefined)
+        return "";
+    return typeof answer === "string" ? answer : (answer[0] ?? "");
+}
+/** Has this question been answered at all? */
+export function isAnswered(question, answer) {
+    if (answer === undefined)
+        return false;
+    if (isMultiple(question))
+        return asSet(answer).length > 0;
+    return asValue(answer).trim() !== "";
+}
+export const Questionnaire = component((props) => {
+    const total = props.questions.length;
+    const step = signal(0);
+    const answers = signal({});
+    /** Set only after a blocked Next, so the survey does not open scolding. */
+    const attempted = signal(false);
+    const counterId = uid("questionnaire-counter");
+    const current = () => props.questions[step()];
+    function answerOf(question) {
+        return answers()[question.id];
+    }
+    function record(question, answer) {
+        answers({ ...answers(), [question.id]: answer });
+        attempted(false);
+        props.onAnswerChange?.(question.id, answer);
+    }
+    function toggleChoice(question, value) {
+        const chosen = asSet(answerOf(question));
+        record(question, chosen.includes(value)
+            ? chosen.filter((entry) => entry !== value)
+            : [...chosen, value]);
+    }
+    function canAdvance() {
+        const question = current();
+        if (question === undefined)
+            return false;
+        if (question.required !== true)
+            return true;
+        return isAnswered(question, answerOf(question));
+    }
+    function advance() {
+        if (!canAdvance()) {
+            attempted(true);
+            return;
+        }
+        attempted(false);
+        if (step() < total - 1)
+            step(step() + 1);
+        else
+            props.onComplete(answers());
+    }
+    function goBack() {
+        attempted(false);
+        if (step() > 0)
+            step(step() - 1);
+    }
+    function skip() {
+        attempted(false);
+        if (step() < total - 1)
+            step(step() + 1);
+        else
+            props.onComplete(answers());
+    }
+    const isLast = () => step() === total - 1;
+    return html `<section
+		data-slot="questionnaire"
+		aria-describedby="${counterId}"
+		class="${() => cn("flex w-full max-w-xl flex-col gap-6", read(props.class))}"
+	>
+		${props.showProgress === false
+        ? null
+        : html `<div class="flex flex-col gap-2">
+					${Progress({
+            value: () => step() + 1,
+            max: total,
+            label: "Questionnaire progress",
+        })}
+					<p
+						id="${counterId}"
+						aria-live="polite"
+						class="text-muted-foreground text-xs tabular-nums"
+					>${() => `Question ${step() + 1} of ${total}`}</p>
+				</div>`}
+
+		${() => renderQuestion()}
+
+		<div class="flex items-center justify-between gap-2">
+			${Button({
+        variant: "ghost",
+        disabled: () => step() === 0,
+        onClick: goBack,
+        children: props.backLabel ?? "Back",
+    })}
+			<div class="flex items-center gap-2">
+				${() => props.skippable === false || current()?.required === true
+        ? null
+        : Button({
+            variant: "ghost",
+            onClick: skip,
+            children: props.skipLabel ?? "Skip",
+        })}
+				${Button({
+        onClick: advance,
+        children: () => isLast()
+            ? (props.submitLabel ?? "Submit")
+            : (props.nextLabel ?? "Next"),
+    })}
+			</div>
+		</div>
+	</section>`;
+    function renderQuestion() {
+        const question = current();
+        if (question === undefined)
+            return null;
+        const blocked = attempted() && !canAdvance();
+        const errorId = `${question.id}-required`;
+        return html `<div data-slot="questionnaire-question" class="flex flex-col gap-3">
+			<div class="flex flex-col gap-1">
+				<h2 class="text-lg font-medium">
+					${question.prompt}${question.required === true
+            ? html `<span aria-hidden="true" class="text-destructive"> *</span>`
+            : null}
+				</h2>
+				${question.description === undefined
+            ? null
+            : html `<p class="text-muted-foreground text-sm">${question.description}</p>`}
+			</div>
+			${renderControl(question, errorId, blocked)}
+			<p
+				id="${errorId}"
+				role="alert"
+				class="text-destructive text-sm empty:hidden"
+			>${blocked ? "This question needs an answer before you can continue." : ""}</p>
+		</div>`;
+    }
+    function renderControl(question, errorId, blocked) {
+        if (isSingle(question)) {
+            return RadioGroup({
+                name: question.id,
+                options: question.options.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                    description: option.description,
+                })),
+                value: () => asValue(answerOf(question)),
+                onValueChange: (value) => record(question, value),
+            });
+        }
+        if (isMultiple(question)) {
+            return html `<div role="group" class="grid gap-3">
+				${question.options.map((option) => {
+                const id = uid("questionnaire-choice");
+                return html `<div class="flex items-start gap-3">
+						${Checkbox({
+                    id,
+                    name: question.id,
+                    value: option.value,
+                    checked: () => asSet(answerOf(question)).includes(option.value),
+                    onCheckedChange: () => toggleChoice(question, option.value),
+                })}
+						<div class="grid gap-1 leading-none">
+							<label for="${id}" class="text-sm leading-none font-medium select-none"
+								>${option.label}</label
+							>
+							${option.description === undefined
+                    ? null
+                    : html `<p class="text-muted-foreground text-sm">${option.description}</p>`}
+						</div>
+					</div>`;
+            })}
+			</div>`;
+        }
+        const shared = {
+            name: question.id,
+            placeholder: question.placeholder,
+            invalid: blocked,
+            describedBy: errorId,
+            value: () => asValue(answerOf(question)),
+            onInput: (value) => record(question, value),
+        };
+        return question.multiline === true
+            ? Textarea({ ...shared, rows: 4 })
+            : Input(shared);
+    }
+});

package/dist/organisms/Select.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Select — choose one option from a list.
+ *
+ * A custom listbox, not a styled `<select>`. This is the one place nebula
+ * gives up native behaviour, and the reason is that a `<select>` popup is
+ * drawn by the operating system: its font, its colours and its checkmarks
+ * cannot be styled at all, and options cannot contain anything but text. A
+ * design system that can style every control except this one is not a design
+ * system.
+ *
+ * What that costs is everything the native control was doing for free, and it
+ * all has to be put back:
+ *
+ * - `role="combobox"` on the trigger, `role="listbox"` on the panel,
+ *   `role="option"` with `aria-selected` on each entry.
+ * - `aria-activedescendant` rather than moving DOM focus — the listbox pattern
+ *   keeps focus on the trigger and *names* the highlighted option, which is
+ *   what lets a screen reader announce it without the focus ring jumping.
+ * - Type-ahead, arrows, Home/End, Enter and Escape.
+ * - A hidden input, so the control still posts with a plain HTML form.
+ *
+ * The panel is sized to the trigger and capped at the space available below
+ * it, so a hundred-option list scrolls rather than running off the screen.
+ */
+import { type Reactive } from "../lib/props.js";
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Groups consecutive options under a heading. */
+    group?: string;
+}
+export interface SelectProps {
+    options: readonly SelectOption[];
+    name?: string;
+    value?: Reactive<string | undefined>;
+    defaultValue?: string;
+    placeholder?: string;
+    disabled?: Reactive<boolean>;
+    invalid?: Reactive<boolean>;
+    required?: boolean;
+    class?: Reactive<string>;
+    contentClass?: Reactive<string>;
+    onValueChange?: (value: string) => void;
+}
+export declare const selectTriggerClasses = "border-input dark:bg-input/30 dark:hover:bg-input/50 flex h-9 w-fit min-w-0 items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+export declare const Select: (props?: SelectProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/organisms/Select.js

@@ -0,0 +1,250 @@
+/**
+ * Select — choose one option from a list.
+ *
+ * A custom listbox, not a styled `<select>`. This is the one place nebula
+ * gives up native behaviour, and the reason is that a `<select>` popup is
+ * drawn by the operating system: its font, its colours and its checkmarks
+ * cannot be styled at all, and options cannot contain anything but text. A
+ * design system that can style every control except this one is not a design
+ * system.
+ *
+ * What that costs is everything the native control was doing for free, and it
+ * all has to be put back:
+ *
+ * - `role="combobox"` on the trigger, `role="listbox"` on the panel,
+ *   `role="option"` with `aria-selected` on each entry.
+ * - `aria-activedescendant` rather than moving DOM focus — the listbox pattern
+ *   keeps focus on the trigger and *names* the highlighted option, which is
+ *   what lets a screen reader announce it without the focus ring jumping.
+ * - Type-ahead, arrows, Home/End, Enter and Escape.
+ * - A hidden input, so the control still posts with a plain HTML form.
+ *
+ * The panel is sized to the trigger and capped at the space available below
+ * it, so a hundred-option list scrolls rather than running off the screen.
+ */
+import { component, html, signal } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { CheckIcon, ChevronDownIcon } from "../lib/icons.js";
+import { uid } from "../lib/id.js";
+import { zoomInOut } from "../lib/motion.js";
+import { read, readOr } from "../lib/props.js";
+import { controllable } from "../primitives/controllable.js";
+import { floatingSurface } from "../primitives/floatingSurface.js";
+import { focusSilently } from "../primitives/focusable.js";
+export const selectTriggerClasses = "border-input dark:bg-input/30 dark:hover:bg-input/50 flex h-9 w-fit min-w-0 items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+export const Select = component((props) => {
+    const triggerId = uid("select-trigger");
+    const listId = uid("select-list");
+    const optionIds = new Map();
+    for (const option of props.options)
+        optionIds.set(option.value, uid("select-option"));
+    const open = signal(false);
+    const selection = controllable({
+        value: props.value,
+        initial: props.defaultValue,
+        onChange: (next) => {
+            if (next !== undefined)
+                props.onValueChange?.(next);
+        },
+    });
+    /** The option the keyboard is on. Distinct from the selected one. */
+    const active = signal(undefined);
+    const enabled = () => props.options.filter((option) => option.disabled !== true);
+    function labelFor(value) {
+        return props.options.find((option) => option.value === value)?.label;
+    }
+    function choose(value) {
+        selection.set(value);
+        active(value);
+        open(false);
+        focusSilently(document.getElementById(triggerId));
+    }
+    function moveActive(delta) {
+        const list = enabled();
+        if (list.length === 0)
+            return;
+        const from = list.findIndex((option) => option.value === active());
+        const next = from === -1 ? (delta > 0 ? 0 : list.length - 1) : from + delta;
+        const clamped = Math.min(Math.max(next, 0), list.length - 1);
+        const target = list[clamped];
+        if (target !== undefined)
+            active(target.value);
+    }
+    /**
+     * Type-ahead over the option *data*, not over elements.
+     *
+     * The shared primitive walks DOM nodes, which works for menus where focus
+     * moves. Here focus stays on the trigger and only `aria-activedescendant`
+     * moves, so the search runs over the options array instead.
+     */
+    let buffer = "";
+    let bufferTimer;
+    function seekByText(character) {
+        buffer += character.toLowerCase();
+        if (bufferTimer !== undefined)
+            clearTimeout(bufferTimer);
+        bufferTimer = setTimeout(() => {
+            buffer = "";
+        }, 1000);
+        const list = enabled();
+        const from = list.findIndex((option) => option.value === active());
+        for (let i = 1; i <= list.length; i += 1) {
+            const option = list[(Math.max(from, 0) + i) % list.length];
+            if (option === undefined)
+                continue;
+            if (option.label.toLowerCase().startsWith(buffer)) {
+                active(option.value);
+                return;
+            }
+        }
+    }
+    function onTriggerKeyDown(event) {
+        if (readOr(props.disabled, false))
+            return;
+        if (!open()) {
+            if (event.key === "ArrowDown" ||
+                event.key === "Enter" ||
+                event.key === " ") {
+                event.preventDefault();
+                active(selection.current() ?? enabled()[0]?.value);
+                open(true);
+            }
+            return;
+        }
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            moveActive(1);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            moveActive(-1);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            active(enabled()[0]?.value);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            active(enabled()[enabled().length - 1]?.value);
+        }
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            const current = active();
+            if (current !== undefined)
+                choose(current);
+        }
+        else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
+            seekByText(event.key);
+        }
+    }
+    floatingSurface({
+        anchor: () => document.getElementById(triggerId),
+        open: () => open(),
+        onClose: () => open(false),
+        placement: "bottom-start",
+        offset: 4,
+        matchWidth: true,
+        // Focus never enters the panel — the listbox pattern keeps it on the
+        // trigger — so nothing here traps or moves it.
+        content: renderList,
+        onOpened: scrollActiveIntoView,
+    });
+    function renderList() {
+        let lastGroup;
+        return html `<div
+			data-slot="select-content"
+			id="${listId}"
+			role="listbox"
+			aria-labelledby="${triggerId}"
+			class="${cn("bg-popover text-popover-foreground z-50 max-h-(--nebula-available-height) min-w-(--nebula-anchor-width) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", zoomInOut, read(props.contentClass))}"
+		>
+			${props.options.map((option) => {
+            const heading = option.group !== undefined && option.group !== lastGroup
+                ? html `<div class="text-muted-foreground px-2 py-1.5 text-xs">${option.group}</div>`
+                : null;
+            lastGroup = option.group;
+            return [heading, renderOption(option)];
+        })}
+		</div>`;
+    }
+    function renderOption(option) {
+        const chosen = () => selection.current() === option.value;
+        return html `<div
+			role="option"
+			id="${optionIds.get(option.value)}"
+			data-slot="select-item"
+			data-value="${option.value}"
+			aria-selected="${() => (chosen() ? "true" : "false")}"
+			data-active="${() => (active() === option.value ? "" : undefined)}"
+			data-disabled="${option.disabled === true ? "" : undefined}"
+			class="relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[active]:bg-accent data-[active]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+			@click="${() => {
+            if (option.disabled !== true)
+                choose(option.value);
+        }}"
+			@pointerenter="${() => {
+            if (option.disabled !== true)
+                active(option.value);
+        }}"
+		>
+			<span class="flex-1 truncate">${option.label}</span>
+			<span class="absolute right-2 flex size-3.5 items-center justify-center">
+				${() => (chosen() ? CheckIcon({ class: "size-4" }) : null)}
+			</span>
+		</div>`;
+    }
+    /**
+     * Bring the highlighted option into view when the panel opens.
+     *
+     * Opening a two-hundred-option select on the one already chosen and showing
+     * the top of the list is the standard failure of a custom select.
+     */
+    function scrollActiveIntoView(panel) {
+        const current = active() ?? selection.current();
+        if (current === undefined)
+            return;
+        const id = optionIds.get(current);
+        if (id === undefined)
+            return;
+        panel
+            .querySelector(`#${CSS.escape(id)}`)
+            ?.scrollIntoView({ block: "nearest" });
+    }
+    return html `<div data-slot="select" class="${() => cn("inline-flex", read(props.class))}">
+		<button
+			type="button"
+			data-slot="select-trigger"
+			id="${triggerId}"
+			role="combobox"
+			aria-haspopup="listbox"
+			aria-expanded="${() => (open() ? "true" : "false")}"
+			aria-controls="${() => (open() ? listId : undefined)}"
+			aria-activedescendant="${() => {
+        const current = active();
+        return open() && current !== undefined
+            ? optionIds.get(current)
+            : undefined;
+    }}"
+			aria-invalid="${() => (read(props.invalid) === true ? "true" : undefined)}"
+			aria-required="${props.required === true ? "true" : undefined}"
+			data-placeholder="${() => (selection.current() === undefined ? "" : undefined)}"
+			?disabled="${() => readOr(props.disabled, false)}"
+			class="${() => cn(selectTriggerClasses, read(props.class))}"
+			@click="${() => {
+        active(selection.current() ?? enabled()[0]?.value);
+        open(!open());
+    }}"
+			@keydown="${onTriggerKeyDown}"
+		>
+			<span class="truncate"
+				>${() => labelFor(selection.current()) ?? props.placeholder ?? "Select…"}</span
+			>
+			${ChevronDownIcon({ class: "size-4 opacity-50" })}
+		</button>
+		<input
+			type="hidden"
+			name="${props.name}"
+			.value="${() => selection.current() ?? ""}"
+		/>
+	</div>`;
+});

package/dist/organisms/Sheet.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Sheet — a panel that slides in from an edge.
+ *
+ * Structurally a Dialog whose panel is pinned to a side rather than centred,
+ * so it shares `modalSurface` and everything that comes with it. What differs
+ * is the motion: it translates rather than scaling, and the distance depends
+ * on the panel's own size, which only `translate-x-full` knows. That is why
+ * `slideFrom` produces a transition and not a keyframe animation.
+ *
+ * `inset-y-0` for the side panels and `inset-x-0` for the top and bottom ones
+ * is what makes the sheet span its edge; the opposite axis takes the width or
+ * height. Getting that pair the wrong way round produces a panel floating in a
+ * corner, which is the usual first attempt.
+ */
+import type { Child } from "../lib/children.js";
+import { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+import type { Side } from "../primitives/floating.js";
+export interface SheetProps {
+    trigger?: Slot;
+    title: Child;
+    description?: Child;
+    children?: Slot;
+    footer?: Slot;
+    /** Which edge it comes from. Default `"right"`. */
+    side?: Side;
+    open?: Reactive<boolean>;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    srOnlyTitle?: boolean;
+    triggerClass?: Reactive<string>;
+    contentClass?: Reactive<string>;
+}
+export declare const Sheet: (props?: SheetProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/organisms/Sheet.js

@@ -0,0 +1,107 @@
+/**
+ * Sheet — a panel that slides in from an edge.
+ *
+ * Structurally a Dialog whose panel is pinned to a side rather than centred,
+ * so it shares `modalSurface` and everything that comes with it. What differs
+ * is the motion: it translates rather than scaling, and the distance depends
+ * on the panel's own size, which only `translate-x-full` knows. That is why
+ * `slideFrom` produces a transition and not a keyframe animation.
+ *
+ * `inset-y-0` for the side panels and `inset-x-0` for the top and bottom ones
+ * is what makes the sheet span its edge; the opposite axis takes the width or
+ * height. Getting that pair the wrong way round produces a panel floating in a
+ * corner, which is the usual first attempt.
+ */
+import { component, html } from "@c9up/aurora";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { XIcon } from "../lib/icons.js";
+import { uid } from "../lib/id.js";
+import { fadeInOut, slideFrom } from "../lib/motion.js";
+import { read } from "../lib/props.js";
+import { controllable } from "../primitives/controllable.js";
+import { modalSurface } from "../primitives/modalSurface.js";
+import { dialogBackdropClasses } from "./Dialog.js";
+/** Edge placement and the axis the panel is sized on. */
+function panelClassesFor(side) {
+    if (side === "left") {
+        return "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm";
+    }
+    if (side === "right") {
+        return "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm";
+    }
+    if (side === "top")
+        return "inset-x-0 top-0 h-auto border-b";
+    return "inset-x-0 bottom-0 h-auto border-t";
+}
+export const Sheet = component((props) => {
+    const side = props.side ?? "right";
+    const triggerId = uid("sheet-trigger");
+    const panelId = uid("sheet-panel");
+    const titleId = uid("sheet-title");
+    const descriptionId = uid("sheet-description");
+    const state = controllable({
+        value: props.open,
+        initial: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    modalSurface({
+        open: () => state.current(),
+        onClose: () => state.set(false),
+        panel: (root) => root.querySelector(`#${CSS.escape(panelId)}`),
+        returnFocus: () => document.getElementById(triggerId),
+        content: () => html `<div data-slot="sheet-overlay" class="${cn("fixed inset-0 z-50", fadeInOut)}">
+				<div class="${dialogBackdropClasses}"></div>
+				<div
+					data-slot="sheet-content"
+					data-side="${side}"
+					id="${panelId}"
+					role="dialog"
+					aria-modal="true"
+					aria-labelledby="${titleId}"
+					aria-describedby="${props.description === undefined ? undefined : descriptionId}"
+					tabindex="-1"
+					class="${cn("bg-background fixed z-50 flex flex-col gap-4 p-6 shadow-lg outline-none", panelClassesFor(side), slideFrom(side), read(props.contentClass))}"
+				>
+					<div data-slot="sheet-header" class="flex flex-col gap-1.5">
+						<h2
+							id="${titleId}"
+							class="${cn("text-foreground font-semibold", props.srOnlyTitle === true ? "sr-only" : "")}"
+						>${props.title}</h2>
+						${props.description === undefined
+            ? null
+            : html `<p id="${descriptionId}" class="text-muted-foreground text-sm">
+									${props.description}
+								</p>`}
+					</div>
+					<div data-slot="sheet-body" class="flex-1 overflow-y-auto">${slot(props.children)}</div>
+					${props.footer === undefined
+            ? null
+            : html `<div data-slot="sheet-footer" class="mt-auto flex flex-col gap-2">
+								${slot(props.footer)}
+							</div>`}
+					<button
+						type="button"
+						data-slot="sheet-close"
+						class="ring-offset-background focus-visible:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:outline-none"
+						@click="${() => state.set(false)}"
+					>
+						${XIcon({ class: "size-4" })}
+						<span class="sr-only">Close</span>
+					</button>
+				</div>
+			</div>`,
+    });
+    if (props.trigger === undefined) {
+        return html `<span data-slot="sheet" hidden></span>`;
+    }
+    return html `<button
+		type="button"
+		data-slot="sheet-trigger"
+		id="${triggerId}"
+		aria-haspopup="dialog"
+		aria-expanded="${() => (state.current() ? "true" : "false")}"
+		class="${() => cn(read(props.triggerClass))}"
+		@click="${() => state.set(true)}"
+	>${slot(props.trigger)}</button>`;
+});