@fairgarden/design 0.1.0-0.canary.0

package/forms/switch/switch.module.css

@@ -0,0 +1,285 @@
+/*
+ * Switch (§10.9). CVA function `switchRoot`. The root `base` is the row, a
+ * <label> wrapping Switch.Root (`track`), so the whole row is the hit
+ * target; the row reads the track's Base UI attributes through :has() and
+ * writes no state of its own. Parts: base, track, thumb, label, state (the
+ * "On" / "Off" word), description, and edge / edgeLine, the SVG that draws
+ * the disabled `line-dotted-fine` track as true dots [D36, D68].
+ *
+ * Colors are role variables only. Local custom properties carry dimensions:
+ *   --switch-edge         track edge width (2 off, 3 on)
+ *   --switch-edge-radius  radius the disabled dotted edge follows
+ *   --switch-travel       thumb travel from start to end
+ * The first grid row is one label line (1lh), so the track and the state
+ * word sit on the label's first line however far a long label wraps.
+ */
+
+/* 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. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.state {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.description {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    position: relative; /* holds Base UI's hidden input */
+    display: grid;
+    grid-template-rows: 1lh auto auto;
+    align-items: start;
+    align-content: center;
+    box-sizing: border-box;
+    min-block-size: var(--fgd-size-hit);
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
+  .label {
+    grid-area: label;
+    color: var(--primary12);
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .description {
+    grid-area: description;
+    margin-block-start: var(--size-px-1);
+  }
+
+  .state {
+    grid-area: state;
+    align-self: center;
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* The track: --fgd-size-hit × --size-px-5, --radius-round, a --border-size-2 --primary12 edge. */
+  .track {
+    --switch-edge: var(--border-size-2);
+    --switch-edge-radius: calc(var(--size-px-5) / 2);
+    --switch-travel: calc(var(--fgd-size-hit) - var(--size-px-3) - 2 * var(--size-px-1));
+
+    grid-area: track;
+    align-self: center;
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--size-px-5);
+    border: var(--switch-edge) solid var(--primary12);
+    border-radius: var(--radius-round);
+    background: none;
+  }
+
+  /*
+   * The thumb: --size-px-3 inset --size-px-1 from the track's outer edge
+   * [D40]. Off, a hollow --border-size-2 --primary12 ring at the start.
+   * Its offsets subtract the edge, so edge steps never move it.
+   */
+  .thumb {
+    position: absolute;
+    inset-block-start: calc(var(--size-px-1) - var(--switch-edge));
+    inset-inline-start: calc(var(--size-px-1) - var(--switch-edge));
+    display: block;
+    box-sizing: border-box;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-round);
+    background: none;
+  }
+
+  /* Disabled edge host: covers the border box once the solid edge is removed. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--fgd-dot-fine) / 2);
+    inset-inline-start: calc(var(--fgd-dot-fine) / 2);
+    inline-size: calc(100% - var(--fgd-dot-fine));
+    block-size: calc(100% - var(--fgd-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--switch-edge-radius) - var(--fgd-dot-fine) / 2);
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  /* Travel and hover at --fgd-duration-quick with --ease-out-3; instant under reduced motion [D181]. */
+  @media (prefers-reduced-motion: no-preference) {
+    .track,
+    .thumb {
+      transition-property: inset-inline-start, border-color, background-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    .label {
+      transition-property: text-decoration-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Row: label left, state word and switch right, a --role-hairline rule under the row. */
+  .row {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-areas:
+      'label state track'
+      'label . .'
+      'description . .';
+    padding-block: var(--size-px-2);
+    border-block-end: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  .row .state {
+    margin-inline: var(--size-px-2-5) var(--size-px-2);
+  }
+
+  /* Inline: switch, state word (--size-px-2 from the track), then label. */
+  .inline {
+    grid-template-columns: auto auto minmax(0, 1fr);
+    grid-template-areas:
+      'track state label'
+      '. . label'
+      '. . description';
+  }
+
+  .inline .state {
+    margin-inline: var(--size-px-2) var(--size-px-2-5);
+  }
+}
+
+@layer states {
+  /* On: --role-select fill, a --border-size-2-25 --role-select-edge, a solid --role-select-mark disc at the end (§10.1). */
+  .track[data-checked] {
+    --switch-edge: var(--border-size-2-25);
+
+    border-color: var(--role-select-edge);
+    background-color: var(--role-select);
+  }
+
+  .thumb[data-checked] {
+    inset-inline-start: calc(var(--size-px-1) - var(--switch-edge) + var(--switch-travel));
+    border-color: var(--role-select-mark);
+    background-color: var(--role-select-mark);
+  }
+
+  /*
+   * Hover (not disabled, read-only or busy) [D181]: edges and thumb never
+   * change and nothing lifts or grows. An off track takes the outline
+   * hover, a --primary3 fill (--role-soft-hover: none where soft fills
+   * drop); an on track moves its fill to --role-select-hover. The label
+   * takes the bare-text underline.
+   */
+  .base:not(:has([data-disabled], [data-readonly], [aria-busy='true'])):hover .track {
+    background-color: var(--role-soft-hover);
+  }
+
+  .base:not(:has([data-disabled], [data-readonly], [aria-busy='true'])):hover .track[data-checked] {
+    background-color: var(--role-select-hover);
+  }
+
+  .base:not(:has([data-disabled], [data-readonly], [aria-busy='true'])):hover .label {
+    text-decoration-line: underline;
+  }
+
+  /* Focus: 2 px --primary12 ring at a 2 px offset outside the track, keyboard only [D45]. */
+  .track:focus-visible {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: var(--fgd-focus-offset);
+  }
+
+  /* Disabled: dotted track in --role-rule (--primary12 on one-ink grounds [D85]), --role-muted ring. Never dimmed [D16]. */
+  .track[data-disabled] {
+    --switch-edge: 0px;
+
+    border-style: none;
+    background: none;
+  }
+
+  .track[data-disabled] > .edge {
+    display: block;
+  }
+
+  .thumb[data-disabled] {
+    border-color: var(--role-muted);
+    background: none;
+  }
+
+  .base:has(.track[data-disabled]) .label,
+  .base:has(.track[data-disabled]) .state {
+    color: var(--role-muted);
+  }
+
+  /* Busy: rest roles, inert (read-only), "Saving…" in the state word [D84]. */
+  .track[aria-busy='true'] {
+    cursor: progress;
+  }
+
+  /* Forced colors: the on thumb stays a solid disc, so shape still carries the state. */
+  @media (forced-colors: active) {
+    .thumb[data-checked] {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+      background-color: CanvasText;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* The graphic is hidden; the row prints as "Label: On" (§10.9). */
+    .base {
+      display: block;
+    }
+
+    .track {
+      display: none;
+    }
+
+    .label::after {
+      content: ':';
+    }
+
+    .state {
+      margin-inline: var(--size-px-1) 0;
+      font: inherit;
+      text-transform: none;
+      letter-spacing: normal;
+    }
+
+    .description {
+      display: block;
+    }
+
+    /* Disabled controls do not print (§10.1). */
+    .base:has(.track[data-disabled]) {
+      display: none;
+    }
+  }
+}

package/foundations/ground/Ground.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type PrimaryScale, type RadixScale } from '../../utils/scales';
+import { type BandPreset, type FieldPreset, type PageGroundPreset } from '../../utils/scope';
+export { companionField, companionFields, fieldPresets, pageGroundPresets, pastelPresets, presetDefaults, type BandPreset, type FieldPreset, type GroundKind, type GroundPreset, type PageGroundPreset, type PastelPreset, type PresetDefaults, } from '../../utils/scope';
+export declare const ground: (props?: ({
+    kind?: "field" | "band" | "face" | null | undefined;
+    framed?: boolean | null | undefined;
+    island?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+    action?: "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;
+export type Density = 'compact' | 'default' | 'spacious';
+interface GroundCommonProps {
+    /**
+     * Override the preset's primary. Inside tinted or solid scopes, only a
+     * pairing that §2's matrix verifies [D128].
+     */
+    primary?: PrimaryScale;
+    /** Override the preset's secondary. */
+    secondary?: RadixScale;
+    /** Override the scope's action scale. */
+    action?: RadixScale;
+    /** Written as `data-density`; inherited by the scope, so never defaulted. */
+    density?: Density;
+}
+interface GroundBandProps {
+    /**
+     * `band` (default): a full-bleed section or the page root, drawing its
+     * `--role-seam` rule top and bottom (visible only on the night band in
+     * dark mode [D179]). `field`: an inset, fixed-mode surface with a radius
+     * and a `--primary12` edge. `face`: a nested card face, plate or panel.
+     */
+    kind?: 'band';
+    /**
+     * A page ground (`paper` default, `white`, or one pastel per page:
+     * `tide`, `meadow`, `pollen`, `apricot`, `rose`, `heather`), which follows
+     * the page mode; or `night`, always dark, for the footer and the media hero
+     * only [D176, D177].
+     */
+    preset?: BandPreset;
+    framed?: never;
+    onMedia?: never;
+}
+interface GroundFieldProps {
+    kind: 'field';
+    /**
+     * A field [D177]: `forest`, `royal`, `brick` (always dark) or `leaf`,
+     * `amber`, `clay`, `pink` (always light). Required.
+     */
+    preset: FieldPreset;
+    /**
+     * The one framed feature field per page: `--fgd-radius-feature` and a
+     * `--border-size-2` `--primary12` edge [D95]. Default `false`.
+     */
+    framed?: boolean;
+    onMedia?: never;
+}
+interface GroundFaceProps {
+    kind: 'face';
+    /**
+     * A page ground as a card face, plate or panel (`paper` default). On a
+     * page ground it follows the mode; inside a field or the night band it is
+     * a light island [D149, D179].
+     */
+    preset?: PageGroundPreset;
+    framed?: never;
+    onMedia?: never;
+}
+interface GroundMediaFaceProps {
+    kind: 'face';
+    /** `night` as a face: only the `onMedia` Button's dark face (§1.11.10). */
+    preset: 'night';
+    /** Declares the face as the `onMedia` Button's; required with `night` [D178]. */
+    onMedia: true;
+    framed?: never;
+}
+/**
+ * Props for Ground: `section` props, `render`, the kind and its preset, the
+ * scale overrides and the density. A discriminated union on `kind` [D178]:
+ * a field preset outside `kind="field"`, `night` as a field, `night` as a
+ * face other than `onMedia`, and deferred or retired presets are type
+ * errors. Page grounds always follow the mode, so a pastel can never be a
+ * fixed-mode anchor.
+ */
+export type GroundProps = useRender.ComponentProps<'section'> & GroundCommonProps & (GroundBandProps | GroundFieldProps | GroundFaceProps | GroundMediaFaceProps);
+/**
+ * The ground scope component (§1.11.5). Writes data-ground, data-tone and
+ * data-scheme (and data-theme where the scope fixes its mode or is a light
+ * island [D149]), adds the scale classes for the preset's defaults or the
+ * overrides, paints `--role-ground`, publishes `--role-edge`, draws the
+ * seam on bands and the edge on fields, and provides the scope to
+ * descendants through React context [D148, D178].
+ */
+export declare const Ground: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
+    render?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | import("@base-ui/react").ComponentRenderFn<import("@base-ui/react").HTMLProps, {}> | undefined;
+} & GroundCommonProps & GroundBandProps, "ref"> | Omit<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
+    render?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | import("@base-ui/react").ComponentRenderFn<import("@base-ui/react").HTMLProps, {}> | undefined;
+} & GroundCommonProps & GroundFieldProps, "ref"> | Omit<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
+    render?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | import("@base-ui/react").ComponentRenderFn<import("@base-ui/react").HTMLProps, {}> | undefined;
+} & GroundCommonProps & GroundFaceProps, "ref"> | Omit<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
+    render?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | import("@base-ui/react").ComponentRenderFn<import("@base-ui/react").HTMLProps, {}> | undefined;
+} & GroundCommonProps & GroundMediaFaceProps, "ref">) & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Ground.d.ts.map

package/foundations/ground/Ground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ground.d.ts","sourceRoot":"","sources":["../../src/foundations/ground/Ground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAKrD,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAKL,KAAK,UAAU,EACf,KAAK,WAAW,EAGhB,KAAK,gBAAgB,EAEtB,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EACL,cAAc,EACd,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,mBAAmB,CAAA;AAa1B,eAAO,MAAM,MAAM;;;;;;;8EAsBjB,CAAA;AAEF,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;AAExD,UAAU,iBAAiB;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,uCAAuC;IACvC,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,yCAAyC;IACzC,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,UAAU,eAAe;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,OAAO,CAAA;IACb;;;OAGG;IACH,MAAM,EAAE,WAAW,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB;AAED,UAAU,oBAAoB;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,2EAA2E;IAC3E,MAAM,EAAE,OAAO,CAAA;IACf,iFAAiF;IACjF,OAAO,EAAE,IAAI,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;CACf;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,GAC3D,iBAAiB,GACjB,CAAC,eAAe,GAAG,gBAAgB,GAAG,eAAe,GAAG,oBAAoB,CAAC,CAAA;AAE/E;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM;;;;;;;;yFA4ElB,CAAA"}

package/foundations/ground/Ground.js

@@ -0,0 +1,98 @@
+'use client';
+import React, { useContext, useMemo } 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 styles from './ground.module.css';
+import { actionScaleVariants, primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { GroundContext, presetDefaults, presets, resolveScheme, } from '../../utils/scope';
+export { companionField, companionFields, fieldPresets, pageGroundPresets, pastelPresets, presetDefaults, } from '../../utils/scope';
+/*
+ * Ground (§1.11.5) [D178]. CVA function `ground`.
+ * - `kind` → band | field | face: geometry, and the container edge the
+ *   scope publishes as --role-edge (--role-rule on a band, --primary12 on a
+ *   field or a light island, --primary10 on a face on a page ground).
+ * - `framed` → the one framed feature field per page (fields only).
+ * - `island` is computed, never a prop: a page ground nested as a face
+ *   inside a field or the night band [D149, D179].
+ * - Color axes: computed from the preset or the overrides, never defaulted
+ *   [D133].
+ */
+export const ground = cva(styles.base, {
+    variants: {
+        kind: {
+            band: styles.band,
+            field: styles.field,
+            face: styles.face,
+        },
+        framed: {
+            true: styles.framed,
+        },
+        island: {
+            true: styles.island,
+        },
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+        action: actionScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'band',
+        framed: false,
+        island: false,
+    },
+});
+/**
+ * The ground scope component (§1.11.5). Writes data-ground, data-tone and
+ * data-scheme (and data-theme where the scope fixes its mode or is a light
+ * island [D149]), adds the scale classes for the preset's defaults or the
+ * overrides, paints `--role-ground`, publishes `--role-edge`, draws the
+ * seam on bands and the edge on fields, and provides the scope to
+ * descendants through React context [D148, D178].
+ */
+export const Ground = React.forwardRef(function Ground(props, forwardedRef) {
+    const { preset: presetProp, kind: kindProp, framed, 
+    // A type-level declaration only; never reaches the DOM.
+    onMedia: _onMedia, primary, secondary, action, density, render, className, children, ...rest } = props;
+    const preset = presetProp ?? 'paper';
+    const kind = kindProp ?? 'band';
+    const parent = useContext(GroundContext);
+    const { tone, mode } = presets[preset];
+    const scheme = resolveScheme(preset, parent);
+    // A follows-mode preset inside a fixed scope is a light island.
+    const island = mode === 'follows' && scheme === 'light';
+    const scope = useMemo(() => ({ ground: preset, tone, scheme, kind }), [preset, tone, scheme, kind]);
+    const defaults = presetDefaults[preset];
+    const resolvedPrimary = primary ?? defaults.primary;
+    const resolvedAction = action ?? (defaults.action === 'ink' ? resolvedPrimary : defaults.action);
+    // Fixed presets write their mode; a follows-mode preset writes nothing
+    // at page level and becomes a light island inside a fixed scope.
+    const theme = mode === 'always-dark'
+        ? 'dark'
+        : mode === 'always-light' || island
+            ? 'light'
+            : undefined;
+    const element = useRender({
+        defaultTagName: 'section',
+        render,
+        ref: forwardedRef,
+        props: mergeProps({
+            className: ground({
+                kind,
+                framed: kind === 'field' && framed === true,
+                island,
+                primary: resolvedPrimary,
+                secondary: secondary ?? defaults.secondary,
+                action: resolvedAction,
+                className,
+            }),
+            'data-ground': preset,
+            'data-tone': tone,
+            'data-scheme': scheme,
+            'data-theme': theme,
+            'data-density': density,
+            children,
+        }, rest),
+    });
+    return (React.createElement(GroundContext.Provider, { value: scope }, element));
+});
+//# sourceMappingURL=Ground.js.map

package/foundations/ground/Ground.js.map

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

package/foundations/ground/ground.module.css

@@ -0,0 +1,84 @@
+/*
+ * Ground: the preset scope (§1.11.5) [D178]. Paints the scope's ground, sets
+ * its one text ink, publishes the container edge as --role-edge, draws the
+ * seam on full-bleed bands and the edge on fields. Colors come from
+ * roles.css through the scope attributes the component writes; the module
+ * itself names role variables only and selects no scope or mode hook.
+ *
+ * The kind classes sit in the base layer, so a composing component's
+ * variant class (the Dialog's solid cover) can reset a field's geometry.
+ */
+@layer base {
+  .base {
+    display: block;
+    color: var(--primary12);
+    background-color: var(--role-ground);
+  }
+
+  /*
+   * Full-bleed band (a page ground, or the night band): a --border-size-1
+   * seam at top and bottom in --role-seam, invisible (the ground's own
+   * color) except on the night band in dark mode, where it is --primary12
+   * [D179]. A band has no container edge, so --role-edge is --role-rule.
+   * The hairline between two different page grounds is the §11.2 divider's.
+   */
+  .band {
+    --role-edge: var(--role-rule);
+
+    border-block: var(--border-size-1) solid var(--role-seam);
+  }
+
+  /*
+   * Field [D177]: inset inside the content container, never full-bleed, with
+   * a radius and its own --primary12 edge at --border-size-1 in both modes;
+   * no seam, because the edge does that job.
+   */
+  .field {
+    --role-edge: var(--primary12);
+    --ground-edge: var(--border-size-1);
+
+    padding: var(--fgd-space-margin);
+    border: var(--ground-edge) solid var(--role-edge);
+    border-radius: var(--radius-2-25);
+  }
+
+  /*
+   * Nested face (card face, plate, panel): no seam and no geometry of its
+   * own; the composing component sets size and radius and draws its edge in
+   * --role-edge: --primary10 on a page ground [D179].
+   */
+  .face {
+    --role-edge: var(--primary10);
+
+    border-block: none;
+  }
+}
+
+@layer variants {
+  /* A page ground inside a field or the night band: a light island with a --primary12 edge [D149, D179]. */
+  .island {
+    --role-edge: var(--primary12);
+  }
+
+  /* The one framed feature field per page: --fgd-radius-feature and a --border-size-2 edge [D95, D177]. */
+  .framed {
+    --ground-edge: var(--border-size-2);
+
+    border-radius: var(--fgd-radius-feature);
+  }
+}
+
+@layer print {
+  @media print {
+    /* The seam is the printed ground-change rule (§1.4.5); the ground prints white. */
+    .band {
+      border-block-width: var(--border-size-1);
+      break-inside: auto;
+    }
+
+    /* A field keeps its edge on paper; the framed feature field keeps --border-size-2 [D95]. */
+    .field {
+      break-inside: avoid;
+    }
+  }
+}

package/foundations/ground/index.d.ts

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

package/foundations/ground/index.d.ts.map

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

package/foundations/ground/index.js

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

package/foundations/ground/index.js.map

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

package/foundations/icon/Icon.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName, type IconTier } from '../../icons/paths';
+export type { IconName, IconTier };
+/**
+ * Icon classes (§6.10) [D166]. `size` is the Material Symbols tier:
+ * `inline` 16 px (`--size-px-3`), `tag` 20 px (`--size-px-4`), `block` 36 px
+ * (`--fgd-size-icon-block`). The icon has no color axes: it is filled in
+ * `currentColor` and takes its part's ink role.
+ */
+export declare const icon: (props?: ({
+    size?: "inline" | "block" | "tag" | null | undefined;
+    directional?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Which weight instance an icon draws (§10.1 icon states) [D166]:
+ * - `rest`: the tier's calibrated weight;
+ * - `emphasis`: the next stroke tier's weight at the same size, pinned;
+ * - `interactive`: rest, swapping to emphasis while an `iconHost` ancestor
+ *   is hovered or pressed.
+ */
+export type IconWeightState = 'rest' | 'emphasis' | 'interactive';
+/** Props for Icon: SVG props (without `children`, `color`, `fill` and `size`), the size tier, the name and the weight state. */
+export type IconProps = Omit<React.ComponentPropsWithRef<'svg'>, 'children' | 'color' | 'fill' | 'size'> & VariantProps<typeof icon> & {
+    /** The §6.10 inventory name (Material Symbols Rounded). */
+    name: IconName;
+    /**
+     * Accessible name. Omit it for an icon beside a visible label or inside
+     * a named control: the icon is then hidden from assistive technology.
+     */
+    label?: string;
+    /**
+     * `rest` (default) draws the tier's calibrated weight. `emphasis` pins
+     * the next stroke tier's weight at the same size, as the weight-change
+     * cue of a pressed or selected state. `interactive` draws rest and swaps
+     * to emphasis while an ancestor carrying `iconHost` is hovered or
+     * pressed; it ships both paths, so use it only inside such a host.
+     */
+    weight?: IconWeightState;
+};
+/**
+ * A Material Symbols Rounded UI icon, drawn as inline SVG in `currentColor`
+ * (FILL 0) at its tier's calibrated weight. The one FILL 1 instance,
+ * `circle`, is a selection mark only and must always travel with a second
+ * cue (a bar, a weight change, an edge change or a word): state is never
+ * shown by fill alone [D166].
+ */
+export declare function Icon({ name, label, size, directional, weight, className, ...rest }: IconProps): React.JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/foundations/icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/foundations/icon/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAIL,KAAK,QAAQ,EACb,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAA;AAI1B,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA;AAElC;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;8EAef,CAAA;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAA;AASjE,gIAAgI;AAChI,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAClC,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CACvC,GACC,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG;IAC1B,2DAA2D;IAC3D,IAAI,EAAE,QAAQ,CAAA;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,eAAe,CAAA;CACzB,CAAA;AAEH;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,WAAW,EACX,MAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,qBA6BX"}