@c9up/nebula 0.1.0

package/dist/molecules/Field.js

@@ -0,0 +1,82 @@
+/**
+ * Field — a form control with its label, hint and error.
+ *
+ * The reason this exists rather than each form writing the four elements by
+ * hand is the wiring. A control must point at its description and its error
+ * with `aria-describedby`, and at its own label with `for`/`id`. Done by hand
+ * that is three ids to invent and keep in step per field, and the failure is
+ * silent — a sighted user sees the error, a screen-reader user does not.
+ *
+ * `Field` mints the ids and returns them, so the control gets them by
+ * destructuring rather than by convention:
+ *
+ *   const email = fieldIds()
+ *   Field({
+ *     ids: email,
+ *     label: "Email",
+ *     error: () => errors.email,
+ *     children: Input({ id: email.control, describedBy: email.describedBy, invalid: … }),
+ *   })
+ *
+ * The error slot is reactive and empty-tolerant: passing `() => errors.email`
+ * renders nothing until there is something to render, so a field does not
+ * reserve a blank line for an error that has not happened.
+ */
+import { component, html } from "@c9up/aurora";
+import { Label } from "../atoms/Label.js";
+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 { styledDiv } from "../lib/styled.js";
+/** Mint the id set for one field. Call once, in the component that owns it. */
+export function fieldIds() {
+    const control = uid("field");
+    const description = `${control}-description`;
+    const error = `${control}-error`;
+    return {
+        control,
+        label: `${control}-label`,
+        description,
+        error,
+        // Both are named unconditionally. A screen reader skips an id that
+        // resolves to nothing, so listing an absent error is harmless — whereas
+        // recomputing the attribute when an error appears means the control has to
+        // re-render, which Aurora does not do.
+        describedBy: `${description} ${error}`,
+    };
+}
+export const Field = component((props) => {
+    const horizontal = props.orientation === "horizontal";
+    return html `<div
+		data-slot="field"
+		data-disabled="${() => (read(props.disabled) === true ? "true" : undefined)}"
+		class="${() => cn("group flex gap-2", horizontal ? "flex-row items-center justify-between" : "flex-col", read(props.class))}"
+	>
+		${props.label === undefined
+        ? null
+        : Label({
+            for: props.ids.control,
+            id: props.ids.label,
+            children: html `${props.label}${props.required === true
+                ? html `<span aria-hidden="true" class="text-destructive">*</span>`
+                : null}`,
+        })}
+		${slot(props.children)}
+		${props.description === undefined
+        ? null
+        : html `<p
+					data-slot="field-description"
+					id="${props.ids.description}"
+					class="text-muted-foreground text-sm"
+				>${props.description}</p>`}
+		<p
+			data-slot="field-error"
+			id="${props.ids.error}"
+			role="alert"
+			class="text-destructive text-sm empty:hidden"
+		>${() => read(props.error) ?? ""}</p>
+	</div>`;
+});
+export const FieldGroup = styledDiv("field-group", "flex w-full flex-col gap-6");
+export const FieldSeparator = styledDiv("field-separator", "bg-border h-px w-full");

package/dist/molecules/InputGroup.d.ts

