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

package/forms/search/search.module.css

@@ -8,6 +8,8 @@
  * field is the Input's box (§10.1), the submit a `solid` Button butted to
  * it, and the clear and header trigger icon-only Buttons: their parts are
  * left to their own modules (§1.11.1). Colors are role variables only.
+ * The popup opens and closes by the outline morph (it answers
+ * `data-outline-morph`, foundations/outline-morph) or at once [D205].
  */
 
 /* Composition sits in top-level rules, outside the layers: Lightning CSS
@@ -55,7 +57,7 @@
 
   /*
    * Rule-bounded: no box; the field sits between two --border-size-2
-   * --primary12 rules the width of the container (Sofar Sounds).
+   * --primary12 rules the width of the container.
    */
   .rules {
     position: relative;
@@ -65,7 +67,7 @@
     box-sizing: border-box;
     inline-size: 100%;
     block-size: var(--size-px-8);
-    padding-inline: var(--ds-space-12);
+    padding-inline: var(--size-px-2-5);
     border-block: var(--border-size-2) solid var(--primary12);
     color: var(--primary12);
     cursor: text;
@@ -93,14 +95,11 @@
 
   /* The §9.1 panel at field width: the white scope's face, the --border-size-2 --primary12 frame. */
   .popup {
-    /* The clip reveal starts from the trigger side. */
-    --search-reveal-from: inset(0 0 100% 0);
-
     box-sizing: border-box;
     inline-size: var(--anchor-width);
-    max-inline-size: calc(100vw - 2 * var(--ds-space-margin));
+    max-inline-size: calc(100vw - 2 * var(--fgd-space-margin));
     border: var(--border-size-2) solid var(--primary12);
-    border-radius: var(--ds-radius-8);
+    border-radius: var(--radius-2-25);
     background-color: var(--primary1);
     color: var(--primary12);
     clip-path: inset(0);
@@ -112,7 +111,7 @@
     box-sizing: border-box;
     max-block-size: min(
       var(--available-height, 100vh),
-      calc(8 * var(--ds-size-hit) + 2 * var(--size-px-1))
+      calc(8 * var(--fgd-size-hit) + 2 * var(--size-px-1))
     );
     padding: var(--size-px-1);
     overflow-y: auto;
@@ -142,15 +141,15 @@
     color: var(--role-muted);
   }
 
-  /* Suggestion rows: --ds-size-hit, type-body-ui; an optional type icon; highlight radius 8 − 4 [D40]. */
+  /* Suggestion rows: --fgd-size-hit, type-body-ui; an optional type icon; highlight radius 8 − 4 [D40]. */
   .item {
     position: relative;
     display: flex;
     align-items: center;
     gap: var(--size-px-2);
-    min-block-size: var(--ds-size-hit);
+    min-block-size: var(--fgd-size-hit);
     padding-inline: var(--size-px-3);
-    border-radius: calc(var(--ds-radius-8) - var(--size-px-1));
+    border-radius: calc(var(--radius-2-25) - var(--size-px-1));
     color: var(--primary12);
     text-decoration-line: none;
     cursor: default;
@@ -164,7 +163,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
-    border-inline-start: var(--ds-stroke-3) solid var(--primary12);
+    border-inline-start: var(--border-size-2-25) solid var(--primary12);
   }
 
   .itemIcon {
@@ -187,7 +186,7 @@
     font-weight: var(--font-weight-7);
   }
 
-  /* The secondary name: italic type-caption in --role-muted (Audubon's Latin names). */
+  /* The secondary name: italic type-caption in --role-muted. */
   .secondaryName {
     font-style: italic;
   }
@@ -196,7 +195,7 @@
   .seeAll {
     display: flex;
     align-items: center;
-    min-block-size: var(--ds-size-hit);
+    min-block-size: var(--fgd-size-hit);
     padding-inline: var(--size-px-3);
     border-block-start: var(--border-size-1) solid var(--role-rule);
   }
@@ -210,14 +209,14 @@
     padding: var(--size-px-2) var(--size-px-3);
   }
 
