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

package/forms/slider/slider.module.css

@@ -44,7 +44,7 @@
       'label value'
       'control control';
     align-items: baseline;
-    column-gap: var(--ds-space-12);
+    column-gap: var(--size-px-2-5);
     min-inline-size: 0;
     color: var(--primary12);
   }
@@ -65,13 +65,13 @@
     --type-weight: var(--font-weight-6);
   }
 
-  /* The control is the --ds-size-hit tall press target; the track sits centered in it. */
+  /* The control is the --fgd-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);
+    block-size: var(--fgd-size-hit);
     touch-action: none;
     user-select: none;
   }
@@ -109,14 +109,14 @@
     background-color: var(--role-halo);
   }
 
-  /* Every thumb reaches --ds-size-hit; the hit area extends invisibly [D43]. */
+  /* Every thumb reaches --fgd-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);
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
     translate: -50% -50%;
   }
 
@@ -141,10 +141,10 @@
   .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));
+    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;
   }
@@ -152,7 +152,7 @@
   .edgeLine {
     fill: none;
     stroke: var(--role-disabled-edge);
-    rx: calc(var(--slider-edge-radius) - var(--ds-dot-fine) / 2);
+    rx: calc(var(--slider-edge-radius) - var(--fgd-dot-fine) / 2);
   }
 
   /*
@@ -163,8 +163,8 @@
   .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);
+    min-block-size: calc(var(--size-px-2-5) + var(--size-px-1) + 1lh);
+    margin-block-start: calc(var(--size-px-2) - (var(--fgd-size-hit) - var(--size-px-2)) / 2);
     margin-inline: var(--border-size-1);
   }
 
@@ -178,17 +178,17 @@
     inline-size: 0;
   }
 
-  /* Minor ticks are half the --ds-space-12 major tick (2:1); both --border-size-1 in --primary12. */
+  /* Minor ticks are half the --size-px-2-5 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);
+    block-size: var(--fgd-size-tick-minor);
     border-inline-start: var(--border-size-1) solid var(--primary12);
   }
 
   .tickMajor::before {
-    block-size: var(--ds-space-12);
+    block-size: var(--size-px-2-5);
   }
 
   .tickStart {
@@ -236,11 +236,11 @@
     }
   }
 
-  /* Hover and drag transitions [D181]: --ds-duration-quick, --ease-out-3. */
+  /* Hover and drag transitions [D181]: --fgd-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-duration: var(--fgd-duration-quick);
       transition-timing-function: var(--ease-out-3);
     }
   }
@@ -260,7 +260,7 @@
   .control[data-orientation='vertical'] {
     flex-direction: column;
     justify-content: center;
-    inline-size: var(--ds-size-hit);
+    inline-size: var(--fgd-size-hit);
     block-size: 100%;
     min-block-size: var(--size-px-13);
   }
@@ -285,14 +285,14 @@
    * --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.
+   * to --border-size-2-25, 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);
+    --slider-thumb-edge: var(--border-size-2-25);
 
     background-color: var(--role-halo);
   }
@@ -311,8 +311,8 @@
 
   /* 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);
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: var(--fgd-focus-offset);
   }
 
   /*

package/forms/switch/Switch.js

@@ -18,7 +18,7 @@ import styles from './switch.module.css';
  * - Defaults: kind row; color axes none [D133].
  * - Color fallback: inherits the scope; its secondary drives the on state
  *   through the --role-select aliases.
- * - States: data-checked → track fill --role-select, edge --ds-stroke-3
+ * - States: data-checked → track fill --role-select, edge --border-size-2-25
  *   --role-select-edge, thumb a --role-select-mark disc at the end;
  *   :hover (not disabled, read-only or busy) [D181] → off track fill
  *   --role-soft-hover (--primary3 where soft fills apply), on track fill

package/forms/switch/switch.module.css

@@ -41,7 +41,7 @@
     align-items: start;
     align-content: center;
     box-sizing: border-box;
-    min-block-size: var(--ds-size-hit);
+    min-block-size: var(--fgd-size-hit);
     min-inline-size: 0;
     color: var(--primary12);
   }
@@ -67,18 +67,18 @@
     white-space: nowrap;
   }
 
-  /* The track: --ds-size-hit × --size-px-5, --radius-round, a --border-size-2 --primary12 edge. */
+  /* 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(--ds-size-hit) - var(--size-px-3) - 2 * var(--size-px-1));
+    --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(--ds-size-hit);
+    inline-size: var(--fgd-size-hit);
     block-size: var(--size-px-5);
     border: var(--switch-edge) solid var(--primary12);
     border-radius: var(--radius-round);
@@ -107,10 +107,10 @@
   .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));
+    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;
   }
@@ -118,7 +118,7 @@
   .edgeLine {
     fill: none;
     stroke: var(--role-disabled-edge);
-    rx: calc(var(--switch-edge-radius) - var(--ds-dot-fine) / 2);
+    rx: calc(var(--switch-edge-radius) - var(--fgd-dot-fine) / 2);
   }
 
   @media (forced-colors: active) {
@@ -127,18 +127,22 @@
     }
   }
 
-  /* Travel and hover at --ds-duration-quick with --ease-out-3; instant under reduced motion [D181]. */
+  /*
+   * Travel and hover at --fgd-duration-quick with --ease-out-3; instant under
+   * reduced motion [D181]. The thumb travels and edges fade; the track's and
+   * thumb's fills rest at none, so they step at once [D205].
+   */
   @media (prefers-reduced-motion: no-preference) {
     .track,
     .thumb {
-      transition-property: inset-inline-start, border-color, background-color;
-      transition-duration: var(--ds-duration-quick);
+      transition-property: inset-inline-start, border-color;
+      transition-duration: var(--fgd-duration-quick);
       transition-timing-function: var(--ease-out-3);
     }
 
     .label {
       transition-property: text-decoration-color;
-      transition-duration: var(--ds-duration-quick);
+      transition-duration: var(--fgd-duration-quick);
       transition-timing-function: var(--ease-out-3);
     }
   }
