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

package/overlays/search-dialog/SearchDialogTrigger.js

@@ -0,0 +1,32 @@
+'use client';
+import * as React from 'react';
+import { ExpandingBox, ExpandingBoxMain, expandingBoxParts, } from '../../foundations/expanding-box';
+import { Icon } from '../../foundations/icon';
+import { cx } from '../../utils/className';
+import { useScopeAttributes } from '../../utils/scope';
+import { useShortcutLabel } from './useShortcutLabel';
+import { searchDialog } from './variants';
+import styles from './search-dialog.module.css';
+/**
+ * The field-like trigger holding the collapsed, active-while-closed
+ * ExpandingBox: the magnifier, the label in --role-muted and, with
+ * `keyboardShortcut`, the ⌘K / Ctrl K hint from --lg-n-above. Mounted
+ * always, `visibility: hidden` while open.
+ */
+export function SearchDialogTrigger(props) {
+    const { ref, name, open, label, keyboardShortcut, onClick, primary, secondary, className } = props;
+    const scope = useScopeAttributes();
+    const shortcut = useShortcutLabel();
+    const hint = keyboardShortcut ? shortcut : null;
+    return (React.createElement("button", { ...scope, ref: ref, type: "button", "aria-haspopup": "dialog", "aria-expanded": open, "aria-keyshortcuts": hint?.aria, className: searchDialog({
+            primary,
+            secondary,
+            className: cx(expandingBoxParts.host, styles.trigger, className),
+        }), onClick: onClick },
+        React.createElement(ExpandingBox, { as: "span", name: name, active: !open, collapsed: true, primary: primary, secondary: secondary, className: styles.triggerBox },
+            React.createElement(ExpandingBoxMain, { className: styles.triggerMain },
+                React.createElement(Icon, { name: "search", className: styles.magnifier }),
+                React.createElement("span", { className: styles.triggerLabel }, label),
+                keyboardShortcut ? (React.createElement("kbd", { "aria-hidden": "true", className: cx(expandingBoxParts.end, styles.kbd) }, hint?.label ?? '\u00a0')) : null))));
+}
+//# sourceMappingURL=SearchDialogTrigger.js.map

package/overlays/search-dialog/SearchDialogTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchDialogTrigger.js","sourceRoot":"","sources":["../../src/overlays/search-dialog/SearchDialogTrigger.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,YAAY,EAA6B,MAAM,YAAY,CAAA;AACpE,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAsB/C;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GACxF,KAAK,CAAA;IACP,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAA;IACnC,MAAM,IAAI,GAAG,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;IAE/C,OAAO,CACL,mCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,mBACC,QAAQ,mBACP,IAAI,uBACA,IAAI,EAAE,IAAI,EAC7B,SAAS,EAAE,YAAY,CAAC;YACtB,OAAO;YACP,SAAS;YACT,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;SACjE,CAAC,EACF,OAAO,EAAE,OAAO;QAEhB,oBAAC,YAAY,IACX,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,CAAC,IAAI,EACb,SAAS,QACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,MAAM,CAAC,UAAU;YAE5B,oBAAC,gBAAgB,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW;gBAC7C,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;gBACnD,8BAAM,SAAS,EAAE,MAAM,CAAC,YAAY,IAAG,KAAK,CAAQ;gBAMnD,gBAAgB,CAAC,CAAC,CAAC,CAClB,4CAAiB,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,IACrE,IAAI,EAAE,KAAK,IAAI,QAAQ,CACpB,CACP,CAAC,CAAC,CAAC,IAAI,CACS,CACN,CACR,CACV,CAAA;AACH,CAAC"}

package/overlays/search-dialog/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SearchDialog';
+export { searchDialog, searchDialogTypeIcons } from './variants';
+//# sourceMappingURL=index.d.ts.map

package/overlays/search-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlays/search-dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA"}

package/overlays/search-dialog/index.js

