@fairgarden/design 0.1.0-alpha.0

package/components/Button/button.module.css

@@ -0,0 +1,390 @@
+/*
+ * Button (§9.2; worked example §1.11.10). CVA function `button`.
+ * Parts: `base` (container: edge, radius, focus ring), `label`, `icon`, and
+ * `edge` / `edgeLine`, the SVG that draws the disabled `line-dotted-fine`
+ * edge as true dots [D36, D68]. Colors are role variables only; local custom
+ * properties carry dimensions only. Label case is authored, never set here.
+ */
+
+/* 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. */
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    /* Local dimensions. Size classes publish --button-height. */
+    --button-padding-inline: var(--size-px-5);
+    --button-edge: var(--border-size-2);
+    --button-edge-radius: calc(var(--button-height) / 2);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-px-3);
+    box-sizing: border-box;
+    block-size: var(--button-height);
+    margin: 0;
+    padding-block: 0;
+    padding-inline: var(--button-padding-inline);
+    border: var(--button-edge) solid;
+    border-radius: var(--radius-round);
+    background: none;
+    white-space: nowrap;
+    text-decoration-line: none;
+    appearance: none;
+  }
+
+  /* Every target reaches --ds-size-hit; a smaller control extends it invisibly (§9.1) [D43]. */
+  .base::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    inline-size: var(--ds-size-hit);
+    block-size: var(--ds-size-hit);
+    min-inline-size: 100%;
+    min-block-size: 100%;
+    translate: -50% -50%;
+  }
+
+  .label {
+    text-decoration-thickness: var(--ds-stroke-1-5);
+    text-underline-offset: 0.15em;
+  }
+
+  .icon {
+    flex: none;
+  }
+
+  /* Disabled edge host: covers the border box once the solid edge is removed. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--ds-dot-fine) / 2);
+    inset-inline-start: calc(var(--ds-dot-fine) / 2);
+    inline-size: calc(100% - var(--ds-dot-fine));
+    block-size: calc(100% - var(--ds-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--button-edge-radius) - var(--ds-dot-fine) / 2);
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  /* Hover and press transitions [D181]: --ds-duration-quick, --ease-out-3; instant under --motionNotOK. */
+  @media (prefers-reduced-motion: no-preference) {
+    .base,
+    .label {
+      transition-property: color, background-color, border-color, text-decoration-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+.sm {
+  composes: typeButtonSm from '../../utils/type.module.css';
+}
+
+.md {
+  composes: typeButton from '../../utils/type.module.css';
+}
+
+.lg {
+  composes: typeButton from '../../utils/type.module.css';
+}
+
+.xl {
+  composes: typeButtonLg from '../../utils/type.module.css';
+}
+
+@layer variants {
+  /* Size: height and type role; padding is --size-px-5 at every size. */
+  .sm {
+    --button-height: var(--size-px-7);
+  }
+
+  .md {
+    --button-height: var(--ds-size-control-md);
+  }
+
+  .lg {
+    --button-height: var(--size-px-8);
+  }
+
+  .xl {
+    --button-height: var(--ds-size-control-xl);
+  }
+
+  /*
+   * The action fill. Its secondary falls back to the scope's action scale
+   * [D133]; an explicit `secondary` class wins from the scales layer.
+   */
+  .solid {
+    --secondary1: var(--action1);
+    --secondary2: var(--action2);
+    --secondary3: var(--action3);
+    --secondary4: var(--action4);
+    --secondary5: var(--action5);
+    --secondary6: var(--action6);
+    --secondary7: var(--action7);
+    --secondary8: var(--action8);
+    --secondary9: var(--action9);
+    --secondary10: var(--action10);
+    --secondary11: var(--action11);
+    --secondary12: var(--action12);
+    --secondary-contrast: var(--action-contrast);
+    --secondary-hover: var(--action-hover);
+
+    border-color: var(--role-action-edge);
+    background-color: var(--role-action);
+    color: var(--role-action-label);
+  }
+
+  /* The outline twin: --primary12 edge and label, no fill. */
+  .outline {
+    border-color: var(--primary12);
+    color: var(--primary12);
+  }
+
+  /* No container: label --primary12, glyph --role-glyph [D155]. */
+  .text {
+    --button-padding-inline: 0px;
+    --button-edge: 0px;
+
+    block-size: auto;
+    border-style: none;
+    color: var(--primary12);
+  }
+
+  .text .icon {
+    color: var(--role-glyph);
+  }
+
+  /* Circle (width = height) with a centered glyph; the label is the accessible name, visually hidden. */
+  .iconOnly {
+    --button-padding-inline: 0px;
+
+    inline-size: var(--button-height);
+    block-size: var(--button-height);
+  }
+
+  .iconOnly .label {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .iconOnly .icon {
+    color: inherit;
+  }
+
+  /* Media button face: the wrapping night Ground's ground, --primary12 outline and glyph. */
+  .onMedia {
+    border-color: var(--primary12);
+    background-color: var(--role-ground);
+    color: var(--primary12);
+  }
+
+  /* Butted to a field (§10.3): --radius-1 outside, --ds-radius-none at the seam. */
+  .buttedStart {
+    --button-edge-radius: var(--radius-1);
+
+    border-start-start-radius: var(--ds-radius-none);
+    border-end-start-radius: var(--ds-radius-none);
+    border-start-end-radius: var(--radius-1);
+    border-end-end-radius: var(--radius-1);
+  }
+
+  .buttedEnd {
+    --button-edge-radius: var(--radius-1);
+
+    border-start-start-radius: var(--radius-1);
+    border-end-start-radius: var(--radius-1);
+    border-start-end-radius: var(--ds-radius-none);
+    border-end-end-radius: var(--ds-radius-none);
+  }
+}
+
+@layer compounds {
+  /* Media button: --size-px-7 square, --radius-1, --border-size-1 outline. */
+  .iconOnlyOnMedia {
+    --button-height: var(--size-px-7);
+    --button-edge: var(--border-size-1);
+    --button-edge-radius: var(--radius-1);
+
+    border-radius: var(--radius-1);
+  }
+
+  /* Icon-only butted: keeps the §10.3 cell instead of the circle. */
+  .iconOnlyButtedStart,
+  .iconOnlyButtedEnd {
+    --button-height: var(--size-px-8);
+
+    inline-size: var(--size-px-9);
+  }
+}
+
+@layer states {
+  /*
+   * Hover (not disabled, not busy) [D181]. It changes a fill or an ink only,
+   * never the edge, a transform or a shadow:
+   * - solid: the fill moves to --role-action-hover (the action scale's
+   *   lighter neighbour, step 10 in a dark scope; the ink pill --primary11);
+   *   label and edge unchanged, no underline;
+   * - outline: a --primary3 fill (--role-soft-hover); where soft fills drop
+   *   it stays the ground and the label takes the bare-text underline
+   *   (--ds-soft-hover-line);
+   * - text: the label takes --role-link-hover, underlined where that is
+   *   --primary12 (--ds-link-hover-line); the glyph swaps to the next tier's
+   *   weight through Icon weight="interactive" (as on icon-only buttons).
+   */
+  .solid:not([data-disabled], [aria-busy='true']):hover {
+    background-color: var(--role-action-hover);
+  }
+
+  .outline:not([data-disabled], [aria-busy='true']):hover {
+    background-color: var(--role-soft-hover);
+  }
+
+  .outline:not([data-disabled], [aria-busy='true']):hover .label {
+    text-decoration-line: var(--ds-soft-hover-line);
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .text:not([data-disabled], [aria-busy='true']):hover .label {
+    color: var(--role-link-hover);
+    text-decoration-line: var(--ds-link-hover-line);
+    text-decoration-color: var(--role-accent);
+  }
+
+  /*
+   * Forced colors flatten author fills and inks, so a hover adds a
+   * --border-size-2 outline on a contained or outline button and an
+   * underline on a text button, in the system colors [D181].
+   */
+  @media (forced-colors: active) {
+    .solid:not([data-disabled], [aria-busy='true']):hover,
+    .outline:not([data-disabled], [aria-busy='true']):hover {
+      outline: var(--border-size-2) solid currentColor;
+      outline-offset: var(--border-size-2);
+    }
+
+    .text:not([data-disabled], [aria-busy='true']):hover .label {
+      text-decoration-line: underline;
+    }
+  }
+
+  /* Pressed: the inverse pair; the edge is unchanged [D84, D96]. */
+  .outline:not([data-disabled], [aria-busy='true']):active,
+  .onMedia:not([data-disabled], [aria-busy='true']):active {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  /*
+   * The ink pill (rest fill already --primary12) presses to a --primary1
+   * face with a --primary12 label [D144]. roles.css has no alias for that
+   * swap yet; without one this falls back to the inverse pair.
+   */
+  .solid:not([data-disabled], [aria-busy='true']):active {
+    background-color: var(--role-action-pressed);
+    color: var(--role-action-pressed-label);
+  }
+
+  .text:not([data-disabled], [aria-busy='true']):active .label {
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--border-size-2);
+  }
+
+  /* Focus: 2 px --primary12 ring at a 2 px offset, keyboard only [D45]. */
+  .base:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /*
+   * Disabled: fill removed, --role-muted ink, `line-dotted-fine` edge in
+   * --role-rule drawn by the edge part; never dimmed [D16]. The solid
+   * edge's width moves into the padding, so the button keeps its size.
+   */
+  .base[data-disabled] {
+    padding-inline: calc(var(--button-padding-inline) + var(--button-edge));
+    border-style: none;
+    background: none;
+    color: var(--role-muted);
+  }
+
+  .base[data-disabled] .edge {
+    display: block;
+  }
+
+  /* The media button keeps its face so the glyph stays legible on the photo. */
+  .onMedia[data-disabled] {
+    background-color: var(--role-ground);
+  }
+
+  /* A text button's glyph is removed; an icon-only glyph stays, muted. */
+  .text[data-disabled] .icon {
+    visibility: hidden;
+  }
+
+  .iconOnly[data-disabled] .icon {
+    visibility: visible;
+  }
+
+  /* Busy: rest roles kept, width held at its rest width, inert, no spinner [D84]. */
+  .base[aria-busy='true'] {
+    min-inline-size: var(--button-rest-width, auto);
+    cursor: progress;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Action, icon-only, disabled and busy buttons are hidden (§9.2, §9.1). */
+    .base:not([href]),
+    .iconOnly,
+    .base[data-disabled],
+    .base[aria-busy='true'] {
+      display: none;
+    }
+
+    /* A navigating outline twin drops its edge to --border-size-1, so rank survives (§1.4.5). */
+    .outline[href] {
+      --button-edge: var(--border-size-1);
+    }
+
+    /* A navigating text button prints like a link (§9.3). */
+    .text[href] .label {
+      text-decoration-line: underline;
+    }
+
+    /* A navigating button prints "Label (URL)" (§7.6). */
+    .base[href]::after {
+      content: '(' attr(href) ')';
+      position: static;
+      inline-size: auto;
+      block-size: auto;
+      min-inline-size: 0;
+      min-block-size: 0;
+      translate: none;
+    }
+  }
+}

package/components/Button/index.d.ts

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

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

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

package/components/Button/index.js

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

package/components/Button/index.js.map

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

package/components/CTABlock/CTABlock.d.ts

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const ctaBlock: (props?: ({
+    kind?: "framed" | "sunburst" | "mission" | "saturated" | "deep" | null | undefined;
+    patterned?: 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 CTABlockVariants = VariantProps<typeof ctaBlock>;
+/** An action: title-case label, authored [D160]; a destination prints as "Label (short URL)". */
+export interface CTAAction {
+    /** Verb plus object, title case: "Find a Land Trust". */
+    label: string;
+    /** Where it goes; the Button renders an anchor. */
+    href?: string;
+    /** Called on click (with or without `href`). */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+/** The saturated campaign field's presets [D177, D180]. */
+export type CTASaturatedField = 'amber' | 'leaf' | 'clay' | 'royal' | 'brick';
+/** The deep field's presets: `forest`, or `royal` (the companion of tide and heather) [D177]. */
+export type CTADeepField = 'forest' | 'royal';
+interface CTABlockCommonProps extends Omit<React.ComponentPropsWithRef<'section'>, 'children'> {
+    /** The headline, `type-h2`, centered, ≤ 45ch and ≤ 4 lines. It names the section. */
+    headline: React.ReactNode;
+    /** The headline's level. Default `2`. */
+    headingLevel?: 2 | 3;
+    /**
+     * The kicker (`type-kicker`, `--role-heading`), starting ≈ 15% of the
+     * column in while the headline centers (LTA).
+     */
+    kicker?: React.ReactNode;
+    /**
+     * The trail before the kicker, in `--role-accent`, ≤ `--size-px-12` wide.
+     * Omitted, the `sunburst` kind draws `ornament-trail` (`<OrnamentTrail />`,
+     * the short tail) and the other kinds none; pass your own `aria-hidden`
+     * SVG in `currentColor`, or `null` for none. It prints at 0.75 pt.
+     */
+    trail?: React.ReactNode;
+    /** An optional support line, `--primary12`. */
+    support?: React.ReactNode;
+    /** The primary action: the `solid` pill at `--size-px-8` with a leading arrow. */
+    action: CTAAction;
+    /** The optional outline twin, same height. */
+    secondaryAction?: CTAAction;
+    /**
+     * Decoration behind the content, in `--role-tint`, clipped by the block
+     * (the `sunburst` kind's reaches `--ds-space-40` below it). Omitted, the
+     * `sunburst` kind draws `pattern-sunburst` from an origin `--ds-space-40`
+     * below the block's bottom edge, and the other kinds none; pass your own
+     * art in `currentColor` (centred on the bottom edge), or `null` for none.
+     * A mission band's `pattern-speckle` belongs on its band's Ground, which
+     * is full-bleed. Dropped in print; the block reads completely without it.
+     * Sunburst ≤ 1 per page.
+     */
+    decor?: React.ReactNode;
+    /**
+     * `patterned`: the headline takes `--primary12`, since only `--primary12`
+     * text sits on a pattern. Always on for `sunburst` and `mission`. Default
+     * `false`.
+     */
+    patterned?: boolean;
+    /**
+     * Primary Radix scale: text, rules, marks and the outline twin. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: CTABlockVariants['primary'];
+    /** Secondary Radix scale: kicker and unpatterned headline, trail, blob discs. Never defaulted. */
+    secondary?: CTABlockVariants['secondary'];
+}
+interface CTABlockPageProps extends CTABlockCommonProps {
+    /**
+     * `sunburst` (default): trail kicker, centered serif headline, arrow pill,
+     * the sunburst rising behind (white or the page ground, just before the
+     * footer). `mission`: blob mount, centered H2, body, pill. `framed`: the
+     * crop-mark box (technical pages). `saturated`: the campaign field, one
+     * ink. `deep`: a `forest` or `royal` field with the pill and its outline
+     * twin.
+     */
+    kind?: 'sunburst' | 'mission' | 'framed';
+    field?: never;
+    /**
+     * `mission` only: the mark on the blob mount (`ornament-blob`, an
+     * `OrnamentBlob`): a logo, block icon or numeral in `currentColor`, which
+     * takes the front disc's `--secondary-contrast`, about 57 px wide. The
+     * discs are `--secondary9` over `--secondary7`; once per page, never on
+     * fields. In print the discs drop and the mark prints black.
+     */
+    mount?: React.ReactNode;
+}
+interface CTABlockSaturatedProps extends CTABlockCommonProps {
+    kind: 'saturated';
+    /** The campaign field: `amber` (default), `leaf`, `clay`, `royal` (if no other royal card) or `brick`. */
+    field?: CTASaturatedField;
+    mount?: never;
+}
+interface CTABlockDeepProps extends CTABlockCommonProps {
+    kind: 'deep';
+    /** The deep field: `forest` (default) or `royal`. */
+    field?: CTADeepField;
+    mount?: never;
+}
+/**
+ * Props for CTABlock: `section` props, the kind (with its field for the
+ * field kinds), the headline and its companions, the actions, the
+ * decoration and the color axes.
+ */
+export type CTABlockProps = CTABlockPageProps | CTABlockSaturatedProps | CTABlockDeepProps;
+/**
+ * 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 declare function CTABlock(props: CTABlockProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CTABlock.d.ts.map

package/components/CTABlock/CTABlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTABlock.d.ts","sourceRoot":"","sources":["../../src/components/CTABlock/CTABlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA+CjE,eAAO,MAAM,QAAQ;;;;;8EAoBnB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAErD,iGAAiG;AACjG,MAAM,WAAW,SAAS;IACxB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;CACzD;AAED,2DAA2D;AAC3D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;AAE7E,iGAAiG;AACjG,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE7C,UAAU,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC;IAC5F,qFAAqF;IACrF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,kFAAkF;IAClF,MAAM,EAAE,SAAS,CAAA;IACjB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,SAAS,CAAA;IAC3B;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,kGAAkG;IAClG,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CAC1C;AAED,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;IACxC,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAED,UAAU,sBAAuB,SAAQ,mBAAmB;IAC1D,IAAI,EAAE,WAAW,CAAA;IACjB,0GAA0G;IAC1G,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,IAAI,EAAE,MAAM,CAAA;IACZ,qDAAqD;IACrD,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,sBAAsB,GAAG,iBAAiB,CAAA;AA8B1F;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAkH5C"}

package/components/CTABlock/CTABlock.js

@@ -0,0 +1,125 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Button } from '../Button';
+import { Ground } from '../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 land trust 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 --ds-radius-20 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/components/CTABlock/CTABlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTABlock.js","sourceRoot":"","sources":["../../src/components/CTABlock/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,WAAW,CAAA;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,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"}