-  /* Docked: a full-width opaque bar at least --ds-size-hit tall, a --border-size-1 rule on its content side. */
+  /* Docked: a full-width opaque bar at least --fgd-size-hit tall, a --border-size-1 rule on its content side. */
   .bar {
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    min-block-size: var(--ds-size-hit);
+    min-block-size: var(--fgd-size-hit);
     padding-block: var(--size-px-2);
-    padding-inline: var(--ds-space-margin);
+    padding-inline: var(--fgd-space-margin);
     border-block-end: var(--border-size-1) solid var(--role-rule);
     background-color: var(--role-ground);
   }
@@ -233,12 +232,6 @@
     }
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    /* The clip reveal (the edge wipes open), never a fade [D91]. */
-    .popup {
-      transition: clip-path var(--ds-duration-disclosure) var(--ease-out-3);
-    }
-  }
 }
 
 @layer variants {
@@ -285,7 +278,7 @@
     display: block;
   }
 
-  /* Highlighted: --primary4 plus a --ds-stroke-3 start bar, as Menu [D145]. */
+  /* Highlighted: --primary4 plus a --border-size-2-25 start bar, as Menu [D145]. */
   .item[data-highlighted] {
     background-color: var(--primary4);
   }
@@ -303,15 +296,14 @@
     display: none;
   }
 
-  /* Placement: a popup above the field reveals from its bottom edge. */
-  .popup[data-side='top'] {
-    --search-reveal-from: inset(100% 0 0 0);
-  }
-
-  /* The clip reveal from the trigger side [D91]; instant under --motionNotOK. */
-  .popup[data-starting-style],
-  .popup[data-ending-style] {
-    clip-path: var(--search-reveal-from);
+  /*
+   * Outline morph [D204]: while the overlay draws the frame, the popup's own
+   * edge takes its face and its own transitions stay off. Without the morph
+   * the popup opens and closes at once (no reveal of its own) [D205].
+   */
+  .popup[data-outline-morph] {
+    border-color: var(--primary1);
+    transition: none;
   }
 }
 

package/forms/select/Select.d.ts