@@ -157,7 +161,7 @@
   }
 
   .row .state {
-    margin-inline: var(--ds-space-12) var(--size-px-2);
+    margin-inline: var(--size-px-2-5) var(--size-px-2);
   }
 
   /* Inline: switch, state word (--size-px-2 from the track), then label. */
@@ -170,14 +174,14 @@
   }
 
   .inline .state {
-    margin-inline: var(--size-px-2) var(--ds-space-12);
+    margin-inline: var(--size-px-2) var(--size-px-2-5);
   }
 }
 
 @layer states {
-  /* On: --role-select fill, a --ds-stroke-3 --role-select-edge, a solid --role-select-mark disc at the end (§10.1). */
+  /* 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(--ds-stroke-3);
+    --switch-edge: var(--border-size-2-25);
 
     border-color: var(--role-select-edge);
     background-color: var(--role-select);
@@ -210,8 +214,8 @@
 
   /* Focus: 2 px --primary12 ring at a 2 px offset outside the track, keyboard only [D45]. */
   .track:focus-visible {
-    outline: var(--ds-focus-width) solid var(--primary12);
-    outline-offset: var(--ds-focus-offset);
+    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]. */

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

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const expandingBox: (props?: ({
+    collapsed?: 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;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ExpandingBoxVariants = VariantProps<typeof expandingBox>;
+/** Class names for the owner's elements. */
+export declare const expandingBoxParts: {
+    /**
+     * On the owner's element that hosts the rows (the trigger button, the
+     * dialog popup): positions the box and hands its focus ring to the box.
+     */
+    readonly host: string;
+    /**
+     * On one element inside `ExpandingBoxMain` that rides the right edge (the
+     * shortcut hint, the esc or close button). At most one displayed per box.
+     */
+    readonly end: string;
+};
+/** Props for ExpandingBox. */
+export type ExpandingBoxProps = {
+    /**
+     * The pair's name base, shared by the two boxes that morph into each other
+     * (trigger and dialog). Get it once in the owner with `useExpandingBoxName()`,
+     * so two pairs never collide.
+     */
+    name: string;
+    /** This box holds the transition names now. Exactly one box of a pair is active at a time. Default `false`. */
+    active?: boolean;
+    /** Trigger-sized state: the field edge color (`--role-rule`), hover edge step, focus-ring hand-off. Default `false`. */
+    collapsed?: boolean;
+    /**
+     * The expanded box is the dialog's sheet below `--md-n-above`. The box keeps
+     * its radius and frame; the owner insets the host by the page margin (and
+     * the safe areas). Marks the rows `data-sheet`. Default `false`.
+     */
+    sheet?: boolean;
+    /** `span` inside phrasing-only hosts such as a `<button>`. Default `'div'`. */
+    as?: 'div' | 'span';
+    /** On the content wrapper. */
+    className?: string;
+    /** `ExpandingBoxMain`, then an optional `ExpandingBoxExtra`, then anything else (unnamed, such as a stats row). */
+    children: React.ReactNode;
+    /**
+     * Primary Radix scale: edges (hover and expanded `--primary12`), face
+     * (`--primary1`), focus ring. Never defaulted; omitted, it inherits the
+     * scope [D133].
+     */
+    primary?: ExpandingBoxVariants['primary'];
+    /** Secondary Radix scale, accepted for the shared color contract; no part draws in it today. Never defaulted. */
+    secondary?: ExpandingBoxVariants['secondary'];
+};
+/** Props for ExpandingBoxMain and ExpandingBoxExtra: HTML attributes and a ref. */
+export type ExpandingBoxPartProps = React.HTMLAttributes<HTMLElement> & {
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * A 9-slice frame in three rows (head, content, foot), rendered as direct
+ * children of the host (give that element `expandingBoxParts.host`). Each
+ * row carries the scope attributes and the scale classes. While `active`,
+ * its pieces carry View Transition names, so the owner's
+ * `startExpandingTransition` morphs this box into the pair's other box:
+ * corners translate, edges stretch, main rides the left edge, `end` the
+ * right, and the extra grows.
+ */
+export declare function ExpandingBox(props: ExpandingBoxProps): React.JSX.Element;
+/**
+ * The main piece (trigger: icon, label and shortcut hint; dialog: the input
+ * row). Rides the left edge. Renders the box's `as`.
+ */
+export declare function ExpandingBoxMain(props: ExpandingBoxPartProps): React.JSX.Element;
+/**
+ * The extra piece (dialog: the results). If omitted, the box renders an
+ * empty one, so the trigger's empty extra grows into the dialog's.
+ */
+export declare function ExpandingBoxExtra(props: ExpandingBoxPartProps): React.JSX.Element;
+/**
+ * A pair name from `useId()`, sanitized to a custom-ident: `fgd-xb-<id>` with
+ * `[^A-Za-z0-9_-]` replaced by `-`. Call it once in the owner and pass it to
+ * both boxes of the pair.
+ */
+export declare function useExpandingBoxName(): string;
+export {};
+//# sourceMappingURL=ExpandingBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandingBox.d.ts","sourceRoot":"","sources":["../../src/foundations/expanding-box/ExpandingBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAqCjE,eAAO,MAAM,YAAY;;;;8EAYvB,CAAA;AAEF,KAAK,oBAAoB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAE7D,4CAA4C;AAC5C,eAAO,MAAM,iBAAiB;IAC5B;;;OAGG;;IAEH;;;OAGG;;CAEK,CAAA;AAEV,8BAA8B;AAC9B,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,+GAA+G;IAC/G,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wHAAwH;IACxH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,+EAA+E;IAC/E,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mHAAmH;IACnH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAA;IACzC,iHAAiH;IACjH,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAA;CAC9C,CAAA;AAED,mFAAmF;AACnF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IACtE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAC7B,CAAA;AAUD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsGxE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAIhF;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAIjF;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAG5C"}

package/foundations/expanding-box/ExpandingBox.js

@@ -0,0 +1,179 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './expanding-box.module.css';
+/*
+ * Expanding box: the frame the search trigger morphs out of and into its
+ * dialog (§9.10 [D194]). Behavior-free: it only names its pieces for View
+ * Transitions while `active`; the owner runs the morph with
+ * startExpandingTransition.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: expanding-box.module.css; CVA function `expandingBox`, applied
+ *   to each of the three rows (head, content, foot), which render as direct
+ *   children of the owner's host element.
+ * - Axes: `collapsed` → `collapsed` (the field edge color, the hover edge
+ *   step and the focus-ring piece); `primary`, `secondary` → scales module
+ *   classes. Radius and edge weight are the same in both states.
+ * - Compound variants: none. Defaults: `collapsed: false`; color axes: none
+ *   [D133].
+ * - `sheet` draws nothing of its own: the frame is the same in every
+ *   layout. It marks the rows `data-sheet` for the owner, which insets its
+ *   host by the page margin below --md-n-above.
+ * - Transition names: `${name}-${piece}` for piece ∈ content, face, l, r,
+ *   main, end, extra, tl, t, tr, bl, b, br, set per instance as inline custom
+ *   properties on the rows (`none` while not active); `${name}-focus` while
+ *   `collapsed`. The global rules live in utils/view-transitions.css.
+ * - Parts: host and end (exported in `expandingBoxParts`), ExpandingBoxMain,
+ *   ExpandingBoxExtra.
+ * - States: host :hover (collapsed) → the edge step --role-rule →
+ *   --primary12 [D140]; host :focus-visible (collapsed) → the ring on the
+ *   box; <html data-fgd-expanding="close"> → the `closing` class; a
+ *   collapsed box made active during a close → `landing` (its frame stays
+ *   --primary12 until the morph finishes, then eases to --role-rule).
+ */
+export const expandingBox = cva(styles.row, {
+    variants: {
+        collapsed: {
+            true: styles.collapsed,
+        },
+        // Color axes: never defaulted [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        collapsed: false,
+    },
+});
+/** Class names for the owner's elements. */
+export const expandingBoxParts = {
+    /**
+     * On the owner's element that hosts the rows (the trigger button, the
+     * dialog popup): positions the box and hands its focus ring to the box.
+     */
+    host: styles.host,
+    /**
+     * On one element inside `ExpandingBoxMain` that rides the right edge (the
+     * shortcut hint, the esc or close button). At most one displayed per box.
+     */
+    end: styles.end,
+};
+const BoxContext = React.createContext({ as: 'div' });
+BoxContext.displayName = 'ExpandingBoxContext';
+/**
+ * A 9-slice frame in three rows (head, content, foot), rendered as direct
+ * children of the host (give that element `expandingBoxParts.host`). Each
+ * row carries the scope attributes and the scale classes. While `active`,
+ * its pieces carry View Transition names, so the owner's
+ * `startExpandingTransition` morphs this box into the pair's other box:
+ * corners translate, edges stretch, main rides the left edge, `end` the
+ * right, and the extra grows.
+ */
+export function ExpandingBox(props) {
+    const { name, active = false, collapsed = false, sheet = false, as = 'div', className, children, primary, secondary, } = props;
+    const scope = useScopeAttributes();
+    const context = React.useMemo(() => ({ as }), [as]);
+    const Element = as;
+    // The landing trigger: a collapsed box made active while a close morph runs.
+    // It keeps the expanded color in the new snapshot and until the morph ends.
+    const [landing, setLanding] = React.useState(false);
+    const wasActive = React.useRef(active);
+    React.useLayoutEffect(() => {
+        const was = wasActive.current;
+        wasActive.current = active;
+        if (collapsed && active && !was && document.documentElement.dataset.fgdExpanding === 'close') {
+            setLanding(true);
+        }
+        else if (!active) {
+            setLanding(false);
+        }
+    }, [active, collapsed]);
+    React.useEffect(() => {
+        if (!landing)
+            return undefined;
+        const root = document.documentElement;
+        const settle = () => {
+            if (root.dataset.fgdExpanding == null)
+                setLanding(false);
+        };
+        const observer = new MutationObserver(settle);
+        observer.observe(root, { attributes: true, attributeFilter: ['data-fgd-expanding'] });
+        settle();
+        return () => observer.disconnect();
+    }, [landing]);
+    const piece = (kind) => (active ? `${name}-${kind}` : 'none');
+    const rowClassName = cx(expandingBox({ collapsed, primary, secondary }), landing && styles.landing);
+    const state = {
+        'data-active': active ? '' : undefined,
+        'data-collapsed': collapsed ? '' : undefined,
+        'data-sheet': sheet ? '' : undefined,
+    };
+    const headNames = {
+        '--xb-tl': piece('tl'),
+        '--xb-t': piece('t'),
+        '--xb-tr': piece('tr'),
+    };
+    const footNames = {
+        '--xb-bl': piece('bl'),
+        '--xb-b': piece('b'),
+        '--xb-br': piece('br'),
+    };
+    const contentNames = {
+        '--xb-content': piece('content'),
+        '--xb-face': piece('face'),
+        '--xb-l': piece('l'),
+        '--xb-r': piece('r'),
+        '--xb-main': piece('main'),
+        '--xb-end': piece('end'),
+        '--xb-extra': piece('extra'),
+        // The ring's piece lives on the collapsed box whether or not it is active.
+        '--xb-focus': collapsed ? `${name}-focus` : 'none',
+    };
+    return (React.createElement(BoxContext.Provider, { value: context },
+        React.createElement(Element, { ...scope, ...state, className: cx(rowClassName, styles.head), style: headNames },
+            React.createElement(Element, { className: cx(styles.corner, styles.tl) }),
+            React.createElement(Element, { className: cx(styles.edge, styles.t) }),
+            React.createElement(Element, { className: cx(styles.corner, styles.tr) })),
+        React.createElement(Element, { ...scope, ...state, className: cx(rowClassName, styles.content), style: contentNames },
+            React.createElement(Element, { className: styles.face }),
+            React.createElement(Element, { className: styles.left }),
+            React.createElement(Element, { className: styles.right }),
+            React.createElement(Element, { className: cx(styles.inner, className) },
+                children,
+                React.createElement(Element, { className: styles.extraFallback }))),
+        React.createElement(Element, { ...scope, ...state, className: cx(rowClassName, styles.foot), style: footNames },
+            React.createElement(Element, { className: cx(styles.corner, styles.bl) }),
+            React.createElement(Element, { className: cx(styles.edge, styles.b) }),
+            React.createElement(Element, { className: cx(styles.corner, styles.br) }))));
+}
+/**
+ * The main piece (trigger: icon, label and shortcut hint; dialog: the input
+ * row). Rides the left edge. Renders the box's `as`.
+ */
+export function ExpandingBoxMain(props) {
+    const { className, ...rest } = props;
+    const Element = React.useContext(BoxContext).as;
+    return React.createElement(Element, { ...rest, className: cx(styles.main, className) });
+}
+/**
+ * The extra piece (dialog: the results). If omitted, the box renders an
+ * empty one, so the trigger's empty extra grows into the dialog's.
+ */
+export function ExpandingBoxExtra(props) {
+    const { className, ...rest } = props;
+    const Element = React.useContext(BoxContext).as;
+    return React.createElement(Element, { ...rest, className: cx(styles.extra, className) });
+}
+/**
+ * A pair name from `useId()`, sanitized to a custom-ident: `fgd-xb-<id>` with
+ * `[^A-Za-z0-9_-]` replaced by `-`. Call it once in the owner and pass it to
+ * both boxes of the pair.
+ */
+export function useExpandingBoxName() {
+    const id = React.useId();
+    return `fgd-xb-${id.replace(/[^A-Za-z0-9_-]/g, '-')}`;
+}
+//# sourceMappingURL=ExpandingBox.js.map

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

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