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

package/foundations/expanding-box/expanding-box.module.css

@@ -0,0 +1,415 @@
+/*
+ * Expanding box: a behavior-free 9-slice frame whose pieces morph between
+ * two boxes through View Transitions (the search trigger into its dialog,
+ * §9.10 [D194]). CVA function `expandingBox` in ExpandingBox.tsx, applied to
+ * each of the three rows. Parts: host (exported: the owner's element that
+ * holds the rows), row, head / content / foot (the rows), corner and edge
+ * (the head and foot cells), inner (the content wrapper), face, left and
+ * right (the face and the side edges), main, extra, extraFallback, end
+ * (exported: the piece that rides the right edge), landing (the trigger box
+ * landing from a close).
+ *
+ * Geometry: head and foot are rows of --xb-cell cells (corner, edge,
+ * corner); the content row is pulled over both by --xb-cell, and its face,
+ * left and right pieces, absolute against the host, draw the face and the
+ * side edges under the corners. Radius, edge and cell are the same in every
+ * state, so the corner pieces are identical in both snapshots and only
+ * translate; the four edges stretch only along their length, keeping their
+ * weight, and the borderless face stretches freely.
+ *
+ * View Transitions: each piece reads its view-transition-name from a
+ * custom property the rows set inline per instance (`--xb-tl` … `--xb-focus`,
+ * `none` while the box is not active), so no name is ever written here and
+ * two boxes never collide. Every piece carries a view-transition-class
+ * (`fgd-xb` plus its kind, read from --xb-class so CSS Modules never hash
+ * it); utils/view-transitions.css styles the groups and images by class.
+ * While <html data-fgd-expanding="close"> is set, every piece also carries
+ * `closing`, so the close runs on the faster duration.
+ *
+ * Frame: one radius, --xb-radius (--radius-2-25, published on the host),
+ * and one edge, --xb-edge (--border-size-2), collapsed and expanded alike;
+ * only the color is per state: --role-rule collapsed (the field-like
+ * trigger), --primary12 expanded. Opening switches at the snapshot swap;
+ * closing keeps the landing trigger's frame --primary12 until the morph has
+ * finished (`landing`), so the color changes on the landed box. The
+ * focus ring follows the radius. The dialog's sheet keeps the same frame:
+ * its owner insets the host by the page margin. Face --primary1. Hover
+ * (collapsed) steps the edge --role-rule → --primary12 at the same weight
+ * [D140]; never a transform [D181]. Local custom properties carry dimensions
+ * and transition names and classes only; colors are role variables.
+ */
+
+@layer base {
+  /*
+   * The owner's element (trigger button, dialog popup): the positioned box
+   * the face, the side edges and the focus ring measure against. Zero
+   * specificity, so the owner's own position (a fixed popup) and sizing
+   * win. It publishes
+   * the frame radius, the same collapsed and expanded, for the rows and for
+   * any ring the owner draws on the host itself.
+   */
+  :where(.host) {
+    --xb-radius: var(--radius-2-25);
+
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 0;
+    border: 0;
+    background: none;
+  }
+
+  /*
+   * The edge, and the corner cell: the radius plus a size-px-1 straight run
+   * (8 + 4 = 12 px), which holds the radius and the edge (8 + 2).
+   */
+  .row {
+    --xb-edge: var(--border-size-2);
+    --xb-cell: calc(var(--xb-radius) + var(--size-px-1));
+  }
+
+  .head,
+  .foot {
+    display: flex;
+    flex: none;
+  }
+
+  /* Above the face and the side edges (same layer, later), below the content. */
+  .foot {
+    position: relative;
+    z-index: -1;
+  }
+
+  .corner,
+  .edge {
+    box-sizing: border-box;
+    block-size: var(--xb-cell);
+    border: 0 solid var(--primary12);
+    background-color: var(--primary1);
+  }
+
+  .corner {
+    flex: none;
+    inline-size: var(--xb-cell);
+  }
+
+  /* Edges tuck under the corners, so no seam opens between them. */
+  .edge {
+    flex: 1 1 auto;
+    margin-inline: calc(-1 * var(--border-size-2));
+  }
+
+  .head > .corner,
+  .head > .edge {
+    border-block-start-width: var(--xb-edge);
+  }
+
+  .foot > .corner,
+  .foot > .edge {
+    border-block-end-width: var(--xb-edge);
+  }
+
+  .tl,
+  .bl {
+    border-inline-start-width: var(--xb-edge);
+  }
+
+  .tr,
+  .br {
+    border-inline-end-width: var(--xb-edge);
+  }
+
+  .tl {
+    border-start-start-radius: var(--xb-radius);
+  }
+
+  .tr {
+    border-start-end-radius: var(--xb-radius);
+  }
+
+  .bl {
+    border-end-start-radius: var(--xb-radius);
+  }
+
+  .br {
+    border-end-end-radius: var(--xb-radius);
+  }
+
+  /*
+   * View-transition classes travel in --xb-class and are read through var():
+   * CSS Modules would hash a literal view-transition-class ident, and the
+   * global rules select these exact names.
+   */
+  .tl,
+  .tr,
+  .bl,
+  .br {
+    --xb-class: fgd-xb fgd-xb-corner;
+  }
+
+  .t,
+  .b {
+    --xb-class: fgd-xb fgd-xb-edge;
+  }
+
+  .corner,
+  .edge,
+  .content,
+  .face,
+  .left,
+  .right,
+  .main,
+  .main .end,
+  .extra,
+  .extraFallback {
+    view-transition-class: var(--xb-class);
+  }
+
+  .tl {
+    view-transition-name: var(--xb-tl);
+  }
+
+  .t {
+    view-transition-name: var(--xb-t);
+  }
+
+  .tr {
+    view-transition-name: var(--xb-tr);
+  }
+
+  .bl {
+    view-transition-name: var(--xb-bl);
+  }
+
+  .b {
+    view-transition-name: var(--xb-b);
+  }
+
+  .br {
+    view-transition-name: var(--xb-br);
+  }
+
+  /*
+   * Pulled over the head and foot rows; the pieces inside carry their own
+   * names. Inset by the frame's edge, so content never covers the frame.
+   */
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    margin-block: calc(-1 * var(--xb-cell));
+    padding: var(--xb-edge);
+    border-radius: var(--xb-radius);
+    view-transition-name: var(--xb-content);
+    --xb-class: fgd-xb fgd-xb-content;
+  }
+
+  /*
+   * The face and the two side edges, starting where the corner curves end,
+   * so they overlap the corners' size-px-1 straight run, under both rows.
+   * The face has no border; each side edge is a strip one edge wide, so in
+   * the morph it stretches only along its length.
+   */
+  .face,
+  .left,
+  .right {
+    position: absolute;
+    inset-block: var(--xb-radius);
+    z-index: -1;
+    box-sizing: border-box;
+  }
+
+  .face {
+    inset-inline: 0;
+    background-color: var(--primary1);
+    view-transition-name: var(--xb-face);
+    --xb-class: fgd-xb fgd-xb-face;
+  }
+
+  .left,
+  .right {
+    inline-size: var(--xb-edge);
+    border: 0 solid var(--primary12);
+    --xb-class: fgd-xb fgd-xb-edge;
+  }
+
+  .left {
+    inset-inline-start: 0;
+    border-inline-start-width: var(--xb-edge);
+    view-transition-name: var(--xb-l);
+  }
+
+  .right {
+    inset-inline-end: 0;
+    border-inline-end-width: var(--xb-edge);
+    view-transition-name: var(--xb-r);
+  }
+
+  /* The content wrapper (the `className` prop): main, extra, then the rest. */
+  .inner {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-block-size: 0;
+  }
+
+  /* Rides the left edge. */
+  .main {
+    view-transition-name: var(--xb-main);
+    --xb-class: fgd-xb fgd-xb-main;
+  }
+
+  /* Rides the right edge: one element inside main. */
+  .main .end {
+    view-transition-name: var(--xb-end);
+    --xb-class: fgd-xb fgd-xb-end;
+  }
+
+  .extra,
+  .extraFallback {
+    view-transition-name: var(--xb-extra);
+    --xb-class: fgd-xb fgd-xb-extra;
+  }
+
+  /* The empty extra a box without ExpandingBoxExtra grows from (the trigger's). */
+  .extraFallback {
+    inline-size: 100%;
+  }
+
+  .inner:has(.extra) > .extraFallback {
+    display: none;
+    view-transition-name: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .corner,
+    .edge,
+    .left,
+    .right {
+      transition-property: border-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Trigger-sized: the field edge's color; radius and weight are shared. */
+  .collapsed > .corner,
+  .collapsed > .edge,
+  .collapsed > .left,
+  .collapsed > .right {
+    border-color: var(--role-rule);
+  }
+
+  /*
+   * The focus ring's own piece, covering the whole box: it stays on the
+   * always-mounted trigger in both snapshots, so the ring hands off (it
+   * shows once the frame lands) rather than morphing with the frame.
+   */
+  .collapsed > .face::after {
+    content: '';
+    position: absolute;
+    inset-block: calc(-1 * var(--xb-radius));
+    inset-inline: 0;
+    border-radius: var(--xb-radius);
+    view-transition-name: var(--xb-focus);
+    view-transition-class: var(--xb-class);
+    --xb-class: fgd-xb fgd-xb-focus;
+  }
+}
+
+@layer states {
+  /* The host hands its focus ring to the box, which draws it round the whole frame. */
+  .host:focus-visible:has(> .collapsed) {
+    outline: none;
+  }
+
+  .host:focus-visible > .collapsed > .face::after {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: var(--fgd-focus-offset);
+  }
+
+  /* Hover: the field edge step at the same weight [D140]; the ring suppresses it. */
+  .host:hover:not(:focus-visible) > .collapsed > .corner,
+  .host:hover:not(:focus-visible) > .collapsed > .edge,
+  .host:hover:not(:focus-visible) > .collapsed > .left,
+  .host:hover:not(:focus-visible) > .collapsed > .right {
+    border-color: var(--primary12);
+  }
+
+  /*
+   * Landing from a close: the trigger's frame stays --primary12 in the new
+   * snapshot and while the morph runs, then eases to --role-rule on the
+   * landed box once the flag clears (--fgd-duration-quick).
+   */
+  .landing > .corner,
+  .landing > .edge,
+  .landing > .left,
+  .landing > .right {
+    border-color: var(--primary12);
+    transition: none;
+  }
+
+  /* Closing: every piece's group runs the faster close (startExpandingTransition sets the flag). */
+  :root[data-fgd-expanding='close'] .tl,
+  :root[data-fgd-expanding='close'] .tr,
+  :root[data-fgd-expanding='close'] .bl,
+  :root[data-fgd-expanding='close'] .br {
+    --xb-class: fgd-xb fgd-xb-corner closing;
+  }
+
+  :root[data-fgd-expanding='close'] .t,
+  :root[data-fgd-expanding='close'] .b,
+  :root[data-fgd-expanding='close'] .left,
+  :root[data-fgd-expanding='close'] .right {
+    --xb-class: fgd-xb fgd-xb-edge closing;
+  }
+
+  :root[data-fgd-expanding='close'] .content {
+    --xb-class: fgd-xb fgd-xb-content closing;
+  }
+
+  :root[data-fgd-expanding='close'] .face {
+    --xb-class: fgd-xb fgd-xb-face closing;
+  }
+
+  :root[data-fgd-expanding='close'] .collapsed > .face::after {
+    --xb-class: fgd-xb fgd-xb-focus closing;
+  }
+
+  :root[data-fgd-expanding='close'] .main {
+    --xb-class: fgd-xb fgd-xb-main closing;
+  }
+
+  :root[data-fgd-expanding='close'] .main .end {
+    --xb-class: fgd-xb fgd-xb-end closing;
+  }
+
+  :root[data-fgd-expanding='close'] .extra,
+  :root[data-fgd-expanding='close'] .extraFallback {
+    --xb-class: fgd-xb fgd-xb-extra closing;
+  }
+}
+
+@layer print {
+  @media print {
+    /* The box prints as its content in one black --border-size-1 frame (the remap turns --primary12 black). */
+    .head,
+    .foot,
+    .face,
+    .left,
+    .right {
+      display: none;
+    }
+
+    .content {
+      margin-block: 0;
+      padding: 0;
+      border: var(--border-size-1) solid var(--primary12);
+    }
+  }
+}

package/foundations/expanding-box/index.d.ts

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

package/foundations/expanding-box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/foundations/expanding-box/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,4BAA4B,CAAA"}

package/foundations/expanding-box/index.js

@@ -0,0 +1,3 @@
+export * from './ExpandingBox';
+export * from './startExpandingTransition';
+//# sourceMappingURL=index.js.map

package/foundations/expanding-box/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/foundations/expanding-box/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,4BAA4B,CAAA"}

package/foundations/expanding-box/startExpandingTransition.d.ts

@@ -0,0 +1,33 @@
+/** Which way the morph runs: `open` grows the trigger into the dialog; `close` is the faster way back. */
+export type ExpandingTransitionDirection = 'open' | 'close';
+/** Options for `startExpandingTransition`. */
+export type StartExpandingTransitionOptions = {
+    /** `open` or `close`: sets `<html data-fgd-expanding>`, which picks the timing. */
+    direction: ExpandingTransitionDirection;
+    /** The owner's `morph` prop. Default `true`; `false` applies the update at once, with no morph. */
+    enabled?: boolean;
+    /**
+     * The element the morph reads the shared switch and tokens on, usually the
+     * trigger (default: the root): `--fgd-outline-morph: none` there, or the
+     * direction's duration token (`--fgd-duration-expand` to open,
+     * `--fgd-duration-collapse` to close) resolving to 0, applies the update
+     * at once [D204].
+     */
+    source?: Element | null;
+};
+/**
+ * Runs `update` (the state change that swaps which box is active) as the
+ * morph. Resolves once the morph finishes, or on a microtask when it doesn't
+ * run. Never rejects.
+ *
+ * Without View Transitions or `view-transition-class`, under
+ * `prefers-reduced-motion: reduce`, in forced colors or print, with
+ * `enabled: false`, where `--fgd-outline-morph: none` applies to the source,
+ * or with the direction's duration token at 0 (read at call time), it calls
+ * `update()` directly and the change is instant. Otherwise it sets
+ * `<html data-fgd-expanding="open|close">` and calls
+ * `document.startViewTransition(() => flushSync(update))`, removing the flag
+ * when the last running morph settles. Re-entry guards are the owner's.
+ */
+export declare function startExpandingTransition(update: () => void, options: StartExpandingTransitionOptions): Promise<void>;
+//# sourceMappingURL=startExpandingTransition.d.ts.map

package/foundations/expanding-box/startExpandingTransition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"startExpandingTransition.d.ts","sourceRoot":"","sources":["../../src/foundations/expanding-box/startExpandingTransition.ts"],"names":[],"mappings":"AAUA,0GAA0G;AAC1G,MAAM,MAAM,4BAA4B,GAAG,MAAM,GAAG,OAAO,CAAA;AAE3D,8CAA8C;AAC9C,MAAM,MAAM,+BAA+B,GAAG;IAC5C,mFAAmF;IACnF,SAAS,EAAE,4BAA4B,CAAA;IACvC,mGAAmG;IACnG,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CACxB,CAAA;AA2CD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,MAAM,IAAI,EAClB,OAAO,EAAE,+BAA+B,GACvC,OAAO,CAAC,IAAI,CAAC,CA8Bf"}