@@ -54,6 +54,14 @@ export type SelectProps<Value = string> = RootProps<Value> & {
      * scale while invalid.
      */
     secondary?: SelectVariants['secondary'];
+    /**
+     * The outline morph: the focus ring grows into the popup's frame as it
+     * opens and shrinks back as it closes; opened by pointer (no ring), the
+     * field edge grows instead. Instant under reduced motion; off in forced
+     * colors and print, and wherever `--fgd-outline-morph: none` applies.
+     * Default `true`; `false` opens and closes the popup at once.
+     */
+    morph?: boolean;
 } & ({
     /**
      * `outline` (default) is the boxed field; `underline` is the trigger
@@ -81,8 +89,8 @@ export type SelectItemProps = Omit<BaseSelect.Item.Props, 'className'> & {
     swatch?: string;
 };
 /**
- * One option: a `--ds-size-hit` row. Highlighted rows take the `--primary4`
- * soft fill and the `--ds-stroke-3` start bar; the chosen row a leading ✓
+ * One option: a `--fgd-size-hit` row. Highlighted rows take the `--primary4`
+ * soft fill and the `--border-size-2-25` start bar; the chosen row a leading ✓
  * and `--font-weight-6` [D145].
  */
 export declare function SelectItem(props: SelectItemProps): React.JSX.Element;

package/forms/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/forms/select/Select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/forms/select/Select.tsx"],"names":[],"mappings":"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"}

package/forms/select/Select.js

@@ -5,6 +5,8 @@ import { cva } from 'class-variance-authority';
 import { dangerScale, useFieldInvalid } from '../field';
 import { Ground } from '../../foundations/ground';
 import { Icon, iconHost } from '../../foundations/icon';
+import { OutlineMorphFrame } from '../../foundations/outline-morph';
+import { useOutlineMorphRoot } from '../../foundations/outline-morph/useOutlineMorphRoot';
 import { cx } from '../../utils/className';
 import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
 import { useScopeAttributes } from '../../utils/scope';
@@ -16,7 +18,7 @@ import styles from './select.module.css';
  * Implementation (CSS Modules + CVA)
  * - Module: select.module.css; CVA function `select`.
  * - Axes: `variant` → outline (boxed trigger), underline (trigger text over
- *   a --border-size-2 --role-accent underline, LTA); `plate` → plate;
+ *   a --border-size-2 --role-accent underline); `plate` → plate;
  *   `primary`, `secondary` → scales module classes.
  * - Compound variants: none. Excluded in the types: `plate` with underline.
  * - Defaults: variant outline, plate false; color axes none.
@@ -26,13 +28,13 @@ import styles from './select.module.css';
  * - States: trigger `:hover` (not disabled) → boxed edge → --primary12
  *   [D140], underline --role-accent → --primary12 at the same weight
  *   [D181]; `data-popup-open` → boxed edge
- *   --primary12, underline --ds-stroke-3, chevron rotated; `:focus-visible`
+ *   --primary12, underline --border-size-2-25, chevron rotated; `:focus-visible`
  *   → ring; `data-disabled` → dotted edge, --role-muted; `data-invalid` →
  *   error edge or danger underline. Item `data-highlighted` → --primary4
- *   plus the --ds-stroke-3 start bar [D145]; `data-selected` → leading ✓
+ *   plus the --border-size-2-25 start bar [D145]; `data-selected` → leading ✓
  *   plus --font-weight-6; `data-disabled` → --role-muted, never
- *   highlighted. Popup `data-starting-style` / `data-ending-style` → the
- *   clip reveal from `data-side` [D91].
+ *   highlighted. Popup: the outline morph or nothing; it opens and closes
+ *   at once [D205].
  * - Parts: base (the trigger), value, icon, swatch, popup, list, item,
  *   itemText, itemIndicator, group, groupLabel, separator.
  * - Scope: `popup` renders in its Base UI Portal and declares a nested
@@ -40,6 +42,11 @@ import styles from './select.module.css';
  *   [D92] overlay frame [D139, D156]. `plate` → the trigger is a nested
  *   `white` Ground.
  * - Container: none; inherits its context.
+ * - Outline morph [D204]: on by default (`morph={false}` opts out), the
+ *   trigger's focus ring (or, opened by pointer, its edge) grows into the
+ *   popup's frame and back (foundations/outline-morph). The frame renders
+ *   beside the popup in its Positioner; while it draws, the popup carries
+ *   `data-outline-morph` (its edge takes the face). No trigger style changes.
  */
 export const select = cva(styles.base, {
     variants: {
@@ -79,12 +86,19 @@ function Swatch({ color }) {
  * searchable lists and Radio for 2–4 visible options.
  */
 export function Select(props) {
-    const { items, children, placeholder, variant, plate, primary, secondary, className, 'aria-label': ariaLabel, ...rootProps } = props;
+    const { items, children, placeholder, variant, plate, primary, secondary, className, 'aria-label': ariaLabel, morph = true, onOpenChange, ...rootProps } = props;
     const scope = useScopeAttributes();
     const invalid = useFieldInvalid();
     const resolvedSecondary = invalid ? dangerScale : secondary;
     const options = flatten(items);
     const hasSwatch = options.some((option) => option.swatch);
+    // The outline morph follows the root's open state [D204].
+    const outline = useOutlineMorphRoot({
+        open: rootProps.open,
+        defaultOpen: rootProps.defaultOpen,
+        onOpenChange,
+        morph,
+    });
     const triggerClassName = select({
         variant,
         plate,
@@ -103,17 +117,18 @@ export function Select(props) {
                 option.label));
         }
         : undefined;
-    return (React.createElement(BaseSelect.Root, { ...rootProps, items: items },
-        React.createElement(BaseSelect.Trigger, { ...(plate ? null : scope), "aria-label": ariaLabel, className: triggerClassName, render: plate ? (React.createElement(Ground, { preset: "white", kind: "face", primary: primary ?? undefined, secondary: resolvedSecondary ?? undefined, render: React.createElement("button", { type: "button" }) })) : undefined },
+    return (React.createElement(BaseSelect.Root, { ...rootProps, onOpenChange: outline.onOpenChange, items: items },
+        React.createElement(BaseSelect.Trigger, { ref: outline.refs?.sourceRef, ...(plate ? null : scope), "aria-label": ariaLabel, className: triggerClassName, render: plate ? (React.createElement(Ground, { preset: "white", kind: "face", primary: primary ?? undefined, secondary: resolvedSecondary ?? undefined, render: React.createElement("button", { type: "button" }) })) : undefined },
             React.createElement(BaseSelect.Value, { className: styles.value, placeholder: placeholder }, renderValue),
             React.createElement(BaseSelect.Icon, { className: styles.icon },
                 React.createElement(Icon, { name: "expand_more", weight: "interactive" })),
             React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" }, variant === 'underline' ? (React.createElement("line", { className: styles.edgeLine, x1: "0", y1: "100%", x2: "100%", y2: "100%" })) : (React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" })))),
         React.createElement(BaseSelect.Portal, null,
             React.createElement(BaseSelect.Positioner, { className: styles.positioner, alignItemWithTrigger: false, side: "bottom", align: variant === 'underline' ? 'end' : 'start', sideOffset: 8, collisionPadding: 16 },
-                React.createElement(BaseSelect.Popup, { ...overlayAttributes, className: [styles.popup, overlayScaleClassName].join(' ') },
+                React.createElement(BaseSelect.Popup, { ref: outline.refs?.targetRef, ...overlayAttributes, className: [styles.popup, overlayScaleClassName].join(' ') },
                     React.createElement(OverlayScope, null,
-                        React.createElement(BaseSelect.List, { className: styles.list }, children ?? (items ? renderItems(items) : null))))))));
+                        React.createElement(BaseSelect.List, { className: styles.list }, children ?? (items ? renderItems(items) : null)))),
+                outline.refs ? React.createElement(OutlineMorphFrame, { ref: outline.refs.frameRef }) : null))));
 }
 function renderOption(option, index) {
     return (React.createElement(SelectItem, { key: `${String(option.value)}-${index}`, value: option.value, label: option.label, disabled: option.disabled, swatch: option.swatch }, option.label));
@@ -126,8 +141,8 @@ function renderItems(items) {
         React.createElement(SelectGroup, { label: group.label }, group.items.map(renderOption)))));
 }
 /**
- * One option: a `--ds-size-hit` row. Highlighted rows take the `--primary4`
- * soft fill and the `--ds-stroke-3` start bar; the chosen row a leading ✓
+ * One option: a `--fgd-size-hit` row. Highlighted rows take the `--primary4`
+ * soft fill and the `--border-size-2-25` start bar; the chosen row a leading ✓
  * and `--font-weight-6` [D145].
  */
 export function SelectItem(props) {

package/forms/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/forms/select/Select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/forms/select/Select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qDAAqD,CAAA;AACzF,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAC5F,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACrC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,SAAS,EAAE,MAAM,CAAC,SAAS;SAC5B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,MAAM,CAAC,KAAK;SACnB;QACD,sCAAsC;QACtC,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,KAAK;KACb;CACF,CAAC,CAAA;AA2BF,SAAS,QAAQ,CAAQ,KAAyB;IAChD,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAAA;AAChD,CAAC;AAED,SAAS,OAAO,CAAQ,KAAqC;IAC3D,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,CAAA;IACrB,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;AACxE,CAAC;AAkDD,4EAA4E;AAC5E,SAAS,MAAM,CAAC,EAAE,KAAK,EAAqB;IAC1C,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO;QACrF,gCAAQ,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAE,KAAK,GAAI,CACvE,CACP,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,MAAM,CAAiB,KAAyB;IAC9D,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,EACT,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,KAAK,GAAG,IAAI,EACZ,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAA;IACjC,MAAM,iBAAiB,GAAG,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAA;IAC3D,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,CAAA;IAC9B,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAEzD,0DAA0D;IAC1D,MAAM,OAAO,GAAG,mBAAmB,CAAC;QAClC,IAAI,EAAE,SAAS,CAAC,IAAI;QACpB,WAAW,EAAE,SAAS,CAAC,WAAW;QAClC,YAAY;QACZ,KAAK;KACN,CAAC,CAAA;IAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC;QAC9B,OAAO;QACP,KAAK;QACL,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;QACpC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB;QAChD,oEAAoE;QACpE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,QAAQ;KAC7D,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,SAAS;QAC3B,CAAC,CAAC,CAAC,KAAmB,EAAE,EAAE;YACtB,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;YAC7E,IAAI,CAAC,MAAM;gBAAE,OAAO,WAAW,IAAI,IAAI,CAAA;YACvC,OAAO,CACL;gBACG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAI,CAAC,CAAC,CAAC,IAAI;gBACvD,MAAM,CAAC,KAAK,CACZ,CACJ,CAAA;QACH,CAAC;QACH,CAAC,CAAC,SAAS,CAAA;IAEb,OAAO,CACL,oBAAC,UAAU,CAAC,IAAI,OAAmB,SAAS,EAAE,YAAY,EAAE,OAAO,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK;QAC5F,oBAAC,UAAU,CAAC,OAAO,IACjB,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,SAAS,KACxB,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,gBACd,SAAS,EACrB,SAAS,EAAE,gBAAgB,EAC3B,MAAM,EACJ,KAAK,CAAC,CAAC,CAAC,CACN,oBAAC,MAAM,IACL,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,SAAS,EAAE,iBAAiB,IAAI,SAAS,EACzC,MAAM,EAAE,gCAAQ,IAAI,EAAC,QAAQ,GAAG,GAChC,CACH,CAAC,CAAC,CAAC,SAAS;YAGf,oBAAC,UAAU,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,WAAW,IAChE,WAAW,CACK;YACnB,oBAAC,UAAU,CAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI;gBACrC,oBAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,MAAM,EAAC,aAAa,GAAG,CAChC;YAClB,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO,IAC9D,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,CACzB,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,GAAG,CAC1E,CAAC,CAAC,CAAC,CACF,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,GAAG,CAChE,CACG,CACa;QACrB,oBAAC,UAAU,CAAC,MAAM;YAChB,oBAAC,UAAU,CAAC,UAAU,IACpB,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,oBAAoB,EAAE,KAAK,EAC3B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAChD,UAAU,EAAE,CAAC,EACb,gBAAgB,EAAE,EAAE;gBAEpB,oBAAC,UAAU,CAAC,KAAK,IACf,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,SAAS,KACxB,iBAAiB,EACrB,SAAS,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;oBAE1D,oBAAC,YAAY;wBACX,oBAAC,UAAU,CAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,IACpC,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAChC,CACL,CACE;gBAClB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,iBAAiB,IAAC,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAClD,CACN,CACJ,CACnB,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAQ,MAA2B,EAAE,KAAa;IACrE,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,EAAE,EACvC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,IAEpB,MAAM,CAAC,KAAK,CACF,CACd,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAQ,KAAyB;IACnD,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAAA;IACpD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,CAAC,KAAK;QAC7B,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAC,eAAe,OAAG,CAAC,CAAC,CAAC,IAAI;QACvC,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,IAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAAe,CAC/D,CAClB,CAAC,CAAA;AACJ,CAAC;AAUD;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACtD,OAAO,CACL,oBAAC,UAAU,CAAC,IAAI,OAAK,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC;QAC9D,oBAAC,UAAU,CAAC,aAAa,IAAC,SAAS,EAAE,MAAM,CAAC,aAAa;YACvD,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CACI;QAC3B,oBAAC,UAAU,CAAC,QAAQ,IAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,IAC5C,MAAM,CAAC,CAAC,CAAC,CACR,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK;YAC3B,oBAAC,MAAM,IAAC,KAAK,EAAE,MAAM,GAAI;YACxB,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACmB,CACN,CACnB,CAAA;AACH,CAAC;AASD,+BAA+B;AAC/B,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACrD,OAAO,CACL,oBAAC,UAAU,CAAC,KAAK,OAAK,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC;QAChE,oBAAC,UAAU,CAAC,UAAU,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU,IAAG,KAAK,CAAyB;QACnF,QAAQ,CACQ,CACpB,CAAA;AACH,CAAC;AAOD,yEAAyE;AACzE,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACpC,OAAO,CACL,oBAAC,UAAU,CAAC,SAAS,OACf,IAAI,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAC1C,CACH,CAAA;AACH,CAAC"}

package/forms/select/select.module.css

@@ -6,7 +6,9 @@
  * `edgeLine` draw the disabled `line-dotted-fine` edge as true dots
  * [D36, D68]. Colors are role variables only; local custom properties carry
  * dimensions only. The popup is a portaled `white` page scope framed by
- * --border-size-2 --primary12 [D92, D139, D156].
+ * --border-size-2 --primary12 [D92, D139, D156]. It opens and closes by
+ * the outline morph (the popup answers `data-outline-morph`,
+ * foundations/outline-morph) or at once [D205].
  */
 
 /* Composition sits in top-level rules, outside the layers: Lightning CSS
@@ -46,7 +48,7 @@
     block-size: var(--size-px-8);
     margin: 0;
     padding-block: 0;
-    padding-inline: calc(var(--ds-space-12) + var(--border-size-1) - var(--select-edge));
+    padding-inline: calc(var(--size-px-2-5) + var(--border-size-1) - var(--select-edge));
     border: var(--select-edge) solid var(--role-rule);
     border-radius: var(--select-radius);
     background: none;
@@ -75,12 +77,12 @@
     color: inherit;
   }
 
-  /* The swatch: a --ds-space-12 disc of the product's color (content), ringed in --primary12. */
+  /* The swatch: a --size-px-2-5 disc of the product's color (content), ringed in --primary12. */
   .swatch {
     flex: none;
     display: block;
-    inline-size: var(--ds-space-12);
-    block-size: var(--ds-space-12);
+    inline-size: var(--size-px-2-5);
+    block-size: var(--size-px-2-5);
     overflow: visible;
   }
 
@@ -92,10 +94,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;
   }
