@tonycodes-ui/mortar 0.0.0-stage → 0.12.0

package/dist/marketing-sections.js

@@ -0,0 +1,58 @@
+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 { ActionLink, Button, Input } from "./primitives.js";
+import { Avatar } from "./display.js";
+import { childLevel, headingTag } from "./heading.js";
+import { ActionLinks, TermList, TitledIntro, cx, componentRoot, sectionTone, } from "./internal.js";
+export function BentoGrid({ id, className, eyebrow, title, description, items, tone = "default", headingLevel = 2, }) {
+    const ItemHeading = headingTag(childLevel(headingLevel));
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section", className), "data-tone": sectionTone(tone), ...componentRoot("BentoGrid"), children: [_jsx(TitledIntro, { eyebrow: eyebrow, title: title, description: description, headingLevel: headingLevel }), _jsx("ul", { className: "m-bento", children: items.map((item, index) => (_jsx("li", { "data-span": item.span || 1, "data-row-span": item.rowSpan === 2 ? 2 : undefined, children: _jsxs("article", { "data-tone": sectionTone(item.tone), children: [item.visual && (_jsx("div", { className: "m-bento-visual", children: item.visual })), _jsx(ItemHeading, { children: item.title }), _jsx("p", { children: item.description })] }) }, `${item.title}:${index}`))) })] }));
+}
+export function StatGroup({ id, className, label, items, layout = "grid", background, }) {
+    const list = (_jsx(TermList, { id: background ? undefined : id, className: cx("m-stat-group", !background && className), "aria-label": label, "data-layout": layout === "grid" ? undefined : layout, ...componentRoot("StatGroup", !background), items: items.map((item) => ({
+            term: item.label,
+            details: item.value,
+            after: item.description && (_jsx("dd", { className: "m-stat-description", children: item.description })),
+        })) }));
+    if (!background)
+        return list;
+    return (_jsxs("div", { id: id, className: cx("m-stat-band", className), ...componentRoot("StatGroup"), "data-background": "true", "data-tone": "inverse", children: [_jsx("div", { className: "m-cover-background", "aria-hidden": "true", children: background }), list] }));
+}
+export function TestimonialGrid({ id, className, title, items, headingLevel = 2, layout = "masonry", }) {
+    const Heading = headingTag(headingLevel);
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section", className), "aria-label": title ? undefined : "Testimonials", ...componentRoot("TestimonialGrid"), children: [title && _jsx(Heading, { className: "m-section-title", children: title }), _jsx("div", { className: "m-testimonial-grid", "data-layout": layout === "grid" ? "grid" : undefined, children: items.map((item) => (_jsxs("figure", { "data-featured": item.featured ? "true" : undefined, children: [_jsx("blockquote", { children: item.quote }), _jsxs("figcaption", { children: [_jsx(Avatar, { decorative: true, name: item.name, src: item.avatar, size: "sm" }), _jsxs("span", { children: [_jsx("strong", { children: item.name }), item.role && _jsx("span", { children: item.role })] })] })] }, item.name))) })] }));
+}
+export function PlanComparison({ id, className, title, description, plans, featuredPlan, groups, headingLevel = 2, }) {
+    const headingId = useId();
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section", className), "aria-labelledby": headingId, ...componentRoot("PlanComparison"), children: [_jsx(TitledIntro, { id: headingId, title: title, description: description, headingLevel: headingLevel }), _jsx("div", { className: "m-table-scroll m-comparison", role: "region", "aria-label": `${title} table`, tabIndex: 0, children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", {}), plans.map((plan) => (_jsx("th", { scope: "col", "data-featured": plan === featuredPlan || undefined, children: plan }, plan)))] }) }), groups.map((group) => (_jsxs("tbody", { children: [_jsx("tr", { className: "m-comparison-group", children: _jsx("th", { scope: "colgroup", colSpan: plans.length + 1, children: group.label }) }), group.rows.map((row) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.feature }), row.values.map((value, i) => (_jsx("td", { "data-featured": plans[i] === featuredPlan || undefined, children: typeof value === "boolean" ? (
+                                            // The glyph is decoration; the cell's text is the meaning.
+                                            _jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: value ? undefined : "m-comparison-no", children: value ? "✓" : "—" }), _jsx("span", { className: "m-sr-only", children: value ? "Included" : "Not included" })] })) : (value) }, plans[i])))] }, row.feature)))] }, group.label)))] }) })] }));
+}
+export function PostList({ id, className, title, description, posts, action, headingLevel = 2, itemHeadingLevel, }) {
+    const PostHeading = headingTag(itemHeadingLevel ?? childLevel(headingLevel));
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section", className), ...componentRoot("PostList"), children: [_jsxs("div", { className: "m-section-heading-row", children: [_jsx("div", { children: _jsx(TitledIntro, { title: title, description: description, headingLevel: headingLevel }) }), action && _jsx(ActionLink, { ...action, variant: "secondary" })] }), _jsx("ul", { className: "m-post-list", children: posts.map((post, index) => (_jsx("li", { "data-featured": post.featured ? "true" : undefined, children: _jsxs("article", { children: [post.image && _jsx("div", { className: "m-post-image", children: post.image }), _jsxs("p", { className: "m-post-meta", children: [post.category && _jsx("span", { children: post.category }), _jsx("time", { dateTime: post.date, children: post.dateLabel })] }), _jsx(PostHeading, { className: "m-post-title", children: _jsx(KitLink, { href: post.href, children: post.title }) }), _jsx("p", { children: post.excerpt })] }) }, `${post.title}:${post.href}:${index}`))) })] }));
+}
+export function TeamGrid({ id, className, title, description, members, headingLevel = 2, layout = "grid", }) {
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section", className), ...componentRoot("TeamGrid"), children: [_jsx(TitledIntro, { title: title, description: description, headingLevel: headingLevel }), _jsx("ul", { className: "m-team-grid", "data-layout": layout === "grid" ? undefined : layout, children: members.map((member) => (_jsxs("li", { children: [_jsx("div", { className: "m-team-portrait", children: member.image || (_jsx(Avatar, { decorative: true, name: member.name, size: "lg", shape: "square" })) }), _jsx("strong", { children: member.name }), _jsx("span", { children: member.role }), member.bio && _jsx("p", { className: "m-team-bio", children: member.bio }), member.links?.length ? (_jsx(IconLinks, { label: `${member.name} links`, links: member.links })) : null] }, member.name))) })] }));
+}
+export function ContactSection({ id, className, title, description, details = [], headingLevel = 2, media, offices = [], children, }) {
+    const OfficeHeading = headingTag(childLevel(headingLevel));
+    const intro = (_jsxs(_Fragment, { children: [_jsx(TitledIntro, { title: title, description: description, headingLevel: headingLevel }), details.length > 0 && (_jsx(TermList, { items: details.map((d) => ({ term: d.label, details: d.value })) }))] }));
+    const form = children && _jsx("div", { className: "m-contact-form", children: children });
+    return (_jsxs("section", { id: id, className: cx("m-contact", className), ...componentRoot("ContactSection"), "data-media": media ? "true" : undefined, children: [media ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "m-contact-media", children: media }), _jsxs("div", { className: "m-contact-body", children: [_jsx("div", { children: intro }), form] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { children: intro }), form] })), offices.length > 0 && (_jsx("ul", { className: "m-contact-offices", children: offices.map((office, index) => (_jsxs("li", { children: [_jsx(OfficeHeading, { children: office.name }), _jsx("address", { children: office.address })] }, `${office.name}:${index}`))) }))] }));
+}
+export function Newsletter({ id, className, title, description, onSubmit, submitLabel = "Subscribe", status = "idle", message, headingLevel = 2, layout = "split", variant = "plain", }) {
+    const [email, setEmail] = useState("");
+    const submitting = status === "submitting";
+    const submit = (e) => {
+        e.preventDefault();
+        if (!submitting)
+            onSubmit(email);
+    };
+    return (_jsxs("section", { id: id, className: cx("m-newsletter", className), ...componentRoot("Newsletter"), "data-layout": layout === "split" ? undefined : layout, "data-variant": variant === "plain" ? undefined : variant, children: [_jsx("div", { children: _jsx(TitledIntro, { title: title, description: description, descriptionClassName: null, headingLevel: headingLevel }) }), _jsxs("form", { onSubmit: submit, "aria-busy": submitting || undefined, children: [_jsx(Input, { label: "Email address", type: "email", autoComplete: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), error: status === "error" ? message : undefined, disabled: submitting }), _jsx(Button, { type: "submit", loading: submitting, children: submitLabel }), _jsx("p", { role: "status", className: "m-newsletter-status", children: status === "success" ? message || "Thanks for subscribing." : "" })] })] }));
+}
+export function NotFound({ id, className, code = "404", title, description, actions, illustration, background, headingLevel = 1, }) {
+    const Heading = headingTag(headingLevel);
+    return (_jsxs("section", { id: id, className: cx("m-not-found", className), ...componentRoot("NotFound"), "data-background": background ? true : undefined, "data-tone": background ? "inverse" : undefined, children: [background && (_jsx("div", { className: "m-cover-background", "aria-hidden": "true", children: background })), illustration && (_jsx("div", { className: "m-not-found-art", "aria-hidden": "true", children: illustration })), _jsx("p", { className: "m-eyebrow", children: code }), _jsx(Heading, { className: "m-section-title", children: title }), _jsx("p", { children: description }), _jsx(ActionLinks, { actions: actions })] }));
+}