@@ -0,0 +1,33 @@
+/**
+ * InputGroup — an input with something attached to it.
+ *
+ * A currency prefix, a `.com` suffix, a search icon, a clear button. The group
+ * carries the border and the focus ring; the input inside is stripped bare.
+ *
+ * `focus-within:` is what moves the ring onto the wrapper, so focusing the
+ * input lights up the whole control including the addons. Styling the input's
+ * own `:focus-visible` would draw a ring around the middle third of a control
+ * that visually reads as one box.
+ */
+import { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export interface InputGroupProps {
+    children?: Slot;
+    /** Before the input — an icon or a static prefix. */
+    leading?: Slot;
+    /** After the input — a unit, a button, a spinner. */
+    trailing?: Slot;
+    invalid?: Reactive<boolean>;
+    disabled?: Reactive<boolean>;
+    class?: Reactive<string>;
+}
+/**
+ * Strip the inner input of its own chrome.
+ *
+ * Exported so a caller passing a plain `<input>` rather than nebula's `Input`
+ * can apply it too — without this the input draws a second border inside the
+ * group's, which is the one way this component visibly goes wrong.
+ */
+export declare const inputGroupControlClasses = "flex-1 border-0 bg-transparent px-0 shadow-none outline-none focus-visible:border-0 focus-visible:ring-0 disabled:opacity-100";
+export declare const InputGroup: (props?: InputGroupProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const InputGroupAddon: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/InputGroup.js

@@ -0,0 +1,35 @@
+/**
+ * InputGroup — an input with something attached to it.
+ *
+ * A currency prefix, a `.com` suffix, a search icon, a clear button. The group
+ * carries the border and the focus ring; the input inside is stripped bare.
+ *
+ * `focus-within:` is what moves the ring onto the wrapper, so focusing the
+ * input lights up the whole control including the addons. Styling the input's
+ * own `:focus-visible` would draw a ring around the middle third of a control
+ * that visually reads as one box.
+ */
+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";
+/**
+ * Strip the inner input of its own chrome.
+ *
+ * Exported so a caller passing a plain `<input>` rather than nebula's `Input`
+ * can apply it too — without this the input draws a second border inside the
+ * group's, which is the one way this component visibly goes wrong.
+ */
+export const inputGroupControlClasses = "flex-1 border-0 bg-transparent px-0 shadow-none outline-none focus-visible:border-0 focus-visible:ring-0 disabled:opacity-100";
+export const InputGroup = component((props) => {
+    return html `<div
+		data-slot="input-group"
+		data-disabled="${() => (read(props.disabled) === true ? "" : undefined)}"
+		aria-invalid="${() => (read(props.invalid) === true ? "true" : undefined)}"
+		class="${() => cn("border-input dark:bg-input/30 flex h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow]", "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", `[&_input]:${inputGroupControlClasses.split(" ").join(" [&_input]:")}`, read(props.class))}"
+	>
+		${slot(props.leading)}${slot(props.children)}${slot(props.trailing)}
+	</div>`;
+});
+export const InputGroupAddon = styledDiv("input-group-addon", "text-muted-foreground flex shrink-0 items-center gap-2 [&_svg:not([class*='size-'])]:size-4");

package/dist/molecules/InputOTP.d.ts

@@ -0,0 +1,33 @@
+/**
+ * InputOTP — a one-time code entered one character per box.
+ *
+ * The behaviour users expect from this control is entirely in the edge cases,
+ * and each one is a separate rule:
+ *
+ * - Typing advances to the next box; the last one stays put rather than
+ *   wrapping round to the first.
+ * - Backspace in an empty box clears the *previous* one and moves back, which
+ *   is what makes holding it down erase the whole code.
+ * - Pasting a code fills every box from wherever it was pasted, so the common
+ *   case — copy the code out of the email, click the first box, paste — works.
+ * - `inputmode="numeric"` and `autocomplete="one-time-code"` are what get the
+ *   numeric keypad on mobile and the OS's SMS autofill suggestion. Without the
+ *   second, a user has to leave the app to read the code.
+ *
+ * The joined value is mirrored into a hidden input so the control submits as
+ * one field, rather than six.
+ */
+import { type Reactive } from "../lib/props.js";
+export interface InputOTPProps {
+    /** Number of boxes. Default `6`. */
+    length?: number;
+    name?: string;
+    disabled?: Reactive<boolean>;
+    /** Insert a visual gap after this many boxes. `3` gives `123 456`. */
+    groupAfter?: number;
+    class?: Reactive<string>;
+    onValueChange?: (value: string) => void;
+    /** Fired once every box is filled. */
+    onComplete?: (value: string) => void;
+}
+export declare const InputOTP: (props?: InputOTPProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/InputOTP.js

@@ -0,0 +1,140 @@
+/**
+ * InputOTP — a one-time code entered one character per box.
+ *
+ * The behaviour users expect from this control is entirely in the edge cases,
+ * and each one is a separate rule:
+ *
+ * - Typing advances to the next box; the last one stays put rather than
+ *   wrapping round to the first.
+ * - Backspace in an empty box clears the *previous* one and moves back, which
+ *   is what makes holding it down erase the whole code.
+ * - Pasting a code fills every box from wherever it was pasted, so the common
+ *   case — copy the code out of the email, click the first box, paste — works.
+ * - `inputmode="numeric"` and `autocomplete="one-time-code"` are what get the
+ *   numeric keypad on mobile and the OS's SMS autofill suggestion. Without the
+ *   second, a user has to leave the app to read the code.
+ *
+ * The joined value is mirrored into a hidden input so the control submits as
+ * one field, rather than six.
+ */
+import { component, html, signal } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { uid } from "../lib/id.js";
+import { read, readOr } from "../lib/props.js";
+const slotClasses = "border-input relative flex size-9 items-center justify-center border-y border-r text-center text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md focus:border-ring focus:ring-ring/50 focus:z-10 focus:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50";
+export const InputOTP = component((props) => {
+    const length = props.length ?? 6;
+    const groupId = uid("input-otp");
+    const characters = signal(new Array(length).fill(""));
+    function boxes() {
+        const root = document.getElementById(groupId);
+        if (root === null)
+            return [];
+        const found = [];
+        for (const node of root.querySelectorAll("input[data-otp-index]")) {
+            if (node instanceof HTMLInputElement)
+                found.push(node);
+        }
+        return found;
+    }
+    function focusBox(index) {
+        const target = boxes()[Math.min(Math.max(index, 0), length - 1)];
+        target?.focus();
+        target?.select();
+    }
+    function commit(next) {
+        characters(next);
+        const joined = next.join("");
+        props.onValueChange?.(joined);
+        if (joined.length === length && !next.includes(""))
+            props.onComplete?.(joined);
+    }
+    function write(index, character) {
+        const next = [...characters()];
+        next[index] = character;
+        commit(next);
+    }
+    function onInput(index, event) {
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement))
+            return;
+        // A box already holding a character receives the new one appended; keep
+        // the last, which is what the user just typed.
+        const typed = target.value.slice(-1);
+        target.value = typed;
+        write(index, typed);
+        if (typed !== "" && index < length - 1)
+            focusBox(index + 1);
+    }
+    function onKeyDown(index, event) {
+        if (event.key === "Backspace") {
+            if (characters()[index] === "" && index > 0) {
+                event.preventDefault();
+                write(index - 1, "");
+                focusBox(index - 1);
+            }
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            focusBox(index - 1);
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            focusBox(index + 1);
+        }
+    }
+    function onPaste(index, event) {
+        const pasted = event.clipboardData?.getData("text") ?? "";
+        if (pasted === "")
+            return;
+        event.preventDefault();
+        const next = [...characters()];
+        let cursor = index;
+        for (const character of pasted) {
+            if (cursor >= length)
+                break;
+            next[cursor] = character;
+            cursor += 1;
+        }
+        commit(next);
+        // Reflect into the DOM: the boxes are uncontrolled between keystrokes, so
+        // writing the signal alone would leave the pasted characters invisible.
+        const inputs = boxes();
+        next.forEach((character, position) => {
+            const input = inputs[position];
+            if (input !== undefined)
+                input.value = character;
+        });
+        focusBox(Math.min(cursor, length - 1));
+    }
+    const indices = Array.from({ length }, (_unused, index) => index);
+    return html `<div
+		data-slot="input-otp"
+		id="${groupId}"
+		class="${() => cn("flex items-center gap-2", read(props.class))}"
+	>
+		<div class="flex items-center">
+			${indices.map((index) => html `${props.groupAfter !== undefined &&
+        index > 0 &&
+        index % props.groupAfter === 0
+        ? html `<span aria-hidden="true" class="mx-1 text-muted-foreground">-</span>`
+        : null}<input
+					data-slot="input-otp-slot"
+					data-otp-index="${index}"
+					type="text"
+					inputmode="numeric"
+					autocomplete="${index === 0 ? "one-time-code" : "off"}"
+					maxlength="1"
+					aria-label="${`Character ${index + 1} of ${length}`}"
+					?disabled="${() => readOr(props.disabled, false)}"
+					class="${slotClasses}"
+					@input="${(event) => onInput(index, event)}"
+					@keydown="${(event) => onKeyDown(index, event)}"
+					@paste="${(event) => onPaste(index, event)}"
+				/>`)}
+		</div>
+		<input type="hidden" name="${props.name}" .value="${() => characters().join("")}" />
+	</div>`;
+});

package/dist/molecules/Item.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Item — one row in a list of things.
+ *
+ * The generic list row: a leading media slot, a title and description, and a
+ * trailing action. Sidebar entries, settings rows, search results and command
+ * results are all this shape, and each of them growing its own version is how
+ * a list of things ends up with four different vertical rhythms.
+ *
+ * `ItemContent` takes `min-w-0` so a long title truncates instead of pushing
+ * the trailing action off the row — the single most common bug in a flex row
+ * built by hand.
+ */
+import { type Slot } from "../lib/children.js";
+import { type VariantProps } from "../lib/cva.js";
+import { type Reactive } from "../lib/props.js";
+export declare const itemVariants: (props?: (import("../index.js").VariantSelection<{
+    variant: {
+        default: string;
+        outline: string;
+        muted: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+    };
+}> & import("../index.js").ClassOverrides) | undefined) => string;
+export type ItemVariants = VariantProps<typeof itemVariants>;
+export interface ItemProps {
+    children?: Slot;
+    variant?: Reactive<ItemVariants["variant"]>;
+    size?: Reactive<ItemVariants["size"]>;
+    class?: Reactive<string>;
+}
+export declare const Item: (props?: ItemProps | undefined) => import("@c9up/aurora").TemplateResult;
+export declare const ItemGroup: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const ItemMedia: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const ItemContent: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const ItemTitle: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const ItemDescription: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const ItemActions: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;
+export declare const ItemSeparator: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Item.js

@@ -0,0 +1,48 @@
+/**
+ * Item — one row in a list of things.
+ *
+ * The generic list row: a leading media slot, a title and description, and a
+ * trailing action. Sidebar entries, settings rows, search results and command
+ * results are all this shape, and each of them growing its own version is how
+ * a list of things ends up with four different vertical rhythms.
+ *
+ * `ItemContent` takes `min-w-0` so a long title truncates instead of pushing
+ * the trailing action off the row — the single most common bug in a flex row
+ * built by hand.
+ */
+import { component, html } from "@c9up/aurora";
+import { slot } from "../lib/children.js";
+import { cva } from "../lib/cva.js";
+import { read } from "../lib/props.js";
+import { styledDiv } from "../lib/styled.js";
+export const itemVariants = cva("group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] [a&]:hover:bg-accent/50", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border-border",
+            muted: "bg-muted/50",
+        },
+        size: {
+            default: "gap-4 p-4",
+            sm: "gap-2.5 px-4 py-3",
+        },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+});
+export const Item = component((props) => {
+    return html `<div
+		data-slot="item"
+		class="${() => itemVariants({
+        variant: read(props.variant),
+        size: read(props.size),
+        class: read(props.class),
+    })}"
+	>${slot(props.children)}</div>`;
+});
+export const ItemGroup = styledDiv("item-group", "group/item-group flex flex-col");
+export const ItemMedia = styledDiv("item-media", "flex shrink-0 items-center justify-center gap-2 [&_svg:not([class*='size-'])]:size-4");
+export const ItemContent = styledDiv("item-content", "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none min-w-0");
+export const ItemTitle = styledDiv("item-title", "flex w-fit items-center gap-2 text-sm leading-snug font-medium");
+export const ItemDescription = styledDiv("item-description", "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance");
+export const ItemActions = styledDiv("item-actions", "flex items-center gap-2");
+export const ItemSeparator = styledDiv("item-separator", "bg-border my-0 h-px w-full");

