@fairgarden/design 0.1.0-0.canary.0

package/content/feature-grid/FeatureGrid.js

@@ -0,0 +1,218 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Card } from '../card';
+import { Link } from '../../actions/link';
+import { SectionHeader } from '../../page/section-header';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './feature-grid.module.css';
+/*
+ * Feature Grid (§12.6): 2–6 parallel benefits or ways to take part, each a
+ * sentence or two. Composed from `section` + a `ul` of cells (leader,
+ * `h3`, text), with optional title Links.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: feature-grid.module.css; CVA function `featureGrid`.
+ * - Axes: `kind` → icon | numbered | rule-topped | framed | glossary →
+ *   `kindIcon` (axis-prefixed: `icon` is also a part), `numbered`,
+ *   `ruleTopped`, `framed`, `glossary`; `primary`, `secondary` → scales
+ *   module classes.
+ * - Compound variants: none.
+ * - Defaults: kind icon; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: static. A linked cell's title Link (§9.3) owns the hover and
+ *   press underline; `cell:has(link:focus-visible)` → the ring around the
+ *   cell.
+ * - Parts: base, header (the §11.8 SectionHeader, from the `header` prop
+ *   or composed in `FeatureGridHeader`), list, cell, icon, numeral, drawing, heading
+ *   (`caption` for glossary), body, link, insetRule and columnRule (the
+ *   numbered separators, drawn as each cell's ::before), frame.
+ * - Scope: `frame` (the `framed` kind) is a faced Card (§12.2), whose nested
+ *   face Ground resolves the face per ground (a white face on light grounds,
+ *   a light island on deep ones) and draws its edge in --role-edge; the
+ *   module names no preset.
+ * - Container: `base` is the inline-size container `feature-grid` (named
+ *   because the framed list sits inside the frame's own `card` container);
+ *   `list` queries it. Baseline without support: one stacked column, with
+ *   viewport fallbacks of 3-up from --md-n-above and 4-up from
+ *   --lg-n-above. Thresholds (§5.10.2): 3-up from 768, up to 4-up from 1024
+ *   [D163].
+ */
+export const featureGrid = cva(styles.base, {
+    variants: {
+        kind: {
+            icon: styles.kindIcon,
+            numbered: styles.numbered,
+            'rule-topped': styles.ruleTopped,
+            framed: styles.framed,
+            glossary: styles.glossary,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'icon',
+    },
+});
+const FeatureGridContext = React.createContext({
+    kind: 'icon',
+    primary: undefined,
+    secondary: undefined,
+});
+FeatureGridContext.displayName = 'FeatureGridContext';
+/** A `SectionHeader` props object rather than a React node. */
+function isSectionHeaderProps(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !React.isValidElement(value) &&
+        !(Symbol.iterator in value) &&
+        'heading' in value);
+}
+/**
+ * The feature grid module: an optional header (`header`, or a composed
+ * `FeatureGridHeader`), then a `FeatureGridList` of 2–6 `FeatureGridCell`s. Each cell holds one leader
+ * (`FeatureGridIcon` or `FeatureGridDrawing`; numbered cells draw their own
+ * numeral), a `FeatureGridHeading` (optionally wrapping a `FeatureGridLink`)
+ * and a `FeatureGridBody`. Use one leader type per grid, never mixed.
+ */
+export function FeatureGrid(props) {
+    const { render, ref, className, kind = 'icon', primary, secondary, header, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const generatedId = React.useId();
+    const context = React.useMemo(() => ({ kind, primary: primary ?? undefined, secondary: secondary ?? undefined }), [kind, primary, secondary]);
+    // A props object renders the §11.8 SectionHeader and labels the section by its heading.
+    const headerProps = isSectionHeaderProps(header) ? header : null;
+    const headingId = headerProps ? (headerProps.headingId ?? generatedId) : undefined;
+    const headerNode = headerProps ? (React.createElement(FeatureGridHeader, null,
+        React.createElement(SectionHeader, { ...headerProps, headingId: headingId }))) : header != null && header !== false ? (React.createElement(FeatureGridHeader, null, header)) : null;
+    const element = useRender({
+        defaultTagName: 'section',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            'aria-labelledby': headingId,
+            className: featureGrid({ kind, primary, secondary, className }),
+            children: (React.createElement(React.Fragment, null,
+                headerNode,
+                children)),
+        }, rest),
+    });
+    return React.createElement(FeatureGridContext.Provider, { value: context }, element);
+}
+/**
+ * The module header slot: holds the §11.8 `SectionHeader` (FeatureGrid's
+ * `header` prop fills it for you); stays with the first cells in print.
+ */
+export function FeatureGridHeader(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'header',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.header, className) }, rest),
+    });
+}
+/**
+ * The cells' grid: a `ul`, or an `ol` for the numbered kind, whose order the
+ * numerals carry. In the framed kind it sits inside the faced frame.
+ */
+export function FeatureGridList(props) {
+    const { render, ref, className, ...rest } = props;
+    const { kind, primary, secondary } = React.useContext(FeatureGridContext);
+    const list = useRender({
+        defaultTagName: kind === 'numbered' ? 'ol' : 'ul',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.list, className) }, rest),
+    });
+    if (kind !== 'framed')
+        return list;
+    return (React.createElement(Card, { faced: true, render: React.createElement("div", null), primary: primary, secondary: secondary, className: styles.frame }, list));
+}
+/**
+ * One benefit: leader → heading → body. Numbered cells draw their
+ * zero-padded numeral ("01") first, from the list order. A cell with a
+ * `FeatureGridLink` is linked as a whole.
+ */
+export function FeatureGridCell(props) {
+    const { render, ref, className, children, ...rest } = props;
+    const { kind } = React.useContext(FeatureGridContext);
+    return useRender({
+        defaultTagName: 'li',
+        render,
+        ref,
+        props: mergeProps({
+            className: cx(styles.cell, className),
+            children: (React.createElement(React.Fragment, null,
+                kind === 'numbered' ? React.createElement("span", { className: styles.numeral, "aria-hidden": "true" }) : null,
+                children)),
+        }, rest),
+    });
+}
+/**
+ * The block-icon leader: put an `<Icon size="block" … />` (Material Symbols
+ * Rounded, FILL 0) inside. It fills in `--role-accent`, which resolves to
+ * `--primary12` on saturated grounds. Never put a colored tile behind it.
+ */
+export function FeatureGridIcon(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.icon, className) }, rest),
+    });
+}
+/**
+ * The glossary leader: a small geometric drawing (inline SVG, spot size
+ * `--size-px-9`) in `--primary12`. Fixed size; it never scales.
+ */
+export function FeatureGridDrawing(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        ref,
+        props: mergeProps({ 'aria-hidden': true, className: cx(styles.drawing, className) }, rest),
+    });
+}
+/**
+ * The cell's heading: `type-itemhead` in `--primary12`; in the glossary kind
+ * a `type-label` caps caption. Renders `<h3>`.
+ */
+export function FeatureGridHeading(props) {
+    const { render, ref, className, ...rest } = props;
+    const { kind } = React.useContext(FeatureGridContext);
+    return useRender({
+        defaultTagName: 'h3',
+        render,
+        ref,
+        props: mergeProps({ className: cx(kind === 'glossary' ? styles.caption : styles.heading, className) }, rest),
+    });
+}
+/**
+ * The cell's one link, inside `FeatureGridHeading`: a §9.3 title Link whose
+ * hit area stretches over the cell. Hover, focus and press underline the
+ * heading; the cell draws the focus ring.
+ */
+export function FeatureGridLink(props) {
+    const { className, ...rest } = props;
+    return React.createElement(Link, { ...rest, kind: "title", className: cx(styles.link, className) });
+}
+/** A sentence or two of `type-body-ui` in `--primary12`. */
+export function FeatureGridBody(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.body, className) }, rest),
+    });
+}
+//# sourceMappingURL=FeatureGrid.js.map

