@dloizides/ui-nav 1.23.1 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.24.0
+
+- `Topbar` gets an optional `center` slot between `left` and the actions (testID `topbar-center`); callers that do not pass it render as before (KEFI-EDITOR-HEADER-1 "Compact the landing editor header").
+- `PillNav` gets `variant={PillNavVariant.Menu}`: one compact "Current ▾" trigger (44px pill) opening a menu of the same items through the shared `ModalDropdown` (role menu, arrow keys / Home / End / Enter / Escape, highlight starts on the current item). New optional props `menuHint`, `menuTestID`, `dropdownVariant`; new exports `PillNavVariant`, `resolvePillMenuLabel`. Default stays `Pills`.
+
+## 1.23.2
+
+- Topbar account-name button and language toggle get a 44x44 minimum hit box (KEFI-HEADER-HITBOX-1 "kefi-web header account control reaches 44x44").
+
 ## 1.23.1
 
 **Overlay z-indexes come from the shared `@dloizides/design-tokens` `Z_INDEX` scale (UI-ZINDEX-SCALE-1 "Shared overlay z-index scale").**

package/dist/index.d.mts

@@ -333,6 +333,8 @@ interface AccountState {
 interface TopbarProps {
     /** Left slot — typically the tenant logo. */
     left?: React.ReactNode;
+    /** Optional middle slot between `left` and the actions (e.g. a compact dashboard switch). */
+    center?: React.ReactNode;
     /**
      * Optional language toggle. `testID` is optional but the repo standard wants
      * one — before 1.10.0 this inline type declared none, so a testID was
@@ -359,7 +361,7 @@ interface TopbarProps {
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
 }
-declare const Topbar: ({ left, language, notificationSlot, user, account, logout, containerStyle, }: TopbarProps) => React.ReactElement;
+declare const Topbar: ({ left, center, language, notificationSlot, user, account, logout, containerStyle, }: TopbarProps) => React.ReactElement;
 
 /**
  * NavBar — the config-driven HORIZONTAL top navigation bar. It is the top-bar
@@ -893,6 +895,12 @@ interface CollapsedRailProps {
 }
 declare const CollapsedRail: ({ items, pathname, onNavigate, regionLabel, navigateHint, header, footer, containerStyle, }: CollapsedRailProps) => React.ReactElement;
 
+/** How `PillNav` lays out its items: a wrapping pill row, or one compact "Current ▾" menu button. */
+declare enum PillNavVariant {
+    Pills = "pills",
+    Menu = "menu"
+}
+
 /**
  * PillNav — a horizontal row of fully-rounded "pills", the cross-navigation
  * switcher promoted from kefi's coral dashboard nav. It renders the same
@@ -929,10 +937,21 @@ interface PillNavProps {
      * (show when non-empty); kefi passes 2 (a lone dashboard needs no switcher).
      */
     minItems?: number;
+    /** `Pills` (default) renders the wrapping row; `Menu` renders one compact "Current ▾" menu button. */
+    variant?: PillNavVariant;
+    /** a11y hint for the `Menu` trigger. Defaults to `regionLabel`. */
+    menuHint?: string;
+    /** testID for the `Menu` trigger. Defaults to `NAV_TEST_IDS.pillNavMenu`. */
+    menuTestID?: string;
+    /** Forces the `Menu` dropdown variant (default: responsive). */
+    dropdownVariant?: DropdownVariant;
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
 }
-declare const PillNav: ({ items, pathname, onNavigate, regionLabel, navigateHint, minItems, containerStyle, }: PillNavProps) => React.ReactElement | null;
+declare const PillNav: ({ items, pathname, onNavigate, regionLabel, navigateHint, minItems, variant, menuHint, menuTestID, dropdownVariant, containerStyle, }: PillNavProps) => React.ReactElement | null;
+
+/** The label the compact menu trigger shows: the active item's label, else `fallback`. */
+declare function resolvePillMenuLabel(items: NavItem[], pathname: string, fallback: string): string;
 
 /**
  * DarkModeControl — the shared colour-scheme control promoted from erevna /
@@ -1077,6 +1096,10 @@ declare const NAV_TEST_IDS: {
     readonly navBarLinks: "navbar-links";
     /** the "More ▾" priority+ overflow trigger in the horizontal NavBar (shown when items spill). */
     readonly navBarOverflow: "navbar-overflow";
+    /** the compact "Current ▾" trigger of `PillNav` with `variant={PillNavVariant.Menu}`. */
+    readonly pillNavMenu: "pill-nav-menu";
+    /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
+    readonly topbarCenter: "topbar-center";
 };
 /** Suffixes appended to an `AppShell`'s required `testID` to name its regions. */
 declare const APP_SHELL_SUFFIX: {
@@ -1333,6 +1356,13 @@ declare const navStyles: {
     topbarLeft: {
         flex: number;
     };
+    topbarCenter: {
+        flexShrink: number;
+        minWidth: number;
+        flexDirection: "row";
+        alignItems: "center";
+        marginHorizontal: number;
+    };
     topbarRight: {
         flexDirection: "row";
         alignItems: "center";
@@ -1340,6 +1370,9 @@ declare const navStyles: {
     topbarRowItem: {
         marginHorizontal: number;
         alignItems: "center";
+        justifyContent: "center";
+        minHeight: number;
+        minWidth: number;
     };
     topbarLabel: {
         fontSize: number;
@@ -1351,6 +1384,12 @@ declare const navStyles: {
     userName: {
         fontWeight: "600";
     };
+    accountNameBtn: {
+        minHeight: number;
+        minWidth: number;
+        justifyContent: "center";
+        alignItems: "flex-end";
+    };
     userEmail: {
         fontSize: number;
     };
@@ -1404,6 +1443,9 @@ declare const pillNavStyles: {
         fontSize: number;
         fontWeight: "600";
     };
+    menuTriggerText: {
+        flexShrink: number;
+    };
 };
 declare const darkModeStyles: {
     segmentRow: {
@@ -1543,4 +1585,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, PillNavVariant, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.d.ts

@@ -333,6 +333,8 @@ interface AccountState {
 interface TopbarProps {
     /** Left slot — typically the tenant logo. */
     left?: React.ReactNode;
+    /** Optional middle slot between `left` and the actions (e.g. a compact dashboard switch). */
+    center?: React.ReactNode;
     /**
      * Optional language toggle. `testID` is optional but the repo standard wants
      * one — before 1.10.0 this inline type declared none, so a testID was
@@ -359,7 +361,7 @@ interface TopbarProps {
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
 }
-declare const Topbar: ({ left, language, notificationSlot, user, account, logout, containerStyle, }: TopbarProps) => React.ReactElement;
+declare const Topbar: ({ left, center, language, notificationSlot, user, account, logout, containerStyle, }: TopbarProps) => React.ReactElement;
 
 /**
  * NavBar — the config-driven HORIZONTAL top navigation bar. It is the top-bar
@@ -893,6 +895,12 @@ interface CollapsedRailProps {
 }
 declare const CollapsedRail: ({ items, pathname, onNavigate, regionLabel, navigateHint, header, footer, containerStyle, }: CollapsedRailProps) => React.ReactElement;
 
+/** How `PillNav` lays out its items: a wrapping pill row, or one compact "Current ▾" menu button. */
+declare enum PillNavVariant {
+    Pills = "pills",
+    Menu = "menu"
+}
+
 /**
  * PillNav — a horizontal row of fully-rounded "pills", the cross-navigation
  * switcher promoted from kefi's coral dashboard nav. It renders the same
@@ -929,10 +937,21 @@ interface PillNavProps {
      * (show when non-empty); kefi passes 2 (a lone dashboard needs no switcher).
      */
     minItems?: number;
+    /** `Pills` (default) renders the wrapping row; `Menu` renders one compact "Current ▾" menu button. */
+    variant?: PillNavVariant;
+    /** a11y hint for the `Menu` trigger. Defaults to `regionLabel`. */
+    menuHint?: string;
+    /** testID for the `Menu` trigger. Defaults to `NAV_TEST_IDS.pillNavMenu`. */
+    menuTestID?: string;
+    /** Forces the `Menu` dropdown variant (default: responsive). */
+    dropdownVariant?: DropdownVariant;
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
 }
-declare const PillNav: ({ items, pathname, onNavigate, regionLabel, navigateHint, minItems, containerStyle, }: PillNavProps) => React.ReactElement | null;
+declare const PillNav: ({ items, pathname, onNavigate, regionLabel, navigateHint, minItems, variant, menuHint, menuTestID, dropdownVariant, containerStyle, }: PillNavProps) => React.ReactElement | null;
+
+/** The label the compact menu trigger shows: the active item's label, else `fallback`. */
+declare function resolvePillMenuLabel(items: NavItem[], pathname: string, fallback: string): string;
 
 /**
  * DarkModeControl — the shared colour-scheme control promoted from erevna /
@@ -1077,6 +1096,10 @@ declare const NAV_TEST_IDS: {
     readonly navBarLinks: "navbar-links";
     /** the "More ▾" priority+ overflow trigger in the horizontal NavBar (shown when items spill). */
     readonly navBarOverflow: "navbar-overflow";
+    /** the compact "Current ▾" trigger of `PillNav` with `variant={PillNavVariant.Menu}`. */
+    readonly pillNavMenu: "pill-nav-menu";
+    /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
+    readonly topbarCenter: "topbar-center";
 };
 /** Suffixes appended to an `AppShell`'s required `testID` to name its regions. */
 declare const APP_SHELL_SUFFIX: {
@@ -1333,6 +1356,13 @@ declare const navStyles: {
     topbarLeft: {
         flex: number;
     };
+    topbarCenter: {
+        flexShrink: number;
+        minWidth: number;
+        flexDirection: "row";
+        alignItems: "center";
+        marginHorizontal: number;
+    };
     topbarRight: {
         flexDirection: "row";
         alignItems: "center";
@@ -1340,6 +1370,9 @@ declare const navStyles: {
     topbarRowItem: {
         marginHorizontal: number;
         alignItems: "center";
+        justifyContent: "center";
+        minHeight: number;
+        minWidth: number;
     };
     topbarLabel: {
         fontSize: number;
@@ -1351,6 +1384,12 @@ declare const navStyles: {
     userName: {
         fontWeight: "600";
     };
+    accountNameBtn: {
+        minHeight: number;
+        minWidth: number;
+        justifyContent: "center";
+        alignItems: "flex-end";
+    };
     userEmail: {
         fontSize: number;
     };
@@ -1404,6 +1443,9 @@ declare const pillNavStyles: {
         fontSize: number;
         fontWeight: "600";
     };
+    menuTriggerText: {
+        flexShrink: number;
+    };
 };
 declare const darkModeStyles: {
     segmentRow: {
@@ -1543,4 +1585,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, PillNavVariant, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.js

@@ -71,11 +71,24 @@ var navStyles = reactNative.StyleSheet.create({
     justifyContent: "space-between"
   },
   topbarLeft: { flex: 1 },
+  topbarCenter: { flexShrink: 1, minWidth: 0, flexDirection: "row", alignItems: "center", marginHorizontal: 8 },
   topbarRight: { flexDirection: "row", alignItems: "center" },
-  topbarRowItem: { marginHorizontal: 8, alignItems: "center" },
+  topbarRowItem: {
+    marginHorizontal: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: MIN_TOUCH_TARGET,
+    minWidth: MIN_TOUCH_TARGET
+  },
   topbarLabel: { fontSize: 14 },
   userBlock: { marginHorizontal: 12, alignItems: "flex-end" },
   userName: { fontWeight: "600" },
+  accountNameBtn: {
+    minHeight: MIN_TOUCH_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
+    justifyContent: "center",
+    alignItems: "flex-end"
+  },
   userEmail: { fontSize: 12 },
   accountBtn: {
     marginLeft: 8,
@@ -212,7 +225,8 @@ var pillNavStyles = reactNative.StyleSheet.create({
     columnGap: 6,
     justifyContent: "center"
   },
-  pillText: { fontSize: 14, fontWeight: "600" }
+  pillText: { fontSize: 14, fontWeight: "600" },
+  menuTriggerText: { flexShrink: 1 }
 });
 var darkModeStyles = reactNative.StyleSheet.create({
   // Segmented Light / Dark / System control.
@@ -869,7 +883,11 @@ var NAV_TEST_IDS = {
   /** links container in the horizontal NavBar. */
   navBarLinks: "navbar-links",
   /** the "More ▾" priority+ overflow trigger in the horizontal NavBar (shown when items spill). */
-  navBarOverflow: "navbar-overflow"
+  navBarOverflow: "navbar-overflow",
+  /** the compact "Current ▾" trigger of `PillNav` with `variant={PillNavVariant.Menu}`. */
+  pillNavMenu: "pill-nav-menu",
+  /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
+  topbarCenter: "topbar-center"
 };
 var APP_SHELL_SUFFIX = {
   content: "-content",
@@ -929,6 +947,7 @@ function planToneColor(theme, tone) {
 }
 var Topbar = ({
   left,
+  center,
   language,
   notificationSlot,
   user,
@@ -952,6 +971,7 @@ var Topbar = ({
       ],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.topbarLeft, children: renderTextSlot(left, { color: colors.text }) }),
+        center !== void 0 && center !== null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.topbarCenter, testID: NAV_TEST_IDS.topbarCenter, children: renderTextSlot(center, { color: colors.text }) }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.topbarRight, children: [
           language ? /* @__PURE__ */ jsxRuntime.jsx(
             FocusableTouchable,
@@ -977,6 +997,7 @@ var Topbar = ({
                 accessibilityHint: richAccount.accountHint ?? richAccount.displayName,
                 accessibilityLabel: richAccount.displayName,
                 ringColor: primaryColor,
+                style: navStyles.accountNameBtn,
                 testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
                 onPress: richAccount.onAccount,
                 children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
@@ -1846,7 +1867,61 @@ var NavShell = ({
     }
   );
 };
+
+// src/pillMenuLabel.ts
+function resolvePillMenuLabel(items, pathname, fallback) {
+  const activeRoute = resolveActiveRoute(items, pathname);
+  const active = items.find((item) => item.route === activeRoute);
+  return active?.label ?? fallback;
+}
 var TEXT_ON_PRIMARY4 = "#ffffff";
+var NO_ACTIVE_ROUTE2 = "";
+var PILL_MENU_MIN_WIDTH = 200;
+var PillNavMenu = ({
+  items,
+  pathname,
+  onNavigate,
+  regionLabel,
+  hint,
+  testID = NAV_TEST_IDS.pillNavMenu,
+  dropdownVariant
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const primaryColor = theme.palette.primary["500"];
+  const options = React.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
+  const activeRoute = resolveActiveRoute(items, pathname) ?? NO_ACTIVE_ROUTE2;
+  const label = resolvePillMenuLabel(items, pathname, regionLabel);
+  const optionTestID = React.useMemo(() => {
+    const byRoute = new Map(items.map((item) => [item.route, item.testID ?? item.key]));
+    return (route) => byRoute.get(route) ?? `${testID}-option-${route}`;
+  }, [items, testID]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    uiLayout.ModalDropdown,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      menuMinWidth: PILL_MENU_MIN_WIDTH,
+      optionTestID,
+      options,
+      testID,
+      value: activeRoute,
+      variant: dropdownVariant,
+      onChange: onNavigate,
+      renderTrigger: ({ isOpen }) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [pillNavStyles.pill, { backgroundColor: primaryColor }], children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [pillNavStyles.pillText, pillNavStyles.menuTriggerText, { color: TEXT_ON_PRIMARY4 }], children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [pillNavStyles.pillText, { color: TEXT_ON_PRIMARY4 }], children: isOpen ? "\u25B4" : "\u25BE" })
+      ] })
+    }
+  );
+};
+
+// src/PillNavVariant.ts
+var PillNavVariant = /* @__PURE__ */ ((PillNavVariant2) => {
+  PillNavVariant2["Pills"] = "pills";
+  PillNavVariant2["Menu"] = "menu";
+  return PillNavVariant2;
+})(PillNavVariant || {});
+var TEXT_ON_PRIMARY5 = "#ffffff";
 var DEFAULT_MIN_ITEMS = 1;
 var PillNav = ({
   items,
@@ -1855,12 +1930,29 @@ var PillNav = ({
   regionLabel,
   navigateHint = (label) => label,
   minItems = DEFAULT_MIN_ITEMS,
+  variant = "pills" /* Pills */,
+  menuHint,
+  menuTestID,
+  dropdownVariant,
   containerStyle
 }) => {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
   if (items.length < minItems) return null;
+  if (variant === "menu" /* Menu */)
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityRole: "none", "aria-label": regionLabel, role: "navigation", style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+      PillNavMenu,
+      {
+        dropdownVariant,
+        hint: menuHint ?? regionLabel,
+        items,
+        pathname,
+        regionLabel,
+        testID: menuTestID,
+        onNavigate
+      }
+    ) });
   const activeRoute = resolveActiveRoute(items, pathname);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
@@ -1871,7 +1963,7 @@ var PillNav = ({
       style: [pillNavStyles.container, containerStyle],
       children: items.map((item) => {
         const active = item.route === activeRoute;
-        const textColor = active ? TEXT_ON_PRIMARY4 : colors.textSecondary;
+        const textColor = active ? TEXT_ON_PRIMARY5 : colors.textSecondary;
         const pillStyle = active ? { backgroundColor: primaryColor } : { backgroundColor: colors.surfaceElevated };
         return /* @__PURE__ */ jsxRuntime.jsxs(
           FocusableTouchable,
@@ -1894,7 +1986,7 @@ var PillNav = ({
     }
   );
 };
-var TEXT_ON_PRIMARY5 = "#ffffff";
+var TEXT_ON_PRIMARY6 = "#ffffff";
 var DARK_MODE_ICON_SIZE = 16;
 var DarkModeControl = ({
   value,
@@ -1943,7 +2035,7 @@ var DarkModeControl = ({
       style: [darkModeStyles.segmentRow, { borderColor: colors.border }, containerStyle],
       children: options.map((option) => {
         const active = option.value === value;
-        const textColor = active ? TEXT_ON_PRIMARY5 : colors.textSecondary;
+        const textColor = active ? TEXT_ON_PRIMARY6 : colors.textSecondary;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           FocusableTouchable,
           {
@@ -2151,6 +2243,7 @@ exports.NavExpandableItem = NavExpandableItem;
 exports.NavOverflowMenu = NavOverflowMenu;
 exports.NavShell = NavShell;
 exports.PillNav = PillNav;
+exports.PillNavVariant = PillNavVariant;
 exports.RAIL_FULL_BREAKPOINT = RAIL_FULL_BREAKPOINT;
 exports.Sidebar = Sidebar;
 exports.SidebarChevron = SidebarChevron;
@@ -2168,6 +2261,7 @@ exports.navStyles = navStyles;
 exports.pillNavStyles = pillNavStyles;
 exports.resolveActiveRoute = resolveActiveRoute;
 exports.resolveContentMaxWidth = resolveContentMaxWidth;
+exports.resolvePillMenuLabel = resolvePillMenuLabel;
 exports.resolveRailMode = resolveRailMode;
 exports.resolveSearchAffordance = resolveSearchAffordance;
 exports.roleRoutesToNavItems = roleRoutesToNavItems;