@phillips/seldon 1.245.0 → 1.247.0

package/dist/components/Navigation/NavigationItem/NavigationItem.js

@@ -1,47 +1,48 @@
-import { jsx as i, jsxs as _ } from "react/jsx-runtime";
-import { px as a } from "../../../utils/index.js";
-import n from "../../../_virtual/index.js";
-import v from "../../Link/Link.js";
-import { LinkVariants as $ } from "../../Link/types.js";
-import { forwardRef as N } from "react";
-const h = N(
+import { jsxs as k, jsx as a } from "react/jsx-runtime";
+import { px as t } from "../../../utils/index.js";
+import d from "../../../_virtual/index.js";
+import x from "../../Link/Link.js";
+import { LinkVariants as L } from "../../Link/types.js";
+import { forwardRef as C } from "react";
+import { Item as I, Link as c } from "../../../node_modules/@radix-ui/react-navigation-menu/dist/index.js";
+const g = C(
   ({
-    badge: e,
-    className: r = "",
-    href: s,
-    isViewAllLink: l = !1,
-    label: m,
-    navGroup: o,
-    navType: t,
-    onClick: c,
-    element: d = v,
-    ...f
-  }, p) => /* @__PURE__ */ i(
-    "li",
-    {
-      ...f,
-      onClick: c,
-      "data-testid": `nav-item-${m}`,
-      className: n(`${a}-nav__item`, `${a}-nav__item--${o}`, r),
-      ref: p,
-      children: /* @__PURE__ */ _(
-        d,
-        {
-          className: n({
-            [`${a}-nav__item--view-all`]: l
-          }),
-          href: s,
-          variant: t || $.linkStylised,
-          children: [
-            /* @__PURE__ */ i("span", { className: `${a}-nav__item--label`, children: m }),
-            e ? /* @__PURE__ */ i("span", { className: `${a}-nav__item--badge `, children: ` • ${e}` }) : null
-          ]
-        }
-      )
+    badge: r,
+    className: f = "",
+    href: v,
+    isViewAllLink: _ = !1,
+    label: i,
+    navGroup: $,
+    navType: l,
+    onClick: o,
+    element: h = x,
+    isMobile: N,
+    asRadixSubmenuLink: u,
+    ...e
+  }, n) => {
+    const s = d(`${t}-nav__item`, `${t}-nav__item--${$}`, f), m = /* @__PURE__ */ k(
+      h,
+      {
+        className: d({
+          [`${t}-nav__item--view-all`]: _
+        }),
+        href: v,
+        variant: l || L.linkStylised,
+        onClick: o,
+        children: [
+          /* @__PURE__ */ a("span", { className: `${t}-nav__item--label`, children: i }),
+          r ? /* @__PURE__ */ a("span", { className: `${t}-nav__item--badge `, children: ` • ${r}` }) : null
+        ]
+      }
+    );
+    if (N === !1) {
+      const { value: j, ...p } = e;
+      return /* @__PURE__ */ a(I, { ref: n, "data-testid": `nav-item-${i}`, className: s, ...p, children: /* @__PURE__ */ a(c, { asChild: !0, children: m }) });
     }
-  )
+    return u ? /* @__PURE__ */ a("li", { ...e, "data-testid": `nav-item-${i}`, className: s, ref: n, children: /* @__PURE__ */ a(c, { asChild: !0, children: m }) }) : /* @__PURE__ */ a("li", { ...e, onClick: o, "data-testid": `nav-item-${i}`, className: s, ref: n, children: m });
+  }
 );
-h.displayName = "NavigationItem";
+g.displayName = "NavigationItem";
 export {
-  h as default
+  g as default
 };

