@fairgarden/design 0.1.0-0.canary.0

package/page/section-header/SectionHeader.js

@@ -0,0 +1,141 @@
+'use client';
+import * as React from 'react';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Icon, iconHost } from '../../foundations/icon';
+import { cx } from '../../utils/className';
+import { printUrl } from '../../utils/printUrl';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import typeRoles from '../../utils/type.module.css';
+import styles from './section-header.module.css';
+/*
+ * Section Header & Eyebrow (§11.8): opens every band or module in a fixed
+ * order: what kind of thing this is (eyebrow), what it says (heading), why
+ * it matters (lede), where to go next ("See all").
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: section-header.module.css; CVA function `sectionHeader`.
+ * - Axes: `kind` → editorial | trailed | scene | anchored | technical |
+ *   topic → same-named classes (`trailed` is the trail kicker, so it does
+ *   not clash with the `trail` part); `level` → band | module → band,
+ *   module (the heading's element, type role and ink); `primary`,
+ *   `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: kind editorial, level band; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: only `seeAll`: :hover → the arrow-link hover [D181] (label
+ *   --role-link-hover, the arrow at the next tier's weight, the rest
+ *   underline kept); :focus-visible → the ring. A topic tag keeps its own
+ *   module (§10).
+ * - Parts: base, eyebrow, eyebrowRule (Base UI Separator,
+ *   data-orientation="horizontal"), trail, kicker, heading, lede, seeAll,
+ *   art, number, topicTag; plus kickerRow, marker, seeAllLabel, seeAllArrow,
+ *   printUrl and action (the scene pill or the anchored action).
+ * - Scope: none.
+ * - Container: none; inherits its context. "See all" joins the heading row
+ *   from --lg-n-above, a page-frame rule on viewport media [D163].
+ */
+export const sectionHeader = cva(styles.base, {
+    variants: {
+        kind: {
+            editorial: styles.editorial,
+            trailed: styles.trailed,
+            scene: styles.scene,
+            anchored: styles.anchored,
+            technical: styles.technical,
+            topic: styles.topic,
+        },
+        level: {
+            band: styles.band,
+            module: styles.module,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'editorial',
+        level: 'band',
+    },
+});
+/**
+ * The entry-left `ornament-trail` (§4.7.1): an origin circle, a freehand
+ * rise with one loop, then a level run stopping `--fgd-space-halo` before the
+ * kicker. Fixed art, 120 × 56 px; decorative.
+ */
+function TrailEntry() {
+    return (React.createElement("svg", { className: styles.trail, width: "120", height: "56", viewBox: "0 0 120 56", "aria-hidden": "true", focusable: "false" },
+        React.createElement("circle", { className: styles.marker, cx: "5", cy: "46", r: "2.5" }),
+        React.createElement("path", { className: styles.trailPath, d: "M12 45.2C18 43 22 38 26 31C31 22 35 9 43 8C51 7 53 20 46 27C39 34 30 29 33 20C36 12 50 14 60 21C68 26 76 28 86 28L120 28", vectorEffect: "non-scaling-stroke" })));
+}
+/** The trail resumed `--fgd-space-halo` after the kicker, ending in an open `marker-terminal`. */
+function TrailTail() {
+    return (React.createElement("svg", { className: styles.trail, width: "40", height: "56", viewBox: "0 0 40 56", "aria-hidden": "true", focusable: "false" },
+        React.createElement("path", { className: styles.trailPath, d: "M0 28C8 28 14 30 22 29", vectorEffect: "non-scaling-stroke" }),
+        React.createElement("path", { className: styles.marker, d: "M26 26 32 29 26 32Z", vectorEffect: "non-scaling-stroke" })));
+}
+/** "See all →": `type-label` caps, underlined at rest in `--role-accent`, with a `--fgd-size-hit` target. */
+function SeeAll({ href, label, render }) {
+    const url = printUrl(href);
+    return useRender({
+        defaultTagName: 'a',
+        render,
+        props: {
+            href,
+            className: cx(styles.seeAll, iconHost),
+            children: (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: styles.seeAllLabel }, label ?? 'See all'),
+                React.createElement(Icon, { name: "arrow_forward", weight: "interactive", className: styles.seeAllArrow }),
+                url !== null ? React.createElement("span", { className: styles.printUrl },
+                    "(",
+                    url,
+                    ")") : null)),
+        },
+    });
+}
+/**
+ * The opener of a band or module. Keep the order eyebrow → heading → lede →
+ * action; pick the eyebrow rule or the trail, never both; left-align over
+ * reading content and centre only scene openers. On the night band and in
+ * fields every text resolves to `--primary12`; the eyebrow is never the
+ * accent. Prints with its rules, never at the foot of a page.
+ */
+export function SectionHeader(props) {
+    const { render, ref, className, kind, level, primary, secondary, heading, headingId, lede, seeAll, eyebrow, kicker, art, number, topic, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const resolvedKind = kind ?? 'editorial';
+    const HeadingTag = level === 'module' ? 'h3' : 'h2';
+    const content = (React.createElement(React.Fragment, null,
+        resolvedKind === 'technical' ? (React.createElement(React.Fragment, null,
+            React.createElement("p", { className: styles.numberRow },
+                React.createElement("span", { className: cx(styles.number, typeRoles.typeData) }, number),
+                React.createElement("span", { className: cx(styles.eyebrow, typeRoles.typeLabel) }, eyebrow)),
+            React.createElement(BaseSeparator, { orientation: "horizontal", className: styles.eyebrowRule }))) : null,
+        resolvedKind === 'editorial' && eyebrow != null ? (React.createElement(React.Fragment, null,
+            React.createElement("p", { className: cx(styles.eyebrow, typeRoles.typeEyebrow) }, eyebrow),
+            React.createElement(BaseSeparator, { orientation: "horizontal", className: styles.eyebrowRule }))) : null,
+        resolvedKind === 'trailed' ? (React.createElement("div", { className: styles.kickerRow },
+            React.createElement(TrailEntry, null),
+            React.createElement("p", { className: cx(styles.kicker, typeRoles.typeKicker) }, kicker),
+            React.createElement(TrailTail, null))) : null,
+        resolvedKind === 'anchored' ? React.createElement("div", { className: styles.art }, art) : null,
+        resolvedKind === 'topic' ? React.createElement("div", { className: styles.topicTag }, topic) : null,
+        React.createElement(HeadingTag, { id: headingId, className: cx(styles.heading, level === 'module' ? typeRoles.typeItemhead : typeRoles.typeH2) }, heading),
+        lede != null ? React.createElement("p", { className: cx(styles.lede, typeRoles.typeLead) }, lede) : null,
+        seeAll != null ? React.createElement(SeeAll, { ...seeAll }) : null,
+        children != null ? React.createElement("div", { className: styles.action }, children) : null));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            className: sectionHeader({ kind: resolvedKind, level, primary, secondary, className }),
+            children: content,
+        }, rest),
+    });
+}
+//# sourceMappingURL=SectionHeader.js.map

