@tonycodes-ui/mortar 0.12.0 → 0.13.0

package/dist/application.d.ts

@@ -3,6 +3,7 @@ import { type ReactNode } from "react";
 import { type Tone } from "./primitives.js";
 import { type SignInProvider } from "./auth.js";
 import { type HeadingLevel } from "./heading.js";
+import { type FlyoutItem } from "./internal.js";
 /**
  * A navigation link; `icon` replaces the default marker in the sidebar. With
  * `children` the item becomes a disclosure: its own `href` is the first link
@@ -55,29 +56,41 @@ export interface StackedShellProps {
     brand: string;
     logo?: ReactNode;
     homeHref?: string;
-    navigation: LinkItem[];
+    /** Top-level links, or labelled groups that open a dropdown panel. */
+    navigation: NavbarItem[];
     actions?: ReactNode;
     /** Page heading shown above the content, e.g. a PageHeading. */
     header?: ReactNode;
     width?: "md" | "lg" | "xl" | "full";
+    /** The bar's surface: default, inverse (the other appearance) or accent (the brand's accent fill). */
+    tone?: NavbarTone;
+    /** A second row of page tabs under the bar, rendered as a TabNav named by `label`. */
+    tabs?: ItemGroup<TabNavItem>;
     children: ReactNode;
     className?: string;
 }
 /** Top navigation with a centred page column: Tailwind's stacked application layout. */
-export declare function StackedShell({ brand, logo, homeHref, navigation, actions, header, width, children, className, }: StackedShellProps): import("react").JSX.Element;
+export declare function StackedShell({ brand, logo, homeHref, navigation, actions, header, width, tone, tabs, children, className, }: StackedShellProps): import("react").JSX.Element;
+/** A labelled group of links that opens a dropdown panel from the bar. */
+export type NavbarGroup = ItemGroup<FlyoutItem>;
+/** A top-level link, or a group; a group holding the current page is marked current. */
+export type NavbarItem = LinkItem | NavbarGroup;
+export type NavbarTone = "default" | "inverse" | "accent";
 export interface NavbarProps {
     brand: string;
     logo?: ReactNode;
     homeHref?: string;
-    /** Top-level links; the navbar has no sub-menus. */
-    items: LinkItem[];
+    /** Top-level links, or labelled groups that open a dropdown panel. */
+    items: NavbarItem[];
     actions?: ReactNode;
+    /** The bar's surface: default, inverse (the other appearance) or accent (the brand's accent fill). */
+    tone?: NavbarTone;
     /** Accessible name of the navigation landmark. */
     label?: string;
     className?: string;
 }
 /** Horizontal application navigation that collapses into a menu on narrow screens. */
