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

package/data/scroll-area/scroll-area.module.css

@@ -0,0 +1,266 @@
+/*
+ * Scroll Area (§10.19). CVA function `scrollArea`.
+ * Parts: `base` (Root, the positioned frame), `viewport`, `content`,
+ * `scrollbar` (the gutter and its centered hairline track), `thumb`,
+ * `corner`, and `edge` (`edgeStart`, `edgeEnd`): the hard overflow rules,
+ * never a fade [D21, D68]. Colors are role variables only; local custom
+ * properties carry dimensions only.
+ *
+ * Local properties:
+ *   --scroll-area-gutter      the scrollbar gutter, reserved so content never shifts
+ *   --scroll-area-thumb       thumb thickness; widens on hover and drag
+ *   --scroll-area-edge-start  `none` hides the start edge (a pinned table column draws it)
+ *   --scroll-area-max-block   the root's cap, written by the `maxBlockSize` prop
+ *   --scroll-area-overscroll-x, --scroll-area-overscroll-y
+ *                             the viewport's scroll chaining per axis (default
+ *                             `contain`); a carousel sets `y` to `auto`
+ */
+
+@layer base {
+  .base {
+    --scroll-area-gutter: var(--size-px-2-5);
+    --scroll-area-thumb: var(--size-px-1);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    max-block-size: var(--scroll-area-max-block, none);
+  }
+
+  .viewport {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    min-inline-size: 0;
+    overscroll-behavior: var(--scroll-area-overscroll-x, contain) var(--scroll-area-overscroll-y, contain);
+  }
+
+  /*
+   * `fitContent={false}`: the content keeps the viewport's width, so its
+   * children's percentages resolve against the viewport (a carousel track).
+   * Base UI writes `min-width: fit-content` inline on the content, and only
+   * an important declaration outranks an inline value; the package itself
+   * writes no real property inline (§1.11.1).
+   */
+  .contentFluid {
+    min-inline-size: 0 !important;
+  }
+
+  /* The gutter: a centered --border-size-1 --role-hairline track. */
+  .scrollbar {
+    display: flex;
+    box-sizing: border-box;
+  }
+
+  .scrollbar::before {
+    content: '';
+    position: absolute;
+    border: 0 solid var(--role-hairline);
+    pointer-events: none;
+  }
+
+  .scrollbar[data-orientation='vertical'] {
+    justify-content: center;
+    inline-size: var(--scroll-area-gutter);
+  }
+
+  .scrollbar[data-orientation='vertical']::before {
+    inset-block: 0;
+    inset-inline-start: calc(50% - var(--border-size-1) / 2);
+    border-inline-start-width: var(--border-size-1);
+  }
+
+  .scrollbar[data-orientation='horizontal'] {
+    align-items: center;
+    block-size: var(--scroll-area-gutter);
+  }
+
+  .scrollbar[data-orientation='horizontal']::before {
+    inset-inline: 0;
+    inset-block-start: calc(50% - var(--border-size-1) / 2);
+    border-block-start-width: var(--border-size-1);
+  }
+
+  /* The thumb: --role-rule, --radius-round; its fill is its own edge (≥ 3:1) [D12]. */
+  .thumb {
+    position: relative;
+    flex: none;
+    border-radius: var(--radius-round);
+    background-color: var(--role-rule);
+  }
+
+  .scrollbar[data-orientation='vertical'] .thumb {
+    inline-size: var(--scroll-area-thumb);
+  }
+
+  .scrollbar[data-orientation='horizontal'] .thumb {
+    block-size: var(--scroll-area-thumb);
+  }
+
+  .corner {
+    display: none;
+  }
+
+  /* Overflow edges: shown per side by the states layer. */
+  .edge {
+    display: none;
+    position: absolute;
+    border: 0 solid var(--role-rule);
+    pointer-events: none;
+  }
+
+  @media (forced-colors: active) {
+    .thumb {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
+}
+
+@layer variants {
+  /* Panel: vertical, capped at half the viewport unless `maxBlockSize` sets the cap; the gutter always reserved. */
+  .panel {
+    max-block-size: var(--scroll-area-max-block, 50dvh);
+  }
+
+  .panel .viewport {
+    padding-inline-end: var(--scroll-area-gutter);
+  }
+
+  .panel .edgeStart {
+    inset-block-start: 0;
+    inset-inline: 0 var(--scroll-area-gutter);
+    border-block-start-width: var(--border-size-2);
+  }
+
+  .panel .edgeEnd {
+    inset-block-end: 0;
+    inset-inline: 0 var(--scroll-area-gutter);
+    border-block-end-width: var(--border-size-2);
+  }
+
+  /* Wide and rail: horizontal; scroll-snap follows the content's own snap points. */
+  .wide .viewport {
+    scroll-snap-type: x proximity;
+  }
+
+  .rail .viewport {
+    scroll-snap-type: x mandatory;
+  }
+
+  /*
+   * The horizontal gutter is always reserved, as the panel's is: whether
+   * the content overflows is known only after layout (Base UI's
+   * data-has-overflow-x arrives after mount), and geometry must be final in
+   * the first paint [D201]. Owners that sit on a margin take it from there.
+   */
+  .wide .viewport,
+  .rail .viewport {
+    padding-block-end: var(--scroll-area-gutter);
+  }
+
+  .wide .edgeStart,
+  .rail .edgeStart {
+    inset-inline-start: 0;
+    inset-block: 0 var(--scroll-area-gutter);
+    border-inline-start-width: var(--border-size-2);
+  }
+
+  .wide .edgeEnd,
+  .rail .edgeEnd {
+    inset-inline-end: 0;
+    inset-block: 0 var(--scroll-area-gutter);
+    border-inline-end-width: var(--border-size-2);
+  }
+
+  /* Rail: a --border-size-2 --role-hairline track with a --primary12 thumb, square ends. */
+  .rail .scrollbar::before {
+    inset-block-start: calc(50% - var(--border-size-2) / 2);
+    border-block-start-width: var(--border-size-2);
+  }
+
+  .rail .thumb {
+    --scroll-area-thumb: var(--border-size-2);
+
+    border-radius: var(--radius-0);
+    background-color: var(--primary12);
+  }
+}
+
+@layer states {
+  /* Panel scrollbar: shown on hover, scroll and focus. */
+  .panel .scrollbar {
+    visibility: hidden;
+  }
+
+  .panel .scrollbar[data-hovering],
+  .panel .scrollbar[data-scrolling],
+  .panel:focus-within .scrollbar {
+    visibility: visible;
+  }
+
+  /* The thumb widens on hover and scroll (6 px), and darkens to --primary12 while dragged. */
+  .scrollbar[data-hovering] .thumb,
+  .scrollbar[data-scrolling] .thumb {
+    --scroll-area-thumb: calc(var(--size-px-1) * 1.5);
+  }
+
+  .thumb:active {
+    --scroll-area-thumb: calc(var(--size-px-1) * 1.5);
+
+    background-color: var(--primary12);
+  }
+
+  .rail .scrollbar[data-hovering] .thumb,
+  .rail .scrollbar[data-scrolling] .thumb,
+  .rail .thumb:active {
+    --scroll-area-thumb: var(--border-size-2);
+  }
+
+  /* Each edge rule appears only while content is hidden on that side. */
+  .panel[data-overflow-y-start] .edgeStart,
+  .wide[data-overflow-x-start] .edgeStart,
+  .rail[data-overflow-x-start] .edgeStart {
+    display: var(--scroll-area-edge-start, block);
+  }
+
+  .panel[data-overflow-y-end] .edgeEnd,
+  .wide[data-overflow-x-end] .edgeEnd,
+  .rail[data-overflow-x-end] .edgeEnd {
+    display: block;
+  }
+
+  /* Focus: the 2 px --primary12 ring at a 2 px offset, keyboard only [D45]. */
+  .viewport:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Unfold: content prints at full height; scrollbars, rails and edges are hidden (§10.19). */
+    .base {
+      display: block;
+      max-block-size: none;
+    }
+
+    /* The viewport's `overflow: scroll` and the content's `min-width` are inline styles. */
+    .viewport {
+      overflow: visible !important;
+      max-block-size: none;
+      padding: 0;
+    }
+
+    .content {
+      min-inline-size: 0 !important;
+    }
+
+    .scrollbar,
+    .corner,
+    .edge {
+      display: none;
+    }
+  }
+}

package/data/spec-grid/SpecGrid.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../../foundations/icon';
+export declare const specGrid: (props?: ({
+    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;
+/** A spec cell; `estimated` swaps the hairline for a dotted `--role-rule` top rule. */
+export declare const specGridCell: (props?: ({
+    estimated?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SpecGridVariants = VariantProps<typeof specGrid>;
+/** Props for SpecGrid: `div` props (the container) and the color axes. */
+export type SpecGridProps = React.ComponentPropsWithRef<'div'> & {
+    /**
+     * Primary Radix scale: rules, labels, icons and values. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: SpecGridVariants['primary'];
+    /** Secondary Radix scale: unused; the sheet carries no accents. Never defaulted. */
+    secondary?: SpecGridVariants['secondary'];
+    /** Accessible name for the list, e.g. "At a glance", when no heading labels it. */
+    label?: string;
+};
+/**
+ * The spec grid. Put `SpecGridItem`s inside. The gutter equals the page
+ * margin; there is no rule after the last row; cells never split in print.
+ */
+export declare function SpecGrid(props: SpecGridProps): React.JSX.Element;
+/** Props for SpecGridItem: `div` props, the label, an optional icon and the estimate flag. */
+export type SpecGridItemProps = React.ComponentPropsWithRef<'div'> & {
+    /** The caps label (`type-label`); author it in sentence case. */
+    label: React.ReactNode;
+    /**
+     * A decorative data icon before the label (Material Symbols Rounded,
+     * inline tier, FILL 0). The label carries the meaning.
+     */
+    icon?: IconName;
+    /** An estimated value: dotted top rule and a leading "≈". Don't write the "≈" yourself. */
+    estimated?: boolean;
+};
+/**
+ * One spec cell: icon and caps label on line 1, the value (`type-body-ui`)
+ * below, flush under the icon. Units sit outside the figure after a
+ * no-break space, metric in parentheses: "28–34 cm (11–13 in)".
+ */
+export declare function SpecGridItem(props: SpecGridItemProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SpecGrid.d.ts.map

package/data/spec-grid/SpecGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecGrid.d.ts","sourceRoot":"","sources":["../../src/data/spec-grid/SpecGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AA6B5D,eAAO,MAAM,QAAQ;;;8EAMnB,CAAA;AAEF,uFAAuF;AACvF,eAAO,MAAM,YAAY;;8EASvB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAErD,0EAA0E;AAC1E,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC/D;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,oFAAoF;IACpF,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACzC,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAU5C;AAED,8FAA8F;AAC9F,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACnE,iEAAiE;IACjE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,2FAA2F;IAC3F,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAcpD"}

package/data/spec-grid/SpecGrid.js

@@ -0,0 +1,75 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Icon } from '../../foundations/icon';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './spec-grid.module.css';
+/*
+ * Spec grid (§8.3, the signature variant; the §12.7 "At a Glance" sheet):
+ * a boxless `dl` whose cells are each topped by a hairline rule at column
+ * width, the rules breaking at the gutter. For an item's measurable
+ * attributes; the densest module, with no ornament.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: spec-grid.module.css; CVA functions `specGrid` and
+ *   `specGridCell`.
+ * - Axes: `primary`, `secondary` → scales module classes. SpecGridItem:
+ *   `estimated` → `estimated` (a data flag, not a state).
+ * - Compound variants: none.
+ * - Defaults: estimated false; color axes none [D133].
+ * - Color fallback: inherits the scope. Secondary drives nothing here.
+ * - States: static.
+ * - Parts: base (the container), grid (`dl`), cell (its top border is the
+ *   `rule`; dotted when `estimated`), icon, label, value.
+ * - Scope: none.
+ * - Container: `base` is the inline-size container `spec-grid` (named for
+ *   a grid inside a card or split); `grid` queries it: 1 column below
+ *   360 px, 2 from 360, 3 from 768, 4 from 1024. Baseline without support:
+ *   auto-fit tracks at the 160 px minimum column, capped at 4; 1 column at
+ *   --xs-n-below.
+ */
+export const specGrid = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** A spec cell; `estimated` swaps the hairline for a dotted `--role-rule` top rule. */
+export const specGridCell = cva(styles.cell, {
+    variants: {
+        estimated: {
+            true: styles.estimated,
+        },
+    },
+    defaultVariants: {
+        estimated: false,
+    },
+});
+/**
+ * The spec grid. Put `SpecGridItem`s inside. The gutter equals the page
+ * margin; there is no rule after the last row; cells never split in print.
+ */
+export function SpecGrid(props) {
+    const { primary, secondary, label, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement("div", { ...rest, ...scope, className: specGrid({ primary, secondary, className }) },
+        React.createElement("dl", { className: styles.grid, "aria-label": label }, children)));
+}
+/**
+ * One spec cell: icon and caps label on line 1, the value (`type-body-ui`)
+ * below, flush under the icon. Units sit outside the figure after a
+ * no-break space, metric in parentheses: "28–34 cm (11–13 in)".
+ */
+export function SpecGridItem(props) {
+    const { label, icon, estimated, className, children, ...rest } = props;
+    return (React.createElement("div", { ...rest, className: specGridCell({ estimated, className }) },
+        React.createElement("dt", { className: styles.label },
+            icon ? React.createElement(Icon, { name: icon, className: styles.icon }) : null,
+            label),
+        React.createElement("dd", { className: styles.value },
+            estimated ? '≈ ' : null,
+            children)));
+}
+//# sourceMappingURL=SpecGrid.js.map

package/data/spec-grid/SpecGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecGrid.js","sourceRoot":"","sources":["../../src/data/spec-grid/SpecGrid.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,IAAI,EAAiB,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACvC,QAAQ,EAAE;QACR,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAA;AAEF,uFAAuF;AACvF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAC3C,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,IAAI,EAAE,MAAM,CAAC,SAAS;SACvB;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,KAAK;KACjB;CACF,CAAC,CAAA;AAiBF;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACzE,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,OAAO,CACL,gCAAS,IAAI,KAAM,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;QAC9E,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,gBAAc,KAAK,IAC1C,QAAQ,CACN,CACD,CACP,CAAA;AACH,CAAC;AAeD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACtE,OAAO,CACL,gCAAS,IAAI,EAAE,SAAS,EAAE,YAAY,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;QAC9D,4BAAI,SAAS,EAAE,MAAM,CAAC,KAAK;YACxB,IAAI,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI;YAC1D,KAAK,CACH;QACL,4BAAI,SAAS,EAAE,MAAM,CAAC,KAAK;YACxB,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;YACvB,QAAQ,CACN,CACD,CACP,CAAA;AACH,CAAC"}

package/data/spec-grid/index.d.ts.map

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

package/data/spec-grid/index.js.map

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

package/data/spec-grid/spec-grid.module.css

@@ -0,0 +1,142 @@
+/*
+ * Spec grid (§8.3; §12.7 At a Glance). CVA functions `specGrid` and
+ * `specGridCell`. Color roles (§12.7): rule --role-hairline (dotted
+ * --role-rule on an estimated cell), label and icon --role-muted, value
+ * --primary12. The hairline is allowed because type and space carry the
+ * structure [D83]. Dots are true circles: an SVG mask cuts a 1 px solid
+ * border into round dots [D36, D68], so they print as foreground.
+ */
+
+/* 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. */
+.label {
+  composes: typeLabel typeMuted from '../../utils/type.module.css';
+}
+
+.value {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    container: spec-grid / inline-size;
+    /* Size containment leaves no intrinsic width: fill the box, never collapse as a flex or shrink-to-fit item. */
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  /*
+   * Baseline: auto-fit tracks at the 160 px (--size-px-12) minimum column,
+   * capped at 4 (a track is never narrower than a quarter of the row).
+   * Gutter = the page margin [D42]; last line → next rule --size-px-2-5.
+   */
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(max(var(--size-px-12), (100% - 3 * var(--fgd-space-margin)) / 4), 1fr)
+    );
+    column-gap: var(--fgd-space-margin);
+    row-gap: var(--size-px-2-5);
+    margin: 0;
+  }
+
+  /* The cell's top border is its rule, at column width; rule → label --size-px-3. */
+  .cell {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    padding-block-start: var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  /* Line 1: the icon, --size-px-1, the label; its line equals a value line, so label → value = the value pitch. */
+  .label {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-1);
+    margin: 0;
+    line-height: calc(var(--fgd-font-size-body-ui) * var(--font-lineheight-3));
+  }
+
+  .icon {
+    flex: none;
+    color: var(--role-muted);
+  }
+
+  /* Lines 2+: flush with the column edge, under the icon. */
+  .value {
+    margin: 0;
+    color: var(--primary12);
+    font-variant-numeric: var(--fgd-numerals-data);
+    overflow-wrap: break-word;
+  }
+
+  /* Stack guard, viewport fallback (§1.11.11 rule 5). */
+  @media (max-width: 359.98px) {
+    .grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  /* Container thresholds on spec-grid (§8.3, the owner). */
+  @container spec-grid (width < 360px) {
+    .grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @container spec-grid (360px <= width < 768px) {
+    .grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container spec-grid (768px <= width < 1024px) {
+    .grid {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @container spec-grid (width >= 1024px) {
+    .grid {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+}
+
+@layer variants {
+  /* Estimated: a line-dotted-fine top rule in --role-rule instead of the hairline. */
+  .estimated {
+    padding-block-start: calc(var(--size-px-3) + var(--border-size-1));
+    border-block-start-width: 0;
+  }
+
+  .estimated::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    block-size: 0;
+    border-block-end: var(--fgd-dot-fine) solid var(--role-rule);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3Ccircle cx='1.5' cy='0.5' r='0.5'/%3E%3C/svg%3E");
+    mask-size: var(--fgd-dot-fine-pitch) var(--fgd-dot-fine);
+    mask-repeat: round no-repeat;
+    mask-origin: border-box;
+  }
+}
+
+@layer print {
+  @media print {
+    /* 2-up in the printed column; rules and dots print black at 0.75 pt; cells never split. */
+    .grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cell {
+      break-inside: avoid;
+    }
+  }
+}

package/data/spec-list/SpecList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecList.d.ts","sourceRoot":"","sources":["../../src/data/spec-list/SpecList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA0BjE,eAAO,MAAM,QAAQ;;;8EAMnB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAErD,yDAAyD;AACzD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,qBAAqB,CAAC,IAAI,CAAC,GAAG;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,sDAAsD;IACtD,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CAC1C,CAAA;AAED,6FAA6F;AAC7F,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAI5C;AAED,yDAAyD;AACzD,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACnE,iEAAiE;IACjE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAQpD"}

package/data/spec-list/SpecList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecList.js","sourceRoot":"","sources":["../../src/data/spec-list/SpecList.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACvC,QAAQ,EAAE;QACR,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAA;AAeF,6FAA6F;AAC7F,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACxD,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,OAAO,+BAAQ,IAAI,KAAM,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,GAAI,CAAA;AAC5F,CAAC;AAQD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACrD,OAAO,CACL,gCAAS,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI;QAC/E,4BAAI,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAM;QACzC,4BAAI,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,QAAQ,CAAM,CACxC,CACP,CAAA;AACH,CAAC"}

package/data/spec-list/index.d.ts.map

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

package/data/spec-list/index.js.map

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

package/data/spec-list/spec-list.module.css

@@ -0,0 +1,95 @@
+/*
+ * Leader list (§8.3; §12.7). CVA function `specList`. Color roles (§12.7):
+ * label --role-muted, leader line-dotted-fine in --role-rule, value
+ * --primary12. The leader is the item's `::before`, a flex item between
+ * label and value: an SVG mask cuts a 1 px solid border into true round
+ * dots at a 3 px pitch [D36, D68], never a dotted border style or a
+ * gradient. Being a border it prints as foreground, at 0.75 pt dots on a
+ * 2.25 pt pitch, and takes the system ink in forced colors.
+ */
+
+/* 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. */
+.label {
+  composes: typeLabel typeMuted from '../../utils/type.module.css';
+}
+
+.value {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    container-type: inline-size;
+    /* Size containment leaves no intrinsic width: fill the box, never collapse as a flex or shrink-to-fit item. */
+    inline-size: 100%;
+    display: grid;
+    row-gap: var(--size-px-2);
+    margin: 0;
+    min-inline-size: 0;
+  }
+
+  /* Label, leader, value on the label's last baseline; the leader stops --size-px-2 short of each. */
+  .item {
+    display: flex;
+    align-items: last baseline;
+    column-gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  .label {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+  }
+
+  .item::before {
+    content: '';
+    order: 1;
+    flex: 1 0 var(--size-px-5);
+    align-self: last baseline;
+    block-size: 0;
+    border-block-end: var(--fgd-dot-fine) solid var(--role-rule);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3Ccircle cx='1.5' cy='0.5' r='0.5'/%3E%3C/svg%3E");
+    mask-size: var(--fgd-dot-fine-pitch) var(--fgd-dot-fine);
+    mask-repeat: round no-repeat;
+    mask-origin: border-box;
+  }
+
+  /* The value: right-aligned lining tabular figures; a wrapped value stays right-aligned. */
+  .value {
+    order: 2;
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+    font-variant-numeric: var(--fgd-numerals-data);
+    text-align: end;
+  }
+
+  /* Below 320 px of the list: the leader drops and the label stacks over the value (§8.3). */
+  @container (width < 320px) {
+    .item {
+      flex-direction: column;
+      align-items: flex-start;
+      row-gap: var(--size-px-1);
+    }
+
+    .item::before {
+      display: none;
+    }
+
+    .value {
+      text-align: start;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    .item {
+      break-inside: avoid;
+    }
+  }
+}