@c9up/nebula 0.1.0

package/dist/organisms/Sidebar.d.ts

@@ -0,0 +1,100 @@
+/**
+ * Sidebar — the application shell's navigation column.
+ *
+ * Two presentations from one definition, because a sidebar is not a component
+ * so much as a layout decision that changes with the viewport:
+ *
+ * - On a wide screen it is a column beside the content, collapsible to a strip
+ *   of icons or away entirely.
+ * - On a narrow one it is a Sheet. A 16rem column on a phone leaves nothing
+ *   for the content, and every attempt to keep it visible ends up as a drawer
+ *   anyway.
+ *
+ * The collapsed state is persisted in a cookie rather than `localStorage`. The
+ * server renders the shell, and only a cookie is readable there — with
+ * `localStorage` the sidebar renders expanded, then snaps shut once the client
+ * hydrates, which is visible on every page load.
+ *
+ * `cmd/ctrl + B` toggles it, the convention from every editor that has one.
+ */
+import { type Signal } from "@c9up/aurora";
+import type { Child, Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+import { type StyledProps } from "../lib/styled.js";
+export declare function sidebarState(defaultOpen?: boolean): Signal<boolean>;
+/** Is the sidebar collapsed to its icon rail right now? */
+export declare function sidebarCollapsed(): boolean;
+export interface SidebarProps {
+    children?: Slot;
+    header?: Slot;
+    footer?: Slot;
+    /** Which edge. Default `"left"`. */
+    side?: "left" | "right";
+    /** What collapsing does: shrink to icons, or disappear. Default `"icon"`. */
+    collapsible?: "icon" | "offcanvas";
+    /** Starting state. Read from the cookie when there is one. */
+    defaultOpen?: boolean;
+    /** Announced as the navigation landmark's name. */
+    label?: string;
+    class?: Reactive<string>;
+}
+export declare const Sidebar: (props?: SidebarProps | undefined) => import("@c9up/aurora").TemplateResult;
+export interface SidebarTriggerProps {
+    onToggle: () => void;
+    class?: Reactive<string>;
+}
+/**
+ * The button that opens and closes the sidebar.
+ *
+ * Kept apart from `Sidebar` because it belongs in the page header, not in the
+ * panel — a trigger inside an off-canvas sidebar disappears with it, and there
+ * is then no way back.
+ */
+export declare const SidebarTrigger: (props?: SidebarTriggerProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const SidebarGroup: (props?: StyledProps) => import("@c9up/aurora").TemplateResult;
+export declare const SidebarGroupLabel: (props?: StyledProps) => import("@c9up/aurora").TemplateResult;
+export declare const SidebarMenu: (props?: StyledProps) => import("@c9up/aurora").TemplateResult;
+export interface SidebarMenuItemProps {
+    label: Child;
+    href?: string;
+    icon?: Child;
+    active?: Reactive<boolean>;
+    /**
+     * Shown as a tooltip while the sidebar is collapsed to icons.
+     *
+     * Only then: an entry whose label is already on screen does not need the
+     * same words repeated on hover. Without it a collapsed rail is a column of
+     * unlabelled glyphs, so give one to every entry that has an icon.
+     */
+    tooltip?: string;
+    /** A trailing control — the count of unread items, a status dot. */
+    badge?: Child;
+    onClick?: () => void;
+}
+/**
+ * One navigation entry.
+ *
+ * `aria-current="page"` on the active entry, not just a highlight class. The
+ * highlight tells a sighted user where they are; without the attribute nobody
+ * else is told at all.
+ */
+export declare const SidebarMenuItem: (props?: SidebarMenuItemProps | undefined) => import("@c9up/aurora").TemplateResult;
+/**
+ * A second control on a menu row — a "more" menu, a remove button.
+ *
+ * Absolutely positioned rather than a flex sibling, so it can overlap a long
+ * label instead of squeezing it. It disappears with the rail: there is no room
+ * for two controls in an icon-width column, and the row's own action is the
+ * one that matters.
+ */
+export declare const SidebarMenuAction: (props?: SidebarMenuItemProps | undefined) => import("@c9up/aurora").TemplateResult;
+/**
+ * A nested list under a menu entry.
+ *
+ * A real `<ul>`, so the nesting is structure a screen reader can announce
+ * rather than an indent. Hidden entirely when collapsed — an indented tree in
+ * an icon-width rail is unreadable, and the parent entry is still reachable.
+ */
+export declare const SidebarMenuSub: (props?: StyledProps | undefined) => import("@c9up/aurora").TemplateResult;
+/** One row of a nested list. Wrap a `SidebarMenuItem` in it. */
+export declare const SidebarMenuSubItem: (props?: StyledProps) => import("@c9up/aurora").TemplateResult;

package/dist/organisms/Sidebar.js

@@ -0,0 +1,228 @@
+/**
+ * Sidebar — the application shell's navigation column.
+ *
+ * Two presentations from one definition, because a sidebar is not a component
+ * so much as a layout decision that changes with the viewport:
+ *
+ * - On a wide screen it is a column beside the content, collapsible to a strip
+ *   of icons or away entirely.
+ * - On a narrow one it is a Sheet. A 16rem column on a phone leaves nothing
+ *   for the content, and every attempt to keep it visible ends up as a drawer
+ *   anyway.
+ *
+ * The collapsed state is persisted in a cookie rather than `localStorage`. The
+ * server renders the shell, and only a cookie is readable there — with
+ * `localStorage` the sidebar renders expanded, then snaps shut once the client
+ * hydrates, which is visible on every page load.
+ *
+ * `cmd/ctrl + B` toggles it, the convention from every editor that has one.
+ */
+import { booleanCookie, component, cookieState, html, onMount, onUnmount, signal, } from "@c9up/aurora";
+import { Button } from "../atoms/Button.js";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { PanelLeftIcon } from "../lib/icons.js";
+import { read } from "../lib/props.js";
+import { styledDiv } from "../lib/styled.js";
+import { Sheet } from "./Sheet.js";
+import { Tooltip } from "./Tooltip.js";
+const COOKIE_NAME = "nebula:sidebar";
+/**
+ * The open/collapsed state, shared by every part of the sidebar.
+ *
+ * shadcn publishes this through a `SidebarProvider` and React context, so that
+ * a menu item three levels down can know the sidebar is collapsed and show a
+ * tooltip instead of a label. Aurora has no context, and the honest
+ * replacement is a module-level signal: an app has one sidebar, so one signal
+ * is the whole of what the provider was carrying.
+ *
+ * Created on first use rather than at import, because `cookieState` reads the
+ * cookie immediately and this module is imported during SSR too.
+ */
+let sharedOpen;
+export function sidebarState(defaultOpen = true) {
+    sharedOpen ??= cookieState(COOKIE_NAME, defaultOpen, booleanCookie, {
+        path: "/",
+        maxAge: COOKIE_MAX_AGE_DAYS * 24 * 60 * 60,
+        sameSite: "lax",
+    });
+    return sharedOpen;
+}
+/** Is the sidebar collapsed to its icon rail right now? */
+export function sidebarCollapsed() {
+    return !sidebarState()();
+}
+const COOKIE_MAX_AGE_DAYS = 365;
+/** Below this width the sidebar becomes a Sheet. Matches Tailwind's `md`. */
+const MOBILE_BREAKPOINT = 768;
+export const Sidebar = component((props) => {
+    const side = props.side ?? "left";
+    const collapsible = props.collapsible ?? "icon";
+    // The shared signal, so the menu items collapse in step with the panel.
+    const open = sidebarState(props.defaultOpen ?? true);
+    const mobile = signal(false);
+    function toggle() {
+        open(!open());
+    }
+    function onKeyDown(event) {
+        if (event.key !== "b" && event.key !== "B")
+            return;
+        if (!event.metaKey && !event.ctrlKey)
+            return;
+        event.preventDefault();
+        toggle();
+    }
+    // `matchMedia` rather than a resize listener: it fires only when the
+    // breakpoint is actually crossed, not on every pixel of a window drag.
+    let media;
+    function syncMobile() {
+        mobile(media?.matches === true);
+    }
+    onMount(() => {
+        media = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        syncMobile();
+        media.addEventListener("change", syncMobile);
+        document.addEventListener("keydown", onKeyDown);
+    });
+    onUnmount(() => {
+        media?.removeEventListener("change", syncMobile);
+        document.removeEventListener("keydown", onKeyDown);
+    });
+    const body = () => html `<div data-slot="sidebar-inner" class="flex h-full w-full flex-col">
+			${props.header === undefined
+        ? null
+        : html `<div data-slot="sidebar-header" class="flex flex-col gap-2 p-2">
+						${slot(props.header)}
+					</div>`}
+			<div data-slot="sidebar-body" class="min-h-0 flex-1 overflow-auto p-2">
+				${slot(props.children)}
+			</div>
+			${props.footer === undefined
+        ? null
+        : html `<div data-slot="sidebar-footer" class="flex flex-col gap-2 p-2">
+						${slot(props.footer)}
+					</div>`}
+		</div>`;
+    return html `<div data-slot="sidebar-root">
+		${() => mobile()
+        ? Sheet({
+            title: props.label ?? "Navigation",
+            srOnlyTitle: true,
+            side,
+            open: () => open(),
+            onOpenChange: (next) => open(next),
+            children: body(),
+            contentClass: "bg-sidebar text-sidebar-foreground w-[18rem] p-0",
+        })
+        : html `<nav
+						data-slot="sidebar"
+						data-state="${() => (open() ? "expanded" : "collapsed")}"
+						data-side="${side}"
+						data-collapsible="${collapsible}"
+						aria-label="${props.label ?? "Sidebar"}"
+						class="${() => cn("bg-sidebar text-sidebar-foreground h-svh shrink-0 overflow-hidden transition-[width] duration-200 ease-linear motion-reduce:transition-none", side === "left" ? "border-r" : "border-l", open()
+            ? "w-(--sidebar-width,16rem)"
+            : collapsible === "icon"
+                ? "w-(--sidebar-width-icon,3rem)"
+                : "w-0 border-0", read(props.class))}"
+					>${body()}</nav>`}
+	</div>`;
+});
+/**
+ * The button that opens and closes the sidebar.
+ *
+ * Kept apart from `Sidebar` because it belongs in the page header, not in the
+ * panel — a trigger inside an off-canvas sidebar disappears with it, and there
+ * is then no way back.
+ */
+export const SidebarTrigger = component((props) => {
+    return Button({
+        variant: "ghost",
+        size: "icon",
+        label: "Toggle sidebar",
+        class: props.class,
+        onClick: props.onToggle,
+        children: PanelLeftIcon({ class: "size-4" }),
+    });
+});
+export const SidebarGroup = styledDiv("sidebar-group", "flex w-full flex-col gap-1 p-2");
+export const SidebarGroupLabel = styledDiv("sidebar-group-label", "text-sidebar-foreground/70 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium");
+export const SidebarMenu = styledDiv("sidebar-menu", "flex w-full min-w-0 flex-col gap-1");
+/**
+ * One navigation entry.
+ *
+ * `aria-current="page"` on the active entry, not just a highlight class. The
+ * highlight tells a sighted user where they are; without the attribute nobody
+ * else is told at all.
+ */
+export const SidebarMenuItem = component((props) => {
+    const classes = "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium flex h-8 w-full items-center gap-2 overflow-hidden rounded-md px-2 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring [&>svg]:size-4 [&>svg]:shrink-0";
+    /**
+     * The label and badge fold away with the rail, the icon does not.
+     *
+     * `sr-only` rather than `hidden`: the entry keeps its accessible name when
+     * collapsed, so a screen reader still reads "Settings" off a column that
+     * shows only a cog.
+     */
+    const foldable = () => (sidebarCollapsed() ? "sr-only" : "truncate");
+    const body = html `${props.icon}<span class="${foldable}">${props.label}</span>${() => props.badge === undefined || sidebarCollapsed()
+        ? null
+        : html `<span
+					data-slot="sidebar-menu-badge"
+					class="text-sidebar-foreground/70 ml-auto flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums"
+				>${props.badge}</span>`}`;
+    const entry = props.href !== undefined
+        ? html `<a
+					data-slot="sidebar-menu-item"
+					href="${props.href}"
+					aria-current="${() => (read(props.active) === true ? "page" : undefined)}"
+					class="${classes}"
+				>${body}</a>`
+        : html `<button
+					type="button"
+					data-slot="sidebar-menu-item"
+					aria-current="${() => (read(props.active) === true ? "page" : undefined)}"
+					class="${classes}"
+					@click="${props.onClick}"
+				>${body}</button>`;
+    if (props.tooltip === undefined)
+        return entry;
+    // Wrapped once, not toggled: swapping the wrapper on collapse would remount
+    // the entry and lose focus mid-keyboard-navigation. The tooltip decides for
+    // itself whether to open, which is the cheaper half to make conditional.
+    return html `${() => sidebarCollapsed()
+        ? Tooltip({ trigger: entry, content: props.tooltip, placement: "right" })
+        : entry}`;
+});
+/**
+ * A second control on a menu row — a "more" menu, a remove button.
+ *
+ * Absolutely positioned rather than a flex sibling, so it can overlap a long
+ * label instead of squeezing it. It disappears with the rail: there is no room
+ * for two controls in an icon-width column, and the row's own action is the
+ * one that matters.
+ */
+export const SidebarMenuAction = component((props) => {
+    return html `<button
+		type="button"
+		data-slot="sidebar-menu-action"
+		aria-label="${props.tooltip}"
+		class="${() => cn("text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-1 right-1 flex aspect-square w-5 items-center justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring [&>svg]:size-4 [&>svg]:shrink-0", sidebarCollapsed() ? "hidden" : "")}"
+		@click="${props.onClick}"
+	>${props.icon ?? props.label}</button>`;
+});
+/**
+ * A nested list under a menu entry.
+ *
+ * A real `<ul>`, so the nesting is structure a screen reader can announce
+ * rather than an indent. Hidden entirely when collapsed — an indented tree in
+ * an icon-width rail is unreadable, and the parent entry is still reachable.
+ */
+export const SidebarMenuSub = component((props) => {
+    return html `<ul
+		data-slot="sidebar-menu-sub"
+		class="${() => cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5", sidebarCollapsed() ? "hidden" : "", read(props.class))}"
+	>${slot(props.children)}</ul>`;
+});
+/** One row of a nested list. Wrap a `SidebarMenuItem` in it. */
+export const SidebarMenuSubItem = styledDiv("sidebar-menu-sub-item", "relative flex min-w-0 items-center");

