@tonycodes-ui/mortar 0.0.0-stage → 0.12.0

package/dist/ecommerce.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState, } from "react";
+import { KitLink } from "./navigation.js";
+import { ActionLink, Button, Checkbox, EmptyState, Modal, } from "./primitives.js";
+import { Avatar, FilterChip } from "./display.js";
+import { ProgressSteps } from "./application.js";
+import { ChevronDown, Star } from "./icons.js";
+import { childLevel, headingTag } from "./heading.js";
+import { AsComponentRoot, Swatch, TermList, componentRoot, cx, } from "./internal.js";
+/** Grid of product cards; each card's name link covers the card. */
+export function ProductList({ label, products, columns = 4, itemHeadingLevel = 3, variant = "plain", id, className, }) {
+    const Heading = headingTag(itemHeadingLevel);
+    const overlay = variant === "overlay";
+    return (_jsx("ul", { id: id, ...componentRoot("ProductList"), className: cx("m-product-list", className), "aria-label": label, "data-columns": columns, "data-variant": variant === "plain" ? undefined : variant, children: products.map((product) => {
+            const text = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "m-product-info", children: [_jsx(Heading, { className: "m-product-name", children: _jsx(KitLink, { href: product.href, children: product.name }) }), product.meta && _jsx("p", { className: "m-product-meta", children: product.meta }), product.description && (_jsx("p", { className: "m-product-summary", children: product.description }))] }), _jsx("p", { className: "m-product-price", children: product.price })] }));
+            return (_jsxs("li", { children: [_jsxs("div", { className: "m-product-image", children: [_jsx("img", { src: product.image.src, alt: product.image.alt, loading: "lazy" }), product.badge && (_jsx("span", { className: "m-product-badge", children: product.badge })), overlay && _jsx("div", { className: "m-product-overlay", children: text })] }), !overlay && text, product.swatches && product.swatches.length > 0 && (_jsx("ul", { className: "m-product-swatches", "aria-label": `${product.name} colours`, children: product.swatches.map((colour) => (_jsx("li", { children: _jsx(Swatch, { color: colour.swatch, label: colour.label }) }, colour.label))) })), product.action && (_jsx("div", { className: "m-product-card-action", children: product.action }))] }, product.id));
+        }) }));
+}
+/** Product page body: gallery, price, rating, option pickers, add to bag and details. */
+export function ProductOverview({ name, price, description, images, rating, options = [], selected = {}, onSelect, onAdd, addLabel = "Add to bag", loading = false, details = [], headingLevel = 1, hideName = false, gallery = "thumbnails", id, className, }) {
+    const [current, setCurrent] = useState(0);
+    // A new image set (another product, or another colour) starts at its first image.
+    const imageKey = images.map((image) => image.src).join("\n");
+    const [shownKey, setShownKey] = useState(imageKey);
+    if (shownKey !== imageKey) {
+        setShownKey(imageKey);
+        setCurrent(0);
+    }
+    const group = useId();
+    const Heading = headingTag(headingLevel);
+    const shown = images[current] ?? images[0];
+    return (_jsxs("div", { id: id, ...componentRoot("ProductOverview"), className: cx("m-product-overview", className), children: [gallery === "grid" ? (_jsx("div", { className: "m-product-gallery", "data-gallery": "grid", children: images.map((image) => (_jsx("div", { className: "m-product-image", children: _jsx("img", { src: image.src, alt: image.alt }) }, image.src))) })) : (_jsxs("div", { className: "m-product-gallery", children: [shown && (_jsx("div", { className: "m-product-image", children: _jsx("img", { src: shown.src, alt: shown.alt }) })), images.length > 1 && (_jsx("div", { className: "m-product-thumbs", role: "group", "aria-label": "Product images", children: images.map((image, index) => (_jsx("button", { type: "button", "aria-pressed": index === current, "aria-label": `Show image ${index + 1} of ${images.length}: ${image.alt}`, onClick: () => setCurrent(index), children: _jsx("img", { src: image.src, alt: "" }) }, image.src))) }))] })), _jsxs("div", { className: "m-product-details", children: [!hideName && _jsx(Heading, { className: "m-product-name", children: name }), _jsx("p", { className: "m-product-price", children: price }), rating && (_jsxs("div", { className: "m-rating", children: [_jsx(Stars, { value: rating.value, label: `Rated ${rating.value} out of 5 from ${rating.count} reviews` }), rating.href ? (_jsxs(KitLink, { href: rating.href, children: [rating.count, " reviews"] })) : (_jsxs("span", { "aria-hidden": "true", children: [rating.count, " reviews"] }))] })), description && (_jsx("div", { className: "m-product-description", children: description })), _jsxs("form", { className: "m-product-form", onSubmit: (event) => {
+                            event.preventDefault();
+                            if (!loading)
+                                onAdd?.();
+                        }, children: [options.map((option) => (_jsxs("fieldset", { className: "m-product-option", "data-swatches": option.values.some((v) => v.swatch) || undefined, children: [_jsx("legend", { children: option.label }), _jsx("div", { children: option.values.map((value) => (_jsxs("label", { "data-disabled": value.disabled || undefined, children: [_jsx("input", { type: "radio", name: `${group}-${option.id}`, value: value.value, checked: selected[option.id] === value.value, disabled: value.disabled, onChange: () => onSelect?.(option.id, value.value) }), value.swatch ? (_jsx(Swatch, { color: value.swatch, label: value.label })) : (_jsx("span", { children: value.label }))] }, value.value))) })] }, option.id))), _jsx(Button, { type: "submit", loading: loading, children: addLabel })] }), details.length > 0 && (_jsx("ul", { className: "m-product-highlights", children: details.map((detail) => (_jsx("li", { children: detail }, detail))) }))] })] }));
+}
+/**
+ * Bag contents with per-line quantity and remove controls. After a removal,
+ * focus moves to the next line's Remove button (the previous one after the
+ * last line), or to the empty state once the bag is empty.
+ */
+export function ShoppingCart({ summary, related, id, className, ...props }) {
+    if (!summary && !related)
+        return _jsx(CartLines, { ...props, id: id, className: className, root: true });
+    return (_jsxs("div", { id: id, ...componentRoot("ShoppingCart"), className: cx("m-cart-layout", className), "data-summary": summary ? true : undefined, children: [_jsx(CartLines, { ...props }), summary && _jsx("div", { className: "m-cart-summary", children: summary }), related && _jsx(CartRelated, { ...related })] }));
+}
+function CartRelated({ title, products, headingLevel = 2, }) {
+    const titleId = useId();
+    const Heading = headingTag(headingLevel);
+    return (_jsxs("section", { className: "m-cart-related", "aria-labelledby": titleId, children: [_jsx(Heading, { id: titleId, className: "m-cart-related-title", children: title }), _jsx(ProductList, { label: title, products: products, itemHeadingLevel: childLevel(headingLevel) })] }));
+}
+function CartLines({ items, onQuantityChange, onRemove, label = "Items in your bag", maxQuantity = 8, headingLevel = 3, empty = {
+    title: "Your bag is empty",
+    description: "Items you add will appear here.",
+}, id, className, root: isRoot = false, }) {
+    const base = useId();
+    const Heading = headingTag(headingLevel);
+    const root = useRef(null);
+    // The line whose Remove button was pressed, until the consumer drops it.
+    const removing = useRef(null);
+    useEffect(() => {
+        const pending = removing.current;
+        if (!pending || items.some((item) => item.id === pending.id))
+            return;
+        removing.current = null;
+        const buttons = root.current?.querySelectorAll(".m-cart-remove");
+        if (buttons?.length)
+            buttons[Math.min(pending.index, buttons.length - 1)].focus();
+        else
+            root.current?.focus();
+    }, [items]);
+    if (!items.length)
+        return (_jsx("div", { id: id, ...componentRoot("ShoppingCart", isRoot), className: cx("m-cart-empty", className), ref: root, tabIndex: -1, children: _jsx(EmptyState, { title: empty.title, description: empty.description, action: empty.action, headingLevel: headingLevel }) }));
+    return (_jsx("ul", { id: id, ...componentRoot("ShoppingCart", isRoot), className: cx("m-cart", className), "aria-label": label, ref: root, children: items.map((item, index) => {
+            const quantityId = `${base}-${item.id}`;
+            const choices = Array.from({ length: Math.max(maxQuantity, item.quantity) }, (_, i) => i + 1);
+            return (_jsxs("li", { children: [_jsx("div", { className: "m-product-image", children: _jsx("img", { src: item.image.src, alt: item.image.alt, loading: "lazy" }) }), _jsxs("div", { className: "m-cart-info", children: [_jsx(Heading, { className: "m-cart-item-title", children: _jsx(KitLink, { href: item.href, children: item.name }) }), item.meta && _jsx("p", { className: "m-product-meta", children: item.meta }), _jsx("p", { className: "m-product-price", children: item.price }), item.stock && _jsx("p", { className: "m-cart-stock", children: item.stock })] }), _jsxs("div", { className: "m-cart-controls", children: [_jsxs("label", { className: "m-sr-only", htmlFor: quantityId, children: ["Quantity, ", item.name] }), _jsxs("div", { className: "m-select-control", children: [_jsx("select", { id: quantityId, value: item.quantity, onChange: (event) => onQuantityChange(item.id, Number(event.target.value)), children: choices.map((n) => (_jsx("option", { value: n, children: n }, n))) }), _jsx(ChevronDown, {})] }), _jsxs("button", { type: "button", className: "m-cart-remove", onClick: () => {
+                                    removing.current = { index, id: item.id };
+                                    onRemove(item.id);
+                                }, children: ["Remove", _jsxs("span", { className: "m-sr-only", children: [" ", item.name] })] })] })] }, item.id));
+        }) }));
+}
+/** Cost breakdown with a distinguished total and a checkout action. */
+export function OrderSummary({ title = "Order summary", lines, total, action, headingLevel = 2, children, id, className, }) {
+    const titleId = useId();
+    const Heading = headingTag(headingLevel);
+    return (_jsxs("section", { id: id, ...componentRoot("OrderSummary"), className: cx("m-order-summary", className), "aria-labelledby": titleId, children: [_jsx(Heading, { id: titleId, className: "m-order-summary-title", children: title }), _jsx(TermList, { items: lines.map((line) => ({
+                    key: line.label,
+                    term: line.hint ? (_jsxs(_Fragment, { children: [line.label, _jsx("span", { className: "m-order-hint", children: line.hint })] })) : (line.label),
+                    details: line.value,
+                })), children: _jsxs("div", { className: "m-order-total", children: [_jsx("dt", { children: total.label }), _jsx("dd", { children: total.value })] }) }), children, action && _jsx("div", { className: "m-order-action", children: action })] }));
+}
+/** Product overview in a dialog, with a link to the full product page. */
+export function ProductQuickView({ open, onClose, href, detailsLabel = "View full details", className, ...product }) {
+    return (_jsx(AsComponentRoot, { name: "ProductQuickView", of: "Modal", children: _jsx(Modal, { open: open, onClose: onClose, title: product.name, size: "lg", children: _jsxs("div", { className: cx("m-quick-view", className), children: [_jsx(ProductOverview, { ...product, hideName: true }), _jsx(ActionLink, { label: detailsLabel, href: href, variant: "ghost" })] }) }) }));
+}
+/**
+ * Collapsible checkbox facets with counts, plus removable chips for active
+ * filters. Every change, Clear all included, calls `onChange` once with the
+ * complete next selection.
+ */
+export function ProductFilters({ facets, selected, onChange, label = "Filters", id, className, }) {
+    const root = useRef(null);
+    const active = facets.flatMap((facet) => (selected[facet.id] || []).map((value) => ({
+        facet,
+        value,
+        label: facet.options.find((option) => option.value === value)?.label ?? value,
+    })));
+    const toggle = (facet, value, on) => {
+        const current = selected[facet] || [];
+        onChange({
+            ...selected,
+            [facet]: on ? [...current, value] : current.filter((v) => v !== value),
+        });
+    };
+    const clearAll = () => {
+        onChange(Object.fromEntries([...Object.keys(selected), ...facets.map((facet) => facet.id)].map((facet) => [facet, []])));
+        // The chips and this button disappear: continue from the first facet.
+        root.current?.querySelector("summary")?.focus();
+    };
+    // A removed chip takes its button with it: focus the chip that takes its
+    // place (or the previous one), else the first facet.
+    const removedChip = useRef(null);
+    const activeKey = active
+        .map((item) => `${item.facet.id}:${item.value}`)
+        .join();
+    useEffect(() => {
+        const index = removedChip.current;
+        if (index === null)
+            return;
+        removedChip.current = null;
+        const buttons = root.current?.querySelectorAll(".m-filter-chips .m-chip button");
+        if (buttons?.length)
+            buttons[Math.min(index, buttons.length - 1)].focus();
+        else
+            root.current?.querySelector("summary")?.focus();
+    }, [activeKey]);
+    return (_jsxs("section", { id: id, ref: root, ...componentRoot("ProductFilters"), className: cx("m-filters", className), "aria-label": label, children: [active.length > 0 && (_jsxs("div", { className: "m-filter-chips", role: "group", "aria-label": "Active filters", children: [active.map((item, index) => (_jsx(FilterChip, { label: item.label, onRemove: () => {
+                            removedChip.current = index;
+                            toggle(item.facet.id, item.value, false);
+                        } }, `${item.facet.id}:${item.value}`))), _jsx("button", { type: "button", className: "m-filter-clear", onClick: clearAll, children: "Clear all" })] })), facets.map((facet) => {
+                const count = (selected[facet.id] || []).length;
+                return (_jsxs("details", { open: true, children: [_jsxs("summary", { children: [facet.label, count > 0 && _jsx("span", { className: "m-filter-active", children: count })] }), _jsxs("fieldset", { children: [_jsx("legend", { className: "m-sr-only", children: facet.label }), facet.options.map((option) => (_jsx(Checkbox, { checked: (selected[facet.id] || []).includes(option.value), onChange: (event) => toggle(facet.id, option.value, event.target.checked), label: _jsxs(_Fragment, { children: [option.label, option.count !== undefined && (_jsxs("span", { className: "m-filter-count", children: ["(", option.count, ")"] }))] }) }, option.value)))] })] }, facet.id));
+            })] }));
+}
+function Stars({ value, label }) {
+    return (_jsx("div", { className: "m-stars", role: "img", "aria-label": label, children: [1, 2, 3, 4, 5].map((n) => (_jsx("span", { "data-filled": value >= n - 0.25 || undefined, children: _jsx(Star, {}) }, n))) }));
+}
+/** Rating summary with a star distribution, followed by individual reviews. */
+export function ProductReviews({ title = "Customer reviews", average, count, distribution, reviews, action, avatars = false, headingLevel = 2, id, className, }) {
+    const base = useId();
+    const Heading = headingTag(headingLevel);
+    const ReviewHeading = headingTag(childLevel(headingLevel));
+    return (_jsxs("section", { id: id, ...componentRoot("ProductReviews"), className: cx("m-reviews", className), "aria-labelledby": base, "data-avatars": avatars || undefined, children: [_jsxs("div", { className: "m-reviews-summary", children: [_jsx(Heading, { id: base, className: "m-reviews-title", children: title }), _jsxs("div", { className: "m-rating", children: [_jsx(Stars, { value: average, label: `Rated ${average} out of 5 from ${count} reviews` }), _jsxs("span", { "aria-hidden": "true", children: ["Based on ", count, " reviews"] })] }), _jsx(TermList, { className: "m-reviews-distribution", items: distribution.map((row) => ({
+                            key: String(row.stars),
+                            term: (_jsxs(_Fragment, { children: [row.stars, " ", row.stars === 1 ? "star" : "stars"] })),
+                            details: (_jsxs(_Fragment, { children: [_jsx("meter", { min: 0, max: count, value: row.count, "aria-label": `${row.stars} ${row.stars === 1 ? "star" : "stars"}: ${row.count} ${row.count === 1 ? "review" : "reviews"}` }), _jsx("span", { children: row.count })] })),
+                        })) }), action] }), _jsx("div", { className: "m-review-list", children: reviews.map((review) => (_jsxs("article", { className: "m-review", "aria-labelledby": `${base}-${review.id}`, children: [_jsxs("header", { children: [avatars && (_jsx(Avatar, { className: "m-review-avatar", name: review.author, src: review.avatar, decorative: true })), _jsx(Stars, { value: review.rating, label: `Rated ${review.rating} out of 5` }), _jsx(ReviewHeading, { id: `${base}-${review.id}`, className: "m-review-title", children: review.title }), _jsxs("p", { className: "m-review-meta", children: [review.author, " \u00B7 ", review.date] })] }), _jsx("div", { className: "m-review-body", children: review.body })] }, review.id))) })] }));
+}
+/** Past orders, each with its summary, status and line items. */
+export function OrderHistory({ orders, headingLevel = 2, empty = {
+    title: "No orders yet",
+    description: "Orders you place will appear here.",
+}, id, className, }) {
+    const base = useId();
+    if (!orders.length)
+        return (_jsx("div", { id: id, ...componentRoot("OrderHistory"), className: cx("m-order-history", className), children: _jsx(EmptyState, { title: empty.title, description: empty.description, action: empty.action, headingLevel: headingLevel }) }));
+    const Heading = headingTag(headingLevel);
+    return (_jsx("div", { id: id, ...componentRoot("OrderHistory"), className: cx("m-order-history", className), children: orders.map((order) => {
+            const titleId = `${base}-${order.id}`;
+            return (_jsxs("section", { className: "m-order", "aria-labelledby": titleId, children: [_jsxs("header", { className: "m-order-header", children: [_jsxs(Heading, { id: titleId, className: "m-order-title", children: ["Order ", order.number] }), _jsx(TermList, { items: [
+                                    { term: "Date placed", details: order.date },
+                                    { term: "Total", details: order.total },
+                                ] }), _jsxs(KitLink, { href: order.href, children: ["View order", _jsxs("span", { className: "m-sr-only", children: [" ", order.number] })] }), order.actions && (_jsx("div", { className: "m-order-actions", children: order.actions }))] }), _jsx("p", { className: "m-order-status", children: order.status }), order.progress && order.progress.length > 0 && (_jsx(ProgressSteps, { className: "m-order-progress", steps: order.progress, variant: "bar", navigation: false, label: `Order ${order.number} progress` })), _jsx("ul", { className: "m-order-items", children: order.items.map((item) => (_jsxs("li", { children: [_jsx("div", { className: "m-product-image", children: _jsx("img", { src: item.image.src, alt: item.image.alt, loading: "lazy" }) }), _jsxs("div", { children: [_jsx("p", { className: "m-order-item-name", children: item.href ? (_jsx(KitLink, { href: item.href, children: item.name })) : (item.name) }), _jsxs("p", { className: "m-product-meta", children: ["Qty ", item.quantity] })] }), _jsx("p", { className: "m-product-price", children: item.price }), item.actions && (_jsx("div", { className: "m-order-item-actions", children: item.actions }))] }, item.id))) })] }, order.id));
+        }) }));
+}