@@ -103,7 +105,7 @@
   .edgeLine {
     fill: none;
     stroke: var(--role-disabled-edge);
-    rx: calc(var(--select-radius) - var(--ds-dot-fine) / 2);
+    rx: calc(var(--select-radius) - var(--fgd-dot-fine) / 2);
   }
 
   /* The popup sits --size-px-2 below its trigger on --layer-3. */
@@ -114,18 +116,15 @@
 
   /*
    * The overlay face: the white scope's --primary1, the --border-size-2
-   * --primary12 frame in both modes, --ds-radius-8; at least the trigger's
+   * --primary12 frame in both modes, --radius-2-25; at least the trigger's
    * width, and never wider than the viewport minus the page margins.
    */
   .popup {
-    /* The clip reveal starts from the trigger side. */
-    --select-reveal-from: inset(0 0 100% 0);
-
     box-sizing: border-box;
     min-inline-size: var(--anchor-width);
-    max-inline-size: calc(100vw - 2 * var(--ds-space-margin));
+    max-inline-size: calc(100vw - 2 * var(--fgd-space-margin));
     border: var(--border-size-2) solid var(--primary12);
-    border-radius: var(--ds-radius-8);
+    border-radius: var(--radius-2-25);
     background-color: var(--primary1);
     color: var(--primary12);
     clip-path: inset(0);
@@ -137,7 +136,7 @@
     box-sizing: border-box;
     max-block-size: min(
       var(--available-height, 100vh),
-      calc(8 * var(--ds-size-hit) + 2 * var(--size-px-1))
+      calc(8 * var(--fgd-size-hit) + 2 * var(--size-px-1))
     );
     padding: var(--size-px-1);
     overflow-y: auto;
@@ -146,30 +145,30 @@
     outline: 0;
   }
 