package/dist/components/Navigation/NavigationItemWithSubmenu/NavigationDesktopSubmenu.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { NavigationSubmenuProps } from '../NavigationSubmenu/NavigationSubmenu';
+import { NavigationItemWithSubmenuProps } from './NavigationItemWithSubmenu';
+export interface NavigationDesktopSubmenuProps {
+    navSubmenuElement: React.ReactElement<NavigationSubmenuProps>[] | null | undefined;
+    itemValue: string;
+    baseClassName: string;
+    commonProps: Record<string, unknown>;
+    label: string;
+    className?: string;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    closeMenu?: () => void;
+    setActiveSubmenuId?: (id: string | null) => void;
+    itemProps: Omit<NavigationItemWithSubmenuProps, 'id' | 'label' | 'children' | 'className' | 'onClick' | 'renderMode' | 'isMobile'>;
+}
+declare const NavigationDesktopSubmenu: React.ForwardRefExoticComponent<NavigationDesktopSubmenuProps & React.RefAttributes<HTMLLIElement>>;
+export default NavigationDesktopSubmenu;

package/dist/components/Navigation/NavigationItemWithSubmenu/NavigationDesktopSubmenu.js

@@ -0,0 +1,70 @@
+import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import c from "../../../_virtual/index.js";
+import u, { forwardRef as v } from "react";
+import { Item as x, Trigger as $, Content as N } from "../../../node_modules/@radix-ui/react-navigation-menu/dist/index.js";
+import { px as t } from "../../../utils/index.js";
+import { TextVariants as _ } from "../../Text/types.js";
+import f from "../../Text/Text.js";
+const w = v(
+  ({
+    navSubmenuElement: a,
+    itemValue: g,
+    baseClassName: n,
+    commonProps: o,
+    label: e,
+    className: s,
+    onClick: l,
+    closeMenu: m,
+    setActiveSubmenuId: p,
+    itemProps: h
+  }, d) => a?.length ? /* @__PURE__ */ k(
+    x,
+    {
+      value: g,
+      ref: d,
+      className: c(s, n, `${t}-nav__item`),
+      children: [
+        /* @__PURE__ */ i(
+          $,
+          {
+            "aria-label": e,
+            className: `${t}-nav__item-trigger-wrapper`,
+            "data-testid": o["data-testid"],
+            onClick: l ? (r) => l(r) : void 0,
+            children: /* @__PURE__ */ i("span", { className: `${t}-nav__item-trigger`, children: /* @__PURE__ */ i(f, { variant: _.linkStylised, children: e }) })
+          }
+        ),
+        /* @__PURE__ */ i(
+          N,
+          {
+            className: `${n}__submenu`,
+            "aria-label": `${e} submenu`,
+            onSelect: (r) => {
+              a[0].props?.onClick?.(r), m?.(), p?.(null);
+            },
+            children: u.cloneElement(a[0], {
+              wrapLinksInRadixLink: !0,
+              onClick: (r) => {
+                a[0].props?.onClick?.(r), m?.(), p?.(null);
+              }
+            })
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ i(
+    "li",
+    {
+      ...o,
+      ref: d,
+      className: c(s, n, `${t}-nav__item`),
+      onClick: l,
+      ...h,
+      children: /* @__PURE__ */ i("span", { className: `${t}-nav__item-trigger`, children: /* @__PURE__ */ i(f, { variant: _.linkStylised, children: e }) })
+    }
+  )
+);
+w.displayName = "NavigationDesktopSubmenu";
+export {
+  w as default
+};

package/dist/components/Navigation/NavigationItemWithSubmenu/NavigationItemWithSubmenu.d.ts

@@ -0,0 +1,31 @@
+import { default as React, ComponentProps } from 'react';
+export interface NavigationItemWithSubmenuProps extends ComponentProps<'li'> {
+    /**
+     * Label for the navigation item
+     */
+    label: string;
+    /**
+     * ID for the trigger - required for context-based submenu management
+     */
+    id?: string;
+    /**
+     * When set by Navigation/NavigationList, render only this variant so list items stay direct children of ul
+     * (no SSRMediaQuery wrapper). Prefer isMobile; renderMode is kept for backwards compatibility.
+     */
+    renderMode?: 'mobile' | 'desktop';
+    /**
+     * Explicit mobile/desktop flag injected by NavigationList; when set, takes precedence over renderMode.
+     */
+    isMobile?: boolean;
+}
+/**
+ * ## Overview
+ *
+ * Supports clicking in mobile mode and hovering in desktop mode to expand the child navigation lists
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10570-6295&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-languageselector--overview)
+ */
+declare const NavigationItemWithSubmenu: React.ForwardRefExoticComponent<Omit<NavigationItemWithSubmenuProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export default NavigationItemWithSubmenu;

package/dist/components/Navigation/NavigationItemWithSubmenu/NavigationItemWithSubmenu.js

@@ -0,0 +1,68 @@
+import { jsx as e, Fragment as I, jsxs as T } from "react/jsx-runtime";
+import f from "../../../_virtual/index.js";
+import m, { forwardRef as $ } from "react";
+import y from "../../../node_modules/react-remove-scroll/dist/es2015/Combination.js";
+import { SSRMediaQuery as h } from "../../../providers/SeldonProvider/utils.js";
+import { HeaderContext as N } from "../../../site-furniture/Header/Header.js";
+import { getCommonProps as M, findChildrenOfType as W, px as b } from "../../../utils/index.js";
+import P from "../../Accordion/Accordion.js";
+import R from "../../Accordion/AccordionItem.js";
+import { TextVariants as E } from "../../Text/types.js";
+import O from "../../Text/Text.js";
+import A from "../NavigationSubmenu/NavigationSubmenu.js";
+import V from "./NavigationDesktopSubmenu.js";
+const v = ({ id: n, label: o, children: a }) => {
+  const { isMenuOpen: s } = m.useContext(N);
+  return /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
+    R,
+    {
+      hasTransition: !0,
+      id: `accordion-item-${n}`,
+      label: /* @__PURE__ */ e(O, { variant: E.linkStylised, children: o }),
+      children: a
+    },
+    `accordion-key-${o}`
+  ) }, `accordion-key-${o}-${s}`);
+}, j = $(
+  ({ id: n, label: o, children: a, className: s, onClick: S, renderMode: k, isMobile: u, ...C }, _) => {
+    const { className: i, ...r } = M({ id: n }, "NavigationItemWithSubmenu"), t = W(a, A), { closeMenu: c, setActiveSubmenuId: g } = m.useContext(N), d = /* @__PURE__ */ e(
+      V,
+      {
+        ref: _,
+        navSubmenuElement: t,
+        itemValue: n ?? i ?? "item",
+        baseClassName: i,
+        commonProps: r,
+        label: o,
+        className: s,
+        onClick: S,
+        closeMenu: c,
+        setActiveSubmenuId: g,
+        itemProps: C
+      }
+    ), p = typeof u == "boolean" ? u ? "mobile" : "desktop" : k;
+    if (p === "mobile")
+      return /* @__PURE__ */ e("li", { className: f(i, `${b}-nav__item`), ...r, children: /* @__PURE__ */ e(v, { id: n, label: o, ...r, children: t ? m.cloneElement(t[0], {
+        className: `${i}__submenu--mobile`,
+        onClick: (l) => {
+          t[0].props?.onClick?.(l), c?.();
+        }
+      }) : null }) });
+    if (p === "desktop")
+      return d;
+    const { "data-testid": q, ...x } = r;
+    return /* @__PURE__ */ e(I, { children: /* @__PURE__ */ T(y, { enabled: !1, allowPinchZoom: !0, removeScrollBar: !1, children: [
+      /* @__PURE__ */ e(h.Media, { lessThan: "md", children: /* @__PURE__ */ e("li", { className: f(i, `${b}-nav__item`), ...x, children: /* @__PURE__ */ e(v, { id: n, label: o, ...r, children: t ? m.cloneElement(t[0], {
+        className: `${i}__submenu--mobile`,
+        onClick: (l) => {
+          t[0].props?.onClick?.(l), c?.();
+        }
+      }) : null }) }) }),
+      /* @__PURE__ */ e(h.Media, { greaterThanOrEqual: "md", children: d })
+    ] }) });
+  }
+);
+j.displayName = "NavigationItemWithSubmenu";
+export {
+  j as default
+};

package/dist/components/Navigation/NavigationItemWithSubmenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default, type NavigationItemWithSubmenuProps } from './NavigationItemWithSubmenu';
+export { default as NavigationDesktopSubmenu, type NavigationDesktopSubmenuProps } from './NavigationDesktopSubmenu';

package/dist/components/Navigation/NavigationList/NavigationList.d.ts

@@ -9,17 +9,20 @@ export interface NavigationListProps extends React.ComponentProps<'ul'> {
      */
     isOffScreen?: boolean;
     /**
-     * Optional left section heading
+     * Rewrite the onClick event
      */
-    leftSectionHeading?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
     /**
-     * Optional right section heading
+     * When false (desktop), wrap in Radix NavigationMenu.List and pass desktop behavior to children.
+     * When true or omitted (mobile), render plain list and pass mobile behavior to children.
      */
-    rightSectionHeading?: string;
-    /**
-     * Rewrite the onClick event
-     * */
-    onClick?: React.MouseEventHandler<HTMLElement>;
+    isMobile?: boolean;
 }
+/**
+ * ## Overview
+ *
+ * Top-level nav list used inside Navigation. Renders direct children (NavigationItem, NavigationItemWithSubmenu).
+ * For submenu content with left/right sections, use NavigationSubmenu inside NavigationItemWithSubmenu.
+ */
 declare const NavigationList: React.ForwardRefExoticComponent<Omit<NavigationListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export default NavigationList;

package/dist/components/Navigation/NavigationList/NavigationList.js

@@ -1,51 +1,26 @@
-import { jsxs as r, jsx as d } from "react/jsx-runtime";
-import o from "../../../_virtual/index.js";
+import { jsx as r, Fragment as p } from "react/jsx-runtime";
+import f from "../../../_virtual/index.js";
 import * as a from "react";
-import { px as n } from "../../../utils/index.js";
-import { TextVariants as u } from "../../Text/types.js";
-import f from "../../Text/Text.js";
-const g = a.forwardRef(
-  ({ id: _, children: s, className: N, isOffScreen: m, leftSectionHeading: p, rightSectionHeading: c, onClick: v }, $) => {
-    const l = a.Children.toArray(s).map((t) => {
-      if (a.isValidElement(t) && t.props.navGroup === "nav-link-start")
-        return a.cloneElement(t, {
-          onClick: (e) => {
-            v?.(e), t.props?.onClick?.(e);
-          }
-        });
-    }).filter(Boolean), i = a.Children.toArray(s).map((t) => {
-      if (a.isValidElement(t) && t.props.navGroup === "nav-link-end")
-        return a.cloneElement(t, {
-          onClick: (e) => {
-            v?.(e), t.props?.onClick?.(e);
-          }
-        });
-    }).filter(Boolean);
-    return /* @__PURE__ */ r(
-      "ul",
-      {
-        "aria-hidden": m,
-        id: _,
-        "data-testid": _,
-        role: "list",
-        className: o(N, `${n}-nav__list`, { [`${n}-nav__list--offscreen`]: m }),
-        ref: $,
-        children: [
-          l.length > 0 ? /* @__PURE__ */ r("div", { className: o(`${n}-nav__list__section`, `${n}-nav__list__section--start`), children: [
-            p ? /* @__PURE__ */ d(f, { variant: u.headingMedium, className: `${n}-nav__list__section--start__title`, children: p }) : null,
-            l
-          ] }) : null,
-          i.length > 0 ? /* @__PURE__ */ r("div", { className: o(`${n}-nav__list__section`, `${n}-nav__list__section--end`), children: [
-            c ? /* @__PURE__ */ d(f, { variant: u.headingMedium, className: `${n}-nav__list__section--end__title`, children: c }) : null,
-            i
-          ] }) : null,
-          !l.length && !i.length ? s : null
-        ]
-      }
-    );
+import { px as u } from "../../../utils/index.js";
+import d from "../NavigationItem/NavigationItem.js";
+import { List as c } from "../../../node_modules/@radix-ui/react-navigation-menu/dist/index.js";
+import N from "../NavigationItemWithSubmenu/NavigationItemWithSubmenu.js";
+function v({ children: e, isMobile: n = !0 }) {
+  return /* @__PURE__ */ r(p, { children: a.Children.map(e, (t) => a.isValidElement(t) && t.type === d ? a.cloneElement(t, {
+    isMobile: n
+  }) : a.isValidElement(t) && t.type === N ? a.cloneElement(t, {
+    isMobile: n
+  }) : t) });
+}
+const C = a.forwardRef(
+  ({ id: e, children: n, className: t, isOffScreen: i, onClick: g, isMobile: o = !0 }, m) => {
+    const s = /* @__PURE__ */ r(v, { isMobile: o, children: n }), l = f(t, `${u}-nav__list`, {
+      [`${u}-nav__list--offscreen`]: i
+    });
+    return o ? /* @__PURE__ */ r("ul", { "aria-hidden": i, id: e, "data-testid": e, role: "list", className: l, ref: m, children: s }) : /* @__PURE__ */ r(c, { asChild: !0, children: /* @__PURE__ */ r("ul", { "aria-hidden": i, id: e, "data-testid": e, role: "list", className: l, ref: m, children: s }) });
   }
 );
-g.displayName = "NavigationList";
+C.displayName = "NavigationList";
 export {
-  g as default
+  C as default
 };

package/dist/components/Navigation/NavigationSubmenu/NavigationSubmenu.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface NavigationSubmenuProps extends React.ComponentProps<'ul'> {
+    /**
+     * id for the submenu list
+     */
+    id: string;
+    /**
+     * Optional left section heading (for nav-link-start items)
+     */
+    leftSectionHeading?: string;
+    /**
+     * Optional right section heading (for nav-link-end items, e.g. "View all")
+     */
+    rightSectionHeading?: string;
+    /**
+     * Rewrite the onClick event (e.g. close menu on link click)
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * When true (desktop submenu content), wrap each section item in NavigationMenu.Link so submenu closes on link click
+     */
+    wrapLinksInRadixLink?: boolean;
+}
+/**
+ * ## Overview
+ *
+ * Used as the content of a submenu (inside NavigationItemWithSubmenu). Renders left and right sections
+ * from NavigationItem children with navGroup="nav-link-start" and navGroup="nav-link-end".
+ *
+ * Use NavigationList for the top-level nav in Navigation; use NavigationSubmenu for dropdown submenus.
+ */
+declare const NavigationSubmenu: React.ForwardRefExoticComponent<Omit<NavigationSubmenuProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export default NavigationSubmenu;

package/dist/components/Navigation/NavigationSubmenu/NavigationSubmenu.js

@@ -0,0 +1,41 @@
+import { jsxs as s, Fragment as h, jsx as i } from "react/jsx-runtime";
+import l from "../../../_virtual/index.js";
+import * as n from "react";
+import { px as e } from "../../../utils/index.js";
+import { TextVariants as d } from "../../Text/types.js";
+import f from "../../Text/Text.js";
+const k = n.forwardRef(
+  ({ id: r, children: o, className: N, leftSectionHeading: m, rightSectionHeading: _, onClick: u, wrapLinksInRadixLink: c, ...x }, C) => {
+    const p = n.Children.toArray(o).map((t) => {
+      if (n.isValidElement(t) && t.props.navGroup === "nav-link-start")
+        return n.cloneElement(t, {
+          onClick: (a) => {
+            u?.(a), t.props?.onClick?.(a);
+          },
+          ...c ? { asRadixSubmenuLink: !0 } : {}
+        });
+    }).filter(Boolean), v = n.Children.toArray(o).map((t) => {
+      if (n.isValidElement(t) && t.props.navGroup === "nav-link-end")
+        return n.cloneElement(t, {
+          onClick: (a) => {
+            u?.(a), t.props?.onClick?.(a);
+          },
+          ...c ? { asRadixSubmenuLink: !0 } : {}
+        });
+    }).filter(Boolean), $ = /* @__PURE__ */ s(h, { children: [
+      p.length > 0 ? /* @__PURE__ */ s("div", { className: l(`${e}-nav__list__section`, `${e}-nav__list__section--start`), children: [
+        m ? /* @__PURE__ */ i(f, { variant: d.headingMedium, className: `${e}-nav__list__section--start__title`, children: m }) : null,
+        p
+      ] }) : null,
+      v.length > 0 ? /* @__PURE__ */ s("div", { className: l(`${e}-nav__list__section`, `${e}-nav__list__section--end`), children: [
+        _ ? /* @__PURE__ */ i(f, { variant: d.headingMedium, className: `${e}-nav__list__section--end__title`, children: _ }) : null,
+        v
+      ] }) : null
+    ] }), g = l(N, `${e}-nav__list`);
+    return /* @__PURE__ */ i("ul", { id: r, "data-testid": r, role: "list", className: g, ref: C, ...x, children: $ });
+  }
+);
+k.displayName = "NavigationSubmenu";
+export {
+  k as default
+};

package/dist/components/Navigation/NavigationSubmenu/NavigationSubmenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Search/Search.js

@@ -18,66 +18,66 @@ const X = j(
     onSearch: S,
     onCancel: _,
     searchResults: N = [],
-    state: o = "idle",
+    state: i = "idle",
     defaultValue: R = "",
-    className: C,
+    className: b,
     placeholder: I = "",
-    searchButtonText: i = "Search",
-    loadingText: E = "Search In Progress...",
-    invalidText: b = "Invalid search",
+    searchButtonText: l = "Search",
+    loadingText: C = "Search In Progress...",
+    invalidText: E = "Invalid search",
     getAllResultsText: k = (e) => `View all results for ${e}`,
     getAllResultsLink: v = (e) => `/Search?Search=${e}`,
     ...x
   }, L) => {
-    const { className: e, "data-testid": l, ...P } = A(x, "Search"), c = D(B), d = f(null), m = f(null), g = f(null), a = c.isSearchExpanded, n = d.current?.value, [T, h] = H(!0), y = S ? (r) => {
-      S(r.target.value);
+    const { className: e, "data-testid": n, ...P } = A(x, "Search"), c = D(B), d = f(null), m = f(null), $ = f(null), r = c.isSearchExpanded, o = d.current?.value, [T, h] = H(!0), y = S ? (a) => {
+      S(a.target.value);
     } : void 0;
-    z(g, (r) => {
-      _?.(), p(!1), r.stopPropagation();
+    z($, (a) => {
+      _?.(), p(!1), a.stopPropagation();
     });
-    const $ = (r) => {
-      if (r.stopPropagation(), r.key === "Enter") {
-        if (r.preventDefault(), n && n.length > 2) {
-          const V = w(v(n));
+    const g = (a) => {
+      if (a.stopPropagation(), a.key === "Enter") {
+        if (a.preventDefault(), o && o.length > 2) {
+          const V = w(v(o));
           h(!1), window.location.href = V;
         }
-        r.currentTarget instanceof HTMLAnchorElement && (h(!1), r.currentTarget.click());
+        a.currentTarget instanceof HTMLAnchorElement && (h(!1), a.currentTarget.click());
       }
-      r.key === "Escape" && (m.current?.reset(), c.setIsSearchExpanded(!1));
+      a.key === "Escape" && (m.current?.reset(), c.setIsSearchExpanded(!1));
     };
     O(() => {
-      if (a) {
+      if (r) {
         d.current?.focus();
         return;
       }
-    }, [a]);
-    const p = (r) => {
-      m.current?.reset(), c.setIsSearchExpanded(r);
+    }, [r]);
+    const p = (a) => {
+      m.current?.reset(), c.setIsSearchExpanded(a);
     };
-    return /* @__PURE__ */ t(J, { enabled: a, allowPinchZoom: !0, removeScrollBar: !1, children: /* @__PURE__ */ t("div", { className: `${e}__container`, ref: L, children: /* @__PURE__ */ u(
+    return /* @__PURE__ */ t(J, { enabled: r, allowPinchZoom: !0, removeScrollBar: !1, children: /* @__PURE__ */ t("div", { className: `${e}__container`, ref: L, children: /* @__PURE__ */ u(
       "div",
       {
         className: `${e}__container__inner`,
-        ref: g,
-        onClick: (r) => {
-          a || (p(!0), r.stopPropagation());
+        ref: $,
+        onClick: (a) => {
+          r || (p(!0), a.stopPropagation());
         },
         children: [
-          /* @__PURE__ */ t(q, { variant: Z.headingSmall, className: `${e}__container__inner__label`, children: i }),
+          /* @__PURE__ */ t(q, { variant: Z.headingSmall, className: `${e}__container__inner__label`, children: l }),
           /* @__PURE__ */ t(
             "div",
             {
               ...P,
-              className: s(e, C, { [`${e}--active`]: a }),
-              "data-testid": l,
+              className: s(e, b, { [`${e}--active`]: r }),
+              "data-testid": n,
               role: "search",
               ...x,
               children: /* @__PURE__ */ u(
                 "form",
                 {
-                  "data-testid": `${l}-form`,
+                  "data-testid": `${n}-form`,
                   className: s(`${e}__form`, {
-                    [`${e}__form--active`]: a
+                    [`${e}__form--active`]: r
                   }),
                   ref: m,
                   children: [
@@ -85,34 +85,37 @@ const X = j(
                       "div",
                       {
                         className: s(`${e}__content-wrapper`, {
-                          [`${e}__content-wrapper--active`]: a
+                          [`${e}__content-wrapper--active`]: r
                         }),
                         role: "combobox",
                         "aria-haspopup": "listbox",
+                        "aria-expanded": r,
+                        "aria-controls": r ? `${n}-listbox` : void 0,
                         children: [
                           /* @__PURE__ */ t(
                             W,
                             {
-                              in: a,
+                              in: r,
                               classNames: `${F}-input`,
                               addEndListener: () => {
                               },
                               children: /* @__PURE__ */ t(
                                 K,
                                 {
-                                  "aria-hidden": !a,
+                                  "aria-hidden": !r,
                                   className: `${e}__input`,
                                   id: "search-input",
                                   hideLabel: !0,
-                                  labelText: i,
-                                  placeholder: a ? I : "",
+                                  labelText: l,
+                                  placeholder: r ? I : "",
                                   type: "text",
                                   defaultValue: R,
-                                  invalid: o === "invalid",
-                                  invalidText: b,
-                                  onKeyDown: $,
+                                  invalid: i === "invalid",
+                                  invalidText: E,
+                                  onKeyDown: g,
                                   onChange: y,
-                                  ref: d
+                                  ref: d,
+                                  tabIndex: r ? 0 : -1
                                 }
                               )
                             }
@@ -121,10 +124,10 @@ const X = j(
                             G,
                             {
                               className: e,
-                              searchButtonText: i,
-                              state: o,
-                              testId: l,
-                              isSearchExpanded: a,
+                              searchButtonText: l,
+                              state: i,
+                              testId: n,
+                              isSearchExpanded: r,
                               setIsSearchExpanded: p,
                               onCancel: _
                             }
@@ -132,20 +135,21 @@ const X = j(
                         ]
                       }
                     ),
-                    a && T && n && n.length > 2 ? /* @__PURE__ */ t(
+                    r && T && o && o.length > 2 ? /* @__PURE__ */ t(
                       U,
                       {
+                        id: `${n}-listbox`,
                         autoCompleteResults: N,
-                        isLoading: o === "loading",
-                        loadingText: E,
-                        onKeyDown: $,
-                        userInputValue: n,
+                        isLoading: i === "loading",
+                        loadingText: C,
+                        onKeyDown: g,
+                        userInputValue: o,
                         closeSearch: h,
                         children: /* @__PURE__ */ t(
                           "li",
                           {
                             className: s(`${e}__result`, `${e}__result--view-all`),
-                            children: /* @__PURE__ */ t(M, { href: w(v(n)), variant: Q.linkLarge, children: /* @__PURE__ */ t("p", { children: k(n) }) })
+                            children: /* @__PURE__ */ t(M, { href: w(v(o)), variant: Q.linkLarge, children: /* @__PURE__ */ t("p", { children: k(o) }) })
                           },
                           "viewAllSearchResults"
                         )