package/dist/organisms/Toaster.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Toaster — transient notifications.
+ *
+ * shadcn delegates this to `sonner`. nebula keeps it in-house, and the shape
+ * is the same: one region mounted once near the app root, and a `toast()`
+ * function callable from anywhere with no reference to it.
+ *
+ * That decoupling is the whole design. A queue in module state, a signal the
+ * region subscribes to, and `toast.error(…)` works from a route handler's
+ * error branch without threading a handle down to it.
+ *
+ * The accessibility rules are stricter than they look, and the region is
+ * static so they can be satisfied:
+ *
+ * - The live region must exist **before** the toast does. A live region
+ *   inserted with content already in it is not announced by most screen
+ *   readers, which is why the region mounts empty and stays.
+ * - `polite` for ordinary toasts, `assertive` for errors. Everything
+ *   interrupting the user is the fastest way to make a screen reader
+ *   unusable — so there are two regions, and each toast picks one.
+ * - Hovering pauses the timers. A toast that vanishes while being read is the
+ *   single most common complaint about the pattern.
+ */
+import type { Child } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export type ToastVariant = "default" | "success" | "error" | "warning";
+export interface ToastOptions {
+    title: Child;
+    description?: Child;
+    variant?: ToastVariant;
+    /** Milliseconds on screen. `0` keeps it until dismissed. */
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+declare function dismiss(id: number): void;
+declare function show(options: ToastOptions): number;
+/**
+ * Raise a toast. Returns its id, which `dismiss` accepts.
+ *
+ * Callable from anywhere — no component, no context, no handle.
+ */
+export declare const toast: {
+    show: typeof show;
+    dismiss: typeof dismiss;
+    success: (title: Child, description?: Child) => number;
+    error: (title: Child, description?: Child) => number;
+    warning: (title: Child, description?: Child) => number;
+    /** Clear everything — on navigation, say. */
+    clear(): void;
+};
+export interface ToasterProps {
+    /** Which corner. Default `"bottom-right"`. */
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    class?: Reactive<string>;
+}
+/**
+ * Mount once, near the root of the app.
+ *
+ * `data-nebula-live` marks it as exempt from the `aria-hidden` sweep a modal
+ * performs over its siblings — a toast raised while a dialog is open still has
+ * to be announced.
+ */
+export declare const Toaster: (props?: ToasterProps | undefined) => import("@c9up/aurora").TemplateResult;
+export {};

package/dist/organisms/Toaster.js

@@ -0,0 +1,189 @@
+/**
+ * Toaster — transient notifications.
+ *
+ * shadcn delegates this to `sonner`. nebula keeps it in-house, and the shape
+ * is the same: one region mounted once near the app root, and a `toast()`
+ * function callable from anywhere with no reference to it.
+ *
+ * That decoupling is the whole design. A queue in module state, a signal the
+ * region subscribes to, and `toast.error(…)` works from a route handler's
+ * error branch without threading a handle down to it.
+ *
+ * The accessibility rules are stricter than they look, and the region is
+ * static so they can be satisfied:
+ *
+ * - The live region must exist **before** the toast does. A live region
+ *   inserted with content already in it is not announced by most screen
+ *   readers, which is why the region mounts empty and stays.
+ * - `polite` for ordinary toasts, `assertive` for errors. Everything
+ *   interrupting the user is the fastest way to make a screen reader
+ *   unusable — so there are two regions, and each toast picks one.
+ * - Hovering pauses the timers. A toast that vanishes while being read is the
+ *   single most common complaint about the pattern.
+ */
+import { component, html, signal } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { XIcon } from "../lib/icons.js";
+import { fadeInOut } from "../lib/motion.js";
+import { read } from "../lib/props.js";
+const DEFAULT_DURATION_MS = 5000;
+const queue = signal([]);
+const timers = new Map();
+/** When each toast is due to disappear, as an epoch timestamp. */
+const deadlines = new Map();
+/** Time each toast had left when the pointer entered the region. */
+const remainders = new Map();
+let nextId = 0;
+function dismiss(id) {
+    clearTimer(id);
+    deadlines.delete(id);
+    remainders.delete(id);
+    queue(queue().filter((entry) => entry.id !== id));
+}
+function clearTimer(id) {
+    const timer = timers.get(id);
+    if (timer !== undefined)
+        clearTimeout(timer);
+    timers.delete(id);
+}
+function schedule(id, duration) {
+    // A duration of zero means "stays until dismissed", so no timer and no
+    // deadline — which is also what keeps pause/resume from resurrecting one.
+    if (duration <= 0)
+        return;
+    clearTimer(id);
+    timers.set(id, setTimeout(() => dismiss(id), duration));
+    deadlines.set(id, Date.now() + duration);
+}
+/** Hold every countdown while the pointer is over the region. */
+function pauseAll() {
+    const now = Date.now();
+    for (const [id, deadline] of deadlines) {
+        clearTimer(id);
+        remainders.set(id, Math.max(deadline - now, 0));
+    }
+}
+/**
+ * Resume every held countdown.
+ *
+ * A minimum is applied: a toast the pointer rested on until its time ran out
+ * would otherwise vanish the instant the pointer left, which reads as the
+ * hover having dismissed it.
+ */
+function resumeAll(minimumMs) {
+    for (const [id, remaining] of remainders) {
+        schedule(id, Math.max(remaining, minimumMs));
+    }
+    remainders.clear();
+}
+function show(options) {
+    nextId += 1;
+    const id = nextId;
+    const entry = {
+        ...options,
+        id,
+        variant: options.variant ?? "default",
+    };
+    queue([...queue(), entry]);
+    schedule(id, options.duration ?? DEFAULT_DURATION_MS);
+    return id;
+}
+/**
+ * Raise a toast. Returns its id, which `dismiss` accepts.
+ *
+ * Callable from anywhere — no component, no context, no handle.
+ */
+export const toast = {
+    show,
+    dismiss,
+    success: (title, description) => show({ title, description, variant: "success" }),
+    error: (title, description) => 
+    // Errors stay twice as long: the user has to read them, and often act.
+    show({
+        title,
+        description,
+        variant: "error",
+        duration: DEFAULT_DURATION_MS * 2,
+    }),
+    warning: (title, description) => show({ title, description, variant: "warning" }),
+    /** Clear everything — on navigation, say. */
+    clear() {
+        for (const timer of timers.values())
+            clearTimeout(timer);
+        timers.clear();
+        deadlines.clear();
+        remainders.clear();
+        queue([]);
+    },
+};
+const variantClasses = {
+    default: "bg-popover text-popover-foreground border",
+    success: "bg-popover text-popover-foreground border-l-4 border-l-primary border",
+    error: "bg-popover text-destructive border-l-4 border-l-destructive border",
+    warning: "bg-popover text-popover-foreground border-l-4 border-l-chart-4 border",
+};
+const positionClasses = {
+    "top-right": "top-0 right-0 flex-col",
+    "top-left": "top-0 left-0 flex-col",
+    "bottom-right": "bottom-0 right-0 flex-col-reverse",
+    "bottom-left": "bottom-0 left-0 flex-col-reverse",
+};
+/**
+ * Mount once, near the root of the app.
+ *
+ * `data-nebula-live` marks it as exempt from the `aria-hidden` sweep a modal
+ * performs over its siblings — a toast raised while a dialog is open still has
+ * to be announced.
+ */
+export const Toaster = component((props) => {
+    const position = props.position ?? "bottom-right";
+    return html `<div
+		data-slot="toaster"
+		data-nebula-live
+		class="${() => cn("pointer-events-none fixed z-100 flex max-h-screen w-full p-4 sm:max-w-sm", positionClasses[position], read(props.class))}"
+		@pointerenter="${pauseAll}"
+		@pointerleave="${() => resumeAll(1000)}"
+	>
+		<div role="status" aria-live="polite" aria-atomic="false" class="contents">
+			${() => queue()
+        .filter((entry) => entry.variant !== "error")
+        .map(renderToast)}
+		</div>
+		<div role="alert" aria-live="assertive" aria-atomic="false" class="contents">
+			${() => queue()
+        .filter((entry) => entry.variant === "error")
+        .map(renderToast)}
+		</div>
+	</div>`;
+});
+function renderToast(entry) {
+    return html `<div
+		data-slot="toast"
+		data-variant="${entry.variant}"
+		data-state="open"
+		class="${cn("pointer-events-auto mt-2 flex w-full items-start gap-3 rounded-md p-4 shadow-lg", variantClasses[entry.variant], fadeInOut)}"
+	>
+		<div class="flex-1 text-sm">
+			<div class="font-medium">${entry.title}</div>
+			${entry.description === undefined
+        ? null
+        : html `<div class="text-muted-foreground mt-1">${entry.description}</div>`}
+		</div>
+		${entry.action === undefined
+        ? null
+        : html `<button
+					type="button"
+					class="text-sm font-medium underline-offset-4 hover:underline"
+					@click="${() => {
+            entry.action?.onClick();
+            dismiss(entry.id);
+        }}"
+				>${entry.action.label}</button>`}
+		<button
+			type="button"
+			aria-label="Dismiss notification"
+			class="opacity-60 transition-opacity hover:opacity-100"
+			@click="${() => dismiss(entry.id)}"
+		>${XIcon({ class: "size-4" })}</button>
+	</div>`;
+}