-  /* Items: --ds-size-hit rows at every width, --size-px-3 padding; highlight radius 8 − 4 [D40]. */
+  /* Items: --fgd-size-hit rows at every width, --size-px-3 padding; highlight radius 8 − 4 [D40]. */
   .item {
     position: relative;
     display: grid;
     grid-template-columns: var(--size-px-3) minmax(0, 1fr);
     align-items: center;
     column-gap: var(--size-px-2);
-    min-block-size: var(--ds-size-hit);
+    min-block-size: var(--fgd-size-hit);
     padding-inline: var(--size-px-3);
-    border-radius: calc(var(--ds-radius-8) - var(--size-px-1));
+    border-radius: calc(var(--radius-2-25) - var(--size-px-1));
     color: var(--primary12);
     cursor: default;
     outline: 0;
     user-select: none;
   }
 
-  /* The highlight bar: a --ds-stroke-3 start edge in --primary12, drawn as a border so it survives forced colors. */
+  /* The highlight bar: a --border-size-2-25 start edge in --primary12, drawn as a border so it survives forced colors. */
   .item::before {
     content: '';
     display: none;
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
-    border-inline-start: var(--ds-stroke-3) solid var(--primary12);
+    border-inline-start: var(--border-size-2-25) solid var(--primary12);
   }
 
   .itemIndicator {
@@ -203,7 +202,7 @@
   @media (min-width: 768px) {
     /* From --md-n-above the popup is the trigger's width, up to 360 px. */
     .popup {
-      max-inline-size: max(var(--anchor-width), var(--ds-size-overlay-max));
+      max-inline-size: max(var(--anchor-width), var(--fgd-size-overlay-max));
     }
   }
 
@@ -215,19 +214,15 @@
 
   @media (prefers-reduced-motion: no-preference) {
     .base {
-      transition-property: border-color, border-width, outline-color;
-      transition-duration: var(--ds-duration-quick);
+      transition-property: border-color;
+      transition-duration: var(--fgd-duration-quick);
       transition-timing-function: var(--ease-out-3);
     }
 
     .icon {
-      transition: rotate var(--ds-duration-quick) var(--ease-out-3);
+      transition: rotate var(--fgd-duration-quick) var(--ease-out-3);
     }
 
-    /* The clip reveal (the edge wipes open), never a fade [D91]. */
-    .popup {
-      transition: clip-path var(--ds-duration-disclosure) var(--ease-out-3);
-    }
   }
 }
 