package/page/section-header/SectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.js","sourceRoot":"","sources":["../../src/page/section-header/SectionHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,SAAS,MAAM,6BAA6B,CAAA;AACnD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAC5C,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,SAAS,EAAE,MAAM,CAAC,SAAS;YAC3B,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,SAAS,EAAE,MAAM,CAAC,SAAS;YAC3B,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,MAAM,EAAE,MAAM,CAAC,MAAM;SACtB;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAA;AAoHF;;;;GAIG;AACH,SAAS,UAAU;IACjB,OAAO,CACL,6BACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,YAAY,iBACR,MAAM,EAClB,SAAS,EAAC,OAAO;QAEjB,gCAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG;QAC3D,8BACE,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,CAAC,EAAC,0HAA0H,EAC5H,YAAY,EAAC,oBAAoB,GACjC,CACE,CACP,CAAA;AACH,CAAC;AAED,kGAAkG;AAClG,SAAS,SAAS;IAChB,OAAO,CACL,6BACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,iBACP,MAAM,EAClB,SAAS,EAAC,OAAO;QAEjB,8BACE,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,CAAC,EAAC,wBAAwB,EAC1B,YAAY,EAAC,oBAAoB,GACjC;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,EAAC,qBAAqB,EAAC,YAAY,EAAC,oBAAoB,GAAG,CACxF,CACP,CAAA;AACH,CAAC;AAED,6GAA6G;AAC7G,SAAS,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAuB;IAC1D,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC1B,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,GAAG;QACnB,MAAM;QACN,KAAK,EAAE;YACL,IAAI;YACJ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC;YACtC,QAAQ,EAAE,CACR;gBACE,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,KAAK,IAAI,SAAS,CAAQ;gBAChE,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,EAAC,MAAM,EAAC,aAAa,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,GAAI;gBAChF,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ;;oBAAI,GAAG;wBAAS,CAAC,CAAC,CAAC,IAAI,CACtE,CACJ;SACF;KACF,CAAC,CAAA;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,MAAM,EACN,GAAG,EACH,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAS,EACT,OAAO,EACP,SAAS,EACT,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,GAAG,EACH,MAAM,EACN,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,YAAY,GAAsB,IAAI,IAAI,WAAW,CAAA;IAC3D,MAAM,UAAU,GAAG,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAEnD,MAAM,OAAO,GAAG,CACd;QACG,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,CAC9B;YACE,2BAAG,SAAS,EAAE,MAAM,CAAC,SAAS;gBAC5B,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,IAAG,MAAM,CAAQ;gBACvE,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,IAAG,OAAO,CAAQ,CACxE;YACJ,oBAAC,aAAa,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,GAAI,CACxE,CACJ,CAAC,CAAC,CAAC,IAAI;QACP,YAAY,KAAK,WAAW,IAAI,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,CACjD;YACE,2BAAG,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,IAAG,OAAO,CAAK;YACtE,oBAAC,aAAa,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,GAAI,CACxE,CACJ,CAAC,CAAC,CAAC,IAAI;QACP,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,CAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;YAC9B,oBAAC,UAAU,OAAG;YACd,2BAAG,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,UAAU,CAAC,IAAG,MAAM,CAAK;YACnE,oBAAC,SAAS,OAAG,CACT,CACP,CAAC,CAAC,CAAC,IAAI;QACP,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,IAAG,GAAG,CAAO,CAAC,CAAC,CAAC,IAAI;QAC5E,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,IAAG,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI;QACjF,oBAAC,UAAU,IACT,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,IAE5F,OAAO,CACG;QACZ,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,2BAAG,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,IAAG,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI;QACnF,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,oBAAC,MAAM,OAAK,MAAM,GAAI,CAAC,CAAC,CAAC,IAAI;QAC9C,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,QAAQ,CAAO,CAAC,CAAC,CAAC,IAAI,CACzE,CACJ,CAAA;IAED,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CACf;YACE,GAAG,KAAK;YACR,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;YACtF,QAAQ,EAAE,OAAO;SAClB,EACD,IAAI,CACL;KACF,CAAC,CAAA;AACJ,CAAC"}

