@helloimjolopez-pathway/pathway-components 0.0.0-stage → 0.1.0

package/components/search/search.jsx

@@ -0,0 +1,689 @@
+/**
+ * Search, Pathway Design System (v1, search bar only)
+ *
+ * Two named exports:
+ *   SearchInput: the base pill-shaped search bar
+ *   TopNavSearch: the nav bar wrapper (collapsed icon button + spring-expand bar)
+ *
+ * Spec:   components/search/search-spec.md
+ * Figma:  https://www.figma.com/design/3sw45aVcngFAmpbP6cfrXP/?node-id=40007095-4048
+ *          TopNav.Search, a COMPONENT_SET: Platform=Desktop x
+ *          State=Collapsed|Expanded|Open. The id cited here until 2026-10-07,
+ *          40006978-23158, reads as a 2594x1680 FRAME named "Frame 633379":
+ *          a layout frame, not a component. A genuinely different general
+ *          search field exists at 40006978-23446, which this repo does NOT
+ *          implement.
+ *
+ * v1 scope: search bar + TopNavSearch collapsed/expanded states only.
+ * The Open state (results dropdown) is deferred, see spec §17.
+ *
+ * Figma nodes read before this file was generated:
+ *   SearchInput (all states):  40006978-23158
+ *   FilterSelected state:      40007351-13533
+ *   TopNavSearch:              40007095-4048
+ *
+ * Icon ligature names confirmed from Figma data-name attributes:
+ *   search, cancel, filter_alt
+ */
+
+import React, { useState, useEffect, useRef } from "react";
+import { Icon } from "../icon/icon.jsx";
+
+// ─── DESIGN TOKENS ─────────────────────────────────────────────────────────────
+// Every value is a semantic CSS variable. Fallbacks are the resolved values from
+// the token contract, used only when Storybook has not loaded it yet.
+export const T = {
+  // THIS IS THE GLOBAL SEARCH, AND IT IS A TOP NAV COMPONENT.
+  //
+  // There is no separate "generic search field" in this system. The field below
+  // and the control in the nav are one component with one set of tokens and one
+  // behaviour; the field is simply the part of it that is visible once it is
+  // expanded. It is scoped to the top nav because that is the only place it
+  // appears today. Treating it as a general-purpose search is what produced a
+  // Storybook page showing a mix of half-finished field variants out of
+  // context. Reported 2026-10-02.
+  //
+  // The FIELD's own values come from Figma node 40007095:4048:
+  //   State=Expanded  fill #ffffff, stroke #f9f7f5
+  //   State=Open      fill #ffffff, stroke #4b6ec3, plus the results menu
+  // White in both modes on purpose: the bar it sits on is the brand chrome in
+  // both modes, so the field does not invert with the theme. It was
+  // Fill/Static/Neutral/Faint with Action/Primary/Strong borders, a light-page
+  // field dropped onto brand chrome.
+  barBg:           "var(--semantic-color-fill-static-neutral-mono)",
+  filterActiveFill:"var(--semantic-color-fill-action-primary-subtle-rest)",
+  // Icon pill hover/pressed: no semantic token resolves to the correct subtle overlay
+  // on a white surface. fill.action.secondary.hover = warm-neutral-200 (#f7f5f3)
+  // which creates a visible warm cream box, wrong. Using direct rgba values as a
+  // token gap (see search-spec.md §17).
+  iconPillHover:   "var(--semantic-color-fill-action-secondary-hover)",
+  iconPillPressed: "var(--semantic-color-fill-action-secondary-pressed)",
+  badgeFill:       "var(--semantic-color-fill-action-primary-strong-rest)",
+  disabledBg:      "var(--primitive-color-cool-neutral-10)",      // token gap §17
+
+  // Bar borders
+  borderIdle:     "var(--semantic-color-stroke-static-neutral-faint)",      // #f9f7f5, State=Expanded
+  borderHover:    "var(--semantic-color-stroke-action-primary-strong-hover)",
+  borderActive:   "var(--semantic-color-stroke-action-primary-strong-pressed)", // #4b6ec3, State=Open
+  borderError:    "var(--semantic-color-stroke-action-status-negative-rest)",
+  borderDisabled: "var(--primitive-color-cool-neutral-25)",       // token gap §17
+  divider:        "var(--semantic-color-stroke-action-secondary-rest)",
+
+  // Text
+  textPlaceholder:"var(--semantic-color-foreground-static-neutral-base)",
+  textValue:      "var(--semantic-color-foreground-static-neutral-bold)",
+
+  // Icons
+  iconIdle:    "var(--semantic-color-foreground-action-secondary-rest)",
+  iconHover:   "var(--semantic-color-foreground-action-secondary-hover)",
+  iconDisabled:"var(--semantic-color-foreground-action-disabled)",
+  iconError:   "var(--semantic-color-foreground-action-status-negative-on-subtle-rest)",
+
+  // TOPNAV.SEARCH: its own control, not a generic field on a nav.
+  //
+  // It sits on the brand bar, so every part of the collapsed state is
+  // Action/Ghost. Measured against Figma node 40007095:4048, Platform=Desktop:
+  //   State=Collapsed  Container.Icon  fill #b6c6ec @8%, stroke #b6c6ec @36%
+  //   State=Expanded   field           fill #ffffff, stroke #f9f7f5
+  //   State=Open       field           fill #ffffff, stroke #4b6ec3, + results menu
+  //
+  // This was Action/Primary/Subtle for the fill, Action/Primary/Strong for the
+  // border and Foreground/Static/Neutral/MONO for the glyph. Mono is an
+  // inversion anchor (#ffffff Light, #181b2b Midnight), so the magnifier went
+  // near-black on the navy bar in Midnight. Reported 2026-10-02.
+  navIconFill:          "var(--semantic-color-foreground-action-ghost-rest)",
+  navIconHover:         "var(--semantic-color-foreground-action-ghost-hover)",
+  collapsedBtnFill:     "var(--semantic-color-fill-action-ghost-rest)",
+  collapsedBtnHover:    "var(--semantic-color-fill-action-ghost-hover)",
+  collapsedBtnPressed:  "var(--semantic-color-fill-action-ghost-pressed)",
+  collapsedBtnBorder:   "var(--semantic-color-stroke-action-ghost-rest)",
+  collapsedBtnBorderHov:"var(--semantic-color-stroke-action-ghost-hover)",
+  // Expanded field. White in both modes on purpose: the bar it sits on is the
+  // brand chrome in both modes, so the field does not invert with the theme.
+  navFieldFill:         "var(--semantic-color-fill-static-neutral-mono)",
+  navFieldBorder:       "var(--semantic-color-stroke-static-neutral-faint)",
+  navFieldBorderOpen:   "var(--semantic-color-stroke-action-primary-strong-pressed)",
+  // Results menu under the expanded field: an elevated popover, so it DOES
+  // invert with the theme.
+  navMenuFill:          "var(--semantic-color-fill-surface-elevated)",
+  navMenuBorder:        "var(--semantic-color-stroke-static-neutral-faint)",
+  badgeBorderColor:   "var(--semantic-color-fill-static-neutral-faint)",
+};
+
+// ─── LAYOUT VALUES ─────────────────────────────────────────────────────────────
+export const L = {
+  touchTarget:    48,
+  // The expanded bar's exit control. AA touch target rather than the nav's own
+  // 48, because it sits inside the bar's own run and 48 would crowd the field.
+  exitTarget:     "var(--semantic-layout-units-accessibility-touch-target-aa-width)",
+  exitGlyph:      20,
+  pillHeight:     36,
+  barRadius:      64,   // cornerradius.full
+  iconBtnRadius:  12,   // cornerradius.focused-element
+  iconBtnSize:    24,
+  iconSize:       16,
+  // 16, not 20. Figma TopNav.Search Container.Icon is a 32x32 box holding a
+  // 16x16 search instance, read off the leaf on 2026-10-02.
+  iconSizeCollapsed: 16,
+  barPadH:        8,    // layout.units.padding.xtight
+  barGap:         8,    // layout.units.gap.xtight
+  iconPillPad:    4,    // layout.units.padding.xxtight
+  dividerPad:     4,    // layout.units.padding.xxtight
+  badgeSize:      6,
+  expandedWidth:  320,  // SearchInput width inside TopNavSearch
+  containerPad:   4,    // TopNavSearch container padding
+};
+
+// ─── TYPOGRAPHY ────────────────────────────────────────────────────────────────
+const TYPE_INPUT = {
+  fontFamily: "'Red Hat Text', sans-serif",
+  fontSize: "var(--semantic-type-font-size-s)",
+  fontWeight:  400,
+  lineHeight: "var(--semantic-type-line-height-s-single)",
+  letterSpacing: "var(--semantic-type-letter-spacing-spacious)",
+  WebkitFontSmoothing: "antialiased",
+  MozOsxFontSmoothing: "grayscale",
+};
+
+// ─── ICON HELPER ───────────────────────────────────────────────────────────────
+// Material Symbols Rounded. Ligature name read from Figma data-name attribute.
+// Font loaded by Storybook preview-head.html and by the standalone HTML demo.
+/* Icon is imported, not redeclared. The copy that used to live here baked in
+   FILL=1, which is correct for this component and WRONG as a default: FILL is
+   read from Figma per component and the TopNav search bar happens to use the
+   filled variant. Every call site here passes fill={1} so the axis is visible
+   at the point of use rather than hidden in a local helper. */
+
+// ─── ICON PILL BUTTON ──────────────────────────────────────────────────────────
+// 24×24px button with 64px-radius icon pill inside. Hover/pressed via state.
+function IconPillButton({ iconName, iconSize = L.iconSize, iconColor, label, onClick, style }) {
+  const [hov, setHov] = useState(false);
+  const [pressed, setPressed] = useState(false);
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      onClick={onClick}
+      onMouseEnter={() => setHov(true)}
+      onMouseLeave={() => { setHov(false); setPressed(false); }}
+      onMouseDown={() => setPressed(true)}
+      onMouseUp={() => setPressed(false)}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: L.iconBtnSize,
+        height: L.iconBtnSize,
+        borderRadius: L.iconBtnRadius,
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        padding: 0,
+        flexShrink: 0,
+        ...style,
+      }}
+    >
+      {/* Icon pill */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height: "100%",
+          borderRadius: L.barRadius,
+          padding: L.iconPillPad,
+          background: pressed ? T.iconPillPressed : hov ? T.iconPillHover : "transparent",
+          transition: "background var(--motion-duration-2) var(--motion-easing-standard)",
+        }}
+      >
+        <Icon name={iconName} size={iconSize} color={iconColor} fill={1} />
+      </div>
+    </button>
+  );
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+//   SEARCH INPUT
+// ═══════════════════════════════════════════════════════════════════════════════
+/**
+ * SearchInput: the base pill-shaped search bar.
+ *
+ * Props:
+ *   value, controlled string value
+ *   placeholder, placeholder text (default "Search...")
+ *   showFilter, renders the trailing filter button + divider
+ *   filterActive, filter-active visual state (active border, highlighted funnel)
+ *   filterBadge, shows the dot badge on the funnel icon
+ *   disabled, disabled state (38% opacity, non-interactive)
+ *   error: error visual state
+ *   onSearch, (value) => void, fired on Enter or search icon click
+ *   onFilterClick, () => void, fired on filter button click
+ *   onChange, (value) => void, fired on every keystroke
+ *   onClear, () => void, fired when clear button clicked
+ *   className, additional class on root element
+ *   id: for label association
+ *   searchIconAriaLabel, override the leading search icon button label
+ *   onSearchIconClick: when provided, REPLACES the default onSearch behaviour of the
+ *                         leading search icon button.
+ *                         DEPRECATED for the expand/collapse job: the expanded bar and
+ *                         TopNav's takeover both exit via a back arrow placed OUTSIDE
+ *                         the field, to the left, so the leading glyph is never a second
+ *                         exit sitting beside the trailing clear ✕. Still available for
+ *                         a genuinely different leading action.
+ */
+export function SearchInput({
+  value = "",
+  placeholder = "Search...",
+  showFilter = false,
+  filterActive = false,
+  filterBadge = false,
+  disabled = false,
+  error = false,
+  onSearch,
+  onFilterClick,
+  onChange,
+  onClear,
+  className = "",
+  id,
+  searchIconAriaLabel = "Search",
+  onSearchIconClick,                 // when set, overrides the icon button's onClick
+  inputRef: externalInputRef,        // optional external ref (TopNav.Search uses this to focus on expand)
+}) {
+  const [hovered, setHovered]   = useState(false);
+  const [focused, setFocused]   = useState(false);
+  const internalInputRef        = useRef(null);
+  const inputRef                = externalInputRef || internalInputRef;
+
+  // Derived state
+  const hasValue   = value.length > 0;
+  const isDisabled = disabled;
+  const isError    = error && !disabled;
+
+  // Bar border resolution per spec §6 state matrix
+  const getBorderStyle = () => {
+    if (isDisabled) return { border: `1px solid ${T.borderDisabled}` };
+    if (isError)    return { border: `1px solid ${T.borderError}` };
+    if (filterActive || focused || hasValue)
+      return { border: `1px solid ${T.borderActive}` };
+    if (hovered)    return { border: `1px solid ${T.borderHover}` };
+    return { border: `0.75px solid ${T.borderIdle}` };
+  };
+
+  // Icon colour resolution
+  const iconColor = (() => {
+    if (isDisabled) return T.iconDisabled;
+    if (isError)    return T.iconError;
+    if (hovered || focused) return T.iconHover;
+    return T.iconIdle;
+  })();
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") onSearch?.(value);
+  };
+
+  const handleClear = () => {
+    onClear?.();
+    inputRef.current?.focus();
+  };
+
+  return (
+    // Touch target, 48px, full width (or 320px when inside TopNavSearch)
+    <div
+      className={className}
+      style={{
+        boxSizing: "border-box",
+        minHeight: L.touchTarget,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        width: "100%",
+        opacity: isDisabled ? 0.38 : 1,
+        pointerEvents: isDisabled ? "none" : "auto",
+      }}
+      onMouseEnter={() => !isDisabled && setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {/* Pill, Container.Main */}
+      <div
+        role="search"
+        aria-label="Search"
+        style={{
+          boxSizing: "border-box",
+          display: "flex",
+          alignItems: "center",
+          gap: L.barGap,
+          minHeight: L.pillHeight,
+          borderRadius: L.barRadius,
+          background: isDisabled ? T.disabledBg : T.barBg,
+          overflow: "hidden",
+          paddingLeft: L.barPadH,
+          paddingRight: L.barPadH,
+          transition: "border-color var(--motion-duration-2) var(--motion-easing-standard), background var(--motion-duration-2) var(--motion-easing-standard)",
+          ...getBorderStyle(),
+        }}
+      >
+        {/* Leading icon, search button */}
+        <div style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
+          <IconPillButton
+            iconName="search"
+            iconColor={iconColor}
+            label={searchIconAriaLabel}
+            onClick={onSearchIconClick ? onSearchIconClick : () => onSearch?.(value)}
+          />
+        </div>
+
+        {/* Text input */}
+        <input
+          ref={inputRef}
+          id={id}
+          type="text"
+          role="searchbox"
+          value={value}
+          placeholder={placeholder}
+          disabled={isDisabled}
+          autoComplete="off"
+          aria-label="Search"
+          onChange={(e) => onChange?.(e.target.value)}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          onKeyDown={handleKeyDown}
+          style={{
+            ...TYPE_INPUT,
+            flex: 1,
+            minWidth: 0,
+            background: "transparent",
+            border: "none",
+            outline: "none",
+            color: hasValue ? T.textValue : T.textPlaceholder,
+          }}
+        />
+
+        {/* Trailing slot, cancel button (conditional) */}
+        {hasValue && (
+          <IconPillButton
+            iconName="cancel"
+            iconColor={iconColor}
+            label="Clear search"
+            onClick={handleClear}
+          />
+        )}
+
+        {/* Trailing slot, filter wrap + badge (conditional) */}
+        {showFilter && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              flexShrink: 0,
+              borderLeft: `0.75px solid ${T.divider}`,
+              paddingLeft: L.dividerPad,
+              position: "relative",
+            }}
+          >
+            {/* Filter pill, highlighted when filterActive */}
+            <div style={{ position: "relative" }}>
+              <button
+                type="button"
+                aria-label={filterActive ? "Open filters (filters active)" : "Open filters"}
+                onClick={onFilterClick}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: L.iconBtnSize,
+                  height: L.iconBtnSize,
+                  borderRadius: L.iconBtnRadius,
+                  background: filterActive ? T.filterActiveFill : "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: 0,
+                  flexShrink: 0,
+                  transition: "background var(--motion-duration-2) var(--motion-easing-standard)",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "100%",
+                    height: "100%",
+                    borderRadius: L.barRadius,
+                    padding: L.iconPillPad,
+                  }}
+                >
+                  <Icon name="filter_alt" size={L.iconSize} color={iconColor} fill={1} />
+                </div>
+              </button>
+
+              {/* Badge dot */}
+              {filterBadge && (
+                <span
+                  aria-hidden="true"
+                  style={{
+                    position: "absolute",
+                    top: 1,
+                    right: 1,
+                    width: L.badgeSize,
+                    height: L.badgeSize,
+                    borderRadius: "50%",
+                    background: T.badgeFill,
+                    border: `1.5px solid ${T.badgeBorderColor}`,
+                    display: "block",
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+//   TOP NAV SEARCH
+// ═══════════════════════════════════════════════════════════════════════════════
+/**
+ * TopNavSearch: the nested search control for TopNav.Global.
+ *
+ * Canonical display name: **TopNav.Search** (exposed as `TopNav.Search` compound
+ * member in top-nav.jsx; the bare identifier here is `TopNavSearch` because JS
+ * identifiers can't contain a dot: same convention as TopNav.Global).
+ *
+ * Sits on the dark brand-blue nav surface. The COLLAPSED icon button resolves
+ * through the DARK-MODE token set (inverse fill + mono icon). The EXPANDED bar is
+ * the standard white SearchInput (light-mode), exactly as Figma node 40007095-4048
+ * shows. Tapping the search icon inside the expanded bar collapses it; the typed
+ * query PERSISTS across collapse/expand (never cleared on collapse).
+ *
+ * Works controlled OR uncontrolled:
+ *   - Controlled expand:  pass `expanded` + `onExpandChange`.
+ *   - Uncontrolled (default): manages its own expanded state, just drop it in.
+ *   - Controlled value:   pass `searchProps.value` + `searchProps.onChange`.
+ *   - Uncontrolled value (default): manages its own query string internally so it
+ *     persists across collapse/expand without the parent wiring any state.
+ *
+ * Props:
+ *   expanded, (optional) controlled expanded state
+ *   onExpandChange, (optional) (expanded: boolean) => void
+ *   searchProps: all SearchInput props forwarded (value, onChange, showFilter,
+ *                    filterActive, filterBadge, onFilterClick, onSearch, ...)
+ *   onSearchOpen, (optional) fired when the bar expands (analytics / focus hook)
+ *   className, additional class on root element
+ */
+// One-time keyframe for the expanded bar's leftward slide-in (self-contained).
+if (typeof document !== "undefined" && !document.getElementById("pds-topnavsearch-anim")) {
+  const s = document.createElement("style");
+  s.id = "pds-topnavsearch-anim";
+    // THE BAR EXPANDS FROM THE CONTROL IT REPLACES. This was
+  // `translateX(16px)` plus a fade, which is a nudge: the takeover appeared
+  // full-width and then shuffled 16px sideways, so nothing ever looked like it
+  // grew out of the search icon. Reported 2026-10-02.
+  //
+  // clip-path reveals the bar leftward from the right-hand edge, where the
+  // collapsed control sits, so the field is uncovered rather than moved. The
+  // content inside never translates or scales, so the label and the back arrow
+  // stay sharp and legible for the whole transition, which a scaleX would not
+  // manage. The inset starts at the collapsed control's own width so the reveal
+  // begins exactly where the icon was.
+  s.textContent =
+    "@keyframes pwSearchExpand{" +
+      "from{clip-path:inset(0 0 0 calc(100% - 48px));opacity:.6}" +
+      "to{clip-path:inset(0 0 0 0);opacity:1}}" +
+    "@media (prefers-reduced-motion: reduce){" +
+      "@keyframes pwSearchExpand{from{clip-path:inset(0);opacity:1}to{clip-path:inset(0);opacity:1}}}";
+  document.head.appendChild(s);
+}
+
+export function TopNavSearch({
+  expanded: expandedProp,
+  onExpandChange,
+  searchProps = {},
+  onSearchOpen,
+  breakpoint = "desktop",   // on non-desktop, TopNav renders a full-width takeover instead of the 320px bar
+  className = "",
+}) {
+  const collapsedBtnRef = useRef(null);
+  const inputRef        = useRef(null);
+  const [hov, setHov]   = useState(false);
+
+  // Expanded state: controlled if `expandedProp` provided, else internal.
+  const isExpandedControlled = expandedProp !== undefined;
+  const [expandedState, setExpandedState] = useState(false);
+  const expanded = isExpandedControlled ? expandedProp : expandedState;
+
+  // Query value: controlled if searchProps.value provided, else internal so the
+  // text PERSISTS across collapse/expand (interaction spec requirement).
+  const isValueControlled = searchProps.value !== undefined;
+  const [queryState, setQueryState] = useState("");
+  const query = isValueControlled ? searchProps.value : queryState;
+
+  const setQuery = (v) => {
+    if (!isValueControlled) setQueryState(v);
+    searchProps.onChange?.(v);
+  };
+
+  const expand = () => {
+    if (!isExpandedControlled) setExpandedState(true);
+    onExpandChange?.(true);
+    onSearchOpen?.();
+    // Defer focus until the input is in the DOM.
+    requestAnimationFrame(() => inputRef.current?.focus());
+  };
+
+  const collapse = () => {
+    if (!isExpandedControlled) setExpandedState(false);
+    onExpandChange?.(false);
+    // NB: query is intentionally NOT cleared: it persists across collapse/expand.
+    setTimeout(() => collapsedBtnRef.current?.focus(), 0);
+  };
+
+  // Escape key collapses the bar.
+  useEffect(() => {
+    if (!expanded) return;
+    const handler = (e) => { if (e.key === "Escape") collapse(); };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [expanded]);
+
+  return (
+    <div
+      className={className}
+      style={{
+        // While expanded the wrapper deliberately stops being a positioning
+        // context. The takeover below is absolute, so with the wrapper relative
+        // it could only ever be as wide as this 48px slot: which is how the
+        // expanded search ended up as a strip on the right-hand side of the bar
+        // instead of taking the bar over. Static hands the takeover up to the
+        // nav itself, which is the element that should be covered.
+        position: expanded ? "static" : "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        // Footprint is ALWAYS the 48px collapsed slot: the expanded bar is absolutely
+        // positioned, so expanding never changes layout / never pushes sibling elements.
+        width: L.touchTarget,
+        height: L.touchTarget,
+        minWidth: L.touchTarget,
+        flexShrink: 0,
+      }}
+    >
+      {/* Collapsed control, perfect 32×32 circle inside the 48px touch target
+          (Figma node 40006967:20917, Container.Icon h32 w32 rounded-full). */}
+      <button
+        ref={collapsedBtnRef}
+        type="button"
+        aria-label="Open search"
+        aria-expanded={expanded}
+        onClick={expand}
+        onMouseEnter={() => setHov(true)}
+        onMouseLeave={() => setHov(false)}
+        style={{
+          // Always rendered. The takeover covers the whole bar now, so there is
+          // nothing to hide from: the old breakpoint branch existed only because
+          // the desktop expansion was an inline bar that sat beside this button.
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: L.touchTarget,
+          height: L.touchTarget,
+          borderRadius: L.iconBtnRadius,
+          background: "transparent",
+          border: "none",
+          cursor: "pointer",
+          padding: 0,
+          flexShrink: 0,
+        }}
+      >
+        {/* Fixed 32×32 square + border-radius 50% = always a perfect circle, regardless of flex context */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 32,
+            height: 32,
+            borderRadius: "50%",
+            background: hov ? T.collapsedBtnHover : T.collapsedBtnFill,
+            border: `0.5px solid ${hov ? T.collapsedBtnBorderHov : T.collapsedBtnBorder}`,
+            transition: "background var(--motion-duration-2) var(--motion-easing-standard), border-color var(--motion-duration-2) var(--motion-easing-standard)",
+          }}
+        >
+          <Icon
+            name="search"
+            size={L.iconSizeCollapsed}
+            color={hov ? T.navIconHover : T.navIconFill}
+          />
+        </div>
+      </button>
+
+      {/* EXPANDED: a takeover of the whole nav, not a bar on the right.
+          It used to be absolutely positioned at `right: 0` with a fixed
+          `L.expandedWidth`, which made the expanded search a 332px strip over
+          the right-hand end of the bar while the org switcher and module
+          switcher stayed visible beside it. Reported 2026-10-02.
+
+          `inset: 0` against the nav (the wrapper goes position:static while
+          expanded, so this anchors to the nav, see above) means search owns the
+          bar for as long as it is open, on every breakpoint. The only way out
+          is the back arrow or Escape, which is why both exist.
+
+          A consumer that is not the TopNav only has to be position:relative for
+          this to cover it. */}
+      {expanded && (
+        <div
+          aria-hidden={false}
+          style={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--semantic-layout-units-gap-xtight)",
+            // The bar's own chrome, so the takeover hides what it covers rather
+            // than floating over it.
+            background: "var(--semantic-color-fill-surface-chrome)",
+            padding: "var(--semantic-layout-units-padding-xxtight) var(--semantic-layout-units-padding-base)",
+            boxSizing: "border-box",
+            zIndex: 60,
+            animation: "pwSearchExpand var(--motion-duration-4) var(--motion-easing-spring) both",
+          }}
+        >
+          {/* Exit, to the LEFT and OUTSIDE the field. It used to be the field's
+              own leading search glyph, which meant the expanded bar carried two
+              controls of similar weight inches apart: the leading glyph threw
+              the whole search away and the trailing ✕ threw only the typed text
+              away. A back arrow outside the field is a different shape, on the
+              other side, and reads as "go back" rather than "close". The
+              leading glyph is now a plain search mark with no action. */}
+          <button
+            type="button"
+            aria-label="Back"
+            onClick={collapse}
+            style={{
+              display: "flex", alignItems: "center", justifyContent: "center",
+              width: L.exitTarget, height: L.exitTarget, flexShrink: 0,
+              background: "transparent", border: "none", cursor: "pointer",
+              borderRadius: L.iconBtnRadius, color: T.navIconFill,
+            }}
+          >
+            <Icon name="arrow_back" size={L.exitGlyph} color={T.navIconFill} fill={1} />
+          </button>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <SearchInput
+              {...searchProps}
+              value={query}
+              onChange={setQuery}
+              inputRef={inputRef}
+              onSearch={(v) => searchProps.onSearch?.(v)}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SearchInput;