-export declare function Navbar({ brand, logo, homeHref, items, actions, label, className, }: NavbarProps): import("react").JSX.Element;
+export declare function Navbar({ brand, logo, homeHref, items, actions, tone, label, className, }: NavbarProps): import("react").JSX.Element;
 export interface BreadcrumbItem {
     label: string;
     href?: string;
@@ -198,6 +211,18 @@ export interface DataTableColumn<T> {
     width?: string;
     /** Clip long values to one line with an ellipsis. */
     truncate?: boolean;
+    /**
+     * How long the column stays as the table narrows (its own width, not the
+     * screen's): `medium` hides below 480px, `low` below 768px. The first
+     * column always shows. Hidden columns leave the accessibility tree too, so
+     * keep what people need in visible columns or on the detail page.
+     */
+    priority?: "high" | "medium" | "low";
+    /**
+     * `end` pins the column to the trailing edge while the table scrolls
+     * sideways, so a row-actions or status column stays reachable.
+     */
+    pin?: "end";
 }
 export interface DataTableProps<T extends {
     id: string;

package/dist/application.js

@@ -5,7 +5,7 @@ import { Button, EmptyState, Input, Notice } from "./primitives.js";
 import { BrandMark, Divider } from "./layout.js";
 import { AuthHeader, ProviderButtons } from "./auth.js";
 import { ArrowDown, ArrowUp, Check, SortArrows } from "./icons.js";
-import { LinkContent, NavGroups, NavTreeLinks, MobileNavDialog, TermList, cx, componentRoot, classedIntroSlots, useDomId, } from "./internal.js";
+import { Flyout, LinkContent, NavGroups, NavTreeLinks, MobileNavDialog, TermList, cx, componentRoot, classedIntroSlots, sectionTone, useDomId, } from "./internal.js";
 function SidebarContent({ brand, logo, workspace, homeHref, navigation, sections = [], footer, label = "Primary", onNavigate, }) {
     return (_jsxs(_Fragment, { children: [brand && (_jsxs(KitLink, { className: "m-workspace", href: homeHref || navigation[0]?.href || "#", children: [_jsx(BrandMark, { logo: logo }), _jsxs("span", { children: [_jsx("strong", { children: brand }), workspace && _jsx("small", { children: workspace })] })] })), _jsxs("nav", { "aria-label": label, children: [_jsx(NavTreeLinks, { items: navigation, marker: true, onNavigate: onNavigate }), _jsx(NavGroups, { groups: sections, marker: true, onNavigate: onNavigate })] }), footer && _jsx("div", { className: "m-user", children: footer })] }));
 }
@@ -29,15 +29,16 @@ export function AppShell({ brand, logo, workspace, homeHref, footer, navigation,
     return (_jsxs("div", { ...componentRoot("AppShell"), className: cx("m-app-shell", className), children: [_jsx(KitLink, { className: "m-skip", href: `#${contentId}`, children: "Skip to content" }), _jsx("aside", { className: "m-sidebar", children: _jsx(SidebarContent, { ...sidebar }) }), _jsxs("div", { className: "m-app-main", children: [_jsxs("header", { className: "m-app-header", children: [_jsx(Button, { variant: "ghost", className: "m-menu-trigger", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(true), children: "Menu" }), _jsx("div", { className: "m-header-context", children: header || workspace || brand }), _jsx("div", { className: "m-actions", children: actions })] }), aside ? (_jsxs("div", { className: "m-app-columns", children: [main, _jsx("aside", { className: "m-app-aside", "aria-label": asideLabel, children: aside })] })) : (main)] }), _jsx(MobileNavDialog, { open: open, onClose: () => setOpen(false), title: brand, children: _jsx(SidebarContent, { ...sidebar, onNavigate: () => setOpen(false) }) })] }));
 }
 /** Top navigation with a centred page column: Tailwind's stacked application layout. */
-export function StackedShell({ brand, logo, homeHref, navigation, actions, header, width = "lg", children, className, }) {
+export function StackedShell({ brand, logo, homeHref, navigation, actions, header, width = "lg", tone, tabs, children, className, }) {
     const contentId = useDomId("m-stacked-");
-    return (_jsxs("div", { ...componentRoot("StackedShell"), className: cx("m-stacked-shell", className), children: [_jsx(KitLink, { className: "m-skip", href: `#${contentId}`, children: "Skip to content" }), _jsx(Navbar, { brand: brand, logo: logo, homeHref: homeHref, items: navigation, actions: actions }), _jsxs("main", { id: contentId, tabIndex: -1, "data-width": width, children: [header && _jsx("div", { className: "m-stacked-header", children: header }), children] })] }));
+    return (_jsxs("div", { ...componentRoot("StackedShell"), className: cx("m-stacked-shell", className), children: [_jsx(KitLink, { className: "m-skip", href: `#${contentId}`, children: "Skip to content" }), _jsx(Navbar, { brand: brand, logo: logo, homeHref: homeHref, items: navigation, actions: actions, tone: tone }), tabs && (_jsx("div", { className: "m-stacked-tabs", children: _jsx(TabNav, { label: tabs.label, items: tabs.items }) })), _jsxs("main", { id: contentId, tabIndex: -1, "data-width": width, children: [header && _jsx("div", { className: "m-stacked-header", children: header }), children] })] }));
 }
 /** Horizontal application navigation that collapses into a menu on narrow screens. */
-export function Navbar({ brand, logo, homeHref = "/", items, actions, label = "Primary", className, }) {
+export function Navbar({ brand, logo, homeHref = "/", items, actions, tone, label = "Primary", className, }) {
     const [open, setOpen] = useState(false);
     const id = useId();
-    return (_jsxs("header", { ...componentRoot("Navbar"), className: cx("m-navbar", className), children: [_jsxs(KitLink, { className: "m-brand", href: homeHref, children: [_jsx(BrandMark, { logo: logo }), brand] }), _jsx(Button, { variant: "ghost", className: "m-navbar-toggle", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen(!open), children: "Menu" }), _jsx("nav", { id: id, "aria-label": label, "data-open": open || undefined, children: items.map((item, index) => (_jsx(KitLink, { href: item.href, "aria-current": item.current ? "page" : undefined, onClick: () => setOpen(false), children: _jsx(LinkContent, { prefix: "nav", icon: item.icon, label: item.label, count: item.count }) }, `${item.label}:${item.href}:${index}`))) }), actions && _jsx("div", { className: "m-actions", children: actions })] }));
+    const close = () => setOpen(false);
+    return (_jsxs("header", { ...componentRoot("Navbar"), className: cx("m-navbar", className), "data-tone": sectionTone(tone), children: [_jsxs(KitLink, { className: "m-brand", href: homeHref, children: [_jsx(BrandMark, { logo: logo }), brand] }), _jsx(Button, { variant: "ghost", className: "m-navbar-toggle", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen(!open), children: "Menu" }), _jsx("nav", { id: id, "aria-label": label, "data-open": open || undefined, children: items.map((item, index) => "items" in item ? (_jsx(Flyout, { label: item.label, items: item.items, onNavigate: close }, `${item.label}:group:${index}`)) : (_jsx(KitLink, { href: item.href, "aria-current": item.current ? "page" : undefined, onClick: close, children: _jsx(LinkContent, { prefix: "nav", icon: item.icon, label: item.label, count: item.count }) }, `${item.label}:${item.href}:${index}`))) }), actions && _jsx("div", { className: "m-actions", children: actions })] }));
 }
 /** Trail to the current page; the item without an href is the current page. */
 export function Breadcrumbs({ items, label = "Breadcrumb", separator = "slash", className, }) {
@@ -86,6 +87,15 @@ export function MetricGroup({ label, items, variant = "shared", className, }) {
             details: (_jsxs(_Fragment, { children: [_jsx("strong", { children: item.value }), item.previous && (_jsxs("span", { className: "m-metric-previous", children: ["from ", item.previous] })), item.change && (_jsxs("span", { className: "m-metric-change", "data-tone": item.tone && item.tone !== "neutral" ? item.tone : undefined, "data-trend": item.trend, children: [item.trend && (_jsxs(_Fragment, { children: [item.trend === "up" ? _jsx(ArrowUp, {}) : _jsx(ArrowDown, {}), _jsx("span", { className: "m-sr-only", children: item.trend === "up" ? "Increased by " : "Decreased by " })] })), item.change] }))] })),
         })) }));
 }