package/page/section-header/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SectionHeader';
+//# sourceMappingURL=index.d.ts.map

package/page/section-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/page/section-header/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/page/section-header/index.js

@@ -0,0 +1,2 @@
+export * from './SectionHeader';
+//# sourceMappingURL=index.js.map

package/page/section-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/page/section-header/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/page/section-header/section-header.module.css

@@ -0,0 +1,319 @@
+/*
+ * Section Header & Eyebrow (§11.8). CVA function `sectionHeader` in
+ * SectionHeader.tsx. Parts: base, eyebrow, eyebrowRule (the Separator),
+ * numberRow and number (technical), kickerRow, kicker, trail (with
+ * trailPath and marker), art, topicTag, heading, lede, seeAll (with
+ * seeAllLabel, seeAllArrow and printUrl), action. Type roles come by
+ * composition or from type.module.css in the component; colors follow the
+ * §11.8 Color roles table through role variables only.
+ *
+ * Gaps are visual gaps [D74]: text parts trim their half-leading where the
+ * browser supports `text-box`, so eyebrow → rule → content measure 14 / 19
+ * (--fgd-space-eyebrow-rule / --fgd-space-eyebrow-content) [D100].
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.eyebrowRule {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.trailPath {
+  composes: lineDashed from '../../utils/line.module.css';
+}
+
+.seeAll {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.printUrl {
+  composes: typeUrl from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* One column of named rows; "See all" joins the heading row from --lg-n-above. */
+  .base {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      'top'
+      'rule'
+      'heading'
+      'lede'
+      'seeAll'
+      'action';
+    justify-items: start;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .eyebrow,
+  .numberRow,
+  .kickerRow,
+  .art,
+  .topicTag {
+    grid-area: top;
+  }
+
+  .eyebrow {
+    margin: 0;
+    color: var(--primary12);
+    text-box: trim-both cap alphabetic;
+  }
+
+  /* Eyebrow baseline → hairline 14, hairline → first cap 19; margin to margin, never full-bleed. */
+  .eyebrowRule {
+    grid-area: rule;
+    justify-self: stretch;
+    margin-block: var(--fgd-space-eyebrow-rule) var(--fgd-space-eyebrow-content);
+    border-width: 0;
+    border-block-start-width: var(--border-size-1);
+    border-color: var(--role-hairline);
+  }
+
+  .heading {
+    grid-area: heading;
+    margin: 0;
+    color: var(--role-heading);
+    text-box: trim-both cap alphabetic;
+  }
+
+  .lede {
+    grid-area: lede;
+    max-inline-size: var(--fgd-measure-reading);
+    margin: var(--size-px-5) 0 0;
+    color: var(--primary12);
+    text-box: trim-both cap alphabetic;
+  }
+
+  .action {
+    grid-area: action;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--size-px-2-5);
+    margin-block-start: var(--size-px-5);
+  }
+
+  /* Technical: the mono number and the caps label with a colon. */
+  .numberRow {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--size-px-2-5);
+    margin: 0;
+    color: var(--primary12);
+    text-box: trim-both cap alphabetic;
+  }
+
+  .number {
+    color: var(--primary12);
+  }
+
+  /* Trail kicker: the kicker threaded by the trail, --fgd-space-halo either side. */
+  .kickerRow {
+    display: flex;
+    align-items: center;
+    gap: var(--fgd-space-halo);
+    max-inline-size: 100%;
+    margin-block-end: var(--size-px-8-5);
+  }
+
+  .kicker {
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--role-heading);
+  }
+
+  /* ornament-trail (§4.7.1): line-dashed at --border-size-2 in --role-accent; fixed art. */
+  .trail {
+    display: block;
+    flex: none;
+    overflow: visible;
+    color: var(--role-accent);
+    fill: none;
+    stroke: currentColor;
+  }
+
+  .marker {
+    fill: none;
+    stroke-width: var(--border-size-1-5);
+    stroke-dasharray: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Anchored: the sticker at --fgd-size-art-s; its halo touches the cap tops, no gap. */
+  .art {
+    inline-size: var(--fgd-size-art-s);
+  }
+
+  .art > * {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  .topicTag {
+    margin-block-end: var(--size-px-3);
+  }
+
+  /* "See all →": a standalone link, underlined at rest, --fgd-size-hit tall. */
+  .seeAll {
+    grid-area: seeAll;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-block-size: var(--fgd-size-hit);
+    margin-block-start: var(--size-px-5);
+    border-radius: var(--radius-1);
+    color: var(--primary12);
+    text-decoration: none;
+  }
+
+  .seeAllLabel {
+    text-decoration-line: underline;
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-1-5);
+    text-underline-offset: 0.15em;
+    text-decoration-skip-ink: none;
+  }
+
+  .seeAllArrow {
+    color: var(--role-glyph);
+  }
+
+  .printUrl {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .seeAllLabel {
+      transition: color var(--fgd-duration-quick) var(--ease-out-3);
+    }
+  }
+
+  /* From --lg-n-above "See all" sits at the heading row's end, baseline-aligned. */
+  @media (min-width: 1024px) {
+    .base {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas:
+        'top top'
+        'rule rule'
+        'heading seeAll'
+        'lede lede'
+        'action action';
+    }
+
+    .heading {
+      align-self: last baseline;
+    }
+
+    .seeAll {
+      align-self: last baseline;
+      margin-block-start: 0;
+      margin-inline-start: var(--size-px-7-5);
+    }
+  }
+}
+
+@layer variants {
+  /* Band level: the section head in --role-heading; module level: the item head in --primary12 [D60]. */
+  .band .heading {
+    color: var(--role-heading);
+  }
+
+  .module .heading {
+    color: var(--primary12);
+  }
+
+  /* Editorial, anchored and topic openers sit left over reading content. */
+  .editorial,
+  .anchored,
+  .topic {
+    justify-items: start;
+    text-align: start;
+  }
+
+  /* Trail kicker: kicker row left-weighted by its trail, the heading centred below. */
+  .trailed {
+    justify-items: center;
+    text-align: center;
+  }
+
+  /* Scene opener: heading, lede and pill centred; headline at the centred measure (§5.4). */
+  .scene {
+    justify-items: center;
+    text-align: center;
+  }
+
+  .scene .heading {
+    max-inline-size: var(--size-content-2);
+  }
+
+  .trailed .lede,
+  .scene .lede {
+    margin-inline: auto;
+  }
+
+  .trailed .action,
+  .scene .action {
+    justify-content: center;
+  }
+
+  /* Technical: the label takes its colon. */
+  .technical .eyebrow::after {
+    content: ':';
+  }
+}
+
+@layer states {
+  /* Arrow-link hover [D181]: the label takes --role-link-hover, the arrow the
+     next tier's weight (Icon weight="interactive" in an iconHost); the rest
+     underline stays. Where the hover ink is --primary12 the underline
+     already carries it. */
+  .seeAll:hover .seeAllLabel {
+    color: var(--role-link-hover);
+  }
+
+  .seeAll:active .seeAllLabel {
+    text-decoration-color: var(--primary12);
+    text-decoration-thickness: var(--border-size-2);
+  }
+
+  .seeAll:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Kept with what follows; never ends a page (§11.8, §7.9.2). */
+    .base {
+      break-inside: avoid;
+      break-after: avoid;
+    }
+
+    /* The trail prints at 0.75 pt with a 3 / 2.5 pt dash; markers kept. */
+    .trailPath {
+      stroke-width: 0.75pt;
+      stroke-dasharray: 3pt 2.5pt;
+      stroke-linecap: butt;
+    }
+
+    /* "See all" prints as "Label (short URL)" (§7.6). */
+    .seeAll {
+      min-block-size: auto;
+    }
+
+    .seeAllArrow {
+      display: none;
+    }
+
+    .printUrl {
+      display: inline;
+    }
+  }
+}