package/dist/molecules/Message.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Message — one turn in a conversation.
+ *
+ * Avatar, author, timestamp and a `Bubble`, laid out in reading order and
+ * mirrored for an outgoing turn. `align: "end"` uses `flex-row-reverse`, so
+ * the avatar moves to the inline end and the whole row follows the writing
+ * direction — the same logical treatment as the bubble itself.
+ *
+ * The timestamp is a `<time datetime>`, always. The visible text is formatted
+ * for the reader and may be relative ("2 min ago"), which a machine cannot
+ * parse; `datetime` carries the ISO instant alongside it so a screen reader,
+ * a scraper or a copy-paste keeps the real value.
+ *
+ * `role="article"` groups the parts, so a screen reader announces the author
+ * once rather than reading a loose avatar, a name, a time and a paragraph as
+ * four unrelated things.
+ */
+import type { Child } from "../lib/children.js";
+import { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+import { type BubbleProps, type BubbleReaction } from "./Bubble.js";
+export interface MessageProps {
+    /** The turn's content. Rendered inside a `Bubble`. */
+    children?: Slot;
+    author?: Child;
+    avatarSrc?: string;
+    /** Initials, when there is no picture. */
+    avatarFallback?: Child;
+    /** A `Date`, or an ISO string. Rendered as `<time datetime>`. */
+    timestamp?: Date | string;
+    /** How the timestamp reads. Defaults to a short local time. */
+    formatTime?: (date: Date) => string;
+    /** `"end"` for the current user's own turn. */
+    align?: BubbleProps["align"];
+    variant?: BubbleProps["variant"];
+    reactions?: readonly BubbleReaction[];
+    /** `Attachment`s, under the bubble. */
+    attachments?: Slot;
+    /** Shown under the bubble in place of a timestamp — "Sending…", "Failed". */
+    status?: Child;
+    class?: Reactive<string>;
+}
+export declare const Message: (props?: MessageProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Message.js

@@ -0,0 +1,82 @@
+/**
+ * Message — one turn in a conversation.
+ *
+ * Avatar, author, timestamp and a `Bubble`, laid out in reading order and
+ * mirrored for an outgoing turn. `align: "end"` uses `flex-row-reverse`, so
+ * the avatar moves to the inline end and the whole row follows the writing
+ * direction — the same logical treatment as the bubble itself.
+ *
+ * The timestamp is a `<time datetime>`, always. The visible text is formatted
+ * for the reader and may be relative ("2 min ago"), which a machine cannot
+ * parse; `datetime` carries the ISO instant alongside it so a screen reader,
+ * a scraper or a copy-paste keeps the real value.
+ *
+ * `role="article"` groups the parts, so a screen reader announces the author
+ * once rather than reading a loose avatar, a name, a time and a paragraph as
+ * four unrelated things.
+ */
+import { component, html } from "@c9up/aurora";
+import { Avatar } from "../atoms/Avatar.js";
+import { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { read } from "../lib/props.js";
+import { Bubble } from "./Bubble.js";
+/** Accept both shapes without making every caller construct a `Date`. */
+function asDate(value) {
+    const date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? undefined : date;
+}
+export const Message = component((props) => {
+    const outgoing = props.align === "end";
+    const time = props.timestamp === undefined ? undefined : asDate(props.timestamp);
+    const timeFormat = new Intl.DateTimeFormat(undefined, { timeStyle: "short" });
+    const hasAvatar = props.avatarSrc !== undefined || props.avatarFallback !== undefined;
+    return html `<div
+		data-slot="message"
+		role="article"
+		data-align="${outgoing ? "end" : "start"}"
+		class="${() => cn("flex w-full items-end gap-2", outgoing ? "flex-row-reverse" : "flex-row", read(props.class))}"
+	>
+		${hasAvatar
+        ? Avatar({
+            src: props.avatarSrc,
+            alt: typeof props.author === "string" ? props.author : "",
+            fallback: props.avatarFallback,
+            class: "size-7 shrink-0",
+        })
+        : null}
+		<div class="${cn("flex min-w-0 flex-1 flex-col gap-1", outgoing ? "items-end" : "items-start")}">
+			${props.author === undefined
+        ? null
+        : html `<span data-slot="message-author" class="text-muted-foreground px-1 text-xs font-medium"
+						>${props.author}</span
+					>`}
+			${Bubble({
+        variant: props.variant,
+        align: props.align,
+        reactions: props.reactions,
+        children: props.children,
+    })}
+			${props.attachments === undefined
+        ? null
+        : html `<div data-slot="message-attachments" class="flex flex-wrap gap-2">
+						${slot(props.attachments)}
+					</div>`}
+			${renderFooter(props, time, timeFormat)}
+		</div>
+	</div>`;
+});
+function renderFooter(props, time, timeFormat) {
+    if (props.status !== undefined) {
+        return html `<span data-slot="message-status" class="text-muted-foreground px-1 text-xs"
+			>${props.status}</span
+		>`;
+    }
+    if (time === undefined)
+        return null;
+    return html `<time
+		data-slot="message-time"
+		datetime="${time.toISOString()}"
+		class="text-muted-foreground px-1 text-xs tabular-nums"
+	>${(props.formatTime ?? ((date) => timeFormat.format(date)))(time)}</time>`;
+}

package/dist/molecules/Pagination.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Pagination — page links for a long list.
+ *
+ * The interesting part is `pageWindow`, which decides which page numbers to
+ * show. Rendering all of them breaks at a few hundred pages; the usual fix is
+ * a fixed window around the current page, which then jitters in width as you
+ * approach either end — the control visibly reflows while you click through
+ * it. `pageWindow` keeps the count constant instead, so the row stays the same
+ * size from page 1 to page 500.
+ *
+ * `aria-current="page"` marks the current page. Without it the only signal is
+ * the highlight, which a screen-reader user does not get.
+ */
+import { type Reactive } from "../lib/props.js";
+export interface PaginationProps {
+    page: Reactive<number>;
+    pageCount: Reactive<number>;
+    /** How many numbered links to show, ellipses included. Default `7`. */
+    window?: number;
+    /** Build an href per page. Omit for a button-driven pagination. */
+    href?: (page: number) => string;
+    onPageChange?: (page: number) => void;
+    class?: Reactive<string>;
+}
+/** `null` marks a gap that renders as an ellipsis. */
+export type PageSlot = number | null;
+/**
+ * Which page numbers to show, at a fixed total width.
+ *
+ * Always the first page, the last page, a run around the current one, and one
+ * or two gaps — adding up to exactly `size` slots wherever the current page
+ * sits. The constant width is the whole reason this is computed rather than a
+ * range being sliced: a window that simply narrows near the ends makes the
+ * control reflow as you click through it, and the buttons move under the
+ * pointer.
+ *
+ * Near an end there is only one gap, so the run is one slot wider to make up
+ * for it. That is the case a naive implementation gets wrong.
+ */
+export declare function pageWindow(page: number, pageCount: number, size?: number): readonly PageSlot[];
+export declare const Pagination: (props?: PaginationProps | undefined) => import("@c9up/aurora").TemplateResult;