package/foundations/expanding-box/startExpandingTransition.js

@@ -0,0 +1,82 @@
+'use client';
+import { flushSync } from 'react-dom';
+/** Morphs running now; the root flag stays until the last one settles. */
+let running = 0;
+const noop = () => { };
+/** A `<time>` custom property's computed value in ms ("333ms", "0.2s"), or null. */
+function timeMs(value) {
+    const match = value.trim().match(/^(-?[\d.]+)(ms|s)$/);
+    return match ? parseFloat(match[1]) * (match[2] === 's' ? 1000 : 1) : null;
+}
+/**
+ * Whether the morph can run, read now: View Transitions with
+ * `view-transition-class` (the pieces are styled by class); motion allowed,
+ * no forced colors and not printing (as the outline morph, §9.17); the
+ * owner's `morph` on; the shared switch `--fgd-outline-morph` not `none` on
+ * the source; and the direction's duration token not 0 there [D204].
+ */
+function canMorph(options) {
+    if (options.enabled === false)
+        return false;
+    if (typeof document === 'undefined' || typeof document.startViewTransition !== 'function') {
+        return false;
+    }
+    if (typeof CSS === 'undefined' || !CSS.supports('view-transition-class', 'a')) {
+        return false;
+    }
+    if (typeof matchMedia === 'function' &&
+        (matchMedia('(prefers-reduced-motion: reduce)').matches ||
+            matchMedia('(forced-colors: active)').matches ||
+            matchMedia('print').matches)) {
+        return false;
+    }
+    const style = getComputedStyle(options.source ?? document.documentElement);
+    if (style.getPropertyValue('--fgd-outline-morph').trim() === 'none')
+        return false;
+    const token = options.direction === 'open' ? '--fgd-duration-expand' : '--fgd-duration-collapse';
+    const duration = timeMs(style.getPropertyValue(token));
+    return duration === null || duration > 0;
+}
+/**
+ * Runs `update` (the state change that swaps which box is active) as the
+ * morph. Resolves once the morph finishes, or on a microtask when it doesn't
+ * run. Never rejects.
+ *
+ * Without View Transitions or `view-transition-class`, under
+ * `prefers-reduced-motion: reduce`, in forced colors or print, with
+ * `enabled: false`, where `--fgd-outline-morph: none` applies to the source,
+ * or with the direction's duration token at 0 (read at call time), it calls
+ * `update()` directly and the change is instant. Otherwise it sets
+ * `<html data-fgd-expanding="open|close">` and calls
+ * `document.startViewTransition(() => flushSync(update))`, removing the flag
+ * when the last running morph settles. Re-entry guards are the owner's.
+ */
+export function startExpandingTransition(update, options) {
+    if (!canMorph(options)) {
+        update();
+        return Promise.resolve();
+    }
+    const root = document.documentElement;
+    running += 1;
+    root.dataset.fgdExpanding = options.direction;
+    const settle = () => {
+        running -= 1;
+        if (running === 0) {
+            delete root.dataset.fgdExpanding;
+        }
+    };
+    let transition;
+    try {
+        transition = document.startViewTransition(() => flushSync(update));
+    }
+    catch {
+        // A browser that refuses to start one: apply the change as the fallback does.
+        settle();
+        update();
+        return Promise.resolve();
+    }
+    // A skipped morph (a duplicate name, a newer transition) still applies the update.
+    transition.ready.catch(noop);
+    return transition.finished.then(noop, noop).then(settle);
+}
+//# sourceMappingURL=startExpandingTransition.js.map

package/foundations/expanding-box/startExpandingTransition.js.map

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

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.map

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