@@ -240,16 +235,16 @@
   /*
    * Underline: no box; the trigger's text and chevron over a --border-size-2
    * --role-accent underline the width of the trigger only; it hugs its
-   * content and keeps a --ds-size-hit target.
+   * content and keeps a --fgd-size-hit target.
    */
   .underline {
-    --select-radius: var(--ds-radius-none);
+    --select-radius: var(--radius-0);
 
     display: inline-flex;
     inline-size: auto;
     max-inline-size: 100%;
     block-size: auto;
-    min-block-size: var(--ds-size-hit);
+    min-block-size: var(--fgd-size-hit);
     padding-inline: 0;
     border-width: 0 0 var(--select-underline);
     border-color: var(--role-accent);
@@ -274,7 +269,7 @@
     color: var(--role-muted);
     font-weight: max(
       var(--type-weight-floor, 400),
-      calc(var(--type-weight, 400) - var(--ds-muted-weight-step))
+      calc(var(--type-weight, 400) - var(--fgd-muted-weight-step))
     );
   }
 
@@ -282,19 +277,19 @@
    * Hover (not disabled, invalid or read-only): the boxed edge steps
    * --role-rule → --primary12 [D140]; the underline steps --role-accent →
    * --primary12 at the same --border-size-2 weight (derived), so only the
