@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.1

package/page/section-divider/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 '../../foundations/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", { className: styles.dotLine, 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/page/section-divider/SectionDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.js","sourceRoot":"","sources":["../../src/page/section-divider/SectionDivider.tsx"],"names":[],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,280 @@
+/*
+ * 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, dotLine, 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';
+}
+
+/* On the run's <line>, never its <svg> box: the class's border fallback
+   would draw a dotted frame around the box (§4.8.3 dots are SVG). */
+.dotLine {
+  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;
+  }
+
+  .dotLine {
+    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/page/section-header/SectionHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../src/page/section-header/SectionHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAqCjE,eAAO,MAAM,aAAa;;;;;8EAsBxB,CAAA;AAEF,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAE/D,4BAA4B;AAC5B,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAA;AAE1E,wFAAwF;AACxF,MAAM,WAAW,mBAAmB;IAClC,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;CAC5B;AAED,KAAK,wBAAwB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAClF;;;;OAIG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;IAC1C;;;;OAIG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAA;IAC9C,sGAAsG;IACtG,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sFAAsF;IACtF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,KAAK,sBAAsB,GACvB;IACE;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,0GAA0G;IAC1G,IAAI,EAAE,SAAS,CAAA;IACf,qEAAqE;IACrE,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iEAAiE;IACjE,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,yFAAyF;IACzF,IAAI,EAAE,UAAU,CAAA;IAChB,yFAAyF;IACzF,GAAG,EAAE,KAAK,CAAC,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,qFAAqF;IACrF,IAAI,EAAE,WAAW,CAAA;IACjB,qDAAqD;IACrD,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,2DAA2D;IAC3D,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,mEAAmE;IACnE,IAAI,EAAE,OAAO,CAAA;IACb,0EAA0E;IAC1E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAA;AAEL,6GAA6G;AAC7G,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG,sBAAsB,CAAA;AAoElF;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,0EA6EtD"}

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 `--ds-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 `--ds-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 `--ds-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":"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"}

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

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

package/utils/colors/gray.css

@@ -47,7 +47,7 @@
     --gray11: #b4b4b4;
     --gray12: #eeeeee;
     --gray-contrast: #fff;
-    --gray-hover: var(--gray10);
+    --gray-hover: var(--gray8);
 
     @media (color-gamut: p3) {
       --gray1: color(display-p3 0.067 0.067 0.067);
@@ -80,7 +80,7 @@
       --gray11: #b4b4b4;
       --gray12: #eeeeee;
       --gray-contrast: #fff;
-      --gray-hover: var(--gray10);
+      --gray-hover: var(--gray8);
 
       @media (color-gamut: p3) {
         --gray1: color(display-p3 0.067 0.067 0.067);

package/utils/colors/grayDarkDefault.css

@@ -15,7 +15,7 @@
     --gray11: #b4b4b4;
     --gray12: #eeeeee;
     --gray-contrast: #fff;
-    --gray-hover: var(--gray10);
+    --gray-hover: var(--gray8);
 
     @media (color-gamut: p3) {
       --gray1: color(display-p3 0.067 0.067 0.067);

package/utils/colors/grayLightDefault.css

@@ -47,7 +47,7 @@
     --gray11: #b4b4b4;
     --gray12: #eeeeee;
     --gray-contrast: #fff;
-    --gray-hover: var(--gray10);
+    --gray-hover: var(--gray8);
 
     @media (color-gamut: p3) {
       --gray1: color(display-p3 0.067 0.067 0.067);