package/utils/ClientProvider.d.ts

@@ -0,0 +1,18 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+export type Direction = 'ltr' | 'rtl';
+export interface LocaleValue {
+    locale: string;
+    direction: Direction;
+}
+/** The writing direction of a BCP 47 locale. */
+export declare function getDirection(locale: string): Direction;
+/** The current locale and its writing direction. */
+export declare function useLocale(): LocaleValue;
+/**
+ * Provides the locale (and its direction) to the design system and Base UI.
+ * Place it once in the app shell, inside `<html lang={locale}>`.
+ */
+export declare const ClientProvider: FunctionComponent<PropsWithChildren<{
+    locale: string;
+}>>;
+//# sourceMappingURL=ClientProvider.d.ts.map

package/utils/ClientProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientProvider.d.ts","sourceRoot":"","sources":["../src/utils/ClientProvider.tsx"],"names":[],"mappings":"AAEA,OAAc,EAEZ,iBAAiB,EACjB,iBAAiB,EAGlB,MAAM,OAAO,CAAA;AAGd,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAA;AAErC,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,SAAS,CAAA;CACrB;AA0BD,gDAAgD;AAChD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAYtD;AAMD,oDAAoD;AACpD,wBAAgB,SAAS,IAAI,WAAW,CAEvC;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAC5C,iBAAiB,CAAC;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAWtC,CAAA"}