package/dist/feedback.d.ts

@@ -0,0 +1,80 @@
+import { type ReactNode } from "react";
+import { type LinkAction, type Tone } from "./primitives.js";
+export interface ToastAction {
+    label: string;
+    onSelect: () => void;
+}
+export interface ToastItem {
+    id: string;
+    title: string;
+    description?: string;
+    tone?: Tone;
+    action?: ToastAction;
+    /** A second action shown after the first, e.g. Decline next to Accept. */
+    secondaryAction?: ToastAction;
+    /** Avatar or icon shown instead of the tone icon, e.g. who replied. */
+    leading?: ReactNode;
+}
+export declare function Toast({ title, description, tone, action, onDismiss, leading, secondaryAction, className, }: Omit<ToastItem, "id"> & {
+    /** Shows a dismiss button. Focus then moves to the next control, never to the page body. */
+    onDismiss?: () => void;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Controlled toast region. The consumer owns the queue and timeouts. New
+ * toasts are announced once, through two persistent live regions: danger
+ * assertively, every other tone politely.
+ */
+export declare function Toaster({ items, onDismiss, label, id, className, }: {
+    items: ToastItem[];
+    onDismiss: (id: string) => void;
+    label?: string;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, confirmationText, loading, tone, className, }: {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    description: ReactNode;
+    confirmLabel: string;
+    cancelLabel?: string;
+    /** When set, the user must type this value before confirming. */
+    confirmationText?: string;
+    /** Busy confirming: the confirm button keeps focus but ignores activation. */
+    loading?: boolean;
+    /** "danger" (default) for a destructive action; "default" for a primary one. */
+    tone?: "default" | "danger";
+    /** On the dialog panel. */
+    className?: string;
+}): import("react").JSX.Element;
+export declare function SaveBar({ open, message, saveLabel, discardLabel, onSave, onDiscard, loading, id, className, }: {
+    /** Shows the bar. Its message is announced each time it opens. */
+    open: boolean;
+    message?: string;
+    saveLabel?: string;
+    discardLabel?: string;
+    onSave: () => void;
+    onDiscard: () => void;
+    /** Busy saving: Save keeps focus but ignores activation; Discard is disabled. */
+    loading?: boolean;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;
+/** Site-wide announcement bar with an optional link and dismiss button. */
+export declare function Banner({ children, action, onDismiss, label, dismissLabel, tone, variant, placement, id, className, }: {
+    children: ReactNode;
+    action?: LinkAction;
+    onDismiss?: () => void;
+    label?: string;
+    dismissLabel?: string;
+    /** "inverse" (default) flips the colours; "default" uses the page surface; "accent" paints the brand's accent fill (its accent gradient when it defines one) with on-accent text. */
+    tone?: "default" | "inverse" | "accent";
+    /** bar: an edge-to-edge strip. floating: an inset, rounded panel with a shadow. */
+    variant?: "bar" | "floating";
+    /** inline: in the page flow. bottom: fixed to the bottom of the viewport, always with a dismiss button so it never covers content for good. */
+    placement?: "inline" | "bottom";
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/feedback.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { DialogPanel, DialogTitle, Description } from "@headlessui/react";
+import { Button, Input } from "./primitives.js";
+import { KitLink } from "./navigation.js";
+import { Check, Close } from "./icons.js";
+import { DialogFrame, componentRoot, cx, focusAway } from "./internal.js";
+const glyph = {
+    neutral: "i",
+    info: "i",
+    success: _jsx(Check, {}),
+    warning: "!",
+    danger: "!",
+};
+export function Toast({ title, description, tone = "neutral", action, onDismiss, leading, secondaryAction, className, }) {
+    const root = useRef(null);
+    return (_jsxs("div", { ref: root, ...componentRoot("Toast"), className: cx("m-toast", className), "data-tone": tone === "neutral" ? undefined : tone, children: [leading ? (_jsx("span", { className: "m-toast-leading", children: leading })) : (_jsx("span", { className: "m-toast-icon", "aria-hidden": "true", children: glyph[tone] })), _jsxs("div", { children: [_jsx("strong", { children: title }), description && _jsx("p", { children: description })] }), _jsxs("div", { className: "m-actions", children: [action && (_jsx(Button, { variant: "ghost", onClick: action.onSelect, children: action.label })), secondaryAction && (_jsx(Button, { variant: "ghost", onClick: secondaryAction.onSelect, children: secondaryAction.label })), onDismiss && (_jsx(Button, { variant: "ghost", icon: _jsx(Close, {}), iconOnly: true, onClick: () => {
+                            onDismiss();
+                            focusAway(root.current);
+                        }, children: `Dismiss ${title}` }))] })] }));
+}
+const spoken = (items) => items
+    .map((item) => [item.title, item.description].filter(Boolean).join(". "))
+    .join(". ");
+/**
+ * Controlled toast region. The consumer owns the queue and timeouts. New
+ * toasts are announced once, through two persistent live regions: danger
+ * assertively, every other tone politely.
+ */
+export function Toaster({ items, onDismiss, label = "Notifications", id, className, }) {
+    const region = useRef(null);
+    const seen = useRef(null);
+    const [announcement, setAnnouncement] = useState({
+        polite: "",
+        assertive: "",
+        count: 0,
+    });
+    useEffect(() => {
+        const known = seen.current;
+        seen.current = new Set(items.map((item) => item.id));
+        // Toasts present on mount are content, not news.
+        if (!known)
+            return;
+        const fresh = items.filter((item) => !known.has(item.id));
+        if (!fresh.length)
+            return;
+        const urgent = fresh.filter((item) => item.tone === "danger");
+        const calm = fresh.filter((item) => item.tone !== "danger");
+        setAnnouncement((previous) => ({
+            polite: calm.length ? spoken(calm) : "",
+            assertive: urgent.length ? spoken(urgent) : "",
+            count: previous.count + 1,
+        }));
+    }, [items]);
+    return (_jsxs("section", { ref: region, id: id, ...componentRoot("Toaster"), className: cx("m-toaster", className), "aria-label": label, tabIndex: -1, children: [_jsx("ol", { children: items.map(({ id, ...item }) => (_jsx("li", { children: _jsx(Toast, { ...item, onDismiss: () => {
+                            const section = region.current;
+                            const toast = section?.ownerDocument.activeElement?.closest("li");
+                            if (section && toast && section.contains(toast))
+                                focusAway(toast, { scope: section, fallback: section });
+                            onDismiss(id);
+                        } }) }, id))) }), _jsx("div", { className: "m-sr-only", role: "status", children: announcement.polite && (_jsx("span", { children: announcement.polite }, announcement.count)) }), _jsx("div", { className: "m-sr-only", role: "alert", children: announcement.assertive && (_jsx("span", { children: announcement.assertive }, announcement.count)) })] }));
+}
+export function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel = "Cancel", confirmationText, loading = false, tone = "danger", className, }) {
+    const [typed, setTyped] = useState("");
+    useEffect(() => {
+        if (!open)
+            setTyped("");
+    }, [open]);
+    const ready = !confirmationText || typed === confirmationText;
+    const danger = tone === "danger";
+    return (_jsx(DialogFrame, { open: open, onClose: onClose, component: "ConfirmDialog", children: _jsx("div", { className: "m-dialog-position", children: _jsx(DialogPanel, { className: cx("m-dialog-panel", "m-confirm", className), children: _jsxs("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        if (ready && !loading)
+                            onConfirm();
+                    }, children: [_jsxs("div", { className: "m-confirm-body", children: [_jsx(DialogTitle, { children: title }), _jsx(Description, { as: "div", children: description }), confirmationText && (_jsx(Input, { label: `Type ${confirmationText} to confirm`, value: typed, onChange: (e) => setTyped(e.target.value), autoComplete: "off", spellCheck: false }))] }), _jsxs("div", { className: "m-confirm-actions", children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }), _jsx(Button, { type: "submit", variant: danger ? "danger" : "primary", "data-solid": danger || undefined, disabled: !ready, loading: loading, children: confirmLabel })] })] }) }) }) }));
+}
+export function SaveBar({ open, message = "You have unsaved changes.", saveLabel = "Save changes", discardLabel = "Discard", onSave, onDiscard, loading = false, id, className, }) {
+    const messageId = useId();
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ...componentRoot("SaveBar"), id: messageId, role: "status", className: "m-sr-only", children: open ? message : "" }), open && (_jsxs("div", { id: id, className: cx("m-save-bar", className), role: "region", "aria-labelledby": messageId, children: [_jsx("span", { "aria-hidden": "true", children: message }), _jsxs("div", { className: "m-actions", children: [_jsx(Button, { variant: "secondary", onClick: onDiscard, disabled: loading, children: discardLabel }), _jsx(Button, { onClick: onSave, loading: loading, children: saveLabel })] })] }))] }));
+}
+/** Site-wide announcement bar with an optional link and dismiss button. */
+export function Banner({ children, action, onDismiss, label = "Announcement", dismissLabel = "Dismiss announcement", tone = "inverse", variant = "bar", placement = "inline", id, className, }) {
+    const root = useRef(null);
+    const [dismissed, setDismissed] = useState(false);
+    const fixed = placement === "bottom";
+    // A fixed banner hides itself when dismissed, even if the page keeps it mounted.
+    if (dismissed)
+        return null;
+    const dismiss = onDismiss || fixed
+        ? () => {
+            onDismiss?.();
+            focusAway(root.current);
+            if (fixed)
+                setDismissed(true);
+        }
+        : undefined;
+    return (_jsxs("section", { ref: root, id: id, className: cx("m-banner", className), "aria-label": label, "data-tone": tone === "default" ? undefined : tone, "data-variant": variant === "bar" ? undefined : variant, "data-placement": fixed ? "bottom" : undefined, ...componentRoot("Banner"), children: [_jsxs("p", { children: [children, action && (_jsxs(_Fragment, { children: [" ", _jsxs(KitLink, { href: action.href, children: [action.label, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] })] }))] }), dismiss && (_jsx("button", { type: "button", "aria-label": dismissLabel, onClick: dismiss, children: _jsx(Close, {}) }))] }));
+}