package/dist/organisms/Tooltip.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Tooltip — a label that appears on hover or focus.
+ *
+ * Three rules separate a usable tooltip from an irritating one, and all three
+ * are about time rather than appearance:
+ *
+ * - An **open delay**, so moving the pointer across a toolbar does not fire
+ *   six tooltips on the way past.
+ * - A **close delay**, so travelling from the trigger to the tooltip — which a
+ *   user does to read a long one, or click a link inside — does not dismiss it
+ *   halfway.
+ * - **No delay between neighbours.** Once one tooltip is showing, the next one
+ *   appears instantly; the user has clearly decided to browse the toolbar, and
+ *   re-serving the delay each time makes the interface feel stuck. That is why
+ *   `lastClosedAt` is module state and not per-component.
+ *
+ * Focus opens it with no delay at all. A keyboard user landing on a control
+ * has already committed to it, and a delay just looks like lag.
+ *
+ * `role="tooltip"` plus `aria-describedby` — never `aria-labelledby`. A
+ * tooltip supplements a control's name; it is not the name. A button labelled
+ * only by its tooltip is unlabelled to anything that does not hover.
+ */
+import type { Child } from "../lib/children.js";
+import { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+import type { Placement } from "../primitives/floating.js";
+export interface TooltipProps {
+    /** The control being described. */
+    trigger?: Slot;
+    /** The tooltip text. Keep it to a phrase. */
+    content?: Child;
+    placement?: Placement;
+    openDelay?: number;
+    closeDelay?: number;
+    class?: Reactive<string>;
+    contentClass?: Reactive<string>;
+}
+export declare const Tooltip: (props?: TooltipProps | undefined) => import("@c9up/aurora").TemplateResult;