@tonycodes-ui/mortar 0.11.0 → 0.13.0

package/dist/marketing.js

@@ -1,25 +1,23 @@
 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}`))) }))] })] }));
-}
-export function MarketingHeader({ brand, homeHref = "/", logo, links, action, controls, layout = "inline", mobileMenu = "inline", className, id, }) {
+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.
     const navId = useDomId("m-marketing-nav");
     const panel = mobileMenu === "panel";
     const close = () => setOpen(false);
-    const brandLink = (_jsxs(KitLink, { className: "m-brand", href: homeHref, children: [_jsx(BrandMark, { logo: logo }), brand] }));
+    const homeLink = (_jsxs(KitLink, { className: "m-brand", href: homeHref, children: [_jsx(BrandMark, { logo: logo }), brand] }));
+    // The tagline sits outside the link so the link's name stays the brand.
+    const brandLink = tagline ? (_jsxs("div", { className: "m-brand-lockup", children: [homeLink, _jsx("span", { className: "m-brand-tagline", children: tagline })] })) : (homeLink);
     const menuButton = (_jsx(Button, { variant: "ghost", className: "m-menu-trigger", "aria-haspopup": panel ? "dialog" : undefined, "aria-expanded": open, "aria-controls": panel ? undefined : navId, onClick: () => setOpen(!open), children: "Menu" }));
     const nav = (_jsx("nav", { id: navId, "aria-label": "Primary", "data-open": (open && !panel) || undefined, children: links.map((link, index) => "items" in link ? (_jsx(Flyout, { label: link.label, items: link.items, footer: link.footer, layout: link.layout, onNavigate: close }, `${link.label}:flyout:${index}`)) : (_jsx(KitLink, { href: link.href, onClick: close, children: link.label }, `${link.label}:${link.href}:${index}`))) }));
     const actions = (controls || action) && (_jsxs(_Fragment, { children: [controls, action && _jsx(ActionLink, { ...action })] }));
@@ -29,8 +27,15 @@ export function MarketingHeader({ brand, homeHref = "/", logo, links, action, co
 function PanelLinks({ links, onNavigate, }) {
     return (_jsx("nav", { "aria-label": "Primary", className: "m-marketing-panel-nav", children: links.map((link, index) => "items" in link ? (_jsxs("details", { children: [_jsxs("summary", { children: [link.label, _jsx(ChevronDown, {})] }), [...link.items, ...(link.footer ?? [])].map((item, i) => (_jsx(KitLink, { href: item.href, onClick: onNavigate, children: item.label }, `${item.label}:${item.href}:${i}`)))] }, `${link.label}:group:${index}`)) : (_jsx(KitLink, { href: link.href, onClick: onNavigate, children: link.label }, `${link.label}:${link.href}:${index}`))) }));
 }
-export function Hero({ id, className, eyebrow, title, description, actions = [], children, layout = "center", headingLevel = 1, background, images = [], tone = "default", }) {
-    return (_jsxs("section", { id: id, className: cx("m-hero", `m-hero-${layout}`, className), ...componentRoot("Hero"), "data-background": background ? true : undefined, "data-tone": background ? "inverse" : sectionTone(tone), children: [background && (_jsx("div", { className: "m-hero-background", "aria-hidden": "true", children: background })), _jsxs("div", { children: [_jsx(TitledIntro, { eyebrow: eyebrow, title: title, headingLevel: headingLevel }), _jsx("p", { className: "m-hero-description", children: description }), _jsx(ActionLinks, { actions: actions })] }), images.length > 0 && (_jsx("div", { className: "m-hero-tiles", children: images.map((image, index) => (_jsx("div", { children: image }, index))) })), children && _jsx("div", { className: "m-hero-preview", children: children })] }));
+/**
+ * A public page: the header, a main region that grows to fill the viewport, and
+ * the footer. Content is never clipped; a longer page simply scrolls.
+ */
+export function MarketingPage({ header, footer, children, align = "start", id, className, }) {
+    return (_jsxs("div", { id: id, className: cx("m-marketing-page", className), ...componentRoot("MarketingPage"), "data-align": align === "center" ? "center" : undefined, children: [header, _jsx("main", { className: "m-marketing-main", children: children }), footer] }));
+}
+export function Hero({ id, className, eyebrow, title, emphasis, description, actions = [], note, children, layout = "center", wide, headingLevel = 1, background, images = [], tone = "default", }) {
+    return (_jsxs("section", { id: id, className: cx("m-hero", `m-hero-${layout}`, className), ...componentRoot("Hero"), "data-wide": layout === "split" ? wide : undefined, "data-background": background ? true : undefined, "data-tone": background ? "inverse" : sectionTone(tone), children: [background && (_jsx("div", { className: "m-hero-background", "aria-hidden": "true", children: background })), _jsxs("div", { children: [_jsx(TitledIntro, { eyebrow: eyebrow, title: title, emphasis: emphasis, headingLevel: headingLevel }), _jsx("p", { className: "m-hero-description", children: description }), _jsx(ActionLinks, { actions: actions }), note && _jsx("div", { className: "m-hero-note", children: note })] }), images.length > 0 && (_jsx("div", { className: "m-hero-tiles", children: images.map((image, index) => (_jsx("div", { children: image }, index))) })), children && _jsx("div", { className: "m-hero-preview", children: children })] }));
 }
 export function FeatureGrid({ id, className, eyebrow, title, description, items, marker = "auto", columns, tone = "default", headingLevel = 2, }) {
     const ItemHeading = headingTag(childLevel(headingLevel));
@@ -115,13 +120,17 @@ export function CallToAction({ id, className, title, description, actions, tone
     const copy = (_jsxs(_Fragment, { children: [_jsx(TitledIntro, { title: title, description: description, descriptionClassName: null, headingLevel: headingLevel }), _jsx(ActionLinks, { actions: actions })] }));
     return (_jsx("section", { id: id, className: cx("m-cta", className), ...componentRoot("CallToAction"), "data-tone": sectionTone(tone), "data-layout": media ? "split" : undefined, children: media ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "m-cta-copy", children: copy }), _jsx("div", { className: "m-cta-media", children: media })] })) : (copy) }));
 }
-export function Footer({ id, className, brand, logo, description, note, columns, copyright, legal = [], itemHeadingLevel = 2, social = [], layout = "columns", newsletter, }) {
+export function Footer({ id, className, brand, logo, description, note, columns = [], copyright, legal = [], itemHeadingLevel = 2, social = [], layout = "columns", newsletter, }) {
     const Heading = headingTag(itemHeadingLevel);
     const center = layout === "center";
-    const identity = (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "m-brand", children: [_jsx(BrandMark, { logo: logo }), brand] }), _jsx("p", { children: description }), note && _jsx("p", { children: note })] }));
+    const inline = layout === "inline";
+    const identity = (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "m-brand", children: [_jsx(BrandMark, { logo: logo }), brand] }), description && _jsx("p", { children: description }), note && _jsx("p", { children: note })] }));
     const socialLinks = social.length > 0 && (_jsx(IconLinks, { label: "Social media", links: social }));
-    const navs = columns.map((column) => (_jsxs("nav", { "aria-label": column.label, children: [!center && _jsx(Heading, { children: column.label }), column.items.map((link, index) => (_jsx(KitLink, { href: link.href, children: link.label }, `${link.label}:${link.href}:${index}`)))] }, column.label)));
-    return (_jsxs("footer", { id: id, className: cx("m-footer", className), ...componentRoot("Footer"), "data-layout": center ? "center" : undefined, children: [center ? (_jsxs("div", { className: "m-footer-center", children: [identity, navs, socialLinks] })) : (_jsxs("div", { className: "m-footer-grid", children: [_jsxs("div", { children: [identity, socialLinks] }), navs] })), newsletter && _jsx("div", { className: "m-footer-newsletter", children: newsletter }), _jsxs("div", { className: "m-footer-bottom", children: [_jsx("span", { children: copyright }), _jsx("div", { children: legal.map((link, index) => (_jsx(KitLink, { href: link.href, children: link.label }, `${link.label}:${link.href}:${index}`))) })] })] }));
+    const navs = columns.map((column) => (_jsxs("nav", { "aria-label": column.label, children: [!center && !inline && _jsx(Heading, { children: column.label }), column.items.map((link, index) => (_jsx(KitLink, { href: link.href, children: link.label }, `${link.label}:${link.href}:${index}`)))] }, column.label)));
+    const legalLinks = (_jsx("div", { children: legal.map((link, index) => (_jsx(KitLink, { href: link.href, children: link.label }, `${link.label}:${link.href}:${index}`))) }));
+    if (inline)
+        return (_jsxs("footer", { id: id, className: cx("m-footer", className), ...componentRoot("Footer"), "data-layout": "inline", children: [_jsxs("div", { className: "m-footer-inline", children: [identity, navs, socialLinks, _jsx("span", { children: copyright }), legal.length > 0 && legalLinks] }), newsletter && _jsx("div", { className: "m-footer-newsletter", children: newsletter })] }));
+    return (_jsxs("footer", { id: id, className: cx("m-footer", className), ...componentRoot("Footer"), "data-layout": center ? "center" : undefined, children: [center ? (_jsxs("div", { className: "m-footer-center", children: [identity, navs, socialLinks] })) : (_jsxs("div", { className: "m-footer-grid", children: [_jsxs("div", { children: [identity, socialLinks] }), navs] })), newsletter && _jsx("div", { className: "m-footer-newsletter", children: newsletter }), _jsxs("div", { className: "m-footer-bottom", children: [_jsx("span", { children: copyright }), legalLinks] })] }));
 }
 /** Intro band for inner pages (about, pricing, careers), with optional links and stats. */
 export function HeaderSection({ id, className, eyebrow, title, description, links = [], stats = [], tone = "default", align = "start", headingLevel = 1, }) {

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.11.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.

package/src/application.css

@@ -264,6 +264,20 @@
   .m-stacked-shell > main:focus {
     outline: none;
   }
+  /* A second row of page tabs under the bar; the row draws the full-width rule. */
+  .m-stacked-tabs {
+    padding: 0 24px;
+    border-bottom: 1px solid var(--m-line);
+    background: var(--m-surface);
+  }
+  .m-stacked-tabs .m-tab-nav ul {
+    border-bottom: 0;
+  }
+  @media (max-width: 900px) {
+    .m-stacked-tabs {
+      padding: 0 16px;
+    }
+  }
 
   /* == Navbar == */
   .m-navbar {
@@ -274,6 +288,39 @@
     padding: 0 24px;
     border-bottom: 1px solid var(--m-line);
     background: var(--m-surface);
+    color: var(--m-ink);
+  }
+  /* Accent bar: the brand's accent fill, remapped like the accent bands
+     (marketing.css): on-accent text, links and focus, inverted primary
+     actions and outlined secondary ones. --m-sunken uses --m-accent-wash, the
+     same direction as an accent button's hover, so a selected row or hover
+     moves the fill away from the on-accent text. A mix towards --m-on-accent
+     drops that text below 4.5:1. Panels open in a portal and keep the page's
+     colours. Inverse needs nothing here: [data-tone="inverse"] remaps every
+     token (tokens.css). */
+  .m-navbar[data-tone="accent"] {
+    background-color: var(--m-accent);
+    background-image: var(--m-accent-fill);
+    --m-ink: var(--m-on-accent);
+    --m-secondary: var(--m-on-accent);
+    --m-muted: var(--m-on-accent);
+    --m-link: var(--m-on-accent);
+    --m-focus: var(--m-on-accent);
+    --m-line: color-mix(in oklab, var(--m-on-accent) 35%, transparent);
+    --m-line-strong: var(--m-on-accent);
+    --m-primary: var(--m-on-accent);
+    --m-primary-hover: var(--m-on-accent);
+    --m-primary-active: var(--m-on-accent);
+    --m-on-primary: var(--m-accent);
+    --m-surface: transparent;
+    --m-sunken: color-mix(
+      in oklab,
+      var(--m-accent-wash, transparent) 14%,
+      transparent
+    );
+  }
+  .m-navbar[data-tone="accent"] .m-button-primary:hover {
+    box-shadow: inset 0 0 0 2px var(--m-accent);
   }
   .m-navbar > .m-brand {
     display: inline-flex;
@@ -316,6 +363,27 @@
     font-weight: var(--m-weight-semibold);
     box-shadow: inset 0 -2px 0 var(--m-primary);
   }
+  /* A group's trigger looks like the links beside it; its panel is the
+     shared flyout (marketing.css). */
+  .m-navbar > nav > .m-flyout {
+    display: flex;
+  }
+  .m-navbar .m-flyout-trigger {
+    padding: 0 10px;
+    color: var(--m-secondary);
+    font-size: var(--m-font-size);
+    font-weight: var(--m-weight-medium);
+    box-shadow: inset 0 -2px 0 transparent;
+  }
+  .m-navbar .m-flyout-trigger:hover {
+    color: var(--m-ink);
+    box-shadow: inset 0 -2px 0 var(--m-line-strong);
+  }
+  .m-navbar .m-flyout[data-current] > .m-flyout-trigger {
+    color: var(--m-ink);
+    font-weight: var(--m-weight-semibold);
+    box-shadow: inset 0 -2px 0 var(--m-primary);
+  }
   @media (max-width: 900px) {
     .m-navbar {
       flex-wrap: wrap;
@@ -362,6 +430,25 @@
       box-shadow: inset 3px 0 0 var(--m-primary);
       background: var(--m-sunken);
     }
+    .m-navbar > nav > .m-flyout {
+      display: block;
+    }
+    .m-navbar .m-flyout-trigger {
+      width: 100%;
+      min-height: 44px;
+      justify-content: space-between;
+      padding: 0 12px;
+      border-radius: var(--m-radius);
+      box-shadow: none;
+    }
+    .m-navbar .m-flyout-trigger:hover {
+      box-shadow: none;
+      background: var(--m-sunken);
+    }
+    .m-navbar .m-flyout[data-current] > .m-flyout-trigger {
+      box-shadow: inset 3px 0 0 var(--m-primary);
+      background: var(--m-sunken);
+    }
   }
 
   /* == Breadcrumbs == */
@@ -549,14 +636,21 @@
     --m-tone: var(--m-secondary);
   }
   @media (max-width: 560px) {
+    /* Two metrics a row, but a value too wide for half a row takes a row of
+       its own instead of being clipped; a value wider than the whole row
+       wraps. */
     .m-metrics {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      display: flex;
+      flex-wrap: wrap;
     }
     .m-metrics > div {
+      flex: 1 1 40%;
+      max-width: 100%;
       border-bottom: 1px solid var(--m-line);
     }
     .m-metrics dd {
       font-size: 24px;
+      overflow-wrap: break-word;
     }
   }