package/dist/foundation.d.ts

@@ -0,0 +1,42 @@
+import { type Navigate } from "./navigation.js";
+import { type BrandDefinition } from "./brand.js";
+import { type ReactNode } from "react";
+export type Appearance = "light" | "dark" | "system";
+/**
+ * A built-in brand, or the name of one declared in CSS
+ * (`[data-mortar-brand="name"]`) or through ThemeProvider's `brandTokens`.
+ */
+export type Brand = "neutral" | "green" | (string & {});
+export type Density = "compact" | "comfortable" | "spacious";
+export interface ThemeProviderProps {
+    children: ReactNode;
+    initialAppearance?: Appearance;
+    appearance?: Appearance;
+    onAppearanceChange?: (value: Appearance) => void;
+    /** Connect the application router once for every kit link. A nested provider without it keeps the outer router. */
+    navigate?: Navigate;
+    brand?: Brand;
+    /**
+     * Defines `brand` at runtime from data instead of CSS, e.g. a tenant's
+     * colours. Rendered as a `<style>` beside the provider's content (and
+     * server-rendered); overlays opened inside the provider share it.
+     * Omitted values derive from `primary`.
+     */
+    brandTokens?: BrandDefinition;
+    density?: Density;
+    /**
+     * document writes the root element. container paints a wrapper and leaves
+     * the document unchanged; menus, listboxes and dialogs opened inside it keep
+     * its theme.
+     */
+    scope?: "document" | "container";
+    /** On the container wrapper (container scope only). */
+    className?: string;
+}
+/** One provider per application. Selection never requires a hosted account. */
+export declare function ThemeProvider({ children, initialAppearance, appearance: controlledAppearance, onAppearanceChange, navigate, brand, brandTokens, density, scope, className, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function AppearanceControl({ value, onChange, className, }?: {
+    value?: Appearance;
+    onChange?: (value: Appearance) => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/foundation.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavigationContext } from "./navigation.js";
+import { SegmentedControl } from "./inspection.js";
+import { AsComponentRoot, ThemeScopeContext, componentRoot, } from "./internal.js";
+import { Portal } from "@headlessui/react";
+import { brandToCss } from "./brand.js";
+import { createContext, useContext, useEffect, useLayoutEffect, useState, useSyncExternalStore, } from "react";
+const ThemeContext = createContext(null);
+const DARK = "(prefers-color-scheme: dark)";
+function subscribeToScheme(update) {
+    const media = window.matchMedia(DARK);
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+}
+/**
+ * The system colour scheme. The server snapshot is light, and React hydrates
+ * with it before switching to the real value, so markup always matches.
+ */
+function useSystemDark() {
+    return useSyncExternalStore(subscribeToScheme, () => window.matchMedia(DARK).matches, () => false);
+}
+/**
+ * A body-level element that receives the container's overlays (menus,
+ * listboxes, popovers) so they keep its theme without being clipped by it.
+ */
+function usePortalHost(enabled, attributes) {
+    // Created during the first client render so portals can target it at once.
+    const [target] = useState(() => ({
+        current: typeof document === "undefined" ? null : document.createElement("div"),
+    }));
+    const host = target.current;
+    useLayoutEffect(() => {
+        if (!host || !enabled)
+            return;
+        host.className = "m-theme-scope";
+        for (const [key, value] of Object.entries(attributes))
+            host.setAttribute(key, value);
+    });
+    // Headless UI attaches the host when an overlay opens; remove it with us.
+    useEffect(() => () => host?.remove(), [host]);
+    return target;
+}
+/** One provider per application. Selection never requires a hosted account. */
+export function ThemeProvider({ children, initialAppearance = "system", appearance: controlledAppearance, onAppearanceChange, navigate, brand = "neutral", brandTokens, density = "comfortable", scope = "document", className, }) {
+    const [localAppearance, setLocalAppearance] = useState(initialAppearance);
+    const appearance = controlledAppearance ?? localAppearance;
+    const setAppearance = (value) => {
+        setLocalAppearance(value);
+        onAppearanceChange?.(value);
+    };
+    const systemDark = useSystemDark();
+    const outerNavigate = useContext(NavigationContext);
+    const resolvedAppearance = (appearance === "system" ? (systemDark ? "dark" : "light") : appearance);
+    const attributes = {
+        "data-mortar": "",
+        "data-mortar-brand": brand,
+        "data-mortar-density": density,
+        "data-mortar-appearance": resolvedAppearance,
+    };
+    const host = usePortalHost(scope === "container", attributes);
+    useEffect(() => {
+        if (scope !== "document")
+            return;
+        const element = document.documentElement;
+        const attributes = {
+            "data-mortar": "",
+            "data-mortar-brand": brand,
+            "data-mortar-density": density,
+        };
+        const previous = Object.keys(attributes).map((key) => [key, element.getAttribute(key)]);
+        for (const [key, value] of Object.entries(attributes))
+            element.setAttribute(key, value);
+        return () => {
+            for (const [key, value] of previous)
+                value === null
+                    ? element.removeAttribute(key)
+                    : element.setAttribute(key, value);
+        };
+    }, [brand, density, scope]);
+    useEffect(() => {
+        if (scope !== "document")
+            return;
+        const element = document.documentElement;
+        const previous = element.getAttribute("data-mortar-appearance");
+        element.setAttribute("data-mortar-appearance", resolvedAppearance);
+        return () => {
+            previous === null
+                ? element.removeAttribute("data-mortar-appearance")
+                : element.setAttribute("data-mortar-appearance", previous);
+        };
+    }, [resolvedAppearance, scope]);
+    const brandCss = brandTokens ? brandToCss(brand, brandTokens) : undefined;
+    const theme = (_jsxs(NavigationContext.Provider, { value: navigate ?? outerNavigate, children: [brandCss && (
+            // An ordinary element, not a hoisted resource: React updates its
+            // content when the tokens change and removes it on unmount, and it
+            // is server-rendered. The rule keys on the brand attribute, so
+            // portalled overlays match it wherever they render.
+            _jsx("style", { "data-mortar-brand-style": brand, children: brandCss })), _jsx(ThemeContext.Provider, { value: { appearance, setAppearance, brand, density }, children: children })] }));
+    if (scope === "container")
+        return (_jsx("div", { ...componentRoot("ThemeProvider"), ...attributes, className: className, children: _jsx(ThemeScopeContext.Provider, { value: attributes, children: _jsx(Portal.Group, { target: host, children: theme }) }) }));
+    return theme;
+}
+export function AppearanceControl({ value, onChange, className, } = {}) {
+    const controlled = value !== undefined || onChange !== undefined;
+    if ((value === undefined) !== (onChange === undefined))
+        throw new Error("AppearanceControl requires both value and onChange, or neither.");
+    const context = useContext(ThemeContext);
+    if (!controlled && !context)
+        throw new Error("AppearanceControl requires ThemeProvider");
+    const appearance = controlled ? value : context.appearance;
+    const select = (next) => {
+        if (controlled)
+            onChange?.(next);
+        else
+            context.setAppearance(next);
+    };
+    return (_jsx(AsComponentRoot, { name: "AppearanceControl", of: "SegmentedControl", children: _jsx(SegmentedControl, { label: "Appearance", value: appearance, className: className, options: ["light", "dark", "system"].map((option) => ({
+                value: option,
+                label: option[0].toUpperCase() + option.slice(1),
+            })), onChange: (next) => select(next) }) }));
+}

package/dist/heading.d.ts

@@ -0,0 +1,5 @@
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** The heading element for a level, e.g. `headingTag(2)` is `"h2"`. */
+export declare function headingTag<L extends HeadingLevel>(level: L): `h${L}`;
+/** The level for headings nested under `level`, capped at `max` (default h6). */
+export declare function childLevel(level: HeadingLevel, max?: HeadingLevel): HeadingLevel;

package/dist/heading.js

@@ -0,0 +1,9 @@
+// Shared heading-level helpers. Internal: not exported from the package entry.
+/** The heading element for a level, e.g. `headingTag(2)` is `"h2"`. */
+export function headingTag(level) {
+    return `h${level}`;
+}
+/** The level for headings nested under `level`, capped at `max` (default h6). */
+export function childLevel(level, max = 6) {
+    return Math.min(level + 1, max);
+}

package/dist/icons.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+/**
+ * Decorative SVG on the 20×20 grid. Hidden from assistive technology unless
+ * `decorative` is false; meaning is carried by surrounding text.
+ */
+export declare function Icon({ className, viewBox, fill, stroke, strokeWidth, decorative, focusable, children, }: {
+    className?: string;
+    viewBox?: string;
+    /** SVG fill; `null` omits the attribute (paths set their own). */
+    fill?: string | null;
+    stroke?: string;
+    strokeWidth?: string;
+    /** Adds aria-hidden="true". */
+    decorative?: boolean;
+    /** Keep the SVG out of the tab order (focusable="false"); `true` omits the attribute. */
+    focusable?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function ChevronDown(): import("react").JSX.Element;
+export declare function ChevronLeft(): import("react").JSX.Element;
+export declare function ChevronRight(): import("react").JSX.Element;
+/**
+ * Check mark. The three call sites predate this module and differ:
+ * `option` (listbox/combobox selected option), `list` (CheckList, 16×16 grid,
+ * fill on the path) and `step` (ProgressSteps circles: stroke on the svg,
+ * heavier weight, not aria-hidden because its marker span already is).
+ */
+export declare function Check({ variant, className, }: {
+    variant?: "option" | "list" | "step";
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Close(): import("react").JSX.Element;
+export declare function ArrowUp(): import("react").JSX.Element;
+export declare function ArrowDown(): import("react").JSX.Element;
+export declare function Star(): import("react").JSX.Element;
+export declare function Paperclip(): import("react").JSX.Element;
+/** Generic person silhouette for avatars without a photo (24×24 grid, filled). */
+export declare function Person({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** Table sort indicator; the active direction's chevron is marked data-active. */
+export declare function SortArrows({ direction, }: {
+    direction?: "ascending" | "descending";
+}): import("react").JSX.Element;
+/** Open eye: shown while a password is hidden. */
+export declare function Eye(): import("react").JSX.Element;
+/** Struck-through eye: shown while a password is visible. */
+export declare function EyeOff(): import("react").JSX.Element;
+/** Hollow circle: a requirement that is not met yet. */
+export declare function Circle(): import("react").JSX.Element;