@fairgarden/design 0.1.0-0.canary.0

package/data/scroll-area/ScrollArea.js

@@ -0,0 +1,87 @@
+'use client';
+import * as React from 'react';
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+import { cva } from 'class-variance-authority';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './scroll-area.module.css';
+/*
+ * Scroll Area (§10.19): bounded overflow for popup lists, dialog bodies,
+ * wide tables (§8.2), carousels (§12.4) and removable-chip rows. Never for
+ * whole pages or reading columns.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: scroll-area.module.css; CVA function `scrollArea`.
+ * - Axes: `kind` → panel | wide | rail (panel: vertical, scrollbar on
+ *   hover, focus and scroll; wide: horizontal, scrollbar always visible;
+ *   rail: the 2 px progress rail) [D155]; `primary`, `secondary` → scales
+ *   module classes (`secondary` unused).
+ * - Compound variants: none.
+ * - Defaults: kind panel; color axes none [D133].
+ * - Color fallback: inherits the scope.
+ * - States: Scrollbar `data-orientation` → its edge; `data-hovering`,
+ *   `data-scrolling` → the panel scrollbar shows and the thumb widens;
+ *   Thumb `:active` → --primary12; Root `data-has-overflow-x/-y` → the
+ *   gutter is reserved; `data-overflow-{x,y}-{start,end}` → each `edge`
+ *   rule; Viewport `:focus-visible` → ring.
+ * - Parts: base, viewport, content, scrollbar, thumb, corner, edge
+ *   (edgeStart, edgeEnd).
+ * - Scope: none.
+ * - Container: none; inherits its context.
+ *
+ * Hook for composed components: `--scroll-area-edge-start: none` on the
+ * root hides the start edge, for a table whose pinned column draws that
+ * edge itself (§8.2). `maxBlockSize` writes `--scroll-area-max-block`, the
+ * root's cap (50dvh on a panel by default).
+ */
+export const scrollArea = cva(styles.base, {
+    variants: {
+        kind: {
+            panel: styles.panel,
+            wide: styles.wide,
+            rail: styles.rail,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'panel',
+    },
+});
+/**
+ * A Base UI Scroll Area. Overflow is shown by a hard `--border-size-2`
+ * `--role-rule` edge on each side with hidden content, never a fade
+ * [D21, D68], and by a hairline track with a `--role-rule` thumb. Content
+ * prints at full height with the scrollbars and edges hidden. Don't nest
+ * two scroll areas on the same axis.
+ */
+export function ScrollArea(props) {
+    const { kind, primary, secondary, label, viewportRef, contentClassName, maxBlockSize, focusable = true, fitContent = true, className, style, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const orientation = (kind ?? 'panel') === 'panel' ? 'vertical' : 'horizontal';
+    const variants = { kind, primary, secondary };
+    const resolvedClassName = resolveClassName(className, (extra) => scrollArea({ ...variants, className: extra }));
+    const named = label ? { role: 'region', 'aria-label': label } : null;
+    // The cap is a local dimension on the root; the kind classes read it.
+    const cap = maxBlockSize == null
+        ? null
+        : {
+            '--scroll-area-max-block': typeof maxBlockSize === 'number' ? `${maxBlockSize}px` : maxBlockSize,
+        };
+    const resolvedStyle = cap == null
+        ? style
+        : typeof style === 'function'
+            ? (state) => ({ ...style(state), ...cap })
+            : { ...style, ...cap };
+    return (React.createElement(BaseScrollArea.Root, { ...rest, ...scope, className: resolvedClassName, style: resolvedStyle },
+        React.createElement(BaseScrollArea.Viewport, { ref: viewportRef, className: styles.viewport, ...named, ...(focusable ? null : { tabIndex: -1 }) },
+            React.createElement(BaseScrollArea.Content, { className: cx(styles.content, contentClassName), ...(fitContent ? null : { style: { minWidth: 0 } }) }, children)),
+        React.createElement(BaseScrollArea.Scrollbar, { orientation: orientation, className: styles.scrollbar },
+            React.createElement(BaseScrollArea.Thumb, { className: styles.thumb })),
+        React.createElement(BaseScrollArea.Corner, { className: styles.corner }),
+        React.createElement("span", { className: `${styles.edge} ${styles.edgeStart}`, "aria-hidden": "true" }),
+        React.createElement("span", { className: `${styles.edge} ${styles.edgeEnd}`, "aria-hidden": "true" })));
+}
+//# sourceMappingURL=ScrollArea.js.map

package/data/scroll-area/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sourceRoot":"","sources":["../../src/data/scroll-area/ScrollArea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAA;AACzE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACzC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,IAAI,EAAE,MAAM,CAAC,IAAI;SAClB;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,IAAI,EAAE,OAAO;KACd;CACF,CAAC,CAAA;AAqDF;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,IAAI,EACJ,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,SAAS,GAAG,IAAI,EAChB,UAAU,GAAG,IAAI,EACjB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,WAAW,GAAG,CAAC,IAAI,IAAI,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAA;IAC7E,MAAM,QAAQ,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAA;IAC7C,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAC9D,UAAU,CAAC,EAAE,GAAG,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAC9C,CAAA;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAY,CAAC,CAAC,CAAC,IAAI,CAAA;IAE/E,sEAAsE;IACtE,MAAM,GAAG,GACP,YAAY,IAAI,IAAI;QAClB,CAAC,CAAC,IAAI;QACN,CAAC,CAAE;YACC,yBAAyB,EACvB,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,YAAY;SAChD,CAAA;IAC/B,MAAM,aAAa,GACjB,GAAG,IAAI,IAAI;QACT,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,OAAO,KAAK,KAAK,UAAU;YAC3B,CAAC,CAAC,CAAC,KAAgC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC;YACrE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,GAAG,EAAE,CAAA;IAE5B,OAAO,CACL,oBAAC,cAAc,CAAC,IAAI,OACd,IAAI,KACJ,KAAK,EACT,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa;QAEpB,oBAAC,cAAc,CAAC,QAAQ,IACtB,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,MAAM,CAAC,QAAQ,KACtB,KAAK,KAGL,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC;YAEzC,oBAAC,cAAc,CAAC,OAAO,IACrB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,KAE3C,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,IAEnD,QAAQ,CACc,CACD;QAC1B,oBAAC,cAAc,CAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS;YAC7E,oBAAC,cAAc,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,CACxB;QAC3B,oBAAC,cAAc,CAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI;QACnD,8BAAM,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,SAAS,EAAE,iBAAc,MAAM,GAAG;QAC5E,8BAAM,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,OAAO,EAAE,iBAAc,MAAM,GAAG,CACtD,CACvB,CAAA;AACH,CAAC"}

package/data/scroll-area/index.d.ts

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

package/data/scroll-area/index.d.ts.map

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

package/data/scroll-area/index.js

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

package/data/scroll-area/index.js.map

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

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

@@ -0,0 +1,247 @@
+/*
+ * 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
+ */
+
+@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: contain;
+  }
+
+  /* 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;
+  }
+
+  .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 {
+  /* The horizontal gutter is reserved while there is something to scroll. */
+  .wide[data-has-overflow-x] .viewport,
+  .rail[data-has-overflow-x] .viewport {
+    padding-block-end: var(--scroll-area-gutter);
+  }
+
+  /* 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

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

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

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

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;
+    }
+  }
+}