@fairgarden/design 0.1.0-alpha.0

package/components/SectionDivider/SectionDivider.js

@@ -0,0 +1,158 @@
+'use client';
+import * as React from 'react';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../Ground';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScope, useScopeAttributes } from '../../utils/scope';
+import styles from './section-divider.module.css';
+/*
+ * Section Divider & Shaped Edge (§11.2) [D172, D179, D189].
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: section-divider.module.css; CVA function `sectionDivider`.
+ * - Axes: `kind` → straight | seam | page-seam | chrome | pause | hill |
+ *   fringe → kindStraight, kindSeam, kindPageSeam, kindChrome, kindPause,
+ *   kindHill, kindFringe (prefixed, because `fringe` is also a part);
+ *   `heavy` → `heavy` (chrome only); `ornament` → dotted | dot | star →
+ *   ornamentDotted, ornamentDot, ornamentStar (pause only; the §11.2
+ *   Variants table names the three pause ornaments); `primary`,
+ *   `secondary` → scales module classes.
+ * - Compound variants: none. The types exclude `heavy` without
+ *   `kind="chrome"` and `ornament` without `kind="pause"`.
+ * - Defaults: kind straight, heavy false; color axes: none.
+ * - Color fallback: inherits the scope, the lower band's (the bar's for a
+ *   chrome rule).
+ * - States: none (static). Under --forcedColors and in print `fallback`
+ *   shows instead of `shape` and `fringe`.
+ * - Parts: base, rule (Base UI Separator, data-orientation="horizontal"),
+ *   ornament (the pause), shape (the hill), fringe (the tick row),
+ *   fallback (the straight rule, print and forced colors only).
+ * - Scope: none of its own. The shaped edges read the night band's
+ *   --ds-edge-shaped switch (block only where tone separates the seam:
+ *   the night band against a page ground in light mode [D179]); on a page
+ *   ground the `shape` and `fringe` hosts are aria-hidden `night` band
+ *   Grounds that carry that switch only, painting nothing of their own.
+ * - Container: none; inherits its context. The hill's amplitude is a
+ *   page-frame rule on the band's width.
+ *
+ * Placement. A band seam (seam, page-seam, hill, fringe) is the lower
+ * band's first child: it inherits that band's scope and pulls itself up
+ * through the band's --ds-space-section top padding (§11.1) to sit on the
+ * seam. `chrome` and `pause` sit in the flow where they are placed.
+ */
+export const sectionDivider = cva(styles.base, {
+    variants: {
+        kind: {
+            straight: styles.kindStraight,
+            seam: styles.kindSeam,
+            'page-seam': styles.kindPageSeam,
+            chrome: styles.kindChrome,
+            pause: styles.kindPause,
+            hill: styles.kindHill,
+            fringe: styles.kindFringe,
+        },
+        heavy: {
+            true: styles.heavy,
+        },
+        ornament: {
+            dotted: styles.ornamentDotted,
+            dot: styles.ornamentDot,
+            star: styles.ornamentStar,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'straight',
+        heavy: false,
+    },
+});
+/** A centered run of true round dots (§4.8.3), drawn in SVG so it prints. */
+function DotRun() {
+    return (React.createElement("span", { className: styles.run },
+        React.createElement("svg", { className: styles.dots, "aria-hidden": "true", focusable: "false" },
+            React.createElement("line", { x1: "0", y1: "50%", x2: "100%", y2: "50%" }))));
+}
+/** The five-point `--ds-ornament-star` (9 px), solid, on the dotted run's centre line. */
+function Star({ className }) {
+    return (React.createElement("svg", { className: className, viewBox: "0 0 18 18", "aria-hidden": "true", focusable: "false" },
+        React.createElement("path", { d: "M9 1 11 6.75 17.08 6.87 12.23 10.55 14 16.38 9 12.9 4 16.38 5.77 10.55 0.92 6.87 7 6.75Z" })));
+}
+function Ornament({ ornament }) {
+    if (ornament === 'dot') {
+        return (React.createElement("span", { className: styles.ornament },
+            React.createElement("span", { className: styles.segment }),
+            React.createElement("svg", { className: styles.dot, viewBox: "0 0 2 2", "aria-hidden": "true", focusable: "false" },
+                React.createElement("circle", { cx: "1", cy: "1", r: "1" })),
+            React.createElement("span", { className: styles.segment })));
+    }
+    if (ornament === 'star') {
+        return (React.createElement("span", { className: styles.ornament },
+            React.createElement(DotRun, null),
+            React.createElement(Star, { className: styles.star }),
+            React.createElement(DotRun, null)));
+    }
+    return (React.createElement("span", { className: styles.ornament },
+        React.createElement(DotRun, null)));
+}
+/**
+ * The seam between two bands, or a pause inside one. Render a band seam
+ * (`seam`, `page-seam`, `hill`, `fringe`) as the first child of the lower
+ * band's `<Ground kind="band">`, whose block padding is `--ds-space-section`
+ * (§11.1): the divider takes that band's colors and sits on its top edge.
+ *
+ * A shaped edge sits only where tone separates the seam: the night band
+ * against a page ground in light mode [D179]. On a dark page it drops for
+ * the night band's straight `--primary12` seam, and in print and forced
+ * colors for a straight rule. Use one shaped edge per page at most.
+ * - `hill`: first child of the page-ground band under the `night` media
+ *   hero. The lower ground rises into the hero as one asymmetric curve,
+ *   4.6% of the width clamped 12–64 px, cresting at 0.667 of the width; no
+ *   rule runs under it [D189]. The amplitude joins the band's top padding.
+ * - `fringe`: first child of the `night` footer (ticks in the night band's
+ *   ink), or of the page-ground band under the `night` media hero (ticks in
+ *   that band's ink), hanging from the seam.
+ */
+export function SectionDivider(props) {
+    const { kind, heavy, ornament, primary, secondary, className, ...rest } = props;
+    const scope = useScope();
+    const scopeAttributes = useScopeAttributes();
+    const resolvedKind = kind ?? 'straight';
+    // The hard cut is the ground change itself: no element (§11.2 Base UI).
+    if (resolvedKind === 'straight')
+        return null;
+    const onNight = scope.ground === 'night';
+    const classes = sectionDivider({
+        kind: resolvedKind,
+        heavy: resolvedKind === 'chrome' && heavy === true,
+        ornament: resolvedKind === 'pause' ? (ornament ?? 'dotted') : undefined,
+        primary,
+        secondary,
+        className,
+    });
+    if (resolvedKind === 'seam' || resolvedKind === 'page-seam' || resolvedKind === 'chrome') {
+        return (React.createElement("div", { ...scopeAttributes, ...rest, "aria-hidden": "true", className: classes },
+            React.createElement(BaseSeparator, { orientation: "horizontal", className: styles.rule })));
+    }
+    if (resolvedKind === 'pause') {
+        return (React.createElement("div", { ...scopeAttributes, ...rest, "aria-hidden": "true", className: classes },
+            React.createElement(Ornament, { ornament: ornament ?? 'dotted' })));
+    }
+    if (resolvedKind === 'hill') {
+        // On a page ground the host is a `night` Ground carrying only the
+        // shaped-edge switch; the curve paints this band's own ground. The hill
+        // has no meaning inside the night band itself, so nothing draws there.
+        return (React.createElement("div", { ...scopeAttributes, ...rest, "aria-hidden": "true", className: classes },
+            onNight ? null : (React.createElement(Ground, { kind: "band", preset: "night", render: React.createElement("span", null), className: styles.shape })),
+            React.createElement("span", { className: styles.fallback })));
+    }
+    // fringe. Inside the night band (the footer's top edge) the root takes the
+    // band's own switch and ink; on a page ground a `night` Ground host carries
+    // the switch and the ticks take this band's --primary12 through `color`.
+    return (React.createElement("div", { ...scopeAttributes, ...rest, "aria-hidden": "true", className: classes },
+        onNight ? (React.createElement("span", { className: styles.fringe })) : (React.createElement(Ground, { kind: "band", preset: "night", render: React.createElement("span", null), className: `${styles.fringe} ${styles.fringeOnPage}` })),
+        React.createElement("span", { className: styles.fallback })));
+}
+//# sourceMappingURL=SectionDivider.js.map

package/components/SectionDivider/SectionDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.js","sourceRoot":"","sources":["../../src/components/SectionDivider/SectionDivider.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,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAChE,OAAO,MAAM,MAAM,8BAA8B,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAC7C,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,YAAY;YAC7B,IAAI,EAAE,MAAM,CAAC,QAAQ;YACrB,WAAW,EAAE,MAAM,CAAC,YAAY;YAChC,MAAM,EAAE,MAAM,CAAC,UAAU;YACzB,KAAK,EAAE,MAAM,CAAC,SAAS;YACvB,IAAI,EAAE,MAAM,CAAC,QAAQ;YACrB,MAAM,EAAE,MAAM,CAAC,UAAU;SAC1B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,MAAM,CAAC,KAAK;SACnB;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,MAAM,CAAC,cAAc;YAC7B,GAAG,EAAE,MAAM,CAAC,WAAW;YACvB,IAAI,EAAE,MAAM,CAAC,YAAY;SAC1B;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,KAAK;KACb;CACF,CAAC,CAAA;AA6DF,6EAA6E;AAC7E,SAAS,MAAM;IACb,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,GAAG;QACzB,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO;YAC/D,8BAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,KAAK,GAAG,CACvC,CACD,CACR,CAAA;AACH,CAAC;AAED,0FAA0F;AAC1F,SAAS,IAAI,CAAC,EAAE,SAAS,EAAyB;IAChD,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO;QACjF,8BAAM,CAAC,EAAC,0FAA0F,GAAG,CACjG,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAwC;IAClE,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;QACvB,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ;YAC9B,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;YACnC,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,OAAO,EAAC,SAAS,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO;gBAChF,gCAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG,CAC1B;YACN,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,CAC9B,CACR,CAAA;IACH,CAAC;IACD,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;QACxB,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ;YAC9B,oBAAC,MAAM,OAAG;YACV,oBAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;YAChC,oBAAC,MAAM,OAAG,CACL,CACR,CAAA;IACH,CAAC;IACD,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ;QAC9B,oBAAC,MAAM,OAAG,CACL,CACR,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAE/E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAA;IAC5C,MAAM,YAAY,GAAuB,IAAI,IAAI,UAAU,CAAA;IAE3D,wEAAwE;IACxE,IAAI,YAAY,KAAK,UAAU;QAAE,OAAO,IAAI,CAAA;IAE5C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,KAAK,OAAO,CAAA;IACxC,MAAM,OAAO,GAAG,cAAc,CAAC;QAC7B,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,YAAY,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI;QAClD,QAAQ,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS;QACvE,OAAO;QACP,SAAS;QACT,SAAS;KACV,CAAC,CAAA;IAEF,IAAI,YAAY,KAAK,MAAM,IAAI,YAAY,KAAK,WAAW,IAAI,YAAY,KAAK,QAAQ,EAAE,CAAC;QACzF,OAAO,CACL,gCAAS,eAAe,KAAM,IAAI,iBAAc,MAAM,EAAC,SAAS,EAAE,OAAO;YACvE,oBAAC,aAAa,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI,CAC9D,CACP,CAAA;IACH,CAAC;IAED,IAAI,YAAY,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,CACL,gCAAS,eAAe,KAAM,IAAI,iBAAc,MAAM,EAAC,SAAS,EAAE,OAAO;YACvE,oBAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,IAAI,QAAQ,GAAI,CACxC,CACP,CAAA;IACH,CAAC;IAED,IAAI,YAAY,KAAK,MAAM,EAAE,CAAC;QAC5B,kEAAkE;QAClE,wEAAwE;QACxE,uEAAuE;QACvE,OAAO,CACL,gCAAS,eAAe,KAAM,IAAI,iBAAc,MAAM,EAAC,SAAS,EAAE,OAAO;YACtE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChB,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAE,iCAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,CACjF;YACD,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAChC,CACP,CAAA;IACH,CAAC;IAED,2EAA2E;IAC3E,4EAA4E;IAC5E,yEAAyE;IACzE,OAAO,CACL,gCAAS,eAAe,KAAM,IAAI,iBAAc,MAAM,EAAC,SAAS,EAAE,OAAO;QACtE,OAAO,CAAC,CAAC,CAAC,CACT,8BAAM,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI,CACnC,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,EACd,MAAM,EAAE,iCAAQ,EAChB,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,YAAY,EAAE,GACpD,CACH;QACD,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAChC,CACP,CAAA;AACH,CAAC"}

package/components/SectionDivider/index.d.ts

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

package/components/SectionDivider/index.d.ts.map

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

package/components/SectionDivider/index.js

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

package/components/SectionDivider/index.js.map

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

package/components/SectionDivider/section-divider.module.css

@@ -0,0 +1,275 @@
+/*
+ * Section Divider & Shaped Edge (§11.2) [D172, D179, D189]. CVA function
+ * `sectionDivider` in SectionDivider.tsx. Parts: base, rule (the Separator),
+ * ornament (the pause; with run, dots, segment, dot and star), shape (the
+ * hill's host; its ::before is the curve), fringe (the tick row, composing
+ * ornament-fringe), fallback (the print and forced-colors rule). Colors
+ * follow the §11.2 Color roles table through role variables only; local
+ * custom properties carry dimensions only.
+ *
+ * Band seams sit on the lower band's top edge: the root is that band's
+ * first child and pulls itself up through the band's --ds-space-section
+ * top padding (§11.1), then restores it below.
+ */
+
+/* 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. */
+.rule {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.segment {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.dots {
+  composes: lineDotted from '../../utils/line.module.css';
+}
+
+.fringe {
+  composes: ornamentFringe from '../../utils/pattern.module.css';
+}
+
+@layer base {
+  /* z-index 0: over the upper band's ground, under a hero's straddling
+     parts (--layer-1), so the hill passes behind the stacked photo. */
+  .base {
+    position: relative;
+    z-index: 0;
+    display: block;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* The rule: a full-bleed --border-size-1 line. */
+  .rule {
+    display: block;
+    margin: 0;
+    border-width: 0;
+    border-block-start-width: var(--border-size-1);
+    border-color: var(--role-rule);
+  }
+
+  /* The pause: centred, never at a boundary (§11.2 Variants). */
+  .ornament {
+    display: flex;
+    align-items: center;
+    margin-inline: auto;
+  }
+
+  /* One dotted run: whole pitches plus one dot, so it starts and ends on a
+     dot (§4.8.3); 100% where round() is unsupported. */
+  .run {
+    display: flex;
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+
+  .run:first-child {
+    justify-content: flex-end;
+  }
+
+  .dots {
+    display: block;
+    inline-size: 100%;
+    inline-size: calc(round(down, 100% - var(--ds-dot), var(--ds-dot-pitch)) + var(--ds-dot));
+    block-size: var(--ds-dot);
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-dashoffset: calc(var(--ds-dot) / -2);
+  }
+
+  /* ornament-rule-dot (§4.8.2): two hairlines and a solid dot between. */
+  .segment {
+    flex: 1 1 0;
+    border-color: currentColor;
+    border-width: 0;
+    border-block-start-width: var(--border-size-1);
+  }
+
+  .dot {
+    flex: none;
+    inline-size: var(--ds-ornament-dot);
+    block-size: var(--ds-ornament-dot);
+    margin-inline: var(--ds-ornament-dot-gap);
+    fill: currentColor;
+  }
+
+  /* ornament-rule-star: the solid star once at the centre, halo-clear. */
+  .star {
+    flex: none;
+    inline-size: var(--ds-ornament-star);
+    block-size: var(--ds-ornament-star);
+    margin-inline: var(--ds-space-halo);
+    fill: currentColor;
+  }
+
+  /* The straight rule of print and forced colors, laid over the lower
+     band's own top edge so rules never stack. */
+  .fallback {
+    display: none;
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: calc(-1 * var(--border-size-1));
+    border-block-start: var(--border-size-1) solid var(--primary12);
+    pointer-events: none;
+  }
+}
+
+@layer variants {
+  /* The hard cut renders nothing; the class exists for the axis. */
+  .kindStraight {
+    display: none;
+  }
+
+  /* Band seams: on the lower band's top edge, its padding restored below. */
+  .kindSeam,
+  .kindPageSeam,
+  .kindHill,
+  .kindFringe {
+    margin-block: calc(-1 * var(--ds-space-section)) var(--ds-space-section);
+  }
+
+  /* Chrome and pause rules sit in the flow where they are placed. */
+  .kindChrome,
+  .kindPause {
+    margin-block: 0;
+  }
+
+  /* Page ↔ page: the lower band's hairline in both modes [D179]. */
+  .kindPageSeam .rule {
+    border-color: var(--role-hairline);
+  }
+
+  /* Chrome: the site's one chrome weight (§4.3); heavy is --border-size-2 --primary12. */
+  .heavy .rule {
+    border-block-start-width: var(--border-size-2);
+    border-color: var(--primary12);
+  }
+
+  /* Pause ornaments: dotted in --role-rule; the ornament rules in --role-accent. */
+  .ornamentDotted {
+    color: var(--role-rule);
+  }
+
+  .ornamentDotted .ornament,
+  .ornamentStar .ornament {
+    inline-size: min(100%, var(--ds-measure-reading));
+  }
+
+  .ornamentStar,
+  .ornamentDot {
+    color: var(--role-accent);
+  }
+
+  /* 35% of the text column, at most --size-px-13 (§4.8.2). */
+  .ornamentDot .ornament {
+    inline-size: min(35%, var(--size-px-13));
+  }
+
+  /*
+   * The hill [D189]. The root paints the lower band's own ground; `shape`
+   * is a night Ground used only for its --ds-edge-shaped switch (block in
+   * light mode, none on a dark page, where the night band's --primary12
+   * seam is the edge). In the flow it is the amplitude added to the band's
+   * top padding: 4.6% of the width, clamped --ds-edge-hill-min to
+   * --ds-edge-hill-max. Its ::before rises the same height above the seam
+   * as one hard-edged curve in the lower ground: low at the start, crest at
+   * 0.667 of the width, the end falling 30% of the rise; no rule under it.
+   * These rules sit above Ground's own base-layer paint and seam.
+   */
+  .kindHill {
+    background-color: var(--role-ground);
+  }
+
+  .shape {
+    display: var(--ds-edge-shaped, block);
+    position: relative;
+    inline-size: 100%;
+    aspect-ratio: 1000 / 46;
+    min-block-size: var(--ds-edge-hill-min);
+    max-block-size: var(--ds-edge-hill-max);
+    border: 0;
+    background-color: inherit;
+    color: inherit;
+  }
+
+  .shape::before {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 100%;
+    block-size: 100%;
+    background-color: inherit;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L55.6 94.2C111.1 88.4 222.2 76.9 333.3 56.2C444.4 35.6 555.6 0 666.7 0C777.8 0 888.9 20 1000 30V100Z'/%3E%3C/svg%3E");
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+    pointer-events: none;
+  }
+
+  /* The crest keeps its place from the start edge in right-to-left pages. */
+  .shape:dir(rtl)::before {
+    scale: -1 1;
+  }
+
+  /*
+   * The hatched fringe [D172, D179]: ornament-fringe ticks hanging from the
+   * seam. On the night band they take its --primary12; under the media hero
+   * the host is a night Ground for the switch only, so its paint and seam
+   * are cleared and the ticks take the lower band's --primary12 as color.
+   */
+  .fringe {
+    display: block;
+    block-size: 0;
+  }
+
+  .fringeOnPage {
+    border: 0;
+    background: none;
+    color: inherit;
+  }
+
+  .fringeOnPage::after {
+    background-color: currentColor;
+  }
+
+  /* Forced colors: the fallback rule replaces the shape and the ticks. */
+  @media (forced-colors: active) {
+    .shape {
+      display: none;
+    }
+
+    .fringe {
+      border-block-start: 0;
+    }
+
+    .fallback {
+      display: block;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* The curve and the ticks drop; the straight ground-change rule prints
+       black at 0.75 pt through the remap [D172, D189]. */
+    .shape {
+      display: none;
+    }
+
+    .base .fringe {
+      border-block-start: 0;
+    }
+
+    .fallback {
+      display: block;
+    }
+
+    .base {
+      break-before: avoid;
+      break-after: avoid;
+    }
+  }
+}

package/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+export declare const sectionHeader: (props?: ({
+    kind?: "editorial" | "trailed" | "scene" | "anchored" | "technical" | "topic" | null | undefined;
+    level?: "module" | "band" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SectionHeaderVariants = VariantProps<typeof sectionHeader>;
+/** The six §11.8 builds. */
+export type SectionHeaderKind = NonNullable<SectionHeaderVariants['kind']>;
+/** The "See all" link: a standalone link in `type-label` caps with a trailing arrow. */
+export interface SectionHeaderSeeAll {
+    /** The destination; a short absolute URL also prints after the label (§7.6). */
+    href: string;
+    /** Authored in sentence case; the CSS sets the caps. Default "See all". */
+    label?: React.ReactNode;
+    /** Base UI `render`, e.g. `<NextLink href="/trails" />`. */
+    render?: React.ReactElement;
+}
+type SectionHeaderCommonProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
+    /**
+     * `band` (default): an `h2` in `type-h2`, the section head in
+     * `--role-heading`. `module`: an `h3` in `type-itemhead` in `--primary12`
+     * (an item head, not a section head [D60]).
+     */
+    level?: SectionHeaderVariants['level'];
+    /**
+     * Primary Radix scale: the eyebrow, lede, module heading and rules. Never
+     * defaulted; omitted, it inherits the band or field [D133].
+     */
+    primary?: SectionHeaderVariants['primary'];
+    /**
+     * Secondary Radix scale: the band heading and kicker (`--role-heading`),
+     * the trail and the "See all" underline (`--role-accent`) and its hover
+     * ink. Never defaulted.
+     */
+    secondary?: SectionHeaderVariants['secondary'];
+    /** The heading text: what the band or module says. Required: an eyebrow is never the only heading. */
+    heading: React.ReactNode;
+    /** The heading's `id`, for the band's `aria-labelledby`. */
+    headingId?: string;
+    /** Why it matters: `type-lead` in `--primary12`, capped at `--ds-measure-reading`. */
+    lede?: React.ReactNode;
+    /** Where to go next: below the lede at base, at the heading row's end from `--lg-n-above`. */
+    seeAll?: SectionHeaderSeeAll;
+    /** The action row: the scene opener's pill, or the anchored opener's action. */
+    children?: React.ReactNode;
+};
+type SectionHeaderKindProps = {
+    /**
+     * `editorial` (default): eyebrow, hairline, content (Audubon). With an
+     * eyebrow the header opens with its rule, so the band needs no
+     * page-seam hairline above it [D179].
+     */
+    kind?: 'editorial';
+    /** What kind of thing this is: `type-eyebrow` caps in `--primary12`, over its hairline. */
+    eyebrow?: React.ReactNode;
+    kicker?: never;
+    art?: never;
+    number?: never;
+    topic?: never;
+} | {
+    /** `trailed`: a display-serif kicker threaded by the dashed trail; the heading centred below it (LTA). */
+    kind: 'trailed';
+    /** The kicker: `type-kicker` in `--role-heading`, a section head. */
+    kicker: React.ReactNode;
+    eyebrow?: never;
+    art?: never;
+    number?: never;
+    topic?: never;
+} | {
+    /** `scene`: heading, lede and pill, all centred (Bareburger). */
+    kind: 'scene';
+    eyebrow?: never;
+    kicker?: never;
+    art?: never;
+    number?: never;
+    topic?: never;
+} | {
+    /** `anchored`: a sticker drawing sitting on the heading, then an action (Bareburger). */
+    kind: 'anchored';
+    /** The sticker (§6.14) at `--ds-size-art-s`; its halo touches the heading's cap tops. */
+    art: React.ReactNode;
+    eyebrow?: never;
+    kicker?: never;
+    number?: never;
+    topic?: never;
+} | {
+    /** `technical`: a mono section number and a caps label with a colon, over a rule. */
+    kind: 'technical';
+    /** The section number, e.g. "03", in `type-data`. */
+    number: React.ReactNode;
+    /** The label, in `type-label` caps; the colon is added. */
+    eyebrow: React.ReactNode;
+    kicker?: never;
+    art?: never;
+    topic?: never;
+} | {
+    /** `topic`: an icon and caps topic tag above the heading (LTA). */
+    kind: 'topic';
+    /** The topic tag: a §10 Tag with its icon, which keeps its own module. */
+    topic: React.ReactNode;
+    eyebrow?: never;
+    kicker?: never;
+    art?: never;
+    number?: never;
+};
+/** Props for SectionHeader: `div` props, `render`, the kind with its parts, the level and the color axes. */
+export type SectionHeaderProps = SectionHeaderCommonProps & SectionHeaderKindProps;
+/**
+ * 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 declare function SectionHeader(props: SectionHeaderProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=SectionHeader.d.ts.map

package/components/SectionHeader/SectionHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"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"}