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

package/page/newsletter/newsletter.module.css

@@ -0,0 +1,574 @@
+/*
+ * Newsletter Signup (§11.11). CVA functions `newsletter` and
+ * `newsletterStatus`. Field, Input, Checkbox, Form and Button keep their
+ * own modules (§1.11.1); this module lays out the card, the rows and the
+ * copy.
+ * Color roles (§11.11): icon --role-accent; heading --primary12 (band
+ * --role-heading); pitch --primary12; field box: the ground's --role-rule
+ * edge (Input), a `white` face plate on a grained card; submit: the action
+ * roles (Button); legal --primary12, links underlined in --role-accent
+ * (Link); status glyph --role-status (the status scale's --secondary11, or
+ * --primary12 on one-ink grounds), word --primary12; the straddle card: a
+ * `royal` field, edge --role-edge (its --primary12, drawn by Ground), grain
+ * --role-grain-dark only. Colors are role variables only; local custom
+ * properties carry dimensions only: --newsletter-seam-depth (the straddle
+ * seam's depth in its card) and the hook --newsletter-band-inset (the top
+ * padding of the band a straddle opens, default --fgd-space-section).
+ */
+
+/* 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. */
+.heading {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.bandHeading {
+  composes: typeH2 from '../../utils/type.module.css';
+}
+
+.pitch {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.legal {
+  composes: typeSmall from '../../utils/type.module.css';
+}
+
+.statusText {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.printLine {
+  composes: typeSmall from '../../utils/type.module.css';
+}
+
+.printUrl {
+  composes: typeUrl from '../../utils/type.module.css';
+}
+
+/* The card's grain (royal grain is one-sided: --role-grain-dark only, §1.5.16). */
+.grainedCard {
+  composes: patternGrain from '../../utils/pattern.module.css';
+}
+
+/* Reading pages: the body role, so the reading measure (66ch) matches the prose column's. */
+.reading {
+  composes: typeBody from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    display: block;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  /* The content: the inline-size container `newsletter` its rows query. */
+  .content {
+    container: newsletter / inline-size;
+    min-inline-size: 0;
+  }
+
+  .layout {
+    display: grid;
+    gap: var(--size-px-5);
+    min-inline-size: 0;
+  }
+
+  .intro {
+    display: grid;
+    align-content: start;
+    justify-items: start;
+    gap: var(--size-px-2-5);
+    min-inline-size: 0;
+  }
+
+  /* Block-tier icon (36 px) in --role-accent, --size-px-3 above the heading. */
+  .icon {
+    display: block;
+    inline-size: var(--fgd-size-icon-block);
+    block-size: var(--fgd-size-icon-block);
+    margin-block-end: calc(var(--size-px-3) - var(--size-px-2-5));
+    color: var(--role-accent);
+  }
+
+  .icon > :where(svg, img) {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .heading {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .bandHeading {
+    margin: 0;
+    color: var(--role-heading);
+  }
+
+  .pitch {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .formArea {
+    min-inline-size: 0;
+  }
+
+  /* The field row: the email field grows; a pill joins it once both fit, and wraps (full width) otherwise. */
+  .fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--size-px-2-5);
+    min-inline-size: 0;
+  }
+
+  .fields > :where(*) {
+    flex: 999 1 var(--size-px-12);
+    min-inline-size: 0;
+  }
+
+  .fields > .submit {
+    flex: 1 0 auto;
+  }
+
+  .emailField,
+  .postcodeField {
+    min-inline-size: 0;
+  }
+
+  /* The postcode's box (the Input root): at most 12 characters wide. */
+  .postcode {
+    max-inline-size: 12ch;
+  }
+
+  /* The consent Checkbox sits under the fields, before the legal line. */
+  .consent {
+    align-self: flex-start;
+  }
+
+  /* Legal line: type-small at --font-weight-6; links are Links, underlined at rest. */
+  .legal {
+    margin: 0;
+    color: var(--primary12);
+    font-weight: var(--font-weight-6);
+  }
+
+  /*
+   * Status (§1.5.4): the glyph at the tag tier in --role-status, knockouts
+   * in --role-status-fill; the word and sentence in --primary12. Focus moves
+   * here on success; the ring shows for keyboard users only.
+   */
+  .status {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: var(--size-px-2);
+    color: var(--primary12);
+    scroll-margin-block: var(--fgd-space-margin);
+  }
+
+  .statusGlyph {
+    display: block;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    block-size: 1lh;
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--border-size-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .statusText {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .statusTitle {
+    font-weight: var(--font-weight-7);
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .printLine {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .statusGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * Success replaces the form (● with its check, "Subscribed", one
+   * sentence); a server-failure warning (▲ with !) sits above the submit,
+   * its message at weight 600 like a field error. Each takes its status
+   * scale as secondary through the scale class beside it [D129].
+   */
+  .success {
+    padding-block: var(--size-px-2);
+  }
+
+  .warning .statusText {
+    font-weight: var(--font-weight-6);
+  }
+
+  /* Inline (footer): icon → heading → pitch → the field with its butted cell, then the legal line. */
+  .inline .layout {
+    gap: var(--size-px-5);
+  }
+
+  /*
+   * Straddle card (§5.6.2): a royal field at --radius-conditional-3-25
+   * (square where a phone runs it edge to edge), padding --size-px-4 (the
+   * nominal radius). The column width at base; --size-sm, centered, from
+   * --md-n-above. It rises across the seam of the band it opens, sits above
+   * both grounds, and keeps --size-px-8-5 before the lower band's content.
+   *
+   * The rise is fixed, in CSS, so it is in the first paint [D201]: the
+   * band's top padding (--newsletter-band-inset, default the band's
+   * --fgd-space-section; a page whose band pads otherwise sets it) plus the
+   * seam's depth in the card: the field's --border-size-1 edge, the card's
+   * --size-px-4 padding, one line of the `type-itemhead` heading
+   * (--fgd-font-size-itemhead at --font-lineheight-0) and half the
+   * --size-px-7 heading-to-field gap. Exact for a one-line heading with no
+   * pitch; a wrapped heading's seam falls a line higher, so it overlaps a
+   * little less (user direction, 2026-09-27).
+   */
+  .straddle {
+    --newsletter-seam-depth: calc(
+      var(--border-size-1) + var(--size-px-4) +
+        var(--fgd-font-size-itemhead) * var(--font-lineheight-0) + var(--size-px-7) / 2
+    );
+
+    position: relative;
+    z-index: var(--layer-1);
+    margin-block: calc(-1 * (var(--newsletter-band-inset, var(--fgd-space-section)) + var(--newsletter-seam-depth)))
+      var(--size-px-8-5);
+  }
+
+  .card {
+    padding: var(--size-px-4);
+    border-radius: var(--radius-conditional-3-25);
+  }
+
+  .straddle .card {
+    margin-inline: auto;
+  }
+
+  @media (min-width: 768px) {
+    .straddle .card {
+      max-inline-size: var(--size-sm);
+    }
+  }
+
+  /* Heading → field --size-px-7; between fields --size-px-2-5; fields → legal → button --size-px-5. */
+  .straddle .layout {
+    gap: var(--size-px-7);
+  }
+
+  .straddle .intro {
+    justify-items: center;
+    text-align: center;
+  }
+
+  .straddle .fields {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  .straddle .fields > :where(*) {
+    flex: none;
+  }
+
+  .straddle .legal {
+    text-align: center;
+  }
+
+  .straddle .form,
+  .reading .form {
+    max-inline-size: none;
+  }
+
+  /* The submit pill: full width at base in the single-column form; it hugs its label from --md-n-above [D106]. */
+  .straddle .submit {
+    inline-size: 100%;
+  }
+
+  @media (min-width: 768px) {
+    .straddle .submit {
+      inline-size: auto;
+      align-self: center;
+    }
+  }
+
+  /*
+   * Reading pages [D187]: from --lg-n-above the card aligns to the reading
+   * column's start edge and widens to the reading measure, lifting the
+   * --size-sm cap, so Email and Postcode share a row (the Form's own 480 px
+   * rule). Scene pages keep --size-sm, centered.
+   */
+  @media (min-width: 1024px) {
+    .reading {
+      max-inline-size: var(--fgd-measure-reading);
+      margin-inline: auto;
+    }
+
+    .reading .card {
+      max-inline-size: none;
+      margin-inline: 0;
+    }
+  }
+
+  /* Grained card: the grain layer sits under the content, which stays above it. */
+  .grained .content {
+    position: relative;
+  }
+
+  /*
+   * Band: a large headline, the pitch, then the field and pill. Field and
+   * pill side by side from 480 px of container (viewport fallback
+   * --md-n-above); the band splits 6 + 6 from 768 px (fallback
+   * --lg-n-above).
+   */
+  .band .submit {
+    inline-size: 100%;
+  }
+
+  @media (min-width: 768px) {
+    .band .fields {
+      flex-wrap: nowrap;
+    }
+
+    .band .submit {
+      inline-size: auto;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .band .layout {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+      align-items: end;
+      column-gap: var(--fgd-space-margin);
+    }
+
+    .band .intro {
+      grid-column: 1 / span 6;
+    }
+
+    .band .formArea {
+      grid-column: 7 / -1;
+    }
+  }
+
+  @container newsletter (width < 480px) {
+    .band .fields {
+      flex-wrap: wrap;
+    }
+
+    .band .submit {
+      inline-size: 100%;
+    }
+  }
+
+  @container newsletter (width >= 480px) {
+    .band .fields {
+      flex-wrap: nowrap;
+    }
+
+    .band .submit {
+      inline-size: auto;
+    }
+  }
+
+  @container newsletter (width < 768px) {
+    .band .layout {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .band .intro,
+    .band .formArea {
+      grid-column: 1 / -1;
+    }
+  }
+
+  @container newsletter (width >= 768px) {
+    .band .layout {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+      align-items: end;
+      column-gap: var(--fgd-space-margin);
+    }
+
+    .band .intro {
+      grid-column: 1 / span 6;
+    }
+
+    .band .formArea {
+      grid-column: 7 / -1;
+    }
+  }
+
+  /*
+   * Ruled row: a serif prompt cell, the input cell and a square
+   * submit cell, --border-size-1 --role-rule rules, square. Baseline: the
+   * prompt stacks above the input and submit pair; three cells in one row
+   * from 768 px of container (viewport fallback --lg-n-above).
+   */
+  .ruled .content {
+    border-block: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .ruled .layout {
+    gap: 0;
+  }
+
+  .ruled .intro {
+    padding: var(--size-px-3);
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .ruled .heading {
+    font-family: var(--fgd-font-text);
+  }
+
+  .ruled .form {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 0;
+    max-inline-size: none;
+  }
+
+  .ruled .fields {
+    flex: 1 1 var(--size-px-12);
+    padding: var(--size-px-3);
+  }
+
+  .ruled .submit {
+    margin: var(--size-px-3);
+    border-radius: var(--radius-0);
+  }
+
+  .ruled .legal {
+    flex-basis: 100%;
+    padding: 0 var(--size-px-3) var(--size-px-3);
+  }
+
+  @media (min-width: 1024px) {
+    .ruled .layout {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    }
+
+    .ruled .intro {
+      border-block-end: 0;
+      border-inline-end: var(--border-size-1) solid var(--role-rule);
+    }
+  }
+
+  @container newsletter (width < 768px) {
+    .ruled .layout {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .ruled .intro {
+      border-block-end: var(--border-size-1) solid var(--role-rule);
+      border-inline-end: 0;
+    }
+  }
+
+  @container newsletter (width >= 768px) {
+    .ruled .layout {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    }
+
+    .ruled .intro {
+      border-block-end: 0;
+      border-inline-end: var(--border-size-1) solid var(--role-rule);
+    }
+  }
+}
+
+@layer states {
+  .status:focus {
+    outline: none;
+  }
+
+  .status:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /*
+     * One 0.75 pt box: the heading and "Subscribe at <URL>" (§7.12.3). The
+     * fields, legal text, grain and icon drop; the straddle reflows in the
+     * flow with no seam.
+     */
+    .straddle {
+      margin-block: var(--size-px-3);
+    }
+
+    .card {
+      padding: 0;
+      border: 0;
+    }
+
+    .content {
+      padding: var(--size-px-3);
+      border: var(--border-size-1) solid var(--primary12);
+      break-inside: avoid;
+    }
+
+    .ruled .content {
+      border: var(--border-size-1) solid var(--primary12);
+    }
+
+    .ruled .intro {
+      padding: 0;
+      border: 0;
+    }
+
+    .icon,
+    .pitch,
+    .formArea {
+      display: none;
+    }
+
+    .layout {
+      display: block;
+    }
+
+    .printLine {
+      display: block;
+      margin: 0;
+      margin-block-start: var(--size-px-2);
+      color: var(--primary12);
+    }
+  }
+}

package/page/section-bar/SectionBar.d.ts

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type BreadcrumbCrumb } from '../../navigation/breadcrumb';
+import { type PageGroundPreset } from '../../utils/scope';
+export declare const sectionBar: (props?: ({
+    kind?: "section" | "tabs" | "guide" | null | undefined;
+    capped?: boolean | null | undefined;
+    docked?: 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 SectionBarVariants = VariantProps<typeof sectionBar>;
+/** The three §11.7 builds. */
+export type SectionBarKind = NonNullable<SectionBarVariants['kind']>;
+/** One in-page section: the target's `id` and the label the Jump list, title and tabs show. */
+export interface SectionBarSection {
+    /** The section's element `id`; its first heading takes focus when the section is followed. */
+    id: string;
+    /** The label, authored in sentence case. */
+    label: React.ReactNode;
+}
+/** The guide bar's `listen` jump [D184]: a standalone link with an opaque count badge. */
+export interface SectionBarListen {
+    /** The recordings' anchor, e.g. "#recordings"; following it moves focus to that heading. */
+    href: string;
+    /** Default "Listen". */
+    label?: React.ReactNode;
+    /** The number of recordings, shown in a count Badge. */
+    count?: number;
+}
+type SectionBarCommonProps = Omit<React.ComponentPropsWithRef<'nav'>, 'children'> & {
+    /** The optional top rule: `--border-size-2` in the brand green, decorative like the strip. Default `false`. */
+    capped?: boolean;
+    /**
+     * The docked position: sticky at the top edge on `--layer-2`. The page
+     * shell sets it from `onDockChange` and swaps it with the header on
+     * upward scroll; the two never stack [D89, D183]. Default `false`.
+     */
+    docked?: boolean;
+    /** Primary Radix scale for the bar's scope. Never defaulted [D133]. */
+    primary?: SectionBarVariants['primary'];
+    /** Secondary Radix scale: the Jump indicator, tab hover and link hover. Never defaulted. */
+    secondary?: SectionBarVariants['secondary'];
+    /** The page ground of the band the bar covers. Default: the enclosing page ground, else `paper`. */
+    preset?: PageGroundPreset;
+    /** The landmark's name. Default "In this section". */
+    label?: string;
+    /** The ancestors, root first: the inline breadcrumb from `--md-n-above`, the staircase below it. */
+    items?: readonly BreadcrumbCrumb[];
+    /** The current page: the last crumb, at `--font-weight-7`, acting as the title [D184]. */
+    current: React.ReactNode;
+    /** The page's sections, in order: the Jump list, the base title and the tab strip. */
+    sections?: readonly SectionBarSection[];
+    /** The section in view, controlled. Omitted, the bar follows scroll (scrollspy). */
+    activeSection?: string;
+    /** Called when the section in view changes. */
+    onActiveSectionChange?: (id: string) => void;
+    /**
+     * Called when the sentinel at the bar's in-flow position leaves (`true`)
+     * or re-enters (`false`) the viewport top [D183]. Pass it to wire `docked`.
+     */
+    onDockChange?: (docked: boolean) => void;
+    /** The Jump trigger's word. Default "Jump to". */
+    jumpLabel?: string;
+    /** The staircase toggle's accessible name. Default "Page path". */
+    toggleLabel?: string;
+    /** End tools, such as the §9.4 audio Toggle at `--size-px-7`. Below 360 px they move into the staircase panel. */
+    tools?: React.ReactNode;
+    /** Share links (inline-tier icon links), from `--xl-n-above` [D184]. */
+    share?: React.ReactNode;
+    /** Builds each crumb anchor, e.g. `(href) => <NextLink href={href} />`. */
+    renderLink?: (href: string) => React.ReactElement;
+    /**
+     * The outline morph for the Jump panel and the breadcrumb's "…" menu:
+     * the trigger's ring (or box) grows into the panel's frame as it opens
+     * and back as it closes [D204]. Default `true`; `false` opens and closes
+     * them at once.
+     */
+    morph?: boolean;
+};
+type SectionBarKindProps = {
+    /**
+     * `section` (default): glyph, caps title and Jump to at base; from
+     * `--md-n-above` the inline breadcrumb and the live Jump label.
+     * `guide`: an optional start `search`, the centred breadcrumb, and
+     * Jump to with an optional `listen` jump at the end. `tabs`: from
+     * `--lg-n-above`, with 6 or fewer sections, the tab strip replaces
+     * Jump to.
+     */
+    kind?: 'section';
+    search?: never;
+    listen?: never;
+    toTop?: never;
+} | {
+    kind: 'guide';
+    /** A §9.10 Autocomplete (Search) at `--fgd-size-control-md`, capped at `--size-px-13`, from `--md-n-above`. */
+    search?: React.ReactNode;
+    /** The end `listen` jump [D184]. */
+    listen?: SectionBarListen;
+    toTop?: never;
+} | {
+    kind: 'tabs';
+    /**
+     * The `toTop` cell's target: the skip link's target, e.g. "#main". It
+     * moves focus there. Omitted, no cell.
+     */
+    toTop?: string;
+    search?: never;
+    listen?: never;
+};
+/** Props for SectionBar: `nav` props, the kind with its parts, the path, the sections and the color axes. */
+export type SectionBarProps = SectionBarCommonProps & SectionBarKindProps;
+/**
+ * The page's sticky section bar: a Base UI Toolbar in a `nav` named "In
+ * this section", on the covered band's page ground, with a
+ * `--border-size-1` `--role-rule` bottom rule and no shadow; one line, at
+ * least `--fgd-size-hit` tall.
+ *
+ * - Base: the disclosure glyph opens the staircase breadcrumb (capped at
+ *   half the viewport), the caps title follows the section in view, and
+ *   "Jump to" opens the list of sections.
+ * - From `--md-n-above`: the inline breadcrumb (root → current, the current
+ *   crumb at `--font-weight-7`) replaces glyph and title, and the Jump label
+ *   carries the section in view, announced politely once per change.
+ * - The Jump panel is a Popover of links in a `nav` "On this page",
+ *   `--size-px-14` wide: Tab moves through the links, Escape closes it, and
+ *   following a link closes it and moves focus to the section's heading.
+ * - `kind="tabs"`: from `--lg-n-above`, with 6 or fewer sections, equal
+ *   cells of at least `--size-px-12` replace Jump to, with scrollspy
+ *   (`aria-current="location"`) and an optional `toTop` cell at the start.
+ * - `kind="guide"`: an optional start `search`, the centred breadcrumb, and
+ *   Jump to with an optional `listen` jump at the end.
+ *
+ * Docking: pass `onDockChange` and feed `docked`; bring the header back in
+ * its place on upward scroll. Hidden in print; the path prints in the
+ * masthead.
+ */
+export declare function SectionBar(props: SectionBarProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SectionBar.d.ts.map