@@ -0,0 +1,3 @@
+export * from './SearchDialog';
+export { searchDialog, searchDialogTypeIcons } from './variants';
+//# sourceMappingURL=index.js.map

package/overlays/search-dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlays/search-dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA"}

package/overlays/search-dialog/search-dialog.module.css

@@ -0,0 +1,492 @@
+/*
+ * Search dialog (§9.10 [D194]). CVA function `searchDialog` in
+ * SearchDialog.tsx, on the trigger and on the popup. Parts: base, trigger,
+ * triggerBox, triggerMain, magnifier, triggerLabel, kbd, backdrop,
+ * viewport, popup, box, inputRow, input, esc, escKey, closeIcon, results,
+ * scroll, list, group, groupLabel, item, itemHead, itemIcon, itemTitle,
+ * match, sectionTitle, score, description, empty, stats, statsText,
+ * visuallyHidden.
+ *
+ * The frame is the expanding box's: one radius (--xb-radius) and one
+ * --border-size-2 edge in both states, --role-rule on the trigger and
+ * --primary12 on the dialog. Below --md-n-above the dialog is the sheet:
+ * the same panel inset by the page margin and the safe areas; the face
+ * is --primary1. Rows, group labels, statuses and matches compose
+ * forms/search's parts; the dialog only adds its layout (full-bleed rows
+ * of two lines, sticky group labels). The backdrop is colorless: the frame,
+ * the inert page and the sheet carry the modal state [D24 → D121]. Motion
+ * is the morph, or none: without it the dialog opens and closes at once,
+ * never a fade [D91, D204].
+ * No view-transition name or class is written here: the box sets them per
+ * instance. Colors are role variables only; local custom properties carry
+ * dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.trigger {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.triggerLabel {
+  composes: typeBodyUi typeMuted from '../../utils/type.module.css';
+}
+
+.kbd,
+.escKey {
+  composes: typeData typeMuted from '../../utils/type.module.css';
+}
+
+.input {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.groupLabel {
+  composes: groupLabel from '../../forms/search/search.module.css';
+}
+
+.item {
+  composes: item from '../../forms/search/search.module.css';
+}
+
+.itemIcon {
+  composes: itemIcon from '../../forms/search/search.module.css';
+}
+
+.match {
+  composes: match from '../../forms/search/search.module.css';
+}
+
+.sectionTitle,
+.description {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.score {
+  composes: typeData typeMuted from '../../utils/type.module.css';
+}
+
+.empty,
+.stats {
+  composes: status from '../../forms/search/search.module.css';
+}
+
+.statsText {
+  composes: typeMuted from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* Both roots: nothing of their own beyond the scale classes. */
+  .base {
+    box-sizing: border-box;
+  }
+
+  /*
+   * The field-like trigger: --fgd-size-control-md tall, its hit area
+   * extended to --fgd-size-hit; the width of the site search field. The
+   * box draws its frame, hover edge step and focus ring (the host hands
+   * them over).
+   */
+  .trigger {
+    justify-content: center;
+    inline-size: min(100%, var(--size-px-14));
+    min-block-size: var(--fgd-size-control-md);
+    margin: 0;
+    color: var(--primary12);
+    text-align: start;
+    appearance: none;
+  }
+
+  .trigger::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block: calc((var(--fgd-size-control-md) - var(--fgd-size-hit)) / 2);
+  }
+
+  .triggerBox {
+    justify-content: center;
+    padding-inline: var(--size-px-3);
+  }
+
+  /*
+   * The main piece: as tall as the trigger's content (inside the box's
+   * edge), so it rides into the input row at nearly one scale.
+   */
+  .triggerMain {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-block-size: calc(var(--fgd-size-control-md) - 2 * var(--xb-edge));
+  }
+
+  /* The magnifier: Material Symbols Rounded `search`, inline tier, decorative, --primary12 [D166]. */
+  .magnifier {
+    flex: none;
+    color: var(--primary12);
+  }
+
+  /*
+   * The label reserves --size-px-9 (64 px), more than "Search" takes in
+   * the UI face or its fallbacks, so where the trigger sizes to its content
+   * (the Navigation Bar's search slot) the web font arriving never changes
+   * its width and nothing beside it moves [D201, D203].
+   */
+  .triggerLabel {
+    flex: 1 1 auto;
+    min-inline-size: var(--size-px-9);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* The shortcut hint: a mono key cap on the field rule, from --lg-n-above; it rides the right edge. */
+  /*
+   * The hint: mono, so 6ch holds "Ctrl K" exactly; "⌘K" centers in the
+   * same box. The box is painted before the label is known, so the trigger
+   * keeps one width from the first paint [D201].
+   */
+  .kbd {
+    display: none;
+    flex: none;
+    box-sizing: content-box;
+    min-inline-size: 6ch;
+    padding-inline: var(--size-px-1);
+    text-align: center;
+    border: var(--border-size-1) solid var(--role-rule);
+    border-radius: var(--radius-1);
+    white-space: nowrap;
+  }
+
+  @media (min-width: 1024px) {
+    .kbd {
+      display: inline-block;
+    }
+  }
+
+  /* Colorless: it only catches outside presses. */
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--layer-4);
+  }
+
+  /* iOS Safari: a fixed backdrop leaves the bottom toolbar area uncovered. */
+  @supports (-webkit-touch-callout: none) {
+    .backdrop {
+      position: absolute;
+    }
+  }
+
+  /*
+   * The popup's frame of reference. At base, the whole screen less the page
+   * margin on every side, plus the safe areas; from --md-n-above,
+   * top-aligned.
+   */
+  .viewport {
+    position: fixed;
+    inset: 0;
+    z-index: var(--layer-4);
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    box-sizing: border-box;
+    padding: calc(var(--fgd-space-margin) + env(safe-area-inset-top, 0px))
+      calc(var(--fgd-space-margin) + env(safe-area-inset-right, 0px))
+      calc(var(--fgd-space-margin) + env(safe-area-inset-bottom, 0px))
+      calc(var(--fgd-space-margin) + env(safe-area-inset-left, 0px));
+    overflow: hidden;
+  }
+
+  @media (min-width: 768px) {
+    .viewport {
+      align-items: flex-start;
+      padding-block: var(--size-px-5);
+      padding-inline: 0;
+    }
+  }
+
+  /*
+   * The popup hosts the expanded box. At base, the sheet: the inset panel,
+   * filling the viewport inside its padding and scrolling inside; from
+   * --md-n-above, the centered panel in the Dialog `wide` width, as tall as
+   * its results (it scrolls inside).
+   */
+  .popup {
+    inline-size: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    margin: 0;
+    color: var(--primary12);
+    outline: 0;
+  }
+
+  @media (min-width: 768px) {
+    .popup {
+      inline-size: min(var(--fgd-measure-reading), calc(100% - 2 * var(--size-px-7-5)));
+      block-size: auto;
+    }
+  }
+
+  /*
+   * The expanded box's content: the input row, the results, the stats row.
+   * The box insets it by its frame's edge.
+   */
+  .box {
+    min-block-size: 0;
+  }
+
+  /* The input row: the dialog's main piece; the ring shows round it on any focus of the input [D90]. */
+  .inputRow {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    min-block-size: var(--fgd-size-hit);
+    margin: var(--size-px-2);
+    padding-inline: var(--size-px-2-5) var(--size-px-2);
+    border-radius: var(--radius-1);
+    cursor: text;
+  }
+
+  .input {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--primary12);
+    outline: 0;
+    appearance: none;
+  }
+
+  .input::placeholder {
+    color: var(--role-muted);
+    opacity: 1;
+  }
+
+  /* "esc": a key cap that closes, from --lg-n-above with the shortcut; it rides the right edge. */
+  .esc {
+    display: none;
+    position: relative;
+    flex: none;
+    align-items: center;
+    box-sizing: border-box;
+    margin: 0;
+    padding: var(--size-px-1) var(--size-px-2);
+    border: var(--border-size-1) solid var(--role-rule);
+    border-radius: var(--radius-1);
+    background: none;
+    font: inherit;
+    cursor: default;
+  }
+
+  /* Every target reaches --fgd-size-hit (§9.1) [D43]. */
+  .esc::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
+    min-inline-size: 100%;
+    min-block-size: 100%;
+    translate: -50% -50%;
+  }
+
+  @media (min-width: 1024px) {
+    .esc {
+      display: inline-flex;
+    }
+  }
+
+  /* "Close search": an icon-only Button (its hit area reaches --fgd-size-hit); it rides the right edge. */
+  .closeIcon {
+    flex: none;
+  }
+
+  /* The results: the extra piece, under a --border-size-1 rule, full bleed; the list scrolls inside. */
+  .results {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .scroll {
+    flex: 1 1 auto;
+    min-block-size: 0;
+  }
+
+  /* The keyboard highlight scrolls clear of the sticky group label. */
+  .scroll > :first-child {
+    scroll-padding-block: var(--size-px-7-5) var(--size-px-1);
+  }
+
+  .list {
+    padding: var(--size-px-1);
+    outline: 0;
+  }
+
+  .list:empty {
+    padding: 0;
+  }
+
+  .group {
+    display: block;
+  }
+
+  /* Group labels stick to the top while their rows scroll under them: the face, and a rule underneath. */
+  .list .groupLabel {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+    margin: 0;
+    background-color: var(--primary1);
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /* Rows: a link of two lines (title row, then a page's description). */
+  .list .item {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    gap: var(--size-px-1);
+    padding-block: var(--size-px-2);
+  }
+
+  .itemHead {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  .itemTitle {
+    min-inline-size: 0;
+    color: var(--primary12);
+    overflow-wrap: anywhere;
+  }
+
+  .sectionTitle {
+    text-transform: capitalize;
+  }
+
+  .score {
+    margin-inline-start: auto;
+  }
+
+  /* "No results for '[query]'": a plain-word status, never a red error (P10). */
+  .scroll .empty:not(:empty) {
+    padding: var(--size-px-5) var(--size-px-3);
+    text-align: center;
+  }
+
+  /* The stats row: under a rule, end-aligned; hidden (its height kept) while there are no stats. */
+  .box .stats:not(:empty) {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--size-px-1) var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .esc {
+      transition: border-color var(--fgd-duration-quick) var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * One visible close at every width, riding the right edge: the "Close
+   * search" button (the sheet, the panel below --lg-n-above, and the panel
+   * without the shortcut), or from --lg-n-above with the shortcut the esc
+   * key cap in its place.
+   */
+  @media (min-width: 1024px) {
+    .esc ~ .closeIcon {
+      display: none;
+    }
+  }
+}
+
+@layer states {
+  /* While the dialog is open the trigger keeps its place, hidden; its box keeps its names valid. */
+  .trigger[aria-expanded='true'] {
+    visibility: hidden;
+  }
+
+  .inputRow:has(.input:focus) {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: 0;
+  }
+
+  /*
+   * While the expanding box opens, the input row's ring waits and appears
+   * in place as the box lands [D196, D205]. The row is the box's main
+   * piece, whose image keeps its proportions and hugs the left edge, so
+   * while the box is narrower the image runs past its right edge: a ring
+   * drawn on it would travel in from the side, outside the frame.
+   */
+  :global(:root[data-fgd-expanding]) .inputRow:has(.input:focus) {
+    outline-style: none;
+  }
+
+  .esc:hover:not(:focus-visible) {
+    border-color: var(--primary12);
+  }
+
+  .esc:focus-visible {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: var(--fgd-focus-offset);
+  }
+
+  /* Focus parked on the popup itself: the ring sits inside the frame, on the box's radius (the host publishes --xb-radius). */
+  .popup:focus-visible {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: calc(-2 * var(--fgd-focus-width));
+    border-radius: var(--xb-radius);
+  }
+
+  /*
+   * The morph owns the motion while it runs; without it the dialog opens and
+   * closes at once (no reveal of its own) [D204]. The closing popup hides at
+   * once, since the root snapshot does not crossfade.
+   */
+  :root[data-fgd-expanding] .popup[data-closed],
+  :root[data-fgd-expanding] .popup[data-ending-style] {
+    visibility: hidden;
+  }
+
+  .statsText[data-hidden] {
+    visibility: hidden;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Interaction only: neither the trigger nor the dialog prints. */
+    .trigger,
+    .backdrop,
+    .viewport {
+      display: none;
+    }
+  }
+}

package/overlays/search-dialog/useShortcutLabel.d.ts

@@ -0,0 +1,13 @@
+/** The hint's visible text and its `aria-keyshortcuts` value. */
+export type ShortcutLabel = {
+    /** "⌘K" on Apple platforms, "Ctrl K" elsewhere. */
+    label: string;
+    /** "Meta+K" or "Control+K". */
+    aria: string;
+};
+/**
+ * The ⌘K / Ctrl K hint. `null` on the server and during hydration, so the
+ * server markup never names the wrong platform; the client fills it in.
+ */
+export declare function useShortcutLabel(): ShortcutLabel | null;
+//# sourceMappingURL=useShortcutLabel.d.ts.map

package/overlays/search-dialog/useShortcutLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShortcutLabel.d.ts","sourceRoot":"","sources":["../../src/overlays/search-dialog/useShortcutLabel.ts"],"names":[],"mappings":"AASA,iEAAiE;AACjE,MAAM,MAAM,aAAa,GAAG;IAC1B,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAgBD;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,GAAG,IAAI,CAMvD"}

package/overlays/search-dialog/useShortcutLabel.js

@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+const apple = { label: '⌘K', aria: 'Meta+K' };
+const other = { label: 'Ctrl K', aria: 'Control+K' };
+function isApplePlatform() {
+    const nav = navigator;
+    const platform = nav.userAgentData?.platform || nav.platform || nav.userAgent;
+    return /mac|iphone|ipad|ipod/i.test(platform);
+}
+// The platform never changes while the page is open.
+const subscribe = () => () => { };
+/**
+ * The ⌘K / Ctrl K hint. `null` on the server and during hydration, so the
+ * server markup never names the wrong platform; the client fills it in.
+ */
+export function useShortcutLabel() {
+    return React.useSyncExternalStore(subscribe, () => (isApplePlatform() ? apple : other), () => null);
+}
+//# sourceMappingURL=useShortcutLabel.js.map

package/overlays/search-dialog/useShortcutLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShortcutLabel.js","sourceRoot":"","sources":["../../src/overlays/search-dialog/useShortcutLabel.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,MAAM,KAAK,GAAkB,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;AAC5D,MAAM,KAAK,GAAkB,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,CAAA;AAInE,SAAS,eAAe;IACtB,MAAM,GAAG,GAAG,SAAgC,CAAA;IAC5C,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAa,EAAE,QAAQ,IAAI,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,SAAS,CAAA;IAC7E,OAAO,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;AAC/C,CAAC;AAED,qDAAqD;AACrD,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAA;AAEhC;;;GAGG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,KAAK,CAAC,oBAAoB,CAC/B,SAAS,EACT,GAAG,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,EACzC,GAAG,EAAE,CAAC,IAAI,CACX,CAAA;AACH,CAAC"}

package/overlays/search-dialog/variants.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * On both roots: the trigger (the page scope) and the popup (the overlay
+ * scope). Axes: `primary`, `secondary` → scales module classes, never
+ * defaulted [D133].
+ */
+export declare const searchDialog: (props?: ({
+    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;
+/** The color axes of `searchDialog`. */
+export type SearchDialogVariants = VariantProps<typeof searchDialog>;
+/**
+ * Row icons by the engine's result `type`: page `description`, part
+ * `widgets`, export `deployed_code`, section `format_h2`, subsection
+ * `format_h3`.
+ */
+export declare const searchDialogTypeIcons: {
+    readonly page: "description";
+    readonly part: "widgets";
+    readonly export: "deployed_code";
+    readonly section: "format_h2";
+    readonly subsection: "format_h3";
+};
+//# sourceMappingURL=variants.d.ts.map

package/overlays/search-dialog/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../src/overlays/search-dialog/variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAYjE;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;8EAKvB,CAAA;AAEF,wCAAwC;AACxC,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAEpE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB;;;;;;CAMmC,CAAA"}

package/overlays/search-dialog/variants.js

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import styles from './search-dialog.module.css';
+/*
+ * The search dialog's shared pieces: the CVA function and the row icons.
+ * A plain module (not a client one), so a server component reads them too.
+ */
+/**
+ * On both roots: the trigger (the page scope) and the popup (the overlay
+ * scope). Axes: `primary`, `secondary` → scales module classes, never
+ * defaulted [D133].
+ */
+export const searchDialog = cva(styles.base, {
+    variants: {
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * Row icons by the engine's result `type`: page `description`, part
+ * `widgets`, export `deployed_code`, section `format_h2`, subsection
+ * `format_h3`.
+ */
+export const searchDialogTypeIcons = {
+    page: 'description',
+    part: 'widgets',
+    export: 'deployed_code',
+    section: 'format_h2',
+    subsection: 'format_h3',
+};
+//# sourceMappingURL=variants.js.map

package/overlays/search-dialog/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.js","sourceRoot":"","sources":["../../src/overlays/search-dialog/variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAE/C;;;GAGG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAC3C,QAAQ,EAAE;QACR,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAA;AAKF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,eAAe;IACvB,OAAO,EAAE,WAAW;IACpB,UAAU,EAAE,WAAW;CAC4C,CAAA"}

package/overlays/tooltip/Tooltip.d.ts

@@ -11,13 +11,13 @@ export declare const tooltipTrigger: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TooltipVariants = VariantProps<typeof tooltip>;
 export type TooltipTriggerKind = NonNullable<VariantProps<typeof tooltipTrigger>['kind']>;
-/** The open delay, mirroring `--ds-delay-tooltip` (500 ms, §1.5.15) [D175]. */
+/** The open delay, mirroring `--fgd-delay-tooltip` (500 ms, §1.5.15) [D175]. */
 export { TOOLTIP_DELAY_MS };
 /** Props for TooltipProvider: Base UI Tooltip Provider props. */
 export type TooltipProviderProps = BaseTooltip.Provider.Props;
 /**
  * Shares the open delay across a group of triggers, such as a toolbar: the
- * first tooltip opens after `--ds-delay-tooltip` (500 ms), its neighbors
+ * first tooltip opens after `--fgd-delay-tooltip` (500 ms), its neighbors
  * open at once while one is showing.
  */
 export declare function TooltipProvider({ delay, ...rest }: TooltipProviderProps): React.JSX.Element;
@@ -63,7 +63,7 @@ export type TooltipPopupProps = BaseTooltip.Popup.Props & Pick<BaseTooltip.Posit
 };
 /**
  * The popup: one short line of `type-caption` (three at most), at most
- * `--ds-size-tooltip` (280 px) wide, on the overlay scope's `--primary1` face inside a
+ * `--fgd-size-tooltip` (280 px) wide, on the overlay scope's `--primary1` face inside a
  * `--border-size-2` `--primary12` frame with `--radius-1`. It sits
  * `--size-px-2` from the trigger (`side`, default `top`) and flips or shifts
  * to stay inside the viewport.