-   * open state takes --ds-stroke-3 and hover never reads as open [D181].
+   * open state takes --border-size-2-25 and hover never reads as open [D181].
    */
   .base:hover:not([data-disabled], [data-invalid], [data-readonly]) {
     border-color: var(--primary12);
   }
 
-  /* Open: the boxed edge goes to --primary12, the underline to --ds-stroke-3, the chevron turns. */
+  /* Open: the boxed edge goes to --primary12, the underline to --border-size-2-25, the chevron turns. */
   .base[data-popup-open] {
     border-color: var(--primary12);
   }
 
   .base.underline[data-popup-open] {
-    --select-underline: var(--ds-stroke-3);
+    --select-underline: var(--border-size-2-25);
 
     border-color: var(--role-accent);
   }
@@ -336,7 +331,7 @@
   }
 
   .base[data-disabled] .swatchRing {
-    stroke-dasharray: 0 var(--ds-dot-fine-pitch);
+    stroke-dasharray: 0 var(--fgd-dot-fine-pitch);
     stroke-linecap: round;
   }
 
@@ -344,7 +339,7 @@
   .base[data-readonly] {
     border-width: 0 0 var(--border-size-1);
     border-color: var(--role-rule);
-    border-radius: var(--ds-radius-none);
+    border-radius: var(--radius-0);
     background: none;
   }
 