package/utils/ClientProvider.js

@@ -0,0 +1,55 @@
+'use client';
+import React, { createContext, useContext, useMemo, } from 'react';
+import { DirectionProvider } from '@base-ui/react/direction-provider';
+// Languages written right to left, for runtimes without Intl.Locale text info.
+const RTL_LANGUAGES = new Set([
+    'ar',
+    'arc',
+    'ckb',
+    'dv',
+    'fa',
+    'he',
+    'iw',
+    'ks',
+    'ku',
+    'ps',
+    'sd',
+    'ug',
+    'ur',
+    'yi',
+]);
+const RTL_SCRIPTS = new Set(['Arab', 'Hebr', 'Syrc', 'Thaa', 'Nkoo', 'Adlm']);
+/** The writing direction of a BCP 47 locale. */
+export function getDirection(locale) {
+    try {
+        const intlLocale = new Intl.Locale(locale);
+        const info = intlLocale.getTextInfo?.() ?? intlLocale.textInfo;
+        if (info?.direction)
+            return info.direction === 'rtl' ? 'rtl' : 'ltr';
+        const script = intlLocale.maximize().script;
+        if (script)
+            return RTL_SCRIPTS.has(script) ? 'rtl' : 'ltr';
+        return RTL_LANGUAGES.has(intlLocale.language) ? 'rtl' : 'ltr';
+    }
+    catch {
+        const language = locale.split(/[-_]/)[0]?.toLowerCase() ?? '';
+        return RTL_LANGUAGES.has(language) ? 'rtl' : 'ltr';
+    }
+}
+const defaultLocale = { locale: 'en-US', direction: 'ltr' };
+const LocaleContext = createContext(defaultLocale);
+LocaleContext.displayName = 'LocaleContext';
+/** The current locale and its writing direction. */
+export function useLocale() {
+    return useContext(LocaleContext);
+}
+/**
+ * Provides the locale (and its direction) to the design system and Base UI.
+ * Place it once in the app shell, inside `<html lang={locale}>`.
+ */
+export const ClientProvider = ({ children, locale }) => {
+    const value = useMemo(() => ({ locale, direction: getDirection(locale) }), [locale]);
+    return (React.createElement(LocaleContext.Provider, { value: value },
+        React.createElement(DirectionProvider, { direction: value.direction }, children)));
+};
+//# sourceMappingURL=ClientProvider.js.map

