@fairgarden/design 0.1.0-alpha.0

package/components/Slider/slider.module.css

@@ -0,0 +1,371 @@
+/*
+ * Slider (§10.10). CVA function `slider`. The root `base` lays out the
+ * label and value row above a full-width control, and the tick scale under
+ * it when `stepped`. Parts: base, label, value, control, track, indicator,
+ * thumb, chip (a nested overlay-face Ground shown while dragging), ticks,
+ * tick (tickMajor, tickStart, tickEnd, tickMid), tickLabel, and edge /
+ * edgeLine, the SVG that draws the disabled `line-dotted-fine` track and
+ * thumb edges as true dots [D36, D68].
+ *
+ * Colors are role variables only. Local custom properties carry dimensions:
+ *   --slider-thumb-edge      thumb edge width (2 → 3 px while dragging)
+ *   --slider-edge-radius     radius the disabled dotted edge follows
+ *   --slider-tick-position   a tick's offset along the track (set inline)
+ */
+
+/* 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: typeFieldLabel from '../../utils/type.module.css';
+}
+
+.value {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.chip {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.ticks {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'label value'
+      'control control';
+    align-items: baseline;
+    column-gap: var(--ds-space-12);
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .label {
+    grid-area: label;
+    color: var(--primary12);
+  }
+
+  /* The value always shows in text: type-data at --font-weight-6, the label row's right end. */
+  .value {
+    grid-area: value;
+    justify-self: end;
+    color: var(--primary12);
+  }
+
+  .base .value {
+    --type-weight: var(--font-weight-6);
+  }
+
+  /* The control is the --ds-size-hit tall press target; the track sits centered in it. */
+  .control {
+    grid-area: control;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    block-size: var(--ds-size-hit);
+    touch-action: none;
+    user-select: none;
+  }
+
+  /* The track: --size-px-2 tall, --radius-round, a --border-size-1 --role-rule edge, no fill. */
+  .track {
+    --slider-edge-radius: calc(var(--size-px-2) / 2);
+
+    position: relative;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: var(--size-px-2);
+    border: var(--border-size-1) solid var(--role-rule);
+    border-radius: var(--radius-round);
+    background: none;
+  }
+
+  /* The indicator: a --primary12 ink shape over the track's full height. */
+  .indicator {
+    margin-block-start: calc(var(--border-size-1) * -1);
+    border-radius: var(--radius-round);
+    background-color: var(--primary12);
+  }
+
+  /* The thumb: --size-px-4 × --size-px-6, --radius-1, a --role-halo face and a --border-size-2 --primary12 edge. */
+  .thumb {
+    --slider-thumb-edge: var(--border-size-2);
+    --slider-edge-radius: var(--radius-1);
+
+    box-sizing: border-box;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-6);
+    border: var(--slider-thumb-edge) solid var(--primary12);
+    border-radius: var(--radius-1);
+    background-color: var(--role-halo);
+  }
+
+  /* Every thumb reaches --ds-size-hit; the hit area extends invisibly [D43]. */
+  .thumb::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--ds-size-hit);
+    block-size: var(--ds-size-hit);
+    translate: -50% -50%;
+  }
+
+  /* The drag chip: nested overlay face, --border-size-2 --primary12 edge, --size-px-2 above the thumb. */
+  .thumb .chip {
+    display: none;
+    position: absolute;
+    inset-block-end: calc(100% + var(--size-px-2));
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    padding-block: var(--size-px-1);
+    padding-inline: var(--size-px-2);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-1);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  /* Disabled edge host: covers the border box once the solid edge is removed. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--ds-dot-fine) / 2);
+    inset-inline-start: calc(var(--ds-dot-fine) / 2);
+    inline-size: calc(100% - var(--ds-dot-fine));
+    block-size: calc(100% - var(--ds-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--slider-edge-radius) - var(--ds-dot-fine) / 2);
+  }
+
+  /*
+   * The tick scale, --size-px-2 below the track. Each tick is a zero-width
+   * box at its value, so its line and label center on it in either
+   * direction; the end ticks anchor their labels inward.
+   */
+  .ticks {
+    grid-area: ticks;
+    position: relative;
+    min-block-size: calc(var(--ds-space-12) + var(--size-px-1) + 1lh);
+    margin-block-start: calc(var(--size-px-2) - (var(--ds-size-hit) - var(--size-px-2)) / 2);
+    margin-inline: var(--border-size-1);
+  }
+
+  .tick {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: var(--slider-tick-position);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    inline-size: 0;
+  }
+
+  /* Minor ticks are half the --ds-space-12 major tick (2:1); both --border-size-1 in --primary12. */
+  .tick::before {
+    content: '';
+    display: block;
+    inline-size: 0;
+    block-size: var(--ds-size-tick-minor);
+    border-inline-start: var(--border-size-1) solid var(--primary12);
+  }
+
+  .tickMajor::before {
+    block-size: var(--ds-space-12);
+  }
+
+  .tickStart {
+    align-items: flex-start;
+  }
+
+  .tickEnd {
+    align-items: flex-end;
+  }
+
+  .tickLabel {
+    display: none;
+    margin-block-start: var(--size-px-1);
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* Tick labels thin to the ends and midpoint at base; only the ends below 360 px; all from 768 px. */
+  .tickStart .tickLabel,
+  .tickEnd .tickLabel,
+  .tickMid .tickLabel {
+    display: block;
+  }
+
+  @media (max-width: 359.98px) {
+    .tickMid .tickLabel {
+      display: none;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .tick .tickLabel {
+      display: block;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+
+    .indicator {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
+
+  /* Hover and drag transitions [D181]: --ds-duration-quick, --ease-out-3. */
+  @media (prefers-reduced-motion: no-preference) {
+    .thumb {
+      transition-property: border-color, background-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  .stepped {
+    grid-template-areas:
+      'label value'
+      'control control'
+      'ticks ticks';
+  }
+}
+
+@layer states {
+  /* Vertical: the track runs along the block axis; the thumb turns crosswise. */
+  .control[data-orientation='vertical'] {
+    flex-direction: column;
+    justify-content: center;
+    inline-size: var(--ds-size-hit);
+    block-size: 100%;
+    min-block-size: var(--size-px-13);
+  }
+
+  .track[data-orientation='vertical'] {
+    inline-size: var(--size-px-2);
+    block-size: 100%;
+  }
+
+  .indicator[data-orientation='vertical'] {
+    margin-block-start: 0;
+    margin-inline-start: calc(var(--border-size-1) * -1);
+  }
+
+  .thumb[data-orientation='vertical'] {
+    inline-size: var(--size-px-6);
+    block-size: var(--size-px-4);
+  }
+
+  /*
+   * Hover (not disabled): the thumb face takes the outline hover, a
+   * --primary3 fill where soft fills apply and its rest --role-halo where
+   * they drop (--role-soft-hover-face, never the ground color), edge
+   * unchanged (§10.10; derived, flagged) [D181]. Dragging: the edge steps
+   * to --ds-stroke-3, an active state, and the face returns to rest.
+   */
+  .thumb:not([data-disabled]):hover {
+    background-color: var(--role-soft-hover-face);
+  }
+
+  .thumb[data-dragging]:not([data-disabled]) {
+    --slider-thumb-edge: var(--ds-stroke-3);
+
+    background-color: var(--role-halo);
+  }
+
+  /* Forced colors flatten the face, so a hover adds a --border-size-2 outline [D181]. */
+  @media (forced-colors: active) {
+    .thumb:not([data-disabled], [data-dragging]):hover {
+      outline: var(--border-size-2) solid currentColor;
+      outline-offset: var(--border-size-2);
+    }
+  }
+
+  .thumb[data-dragging] .chip {
+    display: block;
+  }
+
+  /* Focus: the ring sits on the thumb when its range input has keyboard focus [D45]. */
+  .thumb:has(:focus-visible) {
+    outline: var(--ds-focus-width) solid var(--primary12);
+    outline-offset: var(--ds-focus-offset);
+  }
+
+  /*
+   * Disabled: dotted track and thumb edges in --role-rule (--primary12 on
+   * one-ink grounds [D85]), no indicator, muted ticks; the value stays.
+   * Never dimmed [D16].
+   */
+  .track[data-disabled],
+  .thumb[data-disabled] {
+    border-style: none;
+  }
+
+  .track[data-disabled] > .edge,
+  .thumb[data-disabled] > .edge {
+    display: block;
+  }
+
+  .indicator[data-disabled] {
+    display: none;
+  }
+
+  .base[data-disabled] .label {
+    color: var(--role-muted);
+  }
+
+  .base[data-disabled] .tick::before {
+    border-inline-start-color: var(--role-muted);
+  }
+
+  .base[data-disabled] .tickLabel {
+    color: var(--role-muted);
+  }
+}
+
+@layer print {
+  @media print {
+    /* The control is hidden; the slider prints as "Label: value unit" (§10.10). */
+    .control,
+    .ticks {
+      display: none;
+    }
+
+    .base {
+      grid-template-columns: auto minmax(0, 1fr);
+      column-gap: var(--size-px-1);
+    }
+
+    .label::after {
+      content: ':';
+    }
+
+    .value {
+      justify-self: start;
+    }
+  }
+}

package/components/SpecGrid/SpecGrid.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../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/components/SpecGrid/SpecGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecGrid.d.ts","sourceRoot":"","sources":["../../src/components/SpecGrid/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,SAAS,CAAA;AA6B7C,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/components/SpecGrid/SpecGrid.js

@@ -0,0 +1,75 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Icon } from '../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/components/SpecGrid/SpecGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecGrid.js","sourceRoot":"","sources":["../../src/components/SpecGrid/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,SAAS,CAAA;AAC7C,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/components/SpecGrid/index.d.ts

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

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

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

package/components/SpecGrid/index.js

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

package/components/SpecGrid/index.js.map

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

package/components/SpecGrid/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 --ds-space-12.
+   */
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(max(var(--size-px-12), (100% - 3 * var(--ds-space-margin)) / 4), 1fr)
+    );
+    column-gap: var(--ds-space-margin);
+    row-gap: var(--ds-space-12);
+    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(--ds-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(--ds-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(--ds-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(--ds-dot-fine-pitch) var(--ds-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;
+    }
+  }
+}