package/content/feature-grid/FeatureGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureGrid.js","sourceRoot":"","sources":["../../src/content/feature-grid/FeatureGrid.tsx"],"names":[],"mappings":"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"}

package/content/feature-grid/feature-grid.module.css

@@ -0,0 +1,358 @@
+/*
+ * Feature Grid (§12.6). The root `base` is the inline-size container
+ * `feature-grid`; `list` queries it. Parts: base, header, list, cell, icon,
+ * numeral, drawing, heading (`caption` in the glossary kind), body, link
+ * (a title Link), insetRule / columnRule (the numbered separators, each
+ * cell's ::before), frame (a faced Card, which draws its own edge and face).
+ * Pure line and type: colors are role variables only; local custom
+ * properties carry dimensions only:
+ *   --feature-grid-gap   the column gutter (= --fgd-space-margin) [D42]
+ *   --feature-grid-row   the gap between rows (--size-px-8-5, the rhythm's "next")
+ */
+
+/* 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';
+}
+
+.caption {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.body {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.numeral {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    --feature-grid-gap: var(--fgd-space-margin);
+    --feature-grid-row: var(--size-px-8-5);
+
+    container: feature-grid / inline-size;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .header {
+    margin-block-end: var(--size-px-7);
+  }
+
+  /* Baseline (§1.11.11): one stacked column; the viewport fallbacks follow. */
+  .list {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--feature-grid-row) var(--feature-grid-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Rhythm: leader → 16 → heading → 32 → body; 56 to the next cell. */
+  .cell {
+    position: relative; /* the stretched title link's positioned ancestor */
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-inline-size: 0;
+  }
+
+  /* Block-tier icon, filled in --role-accent (--primary12 on saturated grounds [D14]). */
+  .icon {
+    display: block;
+    flex: none;
+    inline-size: var(--fgd-size-icon-block);
+    block-size: var(--fgd-size-icon-block);
+    margin-block-end: var(--size-px-3);
+    color: var(--role-accent);
+    fill: currentColor;
+  }
+
+  .icon > svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  /* Numeral: a --fgd-size-control-xl outline circle at --border-size-1-5, zero-padded data figures. */
+  .numeral {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inline-size: var(--fgd-size-control-xl);
+    block-size: var(--fgd-size-control-xl);
+    margin-block-end: var(--size-px-3);
+    border: var(--border-size-1-5) solid var(--primary12);
+    border-radius: var(--radius-round);
+    color: var(--primary12);
+    font-variant-numeric: var(--fgd-numerals-data);
+  }
+
+  .numeral::before {
+    content: counter(feature, decimal-leading-zero);
+  }
+
+  /* Glossary drawing: geometric line art in --primary12 at the spot size; never scaled. */
+  .drawing {
+    display: block;
+    flex: none;
+    inline-size: var(--size-px-9);
+    block-size: var(--size-px-9);
+    margin-block-end: var(--size-px-3);
+    color: var(--primary12);
+  }
+
+  .drawing > svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    fill: none;
+    stroke: currentColor;
+  }
+
+  .heading,
+  .caption {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .body {
+    margin: var(--size-px-7) 0 0;
+    color: var(--primary12);
+  }
+
+  /* Viewport fallback (no container queries): 3-up from --md-n-above, 4-up from --lg-n-above. */
+  @media (min-width: 768px) {
+    .list {
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(calc((100% - 2 * var(--feature-grid-gap)) / 3), 1fr)
+      );
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .list {
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(calc((100% - 3 * var(--feature-grid-gap)) / 4), 1fr)
+      );
+    }
+  }
+
+  /* Container (§5.10.2): stacked below 768 px, 3-up from 768, up to 4-up from 1024, never more. */
+  @container feature-grid (width < 768px) {
+    .list {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @container feature-grid (768px <= width < 1024px) {
+    .list {
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(calc((100% - 2 * var(--feature-grid-gap)) / 3), 1fr)
+      );
+    }
+  }
+
+  @container feature-grid (width >= 1024px) {
+    .list {
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(calc((100% - 3 * var(--feature-grid-gap)) / 4), 1fr)
+      );
+    }
+  }
+}
+
+@layer variants {
+  /* Icon: block icon → heading → body, whitespace only. */
+  .kindIcon .cell {
+    align-items: flex-start;
+  }
+
+  /*
+   * Numbered: centered within --size-content-2 while stacked, cells
+   * separated by --border-size-1 --role-rule inset rules (--size-px-7-5 in
+   * from each side), centered in the row gap. Once cells sit in a row the
+   * separator turns into a vertical column rule in the gutter; it is dropped
+   * at the start of each row.
+   */
+  .numbered .list {
+    counter-reset: feature;
+  }
+
+  .numbered .cell {
+    counter-increment: feature;
+    align-items: center;
+    max-inline-size: var(--size-content-2);
+    margin-inline: auto;
+    inline-size: 100%;
+    text-align: center;
+  }
+
+  .numbered .cell + .cell::before {
+    content: '';
+    position: absolute;
+    inset-block-start: calc(var(--feature-grid-row) / -2);
+    inset-inline: var(--size-px-7-5);
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  @media (min-width: 768px) {
+    .numbered .cell + .cell::before {
+      inset-block: 0;
+      inset-inline: calc(var(--feature-grid-gap) / -2) auto;
+      border-block-start: 0;
+      border-inline-start: var(--border-size-1) solid var(--role-rule);
+    }
+
+    .numbered .cell:nth-child(3n + 1)::before {
+      display: none;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .numbered .cell:nth-child(3n + 1)::before {
+      display: block;
+    }
+
+    .numbered .cell:nth-child(4n + 1)::before {
+      display: none;
+    }
+  }
+
+  @container feature-grid (width < 768px) {
+    .numbered .cell + .cell::before,
+    .numbered .cell:nth-child(n)::before {
+      display: block;
+      inset-block: calc(var(--feature-grid-row) / -2) auto;
+      inset-inline: var(--size-px-7-5);
+      border-block-start: var(--border-size-1) solid var(--role-rule);
+      border-inline-start: 0;
+    }
+
+    .numbered .cell:first-child::before {
+      display: none;
+    }
+  }
+
+  @container feature-grid (768px <= width < 1024px) {
+    .numbered .cell + .cell::before {
+      display: block;
+      inset-block: 0;
+      inset-inline: calc(var(--feature-grid-gap) / -2) auto;
+      border-block-start: 0;
+      border-inline-start: var(--border-size-1) solid var(--role-rule);
+    }
+
+    .numbered .cell:nth-child(3n + 1)::before {
+      display: none;
+    }
+  }
+
+  @container feature-grid (width >= 1024px) {
+    .numbered .cell + .cell::before {
+      display: block;
+      inset-block: 0;
+      inset-inline: calc(var(--feature-grid-gap) / -2) auto;
+      border-block-start: 0;
+      border-inline-start: var(--border-size-1) solid var(--role-rule);
+    }
+
+    .numbered .cell:nth-child(4n + 1)::before {
+      display: none;
+    }
+  }
+
+  /* Rule-topped: a --role-hairline column rule opens each cell; rules break at the gutter. */
+  .ruleTopped .cell {
+    padding-block-start: var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  /* Framed: 2 × 2 inside the faced frame; the frame sits in the outer scope. */
+  .framed .frame {
+    border-radius: var(--radius-2-25);
+  }
+
+  @media (min-width: 768px) {
+    .framed .list {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container feature-grid (width < 768px) {
+    .framed .list {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @container feature-grid (width >= 768px) {
+    .framed .list {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  /* Glossary: drawings with caps captions, no rules. */
+  .glossary .caption + .body {
+    margin-block-start: var(--size-px-2-5);
+  }
+}
+
+@layer states {
+  /* The linked cell's ring sits around the cell, keyboard only [D45]; it replaces the link's own. */
+  .cell .link:focus-visible {
+    outline: none;
+  }
+
+  .cell:has(.link:focus-visible) {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Cells print 2-up, whole; icons print black and the frame's face drops through the remap.
+       The page margin prints as 0, so the gutter takes its own print step. */
+    .base {
+      --feature-grid-gap: var(--size-px-5);
+    }
+
+    .header {
+      break-after: avoid;
+    }
+
+    .list,
+    .framed .list {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cell {
+      break-inside: avoid;
+    }
+
+    .numbered .cell + .cell::before,
+    .numbered .cell:nth-child(n)::before {
+      display: block;
+      inset-block: 0;
+      inset-inline: calc(var(--feature-grid-gap) / -2) auto;
+      border-block-start: 0;
+      border-inline-start: var(--border-size-1) solid var(--role-rule);
+    }
+
+    .numbered .cell:nth-child(2n + 1)::before {
+      display: none;
+    }
+  }
+}

package/content/feature-grid/index.d.ts

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

package/content/feature-grid/index.d.ts.map

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

package/content/feature-grid/index.js

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

package/content/feature-grid/index.js.map

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