@tonycodes-ui/mortar 0.0.0-stage → 0.11.0

package/dist/primitives.d.ts

@@ -0,0 +1,258 @@
+import { type ButtonHTMLAttributes, type InputHTMLAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes, type ReactNode } from "react";
+import { type HeadingLevel } from "./heading.js";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** accent: the brand's accent fill (its accent gradient when it defines one) with on-accent text. */
+    variant?: "primary" | "secondary" | "ghost" | "danger" | "accent";
+    /**
+     * Busy: shows a spinner, sets aria-busy and aria-disabled and ignores
+     * activation. The button stays focusable, so focus is never lost.
+     */
+    loading?: boolean;
+    size?: "sm" | "md" | "lg";
+    /** Decorative icon; the text remains the accessible name. */
+    icon?: ReactNode;
+    iconPosition?: "start" | "end";
+    /** Show only the icon; the children become screen-reader-only text. */
+    iconOnly?: boolean;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface LinkAction {
+    label: string;
+    href: string;
+}
+export declare function ActionLink({ label, href, variant, className, }: LinkAction & {
+    variant?: ButtonProps["variant"];
+    className?: string;
+}): import("react").JSX.Element;
+export interface ButtonGroupItem {
+    label: string;
+    /** Run the item's action. Use href instead for navigation. */
+    onSelect?: () => void;
+    href?: string;
+    icon?: ReactNode;
+    /** Show only the icon; the label remains the accessible name. */
+    iconOnly?: boolean;
+    disabled?: boolean;
+}
+/** Joined row of related secondary actions. Use SegmentedControl to choose one value. */
+export declare function ButtonGroup({ label, items, className, }: {
+    label: string;
+    items: ButtonGroupItem[];
+    className?: string;
+}): import("react").JSX.Element;
+export type Tone = "neutral" | "info" | "success" | "warning" | "danger";
+export declare function Badge({ children, tone, className, }: {
+    children: ReactNode;
+    tone?: Tone;
+    className?: string;
+}): import("react").JSX.Element;
+/** Label, hint and error shared by the text fields. Internal: not exported from the package entry. */
+export interface FieldDescription {
+    label: string;
+    hint?: string;
+    /** Marks the field invalid; the message is announced when it appears. */
+    error?: string;
+    /** On the field's root element. */
+    className?: string;
+}
+/** The field label; a required field adds a decorative marker after the text. */
+export declare function FieldLabel({ htmlFor, label, required, }: {
+    htmlFor: string;
+    label: string;
+    required?: boolean;
+}): import("react").JSX.Element;
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FieldDescription {
+    prefix?: string;
+    suffix?: string;
+    /** Decorative icon inside the field, before the text. */
+    leadingIcon?: ReactNode;
+    /** Decorative icon inside the field, after the text. */
+    trailingIcon?: ReactNode;
+    /** Button or menu attached to the end of the field, e.g. "Sort" or "Copy". */
+    action?: ReactNode;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function Select({ label, options, id, hint, error, className, ...props }: SelectHTMLAttributes<HTMLSelectElement> & FieldDescription & {
+    options: {
+        value: string;
+        label: string;
+    }[];
+}): import("react").JSX.Element;
+/** Groups related fields under a legend; disabled disables every control inside. */
+export declare function Fieldset({ legend, description, disabled, children, className, }: {
+    legend: string;
+    description?: string;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function TextArea({ label, id, hint, error, className, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement> & FieldDescription): import("react").JSX.Element;
+export declare function Checkbox({ label, description, error, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    label: ReactNode;
+    /** Secondary line under the label, announced as the description (the checkbox's hint). */
+    description?: ReactNode;
+    /** Marks the checkbox invalid; the message is announced when it appears. */
+    error?: string;
+}): import("react").JSX.Element;
+export declare function Switch({ label, description, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> & {
+    label: string;
+    /** Secondary line under the label, announced as the description. */
+    description?: ReactNode;
+}): import("react").JSX.Element;
+export declare function RadioGroup({ label, name, value, onChange, options, layout, hint, error, required, id, className, }: {
+    label: string;
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: {
+        value: string;
+        label: string;
+        description?: string;
+        /** CSS colour for the swatches layout; the label stays the accessible name. */
+        swatch?: string;
+        disabled?: boolean;
+    }[];
+    /** Stacked cards, a card grid, or colour swatches. */
+    layout?: "list" | "grid" | "swatches";
+    /** Help under the legend, announced as the group's description. */
+    hint?: string;
+    /**
+     * Marks the group invalid: the message under the legend is announced when
+     * it appears and describes the group, and each radio is aria-invalid.
+     */
+    error?: string;
+    /** Marks every radio required and adds a decorative marker to the legend. */
+    required?: boolean;
+    /** On the fieldset, e.g. the target of an ErrorSummary link. */
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Tabs({ label, value, onChange, items, variant, fullWidth, className, }: {
+    label: string;
+    /** The selected tab's id. A value matching no tab leaves the first tab in the tab order. */
+    value: string;
+    onChange: (value: string) => void;
+    /** Underlined tabs (default) or filled pills. */
+    variant?: "underline" | "pills";
+    /** Stretch the tabs to share the full width. */
+    fullWidth?: boolean;
+    items: {
+        id: string;
+        label: string;
+        content: ReactNode;
+        /** Shown after the label whenever it is defined, including 0. */
+        count?: number | string;
+        icon?: ReactNode;
+    }[];
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Modal({ open, onClose, title, children, actions, size, className, }: {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    actions?: ReactNode;
+    /** "lg" widens the panel for rich content such as a product quick view. */
+    size?: "md" | "lg";
+    /** On the dialog panel. */
+    className?: string;
+}): import("react").JSX.Element;
+export interface DropdownItem {
+    label: string;
+    /** Run an action. Use href instead for navigation. */
+    onSelect?: () => void;
+    href?: string;
+    icon?: ReactNode;
+    description?: string;
+    /** Items sharing a section are grouped under that heading, separated by a divider. */
+    section?: string;
+    danger?: boolean;
+    disabled?: boolean;
+}
+export declare function Dropdown({ label, items, icon, iconOnly, variant, align, header, className, }: {
+    /** Trigger text, and its accessible name when iconOnly. */
+    label: string;
+    items: DropdownItem[];
+    /** Trigger icon, e.g. a "more" ellipsis or an avatar. */
+    icon?: ReactNode;
+    iconOnly?: boolean;
+    variant?: "secondary" | "ghost";
+    align?: "start" | "end";
+    /** Content above the items, e.g. "Signed in as …". */
+    header?: ReactNode;
+    /** On the trigger button. */
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Notice({ title, children, tone, announce, actions, onDismiss, dismissLabel, id, className, }: {
+    title: string;
+    children?: ReactNode;
+    tone?: Tone;
+    /**
+     * Announce the notice to assistive technology when it appears and when its
+     * title changes: politely, or assertively for the danger tone.
+     */
+    announce?: boolean;
+    /** Links or buttons such as "View details". */
+    actions?: ReactNode;
+    /** Called by the dismiss button; focus moves to the next control on the page. */
+    onDismiss?: () => void;
+    /** Accessible name for the dismiss button; defaults to "Dismiss {title}". */
+    dismissLabel?: string;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;
+/** One problem in an ErrorSummary. */
+export interface ErrorSummaryItem {
+    /** The field's error, worded the same as the message under the field. */
+    message: string;
+    /** Link to the field; defaults to `#target`. Omit both for a form-level problem without a link. */
+    href?: string;
+    /**
+     * Id of the field the link focuses. Defaults to the id in an in-page
+     * `href`. For a group (a RadioGroup's fieldset, a CodeInput) the checked
+     * or first enabled control inside takes focus.
+     */
+    target?: string;
+}
+/**
+ * The problems that stopped a form submitting, above the form, each linking
+ * to its field. It is an alert, and it takes focus when it appears and after
+ * every failed submit (`submitCount`), so keyboard and screen reader users
+ * start from the list. Following a link focuses the field without changing the
+ * URL. Renders nothing while `errors` is empty.
+ */
+export declare function ErrorSummary({ errors, title, headingLevel, autoFocus, submitCount, id, className, }: {
+    errors: ErrorSummaryItem[];
+    title?: string;
+    headingLevel?: HeadingLevel;
+    /**
+     * Move focus to the summary when it appears and whenever `submitCount`
+     * changes. Turn off only where focus must stay put; the alert still
+     * announces the summary.
+     */
+    autoFocus?: boolean;
+    /**
+     * Count of failed submits. A change moves focus to the summary again even
+     * when the errors are the same; clearing a fixed field's error does not.
+     */
+    submitCount?: number;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element | null;
+export declare function EmptyState({ title, description, action, icon, dashed, align, headingLevel, children, id, className, }: {
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    /** Decorative illustration or icon above the title. */
+    icon?: ReactNode;
+    /** Draws a dashed-border box, e.g. a "create your first" tile. */
+    dashed?: boolean;
+    /** `start` left-aligns the content for starting-point and template layouts. */
+    align?: "center" | "start";
+    /** Level of the title heading, so the page keeps a correct outline. */
+    headingLevel?: HeadingLevel;
+    /** Extra content after the action, e.g. starting points or recommendations. */
+    children?: ReactNode;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/primitives.js

@@ -0,0 +1,244 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { KitLink } from "./navigation.js";
+import { Fragment, forwardRef, useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import { DialogPanel, DialogTitle, Menu, MenuButton, MenuItems, MenuItem, MenuSection, MenuHeading, MenuSeparator, } from "@headlessui/react";
+import { ChevronDown, Close } from "./icons.js";
+import { headingTag } from "./heading.js";
+import { DialogFrame, FieldFeedback, LinkContent, RequiredMark, Swatch, cx, componentRoot, useComponentName, focusAway, rovingIndex, useDomId, useField, } from "./internal.js";
+export const Button = forwardRef(function Button({ variant = "primary", loading = false, disabled, children, className, type = "button", size = "md", icon, iconPosition = "start", iconOnly = false, onClick, ...props }, ref) {
+    const glyph = icon && (_jsx("span", { className: "m-button-icon", "aria-hidden": "true", children: icon }));
+    return (_jsxs("button", { ...componentRoot("Button"), ...props, ref: ref, type: type, disabled: disabled, "aria-disabled": (loading && !disabled) || props["aria-disabled"], "aria-busy": loading || undefined, onClick: (event) => {
+            // A busy button keeps focus but must not act or submit its form.
+            if (loading)
+                event.preventDefault();
+            else
+                onClick?.(event);
+        }, className: cx("m-button", `m-button-${variant}`, className), "data-size": size === "md" ? undefined : size, "data-icon-only": iconOnly && icon ? true : undefined, children: [loading && _jsx("span", { className: "m-spinner", "aria-hidden": "true" }), iconPosition === "start" && glyph, iconOnly && icon ? (_jsx("span", { className: "m-sr-only", children: children })) : (children), iconPosition === "end" && glyph] }));
+});
+export function ActionLink({ label, href, variant = "primary", className, }) {
+    return (_jsx(KitLink, { ...componentRoot("ActionLink"), className: cx("m-button", `m-button-${variant}`, className), href: href, children: label }));
+}
+/** Joined row of related secondary actions. Use SegmentedControl to choose one value. */
+export function ButtonGroup({ label, items, className, }) {
+    return (_jsx("div", { ...componentRoot("ButtonGroup"), className: cx("m-button-group", className), role: "group", "aria-label": label, children: items.map((item) => {
+            const content = (_jsxs(_Fragment, { children: [item.icon && (_jsx("span", { "aria-hidden": "true", className: "m-button-group-icon", children: item.icon })), !(item.iconOnly && item.icon) && item.label] }));
+            const name = item.iconOnly && item.icon ? item.label : undefined;
+            return item.href && !item.disabled ? (_jsx(KitLink, { href: item.href, "aria-label": name, children: content }, item.label)) : (_jsx("button", { type: "button", "aria-label": name, disabled: item.disabled, onClick: item.onSelect, children: content }, item.label));
+        }) }));
+}
+export function Badge({ children, tone = "neutral", className, }) {
+    return (_jsx("span", { ...componentRoot("Badge"), className: cx("m-badge", className), "data-tone": tone === "neutral" ? undefined : tone, children: children }));
+}
+/** The field label; a required field adds a decorative marker after the text. */
+export function FieldLabel({ htmlFor, label, required, }) {
+    return (_jsxs("label", { htmlFor: htmlFor, children: [label, required && _jsx(RequiredMark, {})] }));
+}
+export const Input = forwardRef(function Input({ label, hint, error, id, prefix, suffix, leadingIcon, trailingIcon, action, className, ...props }, ref) {
+    const { fieldId, messageId, describedBy } = useField({
+        id,
+        hint,
+        error,
+        describedBy: props["aria-describedby"],
+    });
+    return (_jsxs("div", { ...componentRoot("Input"), className: cx("m-field", className), children: [_jsx(FieldLabel, { htmlFor: fieldId, label: label, required: props.required }), _jsxs("div", { className: "m-input-group", "data-invalid": !!error || undefined, "data-leading": leadingIcon ? true : undefined, "data-trailing": trailingIcon ? true : undefined, children: [prefix && _jsx("span", { children: prefix }), leadingIcon && (_jsx("span", { className: "m-input-icon", "aria-hidden": "true", children: leadingIcon })), _jsx("input", { ...props, ref: ref, id: fieldId, "aria-invalid": !!error || props["aria-invalid"], "aria-describedby": describedBy }), trailingIcon && (_jsx("span", { className: "m-input-icon", "aria-hidden": "true", children: trailingIcon })), suffix && _jsx("span", { children: suffix }), action && _jsx("div", { className: "m-input-action", children: action })] }), _jsx(FieldFeedback, { id: messageId, hint: hint, error: error })] }));
+});
+export function Select({ label, options, id, hint, error, className, ...props }) {
+    const { fieldId, messageId, describedBy } = useField({
+        id,
+        hint,
+        error,
+        describedBy: props["aria-describedby"],
+    });
+    const listbox = !!props.multiple || (props.size || 0) > 1;
+    return (_jsxs("div", { ...componentRoot("Select"), className: cx("m-field", className), children: [_jsx(FieldLabel, { htmlFor: fieldId, label: label, required: props.required }), _jsxs("div", { className: "m-select-control", "data-listbox": listbox || undefined, children: [_jsx("select", { ...props, id: fieldId, "aria-invalid": !!error || props["aria-invalid"], "aria-describedby": describedBy, children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }), !listbox && _jsx(ChevronDown, {})] }), _jsx(FieldFeedback, { id: messageId, hint: hint, error: error })] }));
+}
+/** Groups related fields under a legend; disabled disables every control inside. */
+export function Fieldset({ legend, description, disabled, children, className, }) {
+    const id = useId();
+    return (_jsxs("fieldset", { ...componentRoot("Fieldset"), className: cx("m-fieldset", className), disabled: disabled, "aria-describedby": description ? id : undefined, children: [_jsx("legend", { children: legend }), description && _jsx("p", { id: id, children: description }), _jsx("div", { className: "m-fieldset-fields", children: children })] }));
+}
+export function TextArea({ label, id, hint, error, className, ...props }) {
+    const { fieldId, messageId, describedBy } = useField({
+        id,
+        hint,
+        error,
+        describedBy: props["aria-describedby"],
+    });
+    return (_jsxs("div", { ...componentRoot("TextArea"), className: cx("m-field", className), children: [_jsx(FieldLabel, { htmlFor: fieldId, label: label, required: props.required }), _jsx("textarea", { ...props, id: fieldId, "aria-invalid": !!error || props["aria-invalid"], "aria-describedby": describedBy }), _jsx(FieldFeedback, { id: messageId, hint: hint, error: error })] }));
+}
+/**
+ * Label beside a control, with a description line and an error message under
+ * the label, both linked to the control by aria-describedby.
+ */
+function DescribedChoice({ component, input, id, label, description, error, required, describedBy, className, }) {
+    const generated = useId();
+    const fieldId = id || generated;
+    const descriptionId = `${fieldId}-description`;
+    const messageId = `${fieldId}-message`;
+    const ids = [describedBy, description && descriptionId, error && messageId]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    return (_jsxs("div", { ...componentRoot(component), className: cx("m-choice", "m-choice-described", className), children: [input({ id: fieldId, "aria-describedby": ids }), _jsxs("div", { className: "m-choice-text", children: [_jsxs("label", { htmlFor: fieldId, children: [label, required && _jsx(RequiredMark, {})] }), description && _jsx("p", { id: descriptionId, children: description }), _jsx(FieldFeedback, { id: messageId, error: error })] })] }));
+}
+export function Checkbox({ label, description, error, className, ...props }) {
+    const input = useRef(null);
+    // Once an error has shown, keep the described layout: switching back to the
+    // plain label would remount the input and drop focus while the person fixes
+    // it. If the layout changes while the input has focus, focus follows it.
+    const [described, setDescribed] = useState(false);
+    const refocus = useRef(false);
+    if (error && !described) {
+        refocus.current =
+            typeof document !== "undefined" &&
+                !!input.current &&
+                input.current === document.activeElement;
+        setDescribed(true);
+    }
+    useLayoutEffect(() => {
+        if (refocus.current)
+            input.current?.focus();
+        refocus.current = false;
+    }, [described]);
+    if (description || error || described)
+        return (_jsx(DescribedChoice, { component: "Checkbox", id: props.id, label: label, description: description, error: error, required: props.required, describedBy: props["aria-describedby"], className: className, input: (attrs) => (_jsx("input", { ...props, ...attrs, ref: input, "aria-invalid": error ? true : props["aria-invalid"], type: "checkbox" })) }));
+    return (_jsxs("label", { ...componentRoot("Checkbox"), className: cx("m-choice", className), children: [_jsx("input", { ...props, ref: input, type: "checkbox" }), label, props.required && _jsx(RequiredMark, {})] }));
+}
+export function Switch({ label, description, className, ...props }) {
+    if (description)
+        return (_jsx(DescribedChoice, { component: "Switch", id: props.id, label: label, description: description, className: className, input: (attrs) => (_jsx("input", { ...props, ...attrs, type: "checkbox", role: "switch", className: "m-switch" })) }));
+    return (_jsxs("label", { ...componentRoot("Switch"), className: cx("m-choice", className), children: [_jsx("input", { ...props, type: "checkbox", role: "switch", className: "m-switch" }), label] }));
+}
+export function RadioGroup({ label, name, value, onChange, options, layout = "list", hint, error, required, id, className, }) {
+    const { messageId, describedBy } = useField({ id, hint, error });
+    return (_jsxs("fieldset", { ...componentRoot("RadioGroup"), className: cx("m-radio-group", className), "data-layout": layout === "list" ? undefined : layout, id: id, "aria-describedby": describedBy, "data-invalid": error ? true : undefined, children: [_jsxs("legend", { children: [label, required && _jsx(RequiredMark, {})] }), _jsx(FieldFeedback, { id: messageId, hint: hint, error: error }), options.map((o) => (_jsxs("label", { className: "m-radio-card", children: [_jsx("input", { type: "radio", name: name, value: o.value, checked: value === o.value, disabled: o.disabled, required: required, "aria-invalid": error ? true : undefined, onChange: () => onChange(o.value) }), layout === "swatches" ? (_jsx(Swatch, { color: o.swatch, label: o.label })) : (_jsxs("span", { children: [_jsx("strong", { children: o.label }), o.description && _jsx("span", { children: o.description })] }))] }, o.value)))] }));
+}
+/** Arrow keys follow reading direction: in right-to-left text ArrowLeft moves forward. */
+function logicalKey(key, element) {
+    if (getComputedStyle(element).direction !== "rtl")
+        return key;
+    if (key === "ArrowLeft")
+        return "ArrowRight";
+    if (key === "ArrowRight")
+        return "ArrowLeft";
+    return key;
+}
+export function Tabs({ label, value, onChange, items, variant = "underline", fullWidth = false, className, }) {
+    const base = useId();
+    const tabId = (id) => `${base}-${id}-tab`;
+    // The tab in the tab order: the selected one, or the first when none matches.
+    const focusable = items.some((item) => item.id === value)
+        ? value
+        : items[0]?.id;
+    return (_jsxs("div", { ...componentRoot("Tabs"), className: className, children: [_jsx("div", { className: "m-tabs", role: "tablist", "aria-label": label, "data-variant": variant === "underline" ? undefined : variant, "data-full-width": fullWidth || undefined, onKeyDown: (e) => {
+                    const focused = items.findIndex((item) => tabId(item.id) === e.target.id);
+                    const next = rovingIndex(logicalKey(e.key, e.currentTarget), focused >= 0
+                        ? focused
+                        : items.findIndex((item) => item.id === focusable), items.length);
+                    if (next === null)
+                        return;
+                    e.preventDefault();
+                    onChange(items[next].id);
+                    document.getElementById(tabId(items[next].id))?.focus();
+                }, children: items.map((item) => (_jsx("button", { id: tabId(item.id), type: "button", role: "tab", "aria-selected": item.id === value, "aria-controls": `${base}-${item.id}-panel`, tabIndex: item.id === focusable ? 0 : -1, onClick: () => onChange(item.id), children: _jsx(LinkContent, { prefix: "tab", icon: item.icon, label: item.label, count: item.count }) }, item.id))) }), items.map((item) => (_jsx("div", { hidden: item.id !== value, role: "tabpanel", id: `${base}-${item.id}-panel`, "aria-labelledby": tabId(item.id), tabIndex: 0, children: item.content }, item.id)))] }));
+}
+export function Modal({ open, onClose, title, children, actions, size = "md", className, }) {
+    const component = useComponentName("Modal");
+    return (_jsx(DialogFrame, { open: open, onClose: onClose, component: component, children: _jsx("div", { className: "m-dialog-position", children: _jsxs(DialogPanel, { className: cx("m-dialog-panel", className), "data-size": size === "md" ? undefined : size, children: [_jsxs("div", { className: "m-dialog-heading", children: [_jsx(DialogTitle, { children: title }), _jsx(Button, { variant: "ghost", onClick: onClose, "aria-label": "Close dialog", children: "Close" })] }), children, actions && _jsx("div", { className: "m-actions", children: actions })] }) }) }));
+}
+export function Dropdown({ label, items, icon, iconOnly = false, variant = "secondary", align = "end", header, className, }) {
+    const groups = [];
+    for (const item of items) {
+        const last = groups[groups.length - 1];
+        if (last && last.section === item.section)
+            last.items.push(item);
+        else
+            groups.push({ section: item.section, items: [item] });
+    }
+    const entry = (item) => {
+        const content = (_jsxs(_Fragment, { children: [item.icon && (_jsx("span", { className: "m-menu-icon", "aria-hidden": "true", children: item.icon })), item.description ? (_jsxs("span", { className: "m-menu-text", children: [_jsx("span", { children: item.label }), _jsx("small", { children: item.description })] })) : (item.label)] }));
+        return (_jsx(MenuItem, { disabled: item.disabled, children: item.href ? (_jsx(KitLink, { href: item.href, className: item.danger ? "m-error" : "", children: content })) : (_jsx("button", { type: "button", className: item.danger ? "m-error" : "", onClick: item.onSelect, children: content })) }, item.label));
+    };
+    return (_jsxs(Menu, { children: [_jsxs(MenuButton, { ...componentRoot("Dropdown"), className: cx("m-button", `m-button-${variant}`, className), "aria-label": iconOnly && icon ? label : undefined, "data-icon-only": iconOnly && icon ? true : undefined, children: [icon && (_jsx("span", { className: "m-button-icon", "aria-hidden": "true", children: icon })), !(iconOnly && icon) && label, !(iconOnly && icon) && (_jsx("span", { className: "m-button-icon", "aria-hidden": "true", children: _jsx(ChevronDown, {}) }))] }), _jsxs(MenuItems, { anchor: `bottom ${align}`, className: "m-menu", children: [header && _jsx("div", { className: "m-menu-header", children: header }), groups.map((group, index) => group.section ? (_jsxs(Fragment, { children: [index > 0 && _jsx(MenuSeparator, { className: "m-menu-separator" }), _jsxs(MenuSection, { children: [_jsx(MenuHeading, { className: "m-menu-heading", children: group.section }), group.items.map(entry)] })] }, `${group.section}:${index}`)) : (_jsxs(Fragment, { children: [index > 0 && _jsx(MenuSeparator, { className: "m-menu-separator" }), group.items.map(entry)] }, `items:${index}`)))] })] }));
+}
+export function Notice({ title, children, tone = "neutral", announce = false, actions, onDismiss, dismissLabel, id, className, }) {
+    const root = useRef(null);
+    // A status region only announces changes made after it is in the document,
+    // so a polite notice re-inserts its title once it has mounted; the region is
+    // atomic, so the whole notice is read. An alert is announced on insertion.
+    const polite = announce && tone !== "danger";
+    const [live, setLive] = useState(false);
+    useEffect(() => {
+        if (polite)
+            setLive(true);
+    }, [polite]);
+    return (_jsxs("div", { ref: root, id: id, ...componentRoot("Notice"), className: cx("m-notice", className), "data-tone": tone === "neutral" ? undefined : tone, role: announce ? (tone === "danger" ? "alert" : "status") : undefined, "aria-atomic": polite || undefined, "data-dismissible": onDismiss ? true : undefined, children: [_jsx("strong", { children: title }, live ? "live" : "initial"), children && _jsx("div", { children: children }), actions && _jsx("div", { className: "m-notice-actions", children: actions }), onDismiss && (_jsx("button", { type: "button", className: "m-notice-dismiss", "aria-label": dismissLabel ?? `Dismiss ${title}`, onClick: () => {
+                    onDismiss();
+                    focusAway(root.current);
+                }, children: _jsx(Close, {}) }))] }));
+}
+const FOCUSABLE_CONTROL = 'input:not([type="hidden"]):not(:disabled), select:not(:disabled), textarea:not(:disabled), button:not(:disabled), [tabindex]:not([tabindex="-1"])';
+/**
+ * Moves focus to the field an ErrorSummary link names, and scrolls its label
+ * or legend into view with it, so the question is visible with the control.
+ */
+function focusField(target) {
+    const control = target.matches(FOCUSABLE_CONTROL)
+        ? target
+        : (target.querySelector("input:is([type=radio], [type=checkbox]):checked:not(:disabled)") ?? target.querySelector(FOCUSABLE_CONTROL));
+    const focusable = control ?? (target.tabIndex >= -1 ? target : null);
+    const anchor = target instanceof HTMLFieldSetElement
+        ? target.querySelector("legend")
+        : control instanceof HTMLInputElement ||
+            control instanceof HTMLSelectElement ||
+            control instanceof HTMLTextAreaElement
+            ? control.labels?.[0]
+            : null;
+    focusable?.focus({ preventScroll: true });
+    (anchor ?? focusable ?? target).scrollIntoView({ block: "center" });
+}
+/**
+ * The problems that stopped a form submitting, above the form, each linking
+ * to its field. It is an alert, and it takes focus when it appears and after
+ * every failed submit (`submitCount`), so keyboard and screen reader users
+ * start from the list. Following a link focuses the field without changing the
+ * URL. Renders nothing while `errors` is empty.
+ */
+export function ErrorSummary({ errors, title = "There is a problem", headingLevel = 2, autoFocus = true, submitCount, id, className, }) {
+    const root = useRef(null);
+    const titleId = useDomId("m-error-summary-");
+    const shown = errors.length > 0;
+    useEffect(() => {
+        if (shown && autoFocus)
+            root.current?.focus();
+        // Focus only on appearing and on a new submit, never while errors clear.
+    }, [shown, submitCount]);
+    if (!shown)
+        return null;
+    const Heading = headingTag(headingLevel);
+    return (_jsxs("div", { ref: root, id: id, ...componentRoot("ErrorSummary"), className: cx("m-error-summary", className), role: "alert", "aria-labelledby": titleId, tabIndex: -1, children: [_jsx(Heading, { id: titleId, className: "m-error-summary-title", children: title }), _jsx("ul", { children: errors.map((error, index) => {
+                    const href = error.href ?? (error.target ? `#${error.target}` : undefined);
+                    const target = error.target ??
+                        (href?.startsWith("#")
+                            ? decodeURIComponent(href.slice(1))
+                            : undefined);
+                    return (_jsx("li", { children: href ? (_jsx("a", { href: href, onClick: (event) => {
+                                if (!target ||
+                                    event.defaultPrevented ||
+                                    event.button !== 0 ||
+                                    event.metaKey ||
+                                    event.ctrlKey ||
+                                    event.shiftKey ||
+                                    event.altKey)
+                                    return;
+                                const field = event.currentTarget.ownerDocument.getElementById(target);
+                                if (!field)
+                                    return;
+                                event.preventDefault();
+                                focusField(field);
+                            }, children: error.message })) : (error.message) }, `${error.message}:${href}:${index}`));
+                }) })] }));
+}
+export function EmptyState({ title, description, action, icon, dashed, align = "center", headingLevel = 3, children, id, className, }) {
+    const Heading = headingTag(headingLevel);
+    return (_jsxs("div", { id: id, ...componentRoot("EmptyState"), className: cx("m-empty", className), "data-dashed": dashed || undefined, "data-align": align === "start" ? "start" : undefined, children: [icon && (_jsx("span", { className: "m-empty-icon", "aria-hidden": "true", children: icon })), _jsx(Heading, { children: title }), description && _jsx("p", { children: description }), action, children && _jsx("div", { className: "m-empty-extra", children: children })] }));
+}

package/dist/showcase.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+/** Framed product screenshot or illustration for heroes and feature sections. */
+export declare function MockWindow({ id, className, label, address, variant, children, }: {
+    id?: string;
+    className?: string;
+    /** Accessible description of what the mock shows. */
+    label: string;
+    /** Optional URL or file name shown in the title bar. */
+    address?: string;
+    /** browser: title bar with dots. app: title bar without dots. plain: no chrome. phone: a portrait handset frame. */
+    variant?: "browser" | "app" | "plain" | "phone";
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface ChatMessage {
+    from: "user" | "assistant";
+    content: ReactNode;
+}
+/** Static, illustrative chat conversation for marketing a conversational product. */
+export declare function ChatPreview({ id, className, title, status, messages, typing, suggestions, placeholder, assistantName, }: {
+    id?: string;
+    className?: string;
+    title: string;
+    status?: string;
+    messages: ChatMessage[];
+    typing?: boolean;
+    suggestions?: string[];
+    placeholder?: string;
+    assistantName?: string;
+}): import("react").JSX.Element;

package/dist/showcase.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { componentRoot, cx } from "./internal.js";
+/** Framed product screenshot or illustration for heroes and feature sections. */
+export function MockWindow({ id, className, label, address, variant = "browser", children, }) {
+    return (_jsxs("figure", { id: id, className: cx("m-mock-window", className), "data-variant": variant === "browser" ? undefined : variant, "aria-label": label, ...componentRoot("MockWindow"), children: [variant !== "plain" && variant !== "phone" && (_jsxs("div", { className: "m-mock-bar", "aria-hidden": "true", children: [_jsxs("span", { className: "m-mock-dots", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }), address && _jsx("span", { className: "m-mock-address", children: address })] })), _jsx("div", { className: "m-mock-body", children: children })] }));
+}
+/** Static, illustrative chat conversation for marketing a conversational product. */
+export function ChatPreview({ id, className, title, status, messages, typing = false, suggestions = [], placeholder = "Type a message…", assistantName = "Assistant", }) {
+    return (_jsxs("figure", { id: id, className: cx("m-chat-preview", className), "aria-label": `${title} conversation`, ...componentRoot("ChatPreview"), children: [_jsxs("header", { children: [_jsx("span", { className: "m-chat-avatar", "aria-hidden": "true" }), _jsxs("span", { children: [_jsx("strong", { children: title }), status && _jsx("small", { children: status })] })] }), _jsxs("ol", { className: "m-chat-log", children: [messages.map((message, i) => (_jsxs("li", { "data-from": message.from, children: [_jsxs("span", { className: "m-sr-only", children: [message.from === "user" ? "Visitor" : assistantName, ":"] }), _jsx("div", { className: "m-chat-bubble", children: message.content })] }, i))), typing && (_jsx("li", { "data-from": "assistant", children: _jsxs("span", { className: "m-chat-typing", children: [_jsxs("span", { className: "m-sr-only", children: [assistantName, " is typing"] }), _jsx("i", { "aria-hidden": "true" }), _jsx("i", { "aria-hidden": "true" }), _jsx("i", { "aria-hidden": "true" })] }) }))] }), suggestions.length > 0 && (_jsx("ul", { className: "m-chat-suggestions", "aria-label": "Suggested replies", children: suggestions.map((s) => (_jsx("li", { children: s }, s))) })), _jsxs("div", { className: "m-chat-composer", "aria-hidden": "true", children: [_jsx("span", { children: placeholder }), _jsx("span", { className: "m-chat-send" })] })] }));
+}

package/dist/workspace.d.ts

@@ -0,0 +1,80 @@
+import { type ItemGroup } from "./navigation.js";
+import { type ReactNode } from "react";
+import { type HeadingLevel } from "./heading.js";
+export interface SlideOverProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    description?: string;
+    children: ReactNode;
+    actions?: ReactNode;
+    /** Panel width: md (default), lg or xl. */
+    size?: "md" | "lg" | "xl";
+    /** Class on the sliding panel. */
+    className?: string;
+}
+export declare function SlideOver({ open, onClose, title, description, children, actions, size, className, }: SlideOverProps): import("react").JSX.Element;
+export interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    meta?: string;
+    shortcut?: string[];
+    /** Icon or avatar before the label. */
+    icon?: ReactNode;
+    /** [start, end) character range of label to emphasise as the query match. */
+    match?: [number, number];
+    onSelect: () => void;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onClose: () => void;
+    query: string;
+    onQueryChange: (value: string) => void;
+    groups: ItemGroup<CommandItem>[];
+    label?: string;
+    placeholder?: string;
+    /** Announced when no group has items; defaults to "No results for “query”.". */
+    empty?: {
+        title: string;
+        description?: string;
+    };
+    footer?: ReactNode;
+    /** Class on the palette panel. */
+    className?: string;
+}
+/** Controlled ⌘K palette. Filtering and ranking stay with the consumer. */
+export declare function CommandPalette({ open, onClose, query, onQueryChange, groups, label, placeholder, empty, footer, className, }: CommandPaletteProps): import("react").JSX.Element;
+export interface StackedListItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    /**
+     * Second column at the end of the row, e.g. a role and "Last seen 3h ago";
+     * it wraps under the text when narrow. It sits inside the row's link, so it
+     * must not contain links or buttons.
+     */
+    meta?: ReactNode;
+    href?: string;
+}
+export interface StackedListProps {
+    /** Accessible name; defaults to the visible `title`. */
+    label?: string;
+    /** Visible heading above the list. */
+    title?: ReactNode;
+    /** Level of the title, or of the group headings when there is no title. Group headings sit one level below the title. */
+    headingLevel?: HeadingLevel;
+    /** Button or link in the header, e.g. "View all". */
+    action?: ReactNode;
+    /** Rows; with `groups` they render first, ungrouped. */
+    items?: StackedListItem[];
+    /** Sections with sticky headings, e.g. a directory grouped by letter. */
+    groups?: ItemGroup<StackedListItem>[];
+    /** Ends each row that has an `href` with a chevron, so rows read as links. */
+    chevrons?: boolean;
+    id?: string;
+    className?: string;
+}
+export declare function StackedList({ label, title, headingLevel, action, items, groups, chevrons, id, className, }: StackedListProps): import("react").JSX.Element;