package/utils/ClientProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientProvider.js","sourceRoot":"","sources":["../src/utils/ClientProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,EAAE,EACZ,aAAa,EAGb,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AASrE,+EAA+E;AAC/E,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC;IAC5B,IAAI;IACJ,KAAK;IACL,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;CACL,CAAC,CAAA;AACF,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAO7E,gDAAgD;AAChD,MAAM,UAAU,YAAY,CAAC,MAAc;IACzC,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAuB,CAAA;QAChE,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,EAAE,EAAE,IAAI,UAAU,CAAC,QAAQ,CAAA;QAC9D,IAAI,IAAI,EAAE,SAAS;YAAE,OAAO,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;QACpE,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAA;QAC3C,IAAI,MAAM;YAAE,OAAO,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;QAC1D,OAAO,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;IAC/D,CAAC;IAAC,MAAM,CAAC;QACP,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;QAC7D,OAAO,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;IACpD,CAAC;AACH,CAAC;AAED,MAAM,aAAa,GAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAA;AACxE,MAAM,aAAa,GAAG,aAAa,CAAc,aAAa,CAAC,CAAA;AAC/D,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA;AAE3C,oDAAoD;AACpD,MAAM,UAAU,SAAS;IACvB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAA;AAClC,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAEvB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,EACnD,CAAC,MAAM,CAAC,CACT,CAAA;IACD,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QAClC,oBAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,IAAG,QAAQ,CAAqB,CACtD,CAC1B,CAAA;AACH,CAAC,CAAA"}

