@fairgarden/design 0.1.0-alpha.1 → 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

@@ -51,7 +51,7 @@ interface GroundFieldProps {
      */
     preset: FieldPreset;
     /**
-     * The one framed feature field per page: `--ds-radius-feature` and a
+     * The one framed feature field per page: `--fgd-radius-feature` and a
      * `--border-size-2` `--primary12` edge [D95]. Default `false`.
      */
     framed?: boolean;

package/foundations/ground/ground.module.css

@@ -37,9 +37,9 @@
     --role-edge: var(--primary12);
     --ground-edge: var(--border-size-1);
 
-    padding: var(--ds-space-margin);
+    padding: var(--fgd-space-margin);
     border: var(--ground-edge) solid var(--role-edge);
-    border-radius: var(--ds-radius-8);
+    border-radius: var(--radius-2-25);
   }
 
   /*
@@ -60,11 +60,11 @@
     --role-edge: var(--primary12);
   }
 
-  /* The one framed feature field per page: --ds-radius-feature and a --border-size-2 edge [D95, D177]. */
+  /* 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(--ds-radius-feature);
+    border-radius: var(--fgd-radius-feature);
   }
 }
 

package/foundations/icon/Icon.d.ts

@@ -5,7 +5,7 @@ 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
- * (`--ds-size-icon-block`). The icon has no color axes: it is filled in
+ * (`--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?: ({

package/foundations/icon/Icon.js

@@ -6,7 +6,7 @@ import styles from './icon.module.css';
 /**
  * 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
- * (`--ds-size-icon-block`). The icon has no color axes: it is filled in
+ * (`--fgd-size-icon-block`). The icon has no color axes: it is filled in
  * `currentColor` and takes its part's ink role.
  */
 export const icon = cva(styles.base, {

package/foundations/icon/icon.module.css

@@ -42,7 +42,7 @@
   }
 
   .block {
-    --icon-size: var(--ds-size-icon-block);
+    --icon-size: var(--fgd-size-icon-block);
   }
 
   /* Directional glyphs mirror in right-to-left layouts (§6.10, §1.3.6). */