package/dist/marketing.d.ts

@@ -0,0 +1,277 @@
+import { type IconLink, type ItemGroup, type LinkItem } 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">;
+/** A header link, or a labelled group that opens a flyout panel. */
+export type HeaderLink = LinkAction | (ItemGroup<FlyoutItem> & {
+    footer?: LinkAction[];
+    /** list: one column. columns: a wider panel in two columns. full: as wide as the viewport allows, up to four columns. */
+    layout?: "list" | "columns" | "full";
+});
+export declare function MarketingHeader({ brand, tagline, homeHref, logo, links, action, controls, layout, mobileMenu, className, id, }: {
+    brand: string;
+    /** A short descriptor beside the wordmark, outside the home link. Hidden on narrow screens. */
+    tagline?: string;
+    logo?: ReactNode;
+    homeHref?: string;
+    /** Links, or groups of items that open a flyout panel. */
+    links: HeaderLink[];
+    action?: LinkAction;
+    controls?: ReactNode;
+    /** inline: brand, links and actions in one row. center: links at the start, the brand centred, actions at the end. */
+    layout?: "inline" | "center";
+    /** How narrow screens show the links. inline: the menu button expands them under the header. panel: it opens a full-screen dialog. */
+    mobileMenu?: "inline" | "panel";
+    className?: string;
+    id?: string;
+}): import("react").JSX.Element;
+/**
+ * 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 declare function MarketingPage({ header, footer, children, align, id, className, }: {
+    /** Usually a MarketingHeader. */
+    header?: ReactNode;
+    /** Usually a Footer. */
+    footer?: ReactNode;
+    children: ReactNode;
+    /** start: content from the top. center: content centred in the space between header and footer, for a single hero. */
+    align?: "start" | "center";
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Hero({ id, className, eyebrow, title, emphasis, description, actions, note, children, layout, wide, headingLevel, background, images, tone, }: {
+    id?: string;
+    className?: string;
+    eyebrow?: string;
+    title: string;
+    /** A phrase in the title to emphasise. Its first occurrence renders as `<em>` inside the one heading; a phrase not in the title is ignored. */
+    emphasis?: string;
+    description: string;
+    actions?: LinkAction[];
+    /** Short supporting content below the actions, such as a note or a Notice. */
+    note?: ReactNode;
+    children?: ReactNode;
+    /** center: copy above the preview. split: copy beside the preview. angled: copy beside an image that fills the end half to the edge, cut on a slant (pass one img or video as children). */
+    layout?: "center" | "split" | "angled";
+    /** Split only: the column that takes more of the width. Omitted, the columns are even. */
+    wide?: "copy" | "preview";
+    headingLevel?: HeadingLevel;
+    /** Decorative full-cover image or video behind the copy. The hero switches to the inverse tone with a scrim so text keeps its contrast. */
+    background?: ReactNode;
+    /** Image tiles shown as a staggered collage beside (split) or below (center) the copy. Use instead of children; give each image its own alt text, or alt="" when decorative. */
+    images?: ReactNode[];
+    /** default: the page. accent: a full-bleed band of the brand's accent fill (its accent gradient when it defines one) with on-accent copy and actions; the preview keeps the page's colours. A background takes precedence. */
+    tone?: "default" | "accent";
+}): import("react").JSX.Element;
+export declare function FeatureGrid({ id, className, eyebrow, title, description, items, marker, columns, tone, headingLevel, }: {
+    id?: string;
+    className?: string;
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    items: {
+        title: string;
+        description: string;
+        icon?: ReactNode;
+    }[];
+    /** auto: show icons when supplied, otherwise no marker. number: for sequences. */
+    marker?: "auto" | "icon" | "number" | "none";
+    /** Defaults to a balanced count for the number of items. */
+    columns?: 2 | 3 | 4;
+    tone?: SectionTone;
+    /** The section title's level; item titles sit one level below. */
+    headingLevel?: HeadingLevel;
+}): import("react").JSX.Element;
+export declare function FeatureSection({ id, className, eyebrow, title, description, details, children, reverse, tone, framed, offset, headingLevel, }: {
+    id?: string;
+    className?: string;
+    eyebrow?: string;
+    title: string;
+    description: string;
+    /** Supporting content under the description, such as a CheckList or actions. */
+    details?: ReactNode;
+    children: ReactNode;
+    reverse?: boolean;
+    tone?: SectionTone;
+    /** Wrap the preview in the sunken frame. Disable when the child brings its own frame. */
+    framed?: boolean;
+    /** Let a wide screenshot run past the section's end edge and crop there (wide screens only). */
+    offset?: boolean;
+    headingLevel?: HeadingLevel;
+}): import("react").JSX.Element;
+/** Numbered, connected sequence for marketing "how it works" sections. */
+export declare function ProcessSteps({ id, className, eyebrow, title, description, items, tone, headingLevel, }: {
+    id?: string;
+    className?: string;
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    items: {
+        title: string;
+        description: string;
+    }[];
+    tone?: SectionTone;
+    headingLevel?: HeadingLevel;
+}): import("react").JSX.Element;
+export declare function Testimonial({ id, className, quote, name, role, logo, avatar, }: {
+    id?: string;
+    className?: string;
+    quote: string;
+    name: string;
+    role?: string;
+    /** Company logo above the quote; give the image its company name as alt text. */
+    logo?: ReactNode;
+    /** Photo or avatar beside the name (decorative). */
+    avatar?: ReactNode;
+}): import("react").JSX.Element;
+export declare function LogoCloud({ id, className, label, items, layout, title, description, actions, headingLevel, }: {
+    id?: string;
+    className?: string;
+    label: string;
+    items: {
+        name: string;
+        image?: string;
+    }[];
+    /** inline: a centred row. grid: logos in bordered tiles. split: copy beside a logo grid. */
+    layout?: "inline" | "grid" | "split";
+    /** Split layout heading; the label still names the section. */
+    title?: string;
+    /** Split layout supporting copy. */
+    description?: string;
+    /** Split layout links, e.g. a case-studies link. */
+    actions?: LinkAction[];
+    /** Level of the split layout's title. */
+    headingLevel?: HeadingLevel;
+}): import("react").JSX.Element;
+export interface PricingPlan {
+    id: string;
+    name: string;
+    description: string;
+    monthly: string;
+    annual?: string;
+    unit?: string;
+    annualUnit?: string;
+    features: string[];
+    action: LinkAction;
+    featured?: boolean;
+    availability?: "available" | "coming-soon" | "unavailable";
+    availabilityLabel?: string;
+}
+/** A full-width tier band under the pricing plans. */
+export interface PricingExtra {
+    name: string;
+    description: string;
+    /** Optional price, e.g. "$9" or "Custom". */
+    price?: string;
+    unit?: string;
+    action: LinkAction;
+}
+export declare function Pricing({ id, className, title, description, plans, tone, billingToggle, layout, featuresLabel, headingLevel, extra, }: {
+    id?: string;
+    className?: string;
+    title: string;
+    description?: string;
+    plans: PricingPlan[];
+    /** Applied only to featured cards. Other plans keep the page surface. */
+    tone?: SectionTone;
+    billingToggle?: boolean;
+    /** cards: side-by-side tiers. detailed: one full-width row per plan, features beside a price panel (single-price pages). */
+    layout?: "cards" | "detailed";
+    /** Heading above the feature list in the detailed layout. */
+    featuresLabel?: string;
+    /** The section title's level; plan names sit one level below. */
+    headingLevel?: HeadingLevel;
+    /** A full-width tier band under the plans, such as an enterprise or discount row. */
+    extra?: PricingExtra;
+}): import("react").JSX.Element;
+export declare function FAQ({ id, className, title, description, items, layout, headingLevel, }: {
+    id?: string;
+    className?: string;
+    title: string;
+    description?: ReactNode;
+    items: {
+        question: string;
+        answer: ReactNode;
+    }[];
+    /** split: heading beside an accordion. center: heading above a narrow accordion. grid: every answer visible in columns. */
+    layout?: "split" | "center" | "grid";
+    headingLevel?: HeadingLevel;
+}): import("react").JSX.Element;
+export declare function CallToAction({ id, className, title, description, actions, tone, media, headingLevel, }: {
+    id?: string;
+    className?: string;
+    title: string;
+    description?: string;
+    actions: LinkAction[];
+    /** default: the page surface. muted: the sunken band. inverse: the inverse token remap. accent: the brand's accent fill (its accent gradient when it defines one) with on-accent copy and actions. */
+    tone?: SectionTone | "accent";
+    /** Image or screenshot beside the copy (promo layout). */
+    media?: ReactNode;
+    headingLevel?: HeadingLevel;
+}): import("react").JSX.Element;
+export declare function Footer({ id, className, brand, logo, description, note, columns, copyright, legal, itemHeadingLevel, social, layout, newsletter, }: {
+    id?: string;
+    className?: string;
+    brand: string;
+    logo?: ReactNode;
+    description?: string;
+    note?: ReactNode;
+    /** Link columns; each label is the column's visible heading and its navigation name. Centred or inline, the label only names the navigation. */
+    columns?: ItemGroup<LinkAction>[];
+    copyright: string;
+    legal?: LinkAction[];
+    /** Level of the column headings. */
+    itemHeadingLevel?: HeadingLevel;
+    /** Social profiles, usually icon-only; each label names its link. */
+    social?: IconLink[];
+    /** columns: the brand beside headed link columns. center: brand, a row of links and social links, all centred. inline: one compact row of brand, notes, links and copyright that wraps in reading order. */
+    layout?: "columns" | "center" | "inline";
+    /** A signup row above the copyright, usually a Newsletter; the footer removes its section padding. */
+    newsletter?: ReactNode;
+}): import("react").JSX.Element;
+/** Intro band for inner pages (about, pricing, careers), with optional links and stats. */
+export declare function HeaderSection({ id, className, eyebrow, title, description, links, stats, tone, align, headingLevel, }: {
+    id?: string;
+    className?: string;
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    links?: LinkAction[];
+    stats?: {
+        label: string;
+        value: string;
+    }[];
+    tone?: SectionTone;
+    align?: "start" | "center";
+    headingLevel?: HeadingLevel;
+}): import("react").JSX.Element;
+/** Long-form copy with optional media beside it, e.g. an about-page story. */
+export declare function ContentSection({ id, className, eyebrow, title, description, media, mediaPosition, tone, headingLevel, stats, testimonial, children, }: {
+    id?: string;
+    className?: string;
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    /** Image, figure or illustration shown beside the copy. */
+    media?: ReactNode;
+    mediaPosition?: "start" | "end";
+    tone?: SectionTone;
+    headingLevel?: HeadingLevel;
+    /** Figures under the copy, shown as a StatGroup named by the title. */
+    stats?: {
+        label: string;
+        value: string;
+        description?: string;
+    }[];
+    /** A customer quote under the copy, shown as a Testimonial. */
+    testimonial?: {
+        quote: string;
+        name: string;
+        role?: string;
+        avatar?: ReactNode;
+    };
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/marketing.js

@@ -0,0 +1,163 @@
+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 { 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, 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 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 })] }));
+    return (_jsxs("header", { id: id, className: cx("m-marketing-header", className), ...componentRoot("MarketingHeader"), "data-layout": layout === "center" ? "center" : undefined, "data-menu": panel ? "panel" : undefined, children: [layout === "center" ? (_jsxs(_Fragment, { children: [menuButton, nav, brandLink] })) : (_jsxs(_Fragment, { children: [brandLink, menuButton, nav] })), _jsx("div", { className: "m-actions", children: actions }), panel && (_jsx(DialogFrame, { open: open, onClose: close, children: _jsxs(DialogPanel, { className: "m-marketing-panel", children: [_jsxs("div", { className: "m-dialog-heading", children: [_jsxs(DialogTitle, { className: "m-brand", children: [_jsx(BrandMark, { logo: logo }), brand] }), _jsx(Button, { variant: "ghost", onClick: close, children: "Close menu" })] }), _jsx(PanelLinks, { links: links, onNavigate: close }), actions && _jsx("div", { className: "m-actions", children: actions })] }) }))] }));
+}
+/** The header's links in the full-screen mobile panel; flyout groups become disclosures. */
+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}`))) }));
+}
+/**
+ * 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));
+    const cols = columns ??
+        (items.length === 2 || items.length === 4
+            ? 2
+            : items.length % 3 === 0 || items.length > 4
+                ? 3
+                : Math.min(items.length, 3));
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section", className), "data-tone": sectionTone(tone), ...componentRoot("FeatureGrid"), children: [...titledIntroSlots({ eyebrow, title, description, headingLevel }), _jsx("div", { className: "m-feature-grid", "data-columns": cols, children: items.map((item, i) => {
+                    const content = marker === "number"
+                        ? String(i + 1).padStart(2, "0")
+                        : marker !== "none"
+                            ? item.icon
+                            : null;
+                    return (_jsxs("article", { children: [content && (_jsx("span", { className: "m-feature-icon", "data-marker": marker === "number" ? "number" : "icon", "aria-hidden": "true", children: content })), _jsx(ItemHeading, { children: item.title }), _jsx("p", { children: item.description })] }, item.title));
+                }) })] }));
+}
+export function FeatureSection({ id, className, eyebrow, title, description, details, children, reverse = false, tone = "default", framed = true, offset = false, headingLevel = 2, }) {
+    const [eyebrowSlot, headingSlot] = titledIntroSlots({
+        eyebrow,
+        title,
+        headingLevel,
+    });
+    return (_jsxs("section", { id: id, className: cx("m-feature-section", className), "data-reverse": reverse || undefined, "data-offset": offset || undefined, "data-tone": sectionTone(tone), ...componentRoot("FeatureSection"), children: [_jsxs("div", { children: [eyebrowSlot, headingSlot, _jsx("p", { children: description }), details && _jsx("div", { className: "m-feature-details", children: details })] }), _jsx("div", { className: "m-feature-preview", "data-framed": framed || undefined, children: children })] }));
+}
+/** Numbered, connected sequence for marketing "how it works" sections. */
+export function ProcessSteps({ id, className, eyebrow, title, description, items, tone = "default", headingLevel = 2, }) {
+    const ItemHeading = headingTag(childLevel(headingLevel));
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section", className), "data-tone": sectionTone(tone), ...componentRoot("ProcessSteps"), children: [...titledIntroSlots({ eyebrow, title, description, headingLevel }), _jsx("ol", { className: "m-process-steps", style: { "--m-steps": items.length }, children: items.map((item, i) => (_jsxs("li", { children: [_jsx("span", { className: "m-process-number", "aria-hidden": "true", children: i + 1 }), _jsx(ItemHeading, { children: item.title }), _jsx("p", { children: item.description })] }, `${item.title}:${i}`))) })] }));
+}
+export function Testimonial({ id, className, quote, name, role, logo, avatar, }) {
+    const person = (_jsxs(_Fragment, { children: [_jsx("strong", { children: name }), role && _jsx("span", { children: role })] }));
+    return (_jsxs("figure", { id: id, className: cx("m-testimonial", className), ...componentRoot("Testimonial"), children: [logo && _jsx("div", { className: "m-testimonial-logo", children: logo }), _jsx("blockquote", { children: quote }), _jsx("figcaption", { children: avatar ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "m-testimonial-avatar", "aria-hidden": "true", children: avatar }), _jsx("span", { className: "m-testimonial-person", children: person })] })) : (person) })] }));
+}
+export function LogoCloud({ id, className, label, items, layout = "inline", title, description, actions = [], headingLevel = 2, }) {
+    const Heading = headingTag(headingLevel);
+    const list = (_jsx("ul", { children: items.map((item) => (_jsx("li", { children: item.image ? (_jsx("img", { src: item.image, alt: item.name })) : (_jsx("span", { children: item.name })) }, item.name))) }));
+    if (layout === "split") {
+        return (_jsxs("section", { id: id, className: cx("m-logo-cloud", className), "aria-label": label, ...componentRoot("LogoCloud"), "data-layout": "split", children: [_jsxs("div", { className: "m-logo-cloud-copy", children: [title ? (_jsx(Heading, { className: "m-section-title", children: title })) : (_jsx("p", { children: label })), description && (_jsx("p", { className: "m-section-description", children: description })), actions.length > 0 && _jsx(ActionLinks, { actions: actions })] }), list] }));
+    }
+    return (_jsxs("section", { id: id, className: cx("m-logo-cloud", className), "aria-label": label, ...componentRoot("LogoCloud"), "data-layout": layout === "grid" ? "grid" : undefined, children: [_jsx("p", { children: label }), list] }));
+}
+export function Pricing({ id, className, title, description, plans, tone = "default", billingToggle, layout = "cards", featuresLabel = "What’s included", headingLevel = 2, extra, }) {
+    const [annualChoice, setAnnual] = useState(true);
+    const showToggle = billingToggle ??
+        (plans.length > 0 && plans.every((plan) => Boolean(plan.annual)));
+    // Annual prices show only while the toggle that switches them is visible,
+    // so the page never mixes units the visitor cannot change.
+    const annual = showToggle && annualChoice;
+    const PlanHeading = headingTag(childLevel(headingLevel));
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section m-pricing", className), ...componentRoot("Pricing"), children: [_jsx(TitledIntro, { title: title, description: description, headingLevel: headingLevel }), showToggle && (_jsx(SegmentedControl, { label: "Billing interval", value: annual ? "annual" : "monthly", options: [
+                    { value: "annual", label: "Annual" },
+                    { value: "monthly", label: "Monthly" },
+                ], onChange: (value) => setAnnual(value === "annual") })), _jsxs("div", { className: "m-pricing-grid", "data-layout": layout === "detailed" ? "detailed" : undefined, "data-columns": layout === "cards" && plans.length === 4 ? 4 : undefined, children: [plans.map((plan) => {
+                        const availability = plan.availability ?? "available";
+                        const blocked = availability !== "available";
+                        const showAnnual = annual && Boolean(plan.annual);
+                        const suffix = showAnnual ? plan.annualUnit : plan.unit;
+                        const price = (_jsxs("div", { className: "m-price", children: [_jsx("strong", { children: showAnnual ? plan.annual : plan.monthly }), suffix && _jsx("span", { children: suffix })] }));
+                        const features = (_jsx("ul", { children: plan.features.map((feature) => (_jsx("li", { children: feature }, feature))) }));
+                        // Static text, not a live region: nothing changes after render.
+                        const purchase = blocked ? (_jsx("p", { className: "m-pricing-availability", children: plan.availabilityLabel ??
+                                (availability === "coming-soon"
+                                    ? "Coming soon"
+                                    : "Unavailable") })) : (_jsx(ActionLink, { ...plan.action, variant: layout === "detailed" ? "primary" : "secondary" }));
+                        return (_jsx("article", { "data-featured": plan.featured || undefined, "data-tone": plan.featured ? sectionTone(tone) : undefined, "data-availability": blocked ? availability : undefined, children: layout === "detailed" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "m-pricing-detail", children: [_jsx(PlanHeading, { children: plan.name }), _jsx("p", { children: plan.description }), _jsx("p", { className: "m-pricing-features-label", children: featuresLabel }), features] }), _jsxs("div", { className: "m-pricing-offer", children: [price, purchase] })] })) : (_jsxs(_Fragment, { children: [_jsx(PlanHeading, { children: plan.name }), _jsx("p", { children: plan.description }), price, features, purchase] })) }, plan.id));
+                    }), extra && (_jsxs("article", { className: "m-pricing-extra", children: [_jsxs("div", { children: [_jsx(PlanHeading, { children: extra.name }), _jsx("p", { children: extra.description })] }), extra.price && (_jsxs("div", { className: "m-price", children: [_jsx("strong", { children: extra.price }), extra.unit && _jsx("span", { children: extra.unit })] })), _jsx(ActionLink, { ...extra.action, variant: "secondary" })] }))] })] }));
+}
+export function FAQ({ id, className, title, description, items, layout = "split", headingLevel = 2, }) {
+    const Heading = headingTag(headingLevel);
+    const head = (_jsxs("div", { children: [_jsx(Heading, { className: "m-section-title", children: title }), description && _jsx("div", { children: description })] }));
+    if (layout === "grid") {
+        return (_jsxs("section", { id: id, className: cx("m-faq", className), ...componentRoot("FAQ"), "data-layout": "grid", children: [head, _jsx(TermList, { className: "m-faq-grid", items: items.map((item) => ({
+                        term: item.question,
+                        details: item.answer,
+                    })) })] }));
+    }
+    return (_jsxs("section", { id: id, className: cx("m-faq", className), ...componentRoot("FAQ"), "data-layout": layout === "center" ? "center" : undefined, children: [head, _jsx("div", { children: items.map((item) => (_jsxs("details", { children: [_jsxs("summary", { children: [item.question, _jsx("span", { "aria-hidden": "true", children: "+" })] }), _jsx("div", { children: item.answer })] }, item.question))) })] }));
+}
+export function CallToAction({ id, className, title, description, actions, tone = "default", media, headingLevel = 2, }) {
+    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, }) {
+    const Heading = headingTag(itemHeadingLevel);
+    const center = layout === "center";
+    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 && !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, }) {
+    const headingId = useId();
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section m-header-section", className), "data-tone": sectionTone(tone), "data-align": align === "start" ? undefined : align, "aria-labelledby": headingId, ...componentRoot("HeaderSection"), children: [...titledIntroSlots({
+                eyebrow,
+                title,
+                description,
+                id: headingId,
+                headingLevel,
+            }), links.length > 0 && (_jsx("div", { className: "m-header-links", children: links.map((link, index) => (_jsxs(KitLink, { href: link.href, children: [link.label, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] }, `${link.label}:${link.href}:${index}`))) })), stats.length > 0 && (_jsx(TermList, { className: "m-header-stats", items: stats.map((stat) => ({
+                    term: stat.label,
+                    details: stat.value,
+                })) }))] }));
+}
+/** Long-form copy with optional media beside it, e.g. an about-page story. */
+export function ContentSection({ id, className, eyebrow, title, description, media, mediaPosition = "end", tone = "default", headingLevel = 2, stats = [], testimonial, children, }) {
+    const headingId = useId();
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section m-content-section", className), "data-tone": sectionTone(tone), "data-media": media ? mediaPosition : undefined, "aria-labelledby": headingId, ...componentRoot("ContentSection"), children: [_jsxs("div", { className: "m-content-copy", children: [...titledIntroSlots({
+                        eyebrow,
+                        title,
+                        description,
+                        id: headingId,
+                        headingLevel,
+                    }), children && _jsx(Prose, { children: children }), testimonial && (_jsx(Testimonial, { className: "m-content-quote", ...testimonial })), stats.length > 0 && (_jsx(StatGroup, { className: "m-content-stats", label: title, items: stats }))] }), media && _jsx("figure", { className: "m-content-media", children: media })] }));
+}

package/dist/navigation.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode, type AnchorHTMLAttributes, type MouseEvent } from "react";
+/** Return false to leave a route to the browser; otherwise the app owns navigation. */
+export type Navigate = (href: string) => void | false;
+export declare const NavigationContext: import("react").Context<Navigate | undefined>;
+export declare function followLink(event: MouseEvent<HTMLAnchorElement>, navigate?: Navigate): void;
+/** Internal shared anchor: retains native link semantics unless an app router handles it. */
+export declare function KitLink({ onClick, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;
+/** A navigation link: sidebar and navbar items, page tabs and flyout entries. */
+export interface LinkItem {
+    label: string;
+    href: string;
+    /** The page being shown; marked aria-current="page". */
+    current?: boolean;
+    /** Icon shown before the label. */
+    icon?: ReactNode;
+    /** Shown after the label, e.g. a number of items. */
+    count?: number | string;
+    description?: string;
+}
+/** Items gathered under a visible group label. */
+export interface ItemGroup<T> {
+    label: string;
+    items: T[];
+}
+export interface IconLink {
+    /** Accessible name; also the visible text when there is no icon. */
+    label: string;
+    href: string;
+    icon?: ReactNode;
+}
+/** Labelled list of profile or social links; icon links are named by their label. */
+export declare function IconLinks({ label, links, }: {
+    label: string;
+    links: IconLink[];
+}): import("react").JSX.Element;

package/dist/navigation.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, } from "react";
+export const NavigationContext = createContext(undefined);
+export function followLink(event, navigate) {
+    const anchor = event.currentTarget;
+    if (!navigate ||
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey ||
+        anchor.hasAttribute("download") ||
+        (anchor.target && anchor.target !== "_self") ||
+        anchor.rel.split(/\s+/).includes("external"))
+        return;
+    const raw = anchor.getAttribute("href");
+    if (!raw || raw.startsWith("#"))
+        return;
+    const destination = new URL(anchor.href);
+    const current = new URL(anchor.ownerDocument.URL);
+    if (!["http:", "https:"].includes(destination.protocol) ||
+        destination.origin !== current.origin)
+        return;
+    if (destination.pathname === current.pathname &&
+        destination.search === current.search &&
+        destination.hash)
+        return;
+    if (navigate(destination.pathname + destination.search + destination.hash) !==
+        false)
+        event.preventDefault();
+}
+/** Internal shared anchor: retains native link semantics unless an app router handles it. */
+export function KitLink({ onClick, ...props }) {
+    const navigate = useContext(NavigationContext);
+    return (_jsx("a", { ...props, onClick: (event) => {
+            onClick?.(event);
+            followLink(event, navigate);
+        } }));
+}
+/** Labelled list of profile or social links; icon links are named by their label. */
+export function IconLinks({ label, links, }) {
+    return (_jsx("ul", { className: "m-icon-links", "aria-label": label, children: links.map((link, index) => (_jsx("li", { children: link.icon ? (_jsx(KitLink, { href: link.href, "aria-label": link.label, children: _jsx("span", { "aria-hidden": "true", children: link.icon }) })) : (_jsx(KitLink, { href: link.href, children: link.label })) }, `${link.label}:${link.href}:${index}`))) }));
+}