+/** Responsive attributes shared by a column's `col`, header and cells. */
+function columnLayout(col, index) {
+    return {
+        "data-priority": index > 0 && col.priority && col.priority !== "high"
+            ? col.priority
+            : undefined,
+        "data-pin": col.pin,
+    };
+}
 const collator = new Intl.Collator(undefined, {
     numeric: true,
     sensitivity: "base",
@@ -171,12 +181,14 @@ export function DataTable({ caption, columns, rows, selectedIds = [], onSelectio
                             ? selectedIds.filter((rowId) => rowId !== row.id)
                             : [...selectedIds, row.id]) }) })), columns.map((col, index) => {
                     const content = col.truncate ? (_jsx("span", { className: "m-truncate", children: col.render(row) })) : (col.render(row));
-                    return index === 0 ? (_jsx("th", { scope: "row", "data-align": columnAlign(col.align), "data-truncate": col.truncate || undefined, children: href ? (_jsx(KitLink, { className: "m-row-link", href: href, children: content })) : (content) }, col.key)) : (_jsx("td", { "data-align": columnAlign(col.align), "data-truncate": col.truncate || undefined, children: content }, col.key));
+                    return index === 0 ? (_jsx("th", { scope: "row", ...columnLayout(col, index), "data-align": columnAlign(col.align), "data-truncate": col.truncate || undefined, children: href ? (_jsx(KitLink, { className: "m-row-link", href: href, children: content })) : (content) }, col.key)) : (_jsx("td", { ...columnLayout(col, index), "data-align": columnAlign(col.align), "data-truncate": col.truncate || undefined, children: content }, col.key));
                 })] }, row.id));
     };
