@fairgarden/design 0.1.0-0.canary.0

package/page/cta-block/CTABlock.js

@@ -0,0 +1,125 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Button } from '../../actions/button';
+import { Ground } from '../../foundations/ground';
+import { OrnamentBlob, OrnamentTrail } from '../../utils/Ornament';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './cta-block.module.css';
+/*
+ * CTA Block (§11.10, the CTA banner): the page's one closing invitation
+ * before the footer ("Keep exploring", "Find a garden near you"). A
+ * `section` labelled by its headline, holding the kicker or eyebrow, the
+ * headline, an optional support line, the action Button (`solid`, with a
+ * leading arrow) and an optional `outline` twin. The saturated and deep
+ * kinds are a CTA field, a `<Ground kind="field">` inset in the content
+ * container, never a full-bleed band [D177, D180]; the sunburst, mission
+ * and framed kinds sit on the page ground of their band.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: cta-block.module.css; CVA function `ctaBlock` (the spec's
+ *   `ctaBanner`, named for the component).
+ * - Axes: `kind` → sunburst | mission | saturated | deep | framed →
+ *   same-named classes (`saturated` and `deep` render the CTA field);
+ *   `patterned` → `patterned` (the headline takes --primary12 over a
+ *   pattern; always on for `sunburst` and `mission`); `primary`,
+ *   `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: kind sunburst, patterned false; color axes: none [D133].
+ * - Color fallback: inherits the band's scope, or the field preset's
+ *   defaults. The action is a §9.2 Button whose `solid` class aliases the
+ *   scope's action scale (the ink pill on the solid fields).
+ * - States: none of its own; the Buttons carry §9.2's.
+ * - Parts: base, field (saturated and deep), content (the container),
+ *   layout (its grid), text, decor (decorSunburst composes
+ *   pattern-sunburst), kicker, trail (an OrnamentTrail by default), headline,
+ *   support, actions, mount (an OrnamentBlob around the mark), frame (with
+ *   frameLine), cornerMark.
+ * - Scope: sunburst, mission and framed sit on their band's page ground;
+ *   for saturated and deep, `field` is a `kind="field"` Ground of a field
+ *   preset, with its --radius-3-25 and its --primary12 edge in
+ *   --role-edge [D177, D178].
+ * - Container: `content` is the inline-size container `cta`; the action row
+ *   and the deep and framed kinds' headline/actions split (7 / 5 from 768 px)
+ *   query it. Baseline: the actions flex-wrap; the split's viewport
+ *   fallback is --lg-n-above (§5.10.2) [D163].
+ */
+export const ctaBlock = cva(styles.base, {
+    variants: {
+        kind: {
+            sunburst: styles.sunburst,
+            mission: styles.mission,
+            saturated: styles.saturated,
+            deep: styles.deep,
+            framed: styles.framed,
+        },
+        patterned: {
+            true: styles.patterned,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'sunburst',
+        patterned: false,
+    },
+});
+function ActionButton({ action, variant }) {
+    const { label, href, onClick } = action;
+    return (React.createElement(Button, { variant: variant, size: "lg", icon: variant === 'solid' ? 'arrow_forward' : undefined, onClick: onClick, ...(href != null ? { render: React.createElement("a", { href: href }), nativeButton: false } : null) }, label));
+}
+function CornerMark({ corner }) {
+    return (React.createElement("svg", { className: `${styles.cornerMark} ${styles[corner]}`, viewBox: "0 0 12 12", "aria-hidden": "true", focusable: "false" },
+        React.createElement("path", { d: "M0 6h12M6 0v12" })));
+}
+/**
+ * The CTA block. At most one per page, the page's ornament peak; never a
+ * form (use Newsletter), a repeated mid-page promo or a floating bar. In
+ * print the ornament drops, the action prints "Label (short URL)" and a
+ * CTA field prints its edge as a black frame.
+ */
+export function CTABlock(props) {
+    const { kind, field, headline, headingLevel = 2, kicker, trail, support, action, secondaryAction, decor, mount, patterned, primary, secondary, className, ...rest } = props;
+    const scope = useScopeAttributes();
+    const headingId = React.useId();
+    const resolvedKind = kind ?? 'sunburst';
+    const isField = resolvedKind === 'saturated' || resolvedKind === 'deep';
+    const HeadingTag = headingLevel === 3 ? 'h3' : 'h2';
+    // Omitted slots take the kind's own ornament; `null` (or `false`) omits it.
+    const isSunburst = resolvedKind === 'sunburst';
+    const resolvedTrail = trail === undefined ? (isSunburst ? React.createElement(OrnamentTrail, null) : null) : trail;
+    const content = (React.createElement("div", { className: styles.content },
+        React.createElement("div", { className: styles.layout },
+            React.createElement("div", { className: styles.text },
+                resolvedKind === 'mission' && mount != null ? (React.createElement("div", { className: styles.mount, "aria-hidden": "true" },
+                    React.createElement(OrnamentBlob, null, mount))) : null,
+                kicker != null ? (React.createElement("p", { className: styles.kicker },
+                    resolvedTrail != null && resolvedTrail !== false ? (React.createElement("span", { className: styles.trail, "aria-hidden": "true" }, resolvedTrail)) : null,
+                    React.createElement("span", null, kicker))) : null,
+                React.createElement(HeadingTag, { id: headingId, className: styles.headline }, headline),
+                support != null ? React.createElement("p", { className: styles.support }, support) : null),
+            React.createElement("div", { className: styles.actions },
+                React.createElement(ActionButton, { action: action, variant: "solid" }),
+                secondaryAction ? React.createElement(ActionButton, { action: secondaryAction, variant: "outline" }) : null))));
+    const body = (React.createElement(React.Fragment, null,
+        decor === undefined && isSunburst ? (React.createElement("div", { className: `${styles.decor} ${styles.decorSunburst}`, "aria-hidden": "true" })) : decor != null && decor !== false ? (React.createElement("div", { className: styles.decor, "aria-hidden": "true" }, decor)) : null,
+        content,
+        resolvedKind === 'framed' ? (React.createElement(React.Fragment, null,
+            React.createElement("svg", { className: styles.frame, "aria-hidden": "true", focusable: "false" },
+                React.createElement("rect", { className: styles.frameLine, width: "100%", height: "100%" })),
+            React.createElement(CornerMark, { corner: "startStart" }),
+            React.createElement(CornerMark, { corner: "startEnd" }),
+            React.createElement(CornerMark, { corner: "endStart" }),
+            React.createElement(CornerMark, { corner: "endEnd" }))) : null));
+    const defaultField = resolvedKind === 'deep' ? 'forest' : 'amber';
+    return (React.createElement("section", { ...rest, ...scope, "aria-labelledby": rest['aria-labelledby'] ?? headingId, className: ctaBlock({
+            kind: resolvedKind,
+            patterned: patterned === true || isSunburst || resolvedKind === 'mission',
+            primary,
+            secondary,
+            className,
+        }) }, isField ? (React.createElement(Ground, { kind: "field", preset: field ?? defaultField, render: React.createElement("div", null), className: styles.field }, body)) : (body)));
+}
+//# sourceMappingURL=CTABlock.js.map

package/page/cta-block/CTABlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTABlock.js","sourceRoot":"","sources":["../../src/page/cta-block/CTABlock.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACvC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,SAAS,EAAE,MAAM,CAAC,SAAS;YAC3B,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,MAAM,EAAE,MAAM,CAAC,MAAM;SACtB;QACD,SAAS,EAAE;YACT,IAAI,EAAE,MAAM,CAAC,SAAS;SACvB;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,KAAK;KACjB;CACF,CAAC,CAAA;AA+GF,SAAS,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAAuD;IAC5F,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,MAAM,CAAA;IACvC,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACvD,OAAO,EAAE,OAAO,KACZ,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,2BAAG,IAAI,EAAE,IAAI,GAAI,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAE7E,KAAK,CACC,CACV,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,MAAM,EAAiE;IAC3F,OAAO,CACL,6BACE,SAAS,EAAE,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,MAAM,CAAC,EAAE,EACnD,OAAO,EAAC,WAAW,iBACP,MAAM,EAClB,SAAS,EAAC,OAAO;QAEjB,8BAAM,CAAC,EAAC,gBAAgB,GAAG,CACvB,CACP,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,GAAG,CAAC,EAChB,MAAM,EACN,KAAK,EACL,OAAO,EACP,MAAM,EACN,eAAe,EACf,KAAK,EACL,KAAK,EACL,SAAS,EACT,OAAO,EACP,SAAS,EACT,SAAS,EACT,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IAC/B,MAAM,YAAY,GAAG,IAAI,IAAI,UAAU,CAAA;IACvC,MAAM,OAAO,GAAG,YAAY,KAAK,WAAW,IAAI,YAAY,KAAK,MAAM,CAAA;IACvE,MAAM,UAAU,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IACnD,4EAA4E;IAC5E,MAAM,UAAU,GAAG,YAAY,KAAK,UAAU,CAAA;IAC9C,MAAM,aAAa,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAC,aAAa,OAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;IAE3F,MAAM,OAAO,GAAG,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;QAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;gBACxB,YAAY,KAAK,SAAS,IAAI,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAC7C,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,iBAAc,MAAM;oBAC9C,oBAAC,YAAY,QAAE,KAAK,CAAgB,CAChC,CACP,CAAC,CAAC,CAAC,IAAI;gBACP,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAChB,2BAAG,SAAS,EAAE,MAAM,CAAC,MAAM;oBACxB,aAAa,IAAI,IAAI,IAAI,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,CAClD,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,iBAAc,MAAM,IAC9C,aAAa,CACT,CACR,CAAC,CAAC,CAAC,IAAI;oBACR,kCAAO,MAAM,CAAQ,CACnB,CACL,CAAC,CAAC,CAAC,IAAI;gBACR,oBAAC,UAAU,IAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,IAClD,QAAQ,CACE;gBACZ,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,2BAAG,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAK,CAAC,CAAC,CAAC,IAAI,CACjE;YACN,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;gBAC5B,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,OAAO,GAAG;gBAC/C,eAAe,CAAC,CAAC,CAAC,oBAAC,YAAY,IAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,CACjF,CACF,CACF,CACP,CAAA;IAED,MAAM,IAAI,GAAG,CACX;QACG,KAAK,KAAK,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,CACnC,6BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,aAAa,EAAE,iBAAc,MAAM,GAAG,CACjF,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,CACrC,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,iBAAc,MAAM,IAC7C,KAAK,CACF,CACP,CAAC,CAAC,CAAC,IAAI;QACP,OAAO;QACP,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B;YACE,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO;gBAChE,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,GAAG,CAC5D;YACN,oBAAC,UAAU,IAAC,MAAM,EAAC,YAAY,GAAG;YAClC,oBAAC,UAAU,IAAC,MAAM,EAAC,UAAU,GAAG;YAChC,oBAAC,UAAU,IAAC,MAAM,EAAC,UAAU,GAAG;YAChC,oBAAC,UAAU,IAAC,MAAM,EAAC,QAAQ,GAAG,CAC7B,CACJ,CAAC,CAAC,CAAC,IAAI,CACP,CACJ,CAAA;IAED,MAAM,YAAY,GAAG,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAA;IAEjE,OAAO,CACL,oCACM,IAAI,KACJ,KAAK,qBACQ,IAAI,CAAC,iBAAiB,CAAC,IAAI,SAAS,EACrD,SAAS,EAAE,QAAQ,CAAC;YAClB,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,SAAS,KAAK,IAAI,IAAI,UAAU,IAAI,YAAY,KAAK,SAAS;YACzE,OAAO;YACP,SAAS;YACT,SAAS;SACV,CAAC,IAED,OAAO,CAAC,CAAC,CAAC,CACT,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,MAAM,EAAG,KAAsD,IAAI,YAAY,EAC/E,MAAM,EAAE,gCAAO,EACf,SAAS,EAAE,MAAM,CAAC,KAAK,IAEtB,IAAI,CACE,CACV,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CACO,CACX,CAAA;AACH,CAAC"}

package/page/cta-block/cta-block.module.css

@@ -0,0 +1,358 @@
+/*
+ * CTA Block (§11.10, the CTA banner). CVA function `ctaBlock`.
+ * Color roles (§11.10): CTA field ground = the preset's, edge --role-edge
+ * (the field's --primary12, drawn by Ground); kicker --role-heading; trail
+ * --role-accent; headline --primary12 over a pattern, else --role-heading;
+ * support --primary12; action and outline twin: the §9.2 Button's roles;
+ * decor --role-tint (the sunburst's tile ink); blob mount discs
+ * --secondary9 / --secondary7 and its mark --secondary-contrast (the
+ * ornament module's); crop marks --primary12.
+ * Colors are role variables only; local custom properties carry
+ * dimensions only.
+ */
+
+/* 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. */
+.kicker {
+  composes: typeKicker from '../../utils/type.module.css';
+}
+
+.headline {
+  composes: typeH2 from '../../utils/type.module.css';
+}
+
+.support {
+  composes: typeBody from '../../utils/type.module.css';
+}
+
+.frameLine {
+  composes: lineDashedFine from '../../utils/line.module.css';
+}
+
+.decorSunburst {
+  composes: patternSunburst from '../../utils/pattern.module.css';
+}
+
+@layer base {
+  .base {
+    position: relative;
+    display: block;
+    color: var(--primary12);
+  }
+
+  /*
+   * The content: the inline-size container `cta`. Baseline: a centered
+   * stack; kicker → headline --size-px-8-5, headline → action --size-px-7.
+   */
+  .content {
+    container: cta / inline-size;
+    position: relative;
+    z-index: 1;
+    min-inline-size: 0;
+  }
+
+  .layout {
+    display: grid;
+    justify-items: center;
+    row-gap: var(--size-px-7);
+    min-inline-size: 0;
+    text-align: center;
+  }
+
+  .text {
+    display: grid;
+    justify-items: center;
+    min-inline-size: 0;
+    inline-size: 100%;
+  }
+
+  /* The kicker starts ≈ 15% of the column in while the headline centers. */
+  .kicker {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2-5);
+    justify-self: start;
+    margin: 0;
+    margin-block-end: var(--size-px-8-5);
+    margin-inline-start: 15%;
+    color: var(--role-heading);
+    text-align: start;
+  }
+
+  .trail {
+    display: inline-flex;
+    flex: none;
+    max-inline-size: var(--size-px-12);
+    color: var(--role-accent);
+  }
+
+  .trail > :where(svg, img) {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  /* The headline: type-h2, centered, ≤ 45ch (--size-content-2). */
+  .headline {
+    max-inline-size: var(--size-content-2);
+    margin: 0;
+    color: var(--role-heading);
+    text-wrap: balance;
+  }
+
+  .support {
+    max-inline-size: var(--size-content-2);
+    margin: 0;
+    margin-block-start: var(--size-px-5);
+    color: var(--primary12);
+  }
+
+  /* Actions flex-wrap: the outline twin sits inline once both fit, below otherwise. */
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--size-px-2-5);
+  }
+
+  /*
+   * Decoration behind the content, in --role-tint, clipped by its box (the
+   * block; the sunburst kind's reaches --size-px-7-5 below it, below). A
+   * custom node sits centred on the bottom edge. `.base .decor` outranks
+   * the pattern class's own `position: relative` in this layer.
+   */
+  .base .decor {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    overflow: hidden;
+    color: var(--role-tint);
+    pointer-events: none;
+  }
+
+  .decor > :where(svg, img) {
+    display: block;
+    max-inline-size: none;
+  }
+
+  /* The blob mount (an OrnamentBlob, which colors its discs and mark), above the headline. */
+  .mount {
+    display: grid;
+    place-items: center;
+    margin-block-end: var(--size-px-5);
+  }
+
+  /* The crop-mark box (§4.5.5): a line-dashed-fine rectangle in --primary12, foreground so it prints. */
+  .frame {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .frameLine {
+    fill: none;
+    stroke: var(--primary12);
+  }
+
+  /* A "+" of --fgd-mark-arm --border-size-1 arms at each corner, overhanging --fgd-mark-overhang. */
+  .cornerMark {
+    position: absolute;
+    inline-size: var(--fgd-mark-arm);
+    block-size: var(--fgd-mark-arm);
+    overflow: visible;
+    fill: none;
+    stroke: var(--primary12);
+    stroke-width: var(--border-size-1);
+    pointer-events: none;
+  }
+
+  .startStart {
+    inset-block-start: calc(-1 * var(--fgd-mark-overhang));
+    inset-inline-start: calc(-1 * var(--fgd-mark-overhang));
+  }
+
+  .startEnd {
+    inset-block-start: calc(-1 * var(--fgd-mark-overhang));
+    inset-inline-end: calc(-1 * var(--fgd-mark-overhang));
+  }
+
+  .endStart {
+    inset-block-end: calc(-1 * var(--fgd-mark-overhang));
+    inset-inline-start: calc(-1 * var(--fgd-mark-overhang));
+  }
+
+  .endEnd {
+    inset-block-end: calc(-1 * var(--fgd-mark-overhang));
+    inset-inline-end: calc(-1 * var(--fgd-mark-overhang));
+  }
+}
+
+@layer variants {
+  /* Only --primary12 text sits on a pattern (§4.10.1) [D120]. */
+  .patterned .headline {
+    color: var(--primary12);
+  }
+
+  /*
+   * Sunburst: the decoration reaches --size-px-7-5 below the block's bottom
+   * edge, into its band's bottom padding, and pattern-sunburst centres its
+   * origin there, so that edge clips the lower half (§4.10.1, §11.10).
+   */
+  .sunburst .decor {
+    inset-block-end: calc(-1 * var(--size-px-7-5));
+  }
+
+  /* Mission: the mount replaces the kicker's trail; the headline follows it directly. */
+  .mission .kicker {
+    justify-self: center;
+    margin-inline-start: 0;
+  }
+
+  /*
+   * The CTA field [D177]: inset in the content container, never full-bleed;
+   * --radius-3-25; padding --size-px-7, --size-px-10 from --lg-n-above
+   * (≥ the radius); Ground draws the --primary12 edge.
+   */
+  .field {
+    position: relative;
+    padding: var(--size-px-7);
+    border-radius: var(--radius-3-25);
+  }
+
+  @media (min-width: 1024px) {
+    .field {
+      padding: var(--size-px-10);
+    }
+  }
+
+  /* Saturated campaign field: one ink; the kicker centers with the headline. */
+  .saturated .kicker {
+    justify-self: center;
+    margin-inline-start: 0;
+  }
+
+  /* Framed: the crop-mark box around --size-px-7 of padding, square. */
+  .framed {
+    padding: var(--size-px-7);
+    border-radius: var(--radius-0);
+  }
+
+  /*
+   * Deep and framed: headline 7, actions 5 from 768 px of the content's
+   * container; viewport fallback --lg-n-above.
+   */
+  @media (min-width: 1024px) {
+    .deep .layout,
+    .framed .layout {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+      align-items: center;
+      column-gap: var(--fgd-space-margin);
+      justify-items: stretch;
+      text-align: start;
+    }
+
+    .deep .text,
+    .framed .text {
+      grid-column: 1 / span 7;
+      justify-items: start;
+    }
+
+    .deep .actions,
+    .framed .actions {
+      grid-column: 8 / -1;
+      justify-content: flex-end;
+    }
+
+    .deep .kicker,
+    .framed .kicker {
+      margin-inline-start: 0;
+    }
+  }
+
+  @container cta (width < 768px) {
+    .deep .layout,
+    .framed .layout {
+      grid-template-columns: minmax(0, 1fr);
+      justify-items: center;
+      text-align: center;
+    }
+
+    .deep .text,
+    .framed .text,
+    .deep .actions,
+    .framed .actions {
+      grid-column: 1 / -1;
+    }
+
+    .deep .text,
+    .framed .text {
+      justify-items: center;
+    }
+
+    .deep .actions,
+    .framed .actions {
+      justify-content: center;
+    }
+  }
+
+  @container cta (width >= 768px) {
+    .deep .layout,
+    .framed .layout {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+      align-items: center;
+      column-gap: var(--fgd-space-margin);
+      justify-items: stretch;
+      text-align: start;
+    }
+
+    .deep .text,
+    .framed .text {
+      grid-column: 1 / span 7;
+      justify-items: start;
+    }
+
+    .deep .actions,
+    .framed .actions {
+      grid-column: 8 / -1;
+      justify-content: flex-end;
+    }
+
+    .deep .kicker,
+    .framed .kicker {
+      margin-inline-start: 0;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /*
+     * The ornament drops; the block reads completely without it. The
+     * trail prints black at 0.75 pt and the blob mount drops its discs (the
+     * ornament module's print rules), its mark printing black (§6.6, §11.10).
+     */
+    .decor {
+      display: none;
+    }
+
+    /* Page-ground kinds print between rules; a CTA field prints its edge as a black frame (Ground). */
+    .sunburst,
+    .mission {
+      padding-block: var(--size-px-5);
+      border-block: var(--border-size-1) solid var(--primary12);
+    }
+
+    .base {
+      break-inside: avoid;
+    }
+
+    /* The framed kind's dashed frame (0.75 pt, 3 / 2.25 pt) and corner marks print as they are. */
+  }
+}

package/page/cta-block/index.d.ts

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

package/page/cta-block/index.d.ts.map

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

package/page/cta-block/index.js

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

package/page/cta-block/index.js.map

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

package/page/footer/Footer.d.ts

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type BandPreset } from '../../foundations/ground';
+import { type IconName } from '../../foundations/icon';
+import type { SitemapSection } from '../../utils/navigation';
+/** The shared navigation data (utils/navigation), re-exported where it first lived. */
+export type { SitemapLink, SitemapSection } from '../../utils/navigation';
+export declare const footer: (props?: ({
+    kind?: "ruled" | "guide" | "minimal" | null | undefined;
+    signoff?: boolean | null | undefined;
+    newsletterColumn?: boolean | null | undefined;
+    collapsed?: boolean | 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 FooterVariants = Omit<VariantProps<typeof footer>, 'collapsed'>;
+/** One contact item: middle-dot separated in the contact line. */
+export interface FooterContactItem {
+    /** The caps label on the ruled grid's contact rows ("Email"). */
+    label?: string;
+    /** The text: an address, a number, an email. */
+    value: string;
+    /** A `mailto:`, `tel:` or page link, underlined at rest. */
+    href?: string;
+}
+/** One social link: an outline icon (20 px, custom SVG in `currentColor`) or a text link. */
+export interface FooterSocialLink {
+    label: string;
+    href: string;
+    icon?: React.ReactNode;
+}
+/** One legal link. */
+export interface FooterLegalLink {
+    label: string;
+    href: string;
+    current?: boolean;
+}
+/** Links from the page to its in-flow "Back to top" target (the skip-link target). */
+export interface FooterBackToTop {
+    /** The target, e.g. "#main". Focus moves there. */
+    href: string;
+    /** Default "Back to top". */
+    label?: string;
+}
+type HeadingLevel = 2 | 3;
+interface FooterCommonProps extends Omit<React.ComponentPropsWithRef<'footer'>, 'children'> {
+    /**
+     * The footer's band: `night` (default for `guide`, slate × green, amber
+     * action), or a page ground (default `paper` for `ruled` and `minimal`).
+     * Never a field [D177].
+     */
+    preset?: BandPreset;
+    /** The logo link or wordmark, at the head of the brand column. */
+    brand?: React.ReactNode;
+    /** The action blocks: `FooterBlock`s (icon → heading → body → action). */
+    blocks?: React.ReactNode;
+    /**
+     * The sitemap: the shared navigation data (utils/navigation), one group
+     * per top-level section, headed by its label and linked to its `href`
+     * [D187]. Each group lists the section's `links`; the mega panels' third
+     * tier (a link's own `links`) stays in the panels.
+     */
+    sitemap?: readonly SitemapSection[];
+    /** The sitemap's accessible name. Default "Site". */
+    sitemapLabel?: string;
+    /** The postal address: mixed case, unlabeled lines (one per line). */
+    address?: React.ReactNode;
+    /** The contact line, middle-dot separated; links underlined at rest. */
+    contact?: readonly FooterContactItem[];
+    /** Social links, outline icons or text. */
+    social?: readonly FooterSocialLink[];
+    /** The legal links, beside the ©. */
+    legal?: readonly FooterLegalLink[];
+    /** The © line, e.g. "© 2026 FairGarden". */
+    copyright?: React.ReactNode;
+    /**
+     * The colophon, `type-small` (dates and versions in `<data>` or `<time>`):
+     * "Set in Fraunces, Source Serif 4, Figtree and IBM Plex Mono. Last
+     * updated 22 Sept 2026."
+     */
+    colophon?: React.ReactNode;
+    /** The organization's name, first in the printed imprint. */
+    organization?: React.ReactNode;
+    /** An in-flow "Back to top" link; never fixed. */
+    backToTop?: FooterBackToTop;
+    /** A straddle Newsletter (`kind="straddle"`) across the footer's top seam. */
+    straddle?: React.ReactNode;
+    /** Heading level of the block and group headings. Default `2`. */
+    headingLevel?: HeadingLevel;
+    /** The locale of the printed "Printed on" date. Default `en-GB`. */
+    locale?: string;
+    /** Primary Radix scale: text, rules, rings. Never defaulted; omitted, it inherits the Ground [D133]. */
+    primary?: FooterVariants['primary'];
+    /** Secondary Radix scale: icons, chevrons, contact underlines, link hover. Never defaulted. */
+    secondary?: FooterVariants['secondary'];
+}
+interface FooterGuideProps extends FooterCommonProps {
+    /**
+     * `guide` (default): the field-guide footer on the night band: action
+     * blocks → sitemap → contact → legal → colophon. `ruled`: a page ground
+     * opened by the chrome rule, a full-bleed cell grid of caps links and
+     * contact rows. `minimal`: a top rule, the logo, one link line, the legal
+     * row and the colophon.
+     */
+    kind?: 'guide';
+    /**
+     * The sitemap in columns 1–7 and the inline newsletter in 8–12 behind a
+     * vertical rule, from `--lg-n-above` [D187]. Default `false`.
+     */
+    newsletterColumn?: boolean;
+    /** The inline Newsletter for the newsletter column. */
+    newsletter?: React.ReactNode;
+    /** The newsletter's short URL, printed in the imprint: "Newsletter (example.org/newsletter)". */
+    newsletterUrl?: string;
+    /** A large wordmark in the tint, cropped by the band's bottom edge. Default `false`. */
+    signoff?: boolean;
+    /** The sign-off wordmark's text (decorative; the brand is named elsewhere). */
+    wordmark?: string;
+}
+interface FooterPageGroundProps extends FooterCommonProps {
+    kind: 'ruled' | 'minimal';
+    newsletterColumn?: never;
+    newsletter?: never;
+    newsletterUrl?: never;
+    signoff?: never;
+    wordmark?: never;
+}
+/** Props for Footer: `footer` props, the kind and its options, the parts' content and the color axes. */
+export type FooterProps = FooterGuideProps | FooterPageGroundProps;
+/**
+ * The footer. In print only the imprint prints (organization, address,
+ * contact written out, the print date, ©, colophon at 8–8.5 pt); the
+ * sitemap, social links, buttons, forms, sign-off and back-to-top drop.
+ */
+export declare function Footer(props: FooterProps): React.JSX.Element;
+/** Props for FooterBlock: `section` props, the icon, heading, body and action. */
+export type FooterBlockProps = Omit<React.ComponentPropsWithRef<'section'>, 'children'> & {
+    /**
+     * The block-tier icon (36 px, FILL 0): an inventory name, or a subject
+     * symbol's SVG element in `currentColor`. It takes `--role-accent`.
+     */
+    icon?: IconName | React.ReactElement;
+    /** The heading, `type-itemhead` (an item head, not a section head). */
+    heading: React.ReactNode;
+    /** The heading level. Default `2`. */
+    headingLevel?: HeadingLevel;
+    /** The body, `type-body-ui`. */
+    children?: React.ReactNode;
+    /** The action: a §9.2 Button, links or the §11.11 inline form. */
+    action?: React.ReactNode;
+};
+/** An action block: icon → heading (--size-px-3) → body (--size-px-7) → action (--size-px-7). */
+export declare function FooterBlock(props: FooterBlockProps): React.JSX.Element;
+//# sourceMappingURL=Footer.d.ts.map

package/page/footer/Footer.d.ts.map

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