package/utils/Ornament.d.ts

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { type RadixScale } from './scales';
+/** The §4.7 marker set: origin ○, waypoint ×, terminal ▷ and current ●. */
+export type MarkerKind = 'origin' | 'waypoint' | 'terminal' | 'current';
+/** Origin and terminal sizes: on a trail (5 / 6 px) or a timeline (8 px). */
+export type MarkerSize = 'trail' | 'timeline';
+/** Props for Marker: SVG props, the kind, the size and the terminal's direction. */
+export type MarkerProps = Omit<React.SVGProps<SVGSVGElement>, 'children' | 'ref'> & {
+    /** `origin` ○ (start), `waypoint` × (turns, intermediate entries), `terminal` ▷ (end), `current` ● ("now"). */
+    kind: MarkerKind;
+    /**
+     * `trail` (default): origin 5 px, terminal 6 px. `timeline`: origin and
+     * terminal 8 px. The waypoint (9 px) and current dot (10 px) keep one size.
+     */
+    size?: MarkerSize;
+    /** The terminal's direction of travel in degrees: 0 the inline end, 90 down (default). */
+    angle?: number;
+};
+/**
+ * A §4.7 marker (`marker-origin`, `marker-waypoint`, `marker-terminal`,
+ * `marker-current`) as its own inline SVG, drawn in `currentColor` at its
+ * token size. Decorative; say the state in words.
+ */
+export declare function Marker(props: MarkerProps): React.JSX.Element;
+/** Props for MarkerIndex: `span` props, the number and its padded width. */
+export type MarkerIndexProps = Omit<React.ComponentPropsWithRef<'span'>, 'children'> & {
+    /** The callout's number, keyed to the list beside the figure. */
+    value: number;
+    /** Digits to zero-pad to: the widest count ("01"–"09" for up to 99 items). Default 2. */
+    digits?: number;
+};
+/**
+ * `marker-index` (§4.7.5, §8.10): a 24 px numbered circle, a `--primary1`
+ * face with a `--primary12` edge and a zero-padded `type-label` numeral.
+ * Numbering runs continuously across one figure.
+ */
+export declare function MarkerIndex(props: MarkerIndexProps): React.JSX.Element;
+/** Props for MarkerRank: `span` props and the rank. */
+export type MarkerRankProps = Omit<React.ComponentPropsWithRef<'span'>, 'children'> & {
+    /** The rank, written with no period. */
+    value: number;
+};
+/**
+ * The rank numeral of a ranked list (§8.4, §12.11): `type-body-ui` data
+ * numerals in `--role-muted`, no period, end-aligned in a 2.5ch column.
+ */
+export declare function MarkerRank(props: MarkerRankProps): React.JSX.Element;
+/** The trail library shapes built so far (§4.7.1). */
+export type TrailShape = 'short-tail' | 'entry';
+/** Props for OrnamentTrail: SVG props, the library shape and the mirror. */
+export type OrnamentTrailProps = Omit<React.SVGProps<SVGSVGElement>, 'children' | 'ref'> & {
+    /**
+     * `short-tail` (default): a short wander that turns down into its
+     * terminal. `entry`: one loop near the start, then a level run into a
+     * label at the inline end.
+     */
+    shape?: TrailShape;
+    /** Mirror it: the entry-right form, or a short tail that starts at the inline end. */
+    flip?: boolean;
+};
+/**
+ * `ornament-trail` (§4.7.1): the system's signature line ornament, a
+ * freehand `line-dashed` path in `--role-accent` (`--primary12` on the
+ * saturated fields) from a `marker-origin` circle to a `marker-terminal`
+ * triangle. The element's one ornament; decorative (`aria-hidden`).
+ */
+export declare function OrnamentTrail(props: OrnamentTrailProps): React.JSX.Element;
+/** Props for OrnamentBlob: `span` props, the mark and the secondary override. */
+export type OrnamentBlobProps = Omit<React.ComponentPropsWithRef<'span'>, 'children'> & {
+    /**
+     * The mark centred on the front disc, drawn in its contrast ink
+     * (`currentColor` is `--secondary-contrast`): a logo, a block icon or a
+     * stat numeral, about 42% of the disc's width (57 px).
+     */
+    children?: React.ReactNode;
+    /**
+     * Secondary Radix scale: both discs (steps 9 and 7) and the mark's
+     * contrast ink. Never defaulted; omitted, it inherits the scope [D133].
+     * On a pastel, `green` keeps the brand green (verified on all six, §6.6).
+     */
+    secondary?: RadixScale;
+};
+/**
+ * `ornament-blob` (§6.6, §1.5.16): the blob mount, a flat hand-cut disc
+ * in `--secondary9` over a larger, turned under-disc in `--secondary7`,
+ * holding a centred mark in `--secondary-contrast`. Once per page, at a
+ * fixed 136 × 130 px. On `forest` and the solid fields the mount is omitted
+ * and the bare mark takes the scope's one ink [D14, D162]. In print the
+ * discs drop and the mark prints black. Decorative: the discs are
+ * `aria-hidden`; give a meaningful mark its own text alternative.
+ */
+export declare function OrnamentBlob(props: OrnamentBlobProps): React.JSX.Element;
+//# sourceMappingURL=Ornament.d.ts.map

package/utils/Ornament.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ornament.d.ts","sourceRoot":"","sources":["../src/utils/Ornament.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAA0B,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAclE,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAA;AAEvE,6EAA6E;AAC7E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,UAAU,CAAA;AAoD7C,oFAAoF;AACpF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG;IAClF,+GAA+G;IAC/G,IAAI,EAAE,UAAU,CAAA;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAiBxC;AAED,4EAA4E;AAC5E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,yFAAyF;IACzF,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAOlD;AAED,uDAAuD;AACvD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAOhD;AAED,sDAAsD;AACtD,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,OAAO,CAAA;AAyC/C,4EAA4E;AAC5E,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG;IACzF;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,sFAAsF;IACtF,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAgCtD;AAiBD,iFAAiF;AACjF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAgCpD"}