@@ -372,15 +367,14 @@
     display: none;
   }
 
-  /* Placement: a popup above its trigger reveals from its bottom edge. */
-  .popup[data-side='top'] {
-    --select-reveal-from: inset(100% 0 0 0);
-  }
-
-  /* The clip reveal from the trigger side [D91]; instant under --motionNotOK. */
-  .popup[data-starting-style],
-  .popup[data-ending-style] {
-    clip-path: var(--select-reveal-from);
+  /*
+   * Outline morph [D204]: while the overlay draws the frame, the popup's own
+   * edge takes its face and its own transitions stay off. Without the morph
+   * the popup opens and closes at once (no reveal of its own) [D205].
+   */
+  .popup[data-outline-morph] {
+    border-color: var(--primary1);
+    transition: none;
   }
 }
 

package/forms/slider/Slider.js

@@ -13,7 +13,7 @@ import styles from './slider.module.css';
  * Implementation (CSS Modules + CVA)
  * - Module: slider.module.css; CVA function `slider`.
  * - Axes: `stepped` → `stepped` (the tick scale: minor ticks half the
- *   --ds-space-12 major ticks, with major labels); `primary`, `secondary`
+ *   --size-px-2-5 major ticks, with major labels); `primary`, `secondary`
  *   → scales module classes.
  * - Compound variants: none.
  * - Defaults: stepped false; color axes none [D133]. The range form is
@@ -23,7 +23,7 @@ import styles from './slider.module.css';
  * - States: :hover (not disabled) → thumb face --role-soft-hover-face
  *   (--primary3 where soft fills apply, unchanged where they drop), edge
  *   unchanged [D181];
- *   data-dragging → thumb edge --ds-stroke-3 and the `chip`; :focus-visible on
+ *   data-dragging → thumb edge --border-size-2-25 and the `chip`; :focus-visible on
  *   each thumb's input → ring on the thumb; data-orientation → track
  *   direction; data-disabled → dotted track and thumb edges, indicator
  *   removed, value kept.