-    return (_jsxs("section", { id: id, ...componentRoot("DataTable"), className: cx("m-data-table", className), "aria-label": caption, "data-density": density === "default" ? undefined : density, "data-striped": striped || undefined, children: [(toolbar || selectedIds.length > 0) && (_jsx("div", { className: "m-table-toolbar", children: selectedIds.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [selectedIds.length, " selected"] }), _jsxs("div", { className: "m-actions", children: [bulkActions, _jsx(Button, { variant: "ghost", onClick: () => onSelectionChange?.([]), children: "Clear selection" })] })] })) : (toolbar) })), _jsx("p", { className: loading ? "m-table-state" : "m-sr-only", role: "status", "data-loading": loading || undefined, children: loading ? "Loading records…" : "" }), loading ? null : error ? (_jsx(Notice, { title: "Unable to load records", tone: "danger", announce: true, children: error })) : !rows.length ? (_jsx(EmptyState, { title: empty.title, description: empty.description, action: empty.action, headingLevel: headingLevel })) : (_jsx("div", { className: "m-table-scroll", role: "region", "aria-label": `${caption} scroll area`, tabIndex: 0, style: maxHeight ? { maxHeight } : undefined, "data-sticky": maxHeight ? true : undefined, children: _jsxs("table", { children: [_jsx("caption", { className: "m-sr-only", children: caption }), columns.some((col) => col.width) && (_jsxs("colgroup", { children: [onSelectionChange && _jsx("col", { className: "m-table-select-col" }), columns.map((col) => (_jsx("col", { style: col.width ? { width: col.width } : undefined }, col.key)))] })), _jsx("thead", { children: _jsxs("tr", { children: [onSelectionChange && (_jsx("th", { scope: "col", children: _jsx(SelectAll, { checked: allHere, partial: selectedHere.length > 0 && !allHere, onChange: toggleAll }) })), columns.map((col) => {
+    return (_jsxs("section", { id: id, ...componentRoot("DataTable"), className: cx("m-data-table", className), "aria-label": caption, "data-density": density === "default" ? undefined : density, "data-striped": striped || undefined, "data-prioritised": columns.some((col, index) => columnLayout(col, index)["data-priority"])
+            ? true
+            : undefined, children: [(toolbar || selectedIds.length > 0) && (_jsx("div", { className: "m-table-toolbar", children: selectedIds.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [selectedIds.length, " selected"] }), _jsxs("div", { className: "m-actions", children: [bulkActions, _jsx(Button, { variant: "ghost", onClick: () => onSelectionChange?.([]), children: "Clear selection" })] })] })) : (toolbar) })), _jsx("p", { className: loading ? "m-table-state" : "m-sr-only", role: "status", "data-loading": loading || undefined, children: loading ? "Loading records…" : "" }), loading ? null : error ? (_jsx(Notice, { title: "Unable to load records", tone: "danger", announce: true, children: error })) : !rows.length ? (_jsx(EmptyState, { title: empty.title, description: empty.description, action: empty.action, headingLevel: headingLevel })) : (_jsx("div", { className: "m-table-scroll", role: "region", "aria-label": `${caption} scroll area`, tabIndex: 0, style: maxHeight ? { maxHeight } : undefined, "data-sticky": maxHeight ? true : undefined, children: _jsxs("table", { children: [_jsx("caption", { className: "m-sr-only", children: caption }), columns.some((col) => col.width) && (_jsxs("colgroup", { children: [onSelectionChange && _jsx("col", { className: "m-table-select-col" }), columns.map((col, index) => (_jsx("col", { ...columnLayout(col, index), style: col.width ? { width: col.width } : undefined }, col.key)))] })), _jsx("thead", { children: _jsxs("tr", { children: [onSelectionChange && (_jsx("th", { scope: "col", children: _jsx(SelectAll, { checked: allHere, partial: selectedHere.length > 0 && !allHere, onChange: toggleAll }) })), columns.map((col, index) => {
                                         const direction = sort?.key === col.key ? sort.direction : undefined;
-                                        return (_jsx("th", { scope: "col", "data-align": columnAlign(col.align), "aria-sort": col.sortable ? direction || "none" : undefined, children: col.sortable ? (_jsxs("button", { type: "button", className: "m-sort-button", onClick: () => toggleSort(col.key), children: [col.label, _jsx(SortArrows, { direction: direction })] })) : (col.label) }, col.key));
+                                        return (_jsx("th", { scope: "col", ...columnLayout(col, index), "data-align": columnAlign(col.align), "aria-sort": col.sortable ? direction || "none" : undefined, children: col.sortable ? (_jsxs("button", { type: "button", className: "m-sort-button", onClick: () => toggleSort(col.key), children: [col.label, _jsx(SortArrows, { direction: direction })] })) : (col.label) }, col.key));
                                     })] }) }), groupBy ? (groupRows(rows, visibleRows, groupBy).map(([label, group]) => (_jsxs("tbody", { children: [_jsx(TableGroupRow, { label: label, span: span }), group.map(renderRow)] }, label)))) : (_jsx("tbody", { children: visibleRows.map(renderRow) }))] }) })), footer && _jsx("div", { className: "m-table-footer", children: footer })] }));
 }
 /** Plain semantic table for documents, settings summaries and comparisons without row actions. */

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export type { ThemeProviderProps, Appearance, Brand, Density, } from "./foundati
 export { Button, ButtonGroup, ActionLink, Input, Select, TextArea, Checkbox, Fieldset, RadioGroup, Switch, Badge, Tabs, Modal, Dropdown, Notice, EmptyState, ErrorSummary, } from "./primitives.js";
 export type { ButtonProps, ButtonGroupItem, DropdownItem, ErrorSummaryItem, InputProps, LinkAction, Tone, } from "./primitives.js";
 export { AppShell, PageHeading, MetricGroup, DataTable, Table, Pagination, SettingsSection, ActivityFeed, SignInPanel, Sidebar, Navbar, StackedShell, Breadcrumbs, ProgressSteps, TabNav, ActionPanel, } from "./application.js";
-export type { AppShellProps, NavigationItem, DataTableProps, DataTableColumn, TableSort, SortDirection, SignInProvider, SidebarProps, BreadcrumbItem, ProgressStep, TabNavItem, StackedShellProps, NavbarProps, BreadcrumbsProps, TabNavProps, ProgressStepsProps, ActionPanelProps, PageHeadingProps, MetricGroupProps, TableProps, PaginationProps, SettingsSectionProps, ActivityFeedProps, SignInPanelProps, } from "./application.js";
+export type { AppShellProps, NavigationItem, DataTableProps, DataTableColumn, TableSort, SortDirection, SignInProvider, SidebarProps, BreadcrumbItem, ProgressStep, TabNavItem, StackedShellProps, NavbarProps, NavbarItem, NavbarGroup, NavbarTone, BreadcrumbsProps, TabNavProps, ProgressStepsProps, ActionPanelProps, PageHeadingProps, MetricGroupProps, TableProps, PaginationProps, SettingsSectionProps, ActivityFeedProps, SignInPanelProps, } from "./application.js";
 export { AuthLayout, ProviderButtons, PasswordInput, CodeInput, } from "./auth.js";
 export type { AuthLayoutProps, ProviderButtonsProps, PasswordInputProps, PasswordRequirement, PasswordStrength, CodeInputProps, } from "./auth.js";
 export { MarketingHeader, MarketingPage, Hero, FeatureGrid, FeatureSection, ProcessSteps, Testimonial, LogoCloud, Pricing, FAQ, CallToAction, Footer, HeaderSection, ContentSection, } from "./marketing.js";

package/dist/inspection.js

@@ -1,9 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
 import { KitLink } from "./navigation.js";
 import { componentRoot, cx, useComponentName } from "./internal.js";
 export function SegmentedControl({ label, value, options, onChange, className, }) {
     const name = useComponentName("SegmentedControl");
-    return (_jsx("div", { ...componentRoot(name), className: cx("m-segmented", className), role: "group", "aria-label": label, children: options.map((option) => (_jsx("button", { type: "button", "aria-pressed": value === option.value, onClick: () => onChange(option.value), children: option.label }, option.value))) }));
+    const group = useRef(null);
+    // When the options scroll (narrow screens), keep the selected one in view,
+    // on mount and on change. Only the control scrolls, never the page.
+    useLayoutEffect(() => {
+        const root = group.current;
+        const selected = root?.querySelector('[aria-pressed="true"]');
+        if (!root || !selected || root.scrollWidth <= root.clientWidth)
+            return;
+        const outer = root.getBoundingClientRect();
+        const inner = selected.getBoundingClientRect();
+        if (inner.left < outer.left)
+            root.scrollLeft -= outer.left - inner.left;
+        else if (inner.right > outer.right)
+            root.scrollLeft += inner.right - outer.right;
+    }, [value]);
+    return (_jsx("div", { ref: group, ...componentRoot(name), className: cx("m-segmented", className), role: "group", "aria-label": label, children: options.map((option) => (_jsx("button", { type: "button", "aria-pressed": value === option.value, onClick: () => onChange(option.value), children: option.label }, option.value))) }));
 }
 /** A scrollable code sample in a figure; the caption names the figure. */
 export function CodeBlock({ code, label = "Code", className, }) {

package/dist/internal.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes, type RefObject, type ReactNode } from "react";
-import { type ItemGroup } from "./navigation.js";
+import { type ItemGroup, type LinkItem } from "./navigation.js";
 import { type LinkAction } from "./primitives.js";
 import { type HeadingLevel } from "./heading.js";
 /**
@@ -512,3 +512,17 @@ export declare function classedIntroSlots(props: IntroProps, titleClassName: str
  * or the one before it, searching up through the ancestors that remain.
  */
 export declare function focusAfterRemoval(element: HTMLElement): void;
+/** An item in a flyout panel; `current` marks the page you are on. */
+export type FlyoutItem = Pick<LinkItem, "label" | "href" | "description" | "icon" | "current">;
+/**
+ * A labelled group of links in a header that opens an anchored panel
+ * (MarketingHeader and Navbar). The group is marked current when one of its
+ * items is the current page.
+ */
+export declare function Flyout({ label, items, footer, layout, onNavigate, }: {
+    label: string;
+    items: FlyoutItem[];
+    footer?: LinkAction[];
+    layout?: "list" | "columns" | "full";
+    onNavigate: () => void;
+}): import("react").JSX.Element;

package/dist/internal.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // Shared building blocks for the kit's components. Internal: nothing here is
 // exported from the package entry, so these can change without a release note.
 import { Fragment, createContext, createElement, useContext, useEffect, useId, useState, cloneElement, isValidElement, } from "react";
-import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
+import { CloseButton, Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, } from "@headlessui/react";
 import { KitLink } from "./navigation.js";
+import { ChevronDown } from "./icons.js";
 import { ActionLink, Button } from "./primitives.js";
 import { headingTag } from "./heading.js";
 /**
@@ -330,3 +331,13 @@ export function focusAfterRemoval(element) {
         }
     });
 }
+/**
+ * A labelled group of links in a header that opens an anchored panel
+ * (MarketingHeader and Navbar). The group is marked current when one of its
+ * items is the current page.
+ */
+export function Flyout({ label, items, footer = [], layout = "list", onNavigate, }) {
+    const dataLayout = layout === "list" ? undefined : layout;
+    const current = items.some((item) => item.current);
+    return (_jsxs(Popover, { className: "m-flyout", "data-current": current || undefined, "data-layout": dataLayout, children: [_jsxs(PopoverButton, { className: "m-flyout-trigger", children: [label, _jsx(ChevronDown, {})] }), _jsxs(PopoverPanel, { anchor: "bottom", className: "m-flyout-panel", "data-layout": dataLayout, children: [_jsx("ul", { children: items.map((item, index) => (_jsx("li", { children: _jsxs(CloseButton, { as: KitLink, href: item.href, "aria-current": item.current ? "page" : undefined, onClick: onNavigate, children: [item.icon && (_jsx("span", { className: "m-flyout-icon", "aria-hidden": "true", children: item.icon })), _jsxs("span", { className: "m-flyout-text", children: [_jsx("strong", { children: item.label }), item.description && _jsx("span", { children: item.description })] })] }) }, `${item.label}:${item.href}:${index}`))) }), footer.length > 0 && (_jsx("div", { className: "m-flyout-footer", children: footer.map((link, index) => (_jsx(CloseButton, { as: KitLink, href: link.href, onClick: onNavigate, children: link.label }, `${link.label}:${link.href}:${index}`))) }))] })] }));
+}

package/dist/marketing.d.ts

@@ -1,9 +1,10 @@
-import { type IconLink, type ItemGroup, type LinkItem } from "./navigation.js";
+import { type IconLink, type ItemGroup } from "./navigation.js";
 import { type ReactNode } from "react";
 import { type LinkAction } from "./primitives.js";
 import { type SectionTone } from "./layout.js";
 import { type HeadingLevel } from "./heading.js";
-export type FlyoutItem = Pick<LinkItem, "label" | "href" | "description" | "icon">;
+import { type FlyoutItem } from "./internal.js";
+export type { FlyoutItem } from "./internal.js";
 /** A header link, or a labelled group that opens a flyout panel. */
 export type HeaderLink = LinkAction | (ItemGroup<FlyoutItem> & {
     footer?: LinkAction[];

package/dist/marketing.js

@@ -1,18 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IconLinks, KitLink, } from "./navigation.js";
 import { useId, useState } from "react";
-import { CloseButton, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, } from "@headlessui/react";
+import { DialogPanel, DialogTitle } from "@headlessui/react";
 import { ActionLink, Button } from "./primitives.js";
 import { BrandMark, Prose } from "./layout.js";
 import { SegmentedControl } from "./inspection.js";
 import { ChevronDown } from "./icons.js";
 import { StatGroup } from "./marketing-sections.js";
 import { childLevel, headingTag } from "./heading.js";
-import { ActionLinks, DialogFrame, TermList, TitledIntro, cx, componentRoot, titledIntroSlots, sectionTone, useDomId, } from "./internal.js";
-function Flyout({ label, items, footer = [], layout = "list", onNavigate, }) {
-    const dataLayout = layout === "list" ? undefined : layout;
-    return (_jsxs(Popover, { className: "m-flyout", "data-layout": dataLayout, children: [_jsxs(PopoverButton, { className: "m-flyout-trigger", children: [label, _jsx(ChevronDown, {})] }), _jsxs(PopoverPanel, { anchor: "bottom", className: "m-flyout-panel", "data-layout": dataLayout, children: [_jsx("ul", { children: items.map((item, index) => (_jsx("li", { children: _jsxs(CloseButton, { as: KitLink, href: item.href, onClick: onNavigate, children: [item.icon && (_jsx("span", { className: "m-flyout-icon", "aria-hidden": "true", children: item.icon })), _jsxs("span", { className: "m-flyout-text", children: [_jsx("strong", { children: item.label }), item.description && _jsx("span", { children: item.description })] })] }) }, `${item.label}:${item.href}:${index}`))) }), footer.length > 0 && (_jsx("div", { className: "m-flyout-footer", children: footer.map((link, index) => (_jsx(CloseButton, { as: KitLink, href: link.href, onClick: onNavigate, children: link.label }, `${link.label}:${link.href}:${index}`))) }))] })] }));
-}
+import { ActionLinks, DialogFrame, Flyout, TermList, TitledIntro, cx, componentRoot, titledIntroSlots, sectionTone, useDomId, } from "./internal.js";
 export function MarketingHeader({ brand, tagline, homeHref = "/", logo, links, action, controls, layout = "inline", mobileMenu = "inline", className, id, }) {
     const [open, setOpen] = useState(false);
     // Generated so two headers on one page keep distinct, valid references.

package/dist/primitives.js

@@ -80,14 +80,16 @@ function DescribedChoice({ component, input, id, label, description, error, requ
         .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.
+/**
+ * Keeps a choice in the described layout once it has had a description or
+ * error. Switching back to the plain label would remount the input and drop
+ * focus mid-interaction (for example a description that changes with the
+ * value). If the layout changes while the input has focus, focus follows it.
+ */
+function useDescribedLayout(active, input) {
     const [described, setDescribed] = useState(false);
     const refocus = useRef(false);
-    if (error && !described) {
+    if (active && !described) {
         refocus.current =
             typeof document !== "undefined" &&
                 !!input.current &&
@@ -98,15 +100,22 @@ export function Checkbox({ label, description, error, className, ...props }) {
         if (refocus.current)
             input.current?.focus();
         refocus.current = false;
-    }, [described]);
-    if (description || error || described)
+    }, [described, input]);
+    return described;
+}
+export function Checkbox({ label, description, error, className, ...props }) {
+    const input = useRef(null);
+    const described = useDescribedLayout(!!(description || error), input);
+    if (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] }));
+    const input = useRef(null);
+    const described = useDescribedLayout(!!description, input);
+    if (described)
+        return (_jsx(DescribedChoice, { component: "Switch", id: props.id, label: label, description: description, className: className, input: (attrs) => (_jsx("input", { ...props, ...attrs, ref: input, type: "checkbox", role: "switch", className: "m-switch" })) }));
+    return (_jsxs("label", { ...componentRoot("Switch"), className: cx("m-choice", className), children: [_jsx("input", { ...props, ref: input, 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 });

package/docs/agents.md

@@ -94,27 +94,30 @@ Add `--json` for machine-readable output. `mortar audit` exits with status 1 whe
 
 `audit_app` reads the application's files and never changes them. It checks against the contracts of the Mortar version installed in the app (or, for releases older than this tooling, against the tool's own catalogue, and says so).
 
-| Rule                     | Severity | Finds                                                                                                                                                                                                                                                       |
-| ------------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `not-declared`           | error    | Mortar imported but missing from package.json                                                                                                                                                                                                               |
-| `not-installed`          | error    | Mortar imported but not in node_modules                                                                                                                                                                                                                     |
-| `version-mismatch`       | error    | The installed version does not satisfy the package.json range                                                                                                                                                                                               |
-| `unknown-export`         | error    | A named import the installed version does not export, with the replacement for names removed in 0.6                                                                                                                                                         |
-| `deep-import`            | error    | Imports or aliases into the package's `src` or `dist`                                                                                                                                                                                                       |
-| `unknown-prop`           | error    | A prop the component's contract does not declare, with the 0.6 rename where there is one                                                                                                                                                                    |
-| `invalid-value`          | error    | A literal outside the prop's declared union, such as `layout="centered"` (now `center`)                                                                                                                                                                     |
-| `css-override`           | error    | Consumer CSS selecting Mortar's `.m-*` classes or `[data-m-component]`                                                                                                                                                                                      |
-| `class-override`         | error    | A Tailwind arbitrary variant that targets `.m-*` classes, such as `[&_.m-button]:rounded-none`                                                                                                                                                              |
-| `local-copy`             | error    | A copy of a Mortar source file, or code rendering Mortar's component marker                                                                                                                                                                                 |
-| `missing-styles`         | error    | No import of `@tonycodes-ui/mortar/styles.css`                                                                                                                                                                                                              |
-| `styles-order`           | warning  | Mortar's styles imported before Tailwind                                                                                                                                                                                                                    |
-| `missing-theme-provider` | warning  | Mortar components rendered without a `ThemeProvider`                                                                                                                                                                                                        |
-| `kit-class`              | warning  | Mortar-internal class names on the app's own markup                                                                                                                                                                                                         |
-| `raw-colour`             | warning  | Hex, `rgb()`/`oklch()` colours or Tailwind palette classes in files that render Mortar components, except where they define a brand (`brandTokens`, `brandToCss`/`brandToStyle`/`registerBrand` arguments, `BrandDefinition` objects, `--m-brand-*` values) |
-| `limited-data`           | info     | The installed release has no agent data, so a newer catalogue was used                                                                                                                                                                                      |
+| Rule                     | Severity | Finds                                                                                                                                                                                                                                                                                                                                       |
+| ------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `not-declared`           | error    | Mortar imported but missing from package.json                                                                                                                                                                                                                                                                                               |
+| `not-installed`          | error    | Mortar imported but not in node_modules                                                                                                                                                                                                                                                                                                     |
+| `version-mismatch`       | error    | The installed version does not satisfy the package.json range                                                                                                                                                                                                                                                                               |
+| `unknown-export`         | error    | A named import the installed version does not export, with the replacement for names removed in 0.6                                                                                                                                                                                                                                         |
+| `deep-import`            | error    | Imports or aliases into the package's `src` or `dist`                                                                                                                                                                                                                                                                                       |
+| `unknown-prop`           | error    | A prop the component's contract does not declare, with the 0.6 rename where there is one                                                                                                                                                                                                                                                    |
+| `invalid-value`          | error    | A literal outside the prop's declared union, such as `layout="centered"` (now `center`)                                                                                                                                                                                                                                                     |
+| `css-override`           | error    | Consumer CSS selecting Mortar's `.m-*` classes or `[data-m-component]`                                                                                                                                                                                                                                                                      |
+| `class-override`         | error    | A Tailwind arbitrary variant that targets `.m-*` classes, such as `[&_.m-button]:rounded-none`                                                                                                                                                                                                                                              |
+| `local-copy`             | error    | A copy of a Mortar source file, or code rendering Mortar's component marker                                                                                                                                                                                                                                                                 |
+| `raw-element`            | error    | A raw `<table>`, `<select>`, `<textarea>`, `<dialog>`, `<progress>` or `<input>` (by type; not `hidden`, `file`, `range`, `color` or `image`) anywhere in an app that uses Mortar, naming the component to use instead. A raw `<button>` is a warning. The mapping comes from each contract's `replaces` field, so new components extend it |
+| `missing-styles`         | error    | No import of `@tonycodes-ui/mortar/styles.css`                                                                                                                                                                                                                                                                                              |
+| `styles-order`           | warning  | Mortar's styles imported before Tailwind                                                                                                                                                                                                                                                                                                    |
+| `missing-theme-provider` | warning  | Mortar components rendered without a `ThemeProvider`                                                                                                                                                                                                                                                                                        |
+| `kit-class`              | warning  | Mortar-internal class names on the app's own markup                                                                                                                                                                                                                                                                                         |
+| `raw-colour`             | warning  | Hex, `rgb()`/`oklch()` colours or Tailwind palette classes in files that render Mortar components, except where they define a brand (`brandTokens`, `brandToCss`/`brandToStyle`/`registerBrand` arguments, `BrandDefinition` objects, `--m-brand-*` values)                                                                                 |
+| `limited-data`           | info     | The installed release has no agent data, so a newer catalogue was used                                                                                                                                                                                                                                                                      |
 
 The audit is a fast scanner, not a type checker. It does not see props passed through a spread (`{...props}`), components re-exported or wrapped under another name, class names built at runtime, or markup in `.vue`, `.svelte`, `.astro` or `.html` files. Run the app's typecheck and build as well.
 
+A clean audit means the audit found none of the problems above. It is not proof that a page is built only from Mortar components: hand-written layout, typography or animation in the app's own markup is invisible to it unless it touches Mortar's classes or colours. Do not report a passing audit as that proof. To show a page is composed from the kit, point to the components it renders (each root carries `data-m-component`) and to [what you can extend](theming.md#what-you-can-extend).
+
 ## Agent skill
 
 [`skills/mortar/SKILL.md`](../skills/mortar/SKILL.md) is a ready-made skill with these workflow defaults. For Claude Code, install it once:

package/docs/theming.md

@@ -107,7 +107,7 @@ tenant.theme = {
 };
 ```
 
-ThemeProvider renders the brand as a `<style>` element beside its content. It is included in server-rendered HTML, so there is no unstyled flash; it updates when the tokens change and is removed with the provider. Overlays opened inside the provider share it, because the rule matches the brand attribute they carry. Brand names may contain only letters, digits and hyphens. Every value is checked, and anything else throws an error that names the key (such as `dark.accent`), so tenant data cannot inject CSS and a value of the wrong kind cannot fail silently:
+ThemeProvider renders the brand as an inline `<style>` element beside its content, so it needs a Content Security Policy that allows inline styles (see [Under a strict Content Security Policy](#under-a-strict-content-security-policy)). It is included in server-rendered HTML, so there is no unstyled flash; it updates when the tokens change and is removed with the provider. Overlays opened inside the provider share it, because the rule matches the brand attribute they carry. Brand names may contain only letters, digits and hyphens. Every value is checked, and anything else throws an error that names the key (such as `dark.accent`), so tenant data cannot inject CSS and a value of the wrong kind cannot fail silently:
 
 - **Colours** are hex, a colour name (including `transparent` and `currentcolor`), or `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hwb()`, `lab()`, `lch()`, `oklab()`, `oklch()`, `color()`, `color-mix()`, `light-dark()` or `var(--name)`. Arguments may nest those functions and `calc()`, `min()`, `max()` or `clamp()`. A gradient, `url()`, top-level `calc()`, `attr()` or `image-set()` is rejected.
 - **`accentGradient`** is a gradient whose stops follow the colour rules (see [Accent gradients](#accent-gradients)).
@@ -132,10 +132,81 @@ brandToStyle(theme); // inline custom properties for one element
 
 Inline custom properties apply only to that element's subtree. Menus and dialogs portal outside it, so prefer `brandTokens` or `registerBrand` for anything with overlays.
 
+### Under a strict Content Security Policy
+
+`brandTokens` and `registerBrand` add an inline `<style>` element. Under a policy of `style-src 'self'` without `'unsafe-inline'`, the browser blocks it. The page still renders and `data-mortar-brand` is still set, but no `--m-brand-*` property applies, so the brand silently falls back to Mortar's defaults. The console shows a `style-src` violation. A server-rendered `style` attribute, for example from `brandToStyle` on the server, is blocked in the same way (`style-src-attr`).
+
+**For brands you know at build time, ship the brand as a stylesheet.** `brandToCss` returns the same rule `brandTokens` injects. Write it into your CSS at build time, import it after Mortar's styles, and give ThemeProvider the brand name only:
+
+```ts
+// scripts/brand-css.mjs, run before your build (for example in "prebuild")
+import { writeFileSync } from "node:fs";
+import { brandToCss } from "@tonycodes-ui/mortar/brand";
+import { acme } from "../src/brand.js"; // a BrandDefinition
+
+writeFileSync("src/brand.generated.css", `${brandToCss("acme", acme)}\n`);
+```
+
+```css
+@import "@tonycodes-ui/mortar/styles.css";
+@import "./brand.generated.css";
+```
+
+```tsx
+<ThemeProvider brand="acme">…</ThemeProvider> {/* no brandTokens */}
+```
+
+A same-origin stylesheet satisfies `style-src 'self'`, and the rule is identical to the injected one, so overlays, inverse bands and container-scoped providers behave the same. `brandToCss` validates the definition exactly as `brandTokens` does, so a bad value fails the build instead of the page. To keep a checked-in stylesheet in step with the definition, compare them in a test: `expect(readFileSync("src/brand.generated.css", "utf8").trim()).toBe(brandToCss("acme", acme))`.
+
+**For tenant brands loaded at runtime** (from a database or CMS), `brandTokens` needs the policy to allow the inline style:
+
+- **`'unsafe-inline'` in `style-src`.** This is simplest, but it allows any inline style.
+- **A hash of the exact rule** (`'sha256-…'`). This is brittle: any change to the palette changes the hash.
+- **Serve each tenant's rule as a stylesheet instead**, for example from a route that returns `brandToCss(tenant.slug, tenant.theme)` as `text/css`, linked with `<link rel="stylesheet">`. Tenant data is validated by `brandToCss`, so it cannot inject other CSS.
+
+Mortar's own styles and the no-JavaScript appearance fallback are ordinary stylesheet rules and need nothing beyond `style-src 'self'`.
+
 ### With the brand builder
 
 The playground's [brand builder](https://mortar.tony.codes/playground/?page=brand) (`/playground/?page=brand`) designs a brand against this contract. Start from a preset, set the light and dark primary pairs, and open Advanced for the optional tokens, surfaces and accent gradient; empty fields show the value they derive. Set heading and body fonts below. Light and dark previews, each with an inverse band, an accent band, an accent button, a heading sample and overlays, update as you type, and a table checks contrast: 4.5:1 for text on primary, hover, active and accent, for links, text and muted text on page, surface and sunken, and for on-accent text on the accent fill (every gradient stop) at rest, hover and active; 3:1 for strong lines on page, surface and sunken, and for the focus ring. Copy the result as the CSS rule (from `brandToCss`) or as the `brandTokens` object. The brand is kept in the URL, so a link shares it.
 
+## Marketing surfaces and illustrations
+
+A branded landing page needs no CSS of its own. MarketingPage, MarketingHeader, Hero, Footer and NetworkIllustration read the same semantic tokens as every other component, so one brand, in CSS or from `brandTokens` at runtime, restyles all of them in both appearances. The [split landing template](../playground/template-pages.tsx) (`?recipe=split-landing`) is composed this way.
+
+| Role                | Token                                    | Brand contract               | Used by                                                                                                                              |
+| ------------------- | ---------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| Canvas and surfaces | `--m-paper`, `--m-surface`, `--m-sunken` | `paper`, `surface`, `sunken` | The page; illustration nodes and the pause control on `surface`                                                                      |
+| Text                | `--m-ink`, `--m-secondary`, `--m-muted`  | (fixed by Mortar)            | Titles; the hero description and illustration labels; the tagline, hero note and inline footer                                       |
+| Borders             | `--m-line`, `--m-line-strong`            | (fixed by Mortar)            | Header and inline-footer rules and the tagline divider; illustration connections and node outlines on `line-strong`, which keeps 3:1 |
+| Emphasis            | `--m-link`                               | `link`                       | Hero `emphasis`. On an accent or background hero it takes the band's text colour instead                                             |
+| Accent              | `--m-accent`, `--m-accent-fill`          | `accent`, `accentGradient`   | Accent nodes and travelling signals; `tone="accent"` on Hero, CallToAction and Banner; `variant="accent"` buttons                    |
+| Focus               | `--m-focus`                              | `focus`                      | Every link and button, including the illustration's pause control                                                                    |
+
+Emphasis uses the brand's `link` colour because link is the brand's text-safe colour. Accent is a fill and may be too light or too dark to read as text. In the neutral brand, link is ink, so an emphasised phrase looks like the rest of the title and keeps only its `<em>` meaning. Set `link` to give it a colour.
+
+No new tokens were needed for these components: each role above already had one. If your brand needs a role that is missing, raise it as an issue rather than styling around it.
+
+### Your own SVG
+
+Draw your own illustration with the same tokens so it follows the brand and appearance: `fill="var(--m-accent)"`, `stroke="var(--m-line-strong)"`, or Tailwind's `fill-accent` and `stroke-line` on your own elements. Give decorative SVG `aria-hidden="true"`, and give informative SVG `role="img"` and a `<title>`. Pause any motion under `prefers-reduced-motion`, and let people pause it.
+
+### What you can extend
+
+Supported extension points:
+
+- **The brand contract.** CSS `--m-brand-*` values, or `brandTokens` and `ThemeProvider` (including `scope="container"` for one branded region).
+- **Props and slots.** Logos stay your own assets, passed through `logo`. Also `controls`, `action`, `tagline`, Hero `children`, `images`, `background` and `note`, MarketingPage `header`, `footer` and children, and NetworkIllustration's `nodes` and `connections`.
+- **`className` for layout only.** Margins, grid placement and a maximum width on a component's root.
+- **The scales and Tailwind utilities** in your own markup (above and below).
+
+Not supported, and flagged by `mortar audit` where it can see them:
+
+- Selectors on `.m-*` classes or `[data-m-component]` (`css-override`)
+- Tailwind arbitrary variants into the kit (`class-override`)
+- Raw colours on Mortar components (`raw-colour`)
+- Styling by state attributes such as `data-paused`, which are for tests and scripts
+
 ## Appearance before JavaScript runs
 
 Until ThemeProvider sets `data-mortar-appearance` (during server rendering, or with JavaScript off), Mortar follows the operating system's colour scheme, so dark-mode users don't see a light flash. To always start light, render `data-mortar-appearance="light"` on `<html>`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonycodes-ui/mortar",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Mortar: a shared design foundation, application and marketing UI for React and Tailwind.",
   "type": "module",
   "files": [

package/skills/mortar/SKILL.md

@@ -31,6 +31,6 @@ If a shared pattern is missing or a component is wrong, fix it centrally instead
 
 ## Completion
 
-Required evidence: the app's build, typecheck, a clean `mortar audit`, and browser checks of responsive layout, light and dark, and keyboard and accessibility. Automated checks cannot prove visual quality or complete accessibility; report what you verified and any remaining blockers. Do not declare completion with failing required checks.
+Required evidence: the app's build, typecheck, a clean `mortar audit`, and browser checks of responsive layout, light and dark, and keyboard and accessibility. Automated checks cannot prove visual quality or complete accessibility; report what you verified and any remaining blockers. A clean audit is not proof that a page uses Mortar components exclusively; point to the rendered components instead. Do not declare completion with failing required checks.
 
 Provide a local preview by default. Deploy only with the user's authorisation; existing explicit authorisation counts. A passing audit is not deployment permission.