@dloizides/ui-nav 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## 1.7.0
+
+Two additive navigation capabilities on the horizontal bar, plus a unifying component.
+
+**Priority+ overflow ("…" menu) on `NavBar`.** Above the `collapseBelow` breakpoint the
+inline links sit on ONE non-wrapping row; when they don't all fit, a measure pass
+(`useNavOverflow` + the pure `computeVisibleCount`) keeps the leading items that fit inline
+and collapses the rest behind a **"More ▾"** trigger — the shared `@dloizides/ui-layout`
+`ModalDropdown`, so the overflow menu is portalled, keyboard-navigable, and dismissed on
+outside-click / Escape like every other menu. No item is ever cut off; the surplus simply
+moves into the dropdown. When the active route lives in the overflow set the trigger wears
+the accent pill so it stays visibly reachable. BELOW `collapseBelow` the whole set still
+collapses into the responsive hamburger drawer (the two mechanisms never overlap). Two new
+optional props localize the trigger: `overflowLabel` (visible + accessible, default `"More"`)
+and `overflowHint`. New `NAV_TEST_IDS.navBarOverflow` (`navbar-overflow`).
+
+**`Nav` — one component, two orientations.** `<Nav orientation="horizontal" />` renders the
+`NavBar`; `<Nav orientation="vertical" />` renders the `Sidebar` — from the SAME `NavItem[]`,
+so an app flips between a top bar and a side rail without swapping components. `orientation`
+defaults to `"horizontal"`; the remaining props are a discriminated union of the delegate's
+props (TypeScript enforces the right prop set per orientation). Vertical nav is the existing
+`Sidebar` (stacked, vertically scrolling — no overflow menu needed).
+
+**Backwards compatible.** Purely additive — `Sidebar`, `Topbar`, `NavBar`, `AppShell`, and
+the role-gating helpers keep their exact signatures; the new overflow props are optional
+(default `"More"` / `""`) so aml-v2 (the only `NavBar` consumer) and every `Sidebar`/`Topbar`
+consumer (erevna / katalogos / kefi / agora) are untouched. New exports (`Nav`, `NavProps`,
+`NavOrientation`, `NavOverflowMenu`, `NavOverflowMenuProps`, `NAV_LINK_GAP`) are additive.
+
+## 1.6.1
+
+Keep the expanded links on ONE row — the row must be `nowrap` so `flex-shrink` distributes
+negative space (a `wrap` row drops the right slot onto a 2nd line instead of shrinking the
+links). Renames the internal expanded links style to `linksRow` (grow + shrink-to-0,
+`minWidth:0`, `overflow:hidden`) with a per-link `linkCell` (never shrinks, so each link keeps
+its natural measured width). Brand + right stay pinned (`flexShrink:0`).
+
+## 1.6.0
+
+Keep the bar to ONE row — horizontal-scroll / clip the links instead of wrapping the bar
+onto a second line when brand + links + right slot overflow the available width.
+
 ## 1.5.0
 
 Make the `AppShell` back-office `sidebar` layout **responsive** — a mobile drawer.

package/README.md

@@ -68,9 +68,39 @@ import { NavBar, type NavItem } from '@dloizides/ui-nav';
   menuLabel={FM('menu.toggle')}               // a11y label for the hamburger
   menuHint={FM('menu.toggleHint')}
   collapseBelow={760}                          // hamburger under this viewport width
+  overflowLabel={FM('menu.more')}             // "More ▾" priority+ trigger label
+  overflowHint={FM('menu.moreHint')}
 />
 ```
 
+**Priority+ overflow ("…" menu).** Above `collapseBelow` the links sit on ONE
+non-wrapping row. When they don't all fit, a measure pass keeps the leading items
+that fit inline and collapses the rest behind a **"More ▾"** trigger — the shared
+`@dloizides/ui-layout` `ModalDropdown` — so no item is ever cut off; the surplus
+moves into a portalled, keyboard-navigable dropdown. If the active route lives in
+the overflow set, the trigger wears the accent pill so it stays reachable. Localize
+the trigger with the optional `overflowLabel` (visible + accessible, default `"More"`)
+and `overflowHint`. Below `collapseBelow` the whole set still collapses into the
+responsive hamburger drawer, so the two mechanisms never overlap.
+
+### One component, two orientations (`Nav`)
+
+`Nav` renders EITHER the horizontal `NavBar` or the vertical `Sidebar` from the same
+`NavItem[]`, chosen by a single `orientation` prop — flip between a top bar and a side
+rail without swapping components or re-plumbing props. `orientation` defaults to
+`"horizontal"`; the remaining props are a discriminated union of the delegate's props
+(TypeScript enforces the right set per orientation — e.g. `title` only on vertical,
+`collapseBelow` / `overflowLabel` only on horizontal).
+
+```tsx
+import { Nav, type NavItem } from '@dloizides/ui-nav';
+
+<Nav orientation="horizontal" items={items} pathname={p} onNavigate={go} regionLabel={r} />  // NavBar
+<Nav orientation="vertical"   items={items} pathname={p} onNavigate={go} title={t} regionLabel={r} />  // Sidebar
+```
+
+`Nav` is purely additive: `Sidebar` / `Topbar` / `NavBar` stay exported and unchanged.
+
 An app that renders a `Sidebar` today switches to a top bar by swapping the
 `Sidebar` element for `NavBar` (same `items` / `pathname` / `onNavigate`) — e.g.
 the AML v2 app drops `NavBar` into the `AppShell` `header` (or `nav`) slot so its

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
+import { DropdownVariant } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes, RoleRouteTable, RoleRoute } from '@dloizides/auth-web';
 
 /**
@@ -161,10 +162,19 @@ declare const Topbar: ({ left, language, notificationSlot, user, account, logout
  * hover bg=`surfaceElevated`, active=`palette.primary`, ring=`palette.primary`).
  * Hover/focus are web-only (react-native-web); native stays at the rest style.
  *
+ * Overflow ("…" priority+ menu). Above the `collapseBelow` breakpoint the links sit
+ * on ONE row; when they don't all fit, a measure pass ({@link useNavOverflow} +
+ * {@link computeVisibleCount}) keeps the leading items that fit inline and collapses
+ * the rest behind a "More ▾" trigger — the shared `ModalDropdown` (see
+ * {@link NavOverflowMenu}) — so no item is ever cut off. BELOW `collapseBelow` the
+ * whole set still collapses into the responsive hamburger drawer (all items stacked),
+ * so the two mechanisms don't overlap: hamburger for true mobile, "…" for the
+ * in-between desktop case where only SOME items spill.
+ *
  * Contract discipline (same as the rest of `@dloizides/ui-nav`): NO FM, router,
  * icon set, or store imports. Labels are pre-localized strings, icons are render
  * slots, and every colour is read from the theme. This is purely additive —
- * `Sidebar`/`Topbar` are unchanged.
+ * `Sidebar`/`Topbar` are unchanged and the new overflow labels are optional.
  */
 
 interface NavBarProps {
@@ -190,10 +200,118 @@ interface NavBarProps {
     renderMenuIcon?: (color: string, open: boolean) => React.ReactNode;
     /** Collapse the links behind a hamburger below this viewport width (default 760). */
     collapseBelow?: number;
+    /**
+     * Localized visible + accessible label for the "More ▾" overflow trigger shown when
+     * the inline links don't all fit on one row (priority+ menu). Defaults to `"More"`.
+     */
+    overflowLabel?: string;
+    /** Localized accessibility hint for the overflow trigger. */
+    overflowHint?: string;
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
 }
-declare const NavBar: ({ items, pathname, onNavigate, regionLabel, navigateHint, brand, right, menuLabel, menuHint, renderMenuIcon, collapseBelow, containerStyle, }: NavBarProps) => React.ReactElement;
+declare const NavBar: ({ items, pathname, onNavigate, regionLabel, navigateHint, brand, right, menuLabel, menuHint, renderMenuIcon, collapseBelow, overflowLabel, overflowHint, containerStyle, }: NavBarProps) => React.ReactElement;
+
+/**
+ * `Nav` — ONE component that renders EITHER the horizontal top bar (`NavBar`) or the
+ * vertical rail (`Sidebar`) from the same `NavItem[]`, chosen by a single
+ * `orientation` prop. It lets an app flip its navigation between a top bar and a side
+ * menu without swapping components or re-plumbing props:
+ *
+ *   <Nav orientation="horizontal" items={items} pathname={p} onNavigate={go} .../>  // NavBar
+ *   <Nav orientation="vertical"   items={items} pathname={p} onNavigate={go} .../>  // Sidebar
+ *
+ * `orientation` defaults to `"horizontal"`. The remaining props are exactly the
+ * delegate's props — a discriminated union — so TypeScript enforces the right prop
+ * set per orientation (e.g. `title` is required only for the vertical/Sidebar side,
+ * `collapseBelow` / `overflowLabel` only for the horizontal/NavBar side).
+ *
+ * `Nav` is purely additive: `NavBar` and `Sidebar` remain exported and unchanged, so
+ * every existing consumer (erevna / katalogos / kefi / agora) is untouched. Vertical
+ * navigation is the existing Sidebar — stacked links that scroll vertically, so it
+ * needs no overflow menu; the priority+ "…" overflow is a horizontal-bar concern.
+ */
+
+/** Which axis the navigation renders on. */
+type NavOrientation = 'horizontal' | 'vertical';
+type NavProps = ({
+    orientation?: 'horizontal';
+} & NavBarProps) | ({
+    orientation: 'vertical';
+} & SidebarProps);
+declare const Nav: (props: NavProps) => React.ReactElement;
+
+/**
+ * NavBarLink — a SINGLE horizontal `NavBar` link, extracted so each link owns its
+ * own hover/focus state (React hooks can't be per-item inside a map otherwise).
+ *
+ * It renders the v1 `.gn-links a` affordance, THEME-DRIVEN (no hard-coded colours
+ * beyond white ink on the accent pill):
+ *   - rest    → muted text (`colors.rest`), no background
+ *   - hover   → text brightens to full contrast (`colors.hoverText`) + a subtle
+ *               rounded-pill background (`colors.hoverBg`, e.g. v1 `#16223a`)
+ *   - active  → solid accent pill (`colors.activeBg`) with white ink + aria-current
+ *   - focus   → a themed keyboard focus ring (`colors.ring`)
+ * Hover/focus are WEB-only (react-native-web fires `onHoverIn/Out`); on native
+ * those handlers never fire, so the link stays at its rest style.
+ */
+
+/** Theme-resolved colours a link needs, computed once by `NavBar`. */
+interface NavBarLinkColors {
+    /** Muted link text at rest. */
+    rest: string;
+    /** Brightened link text on hover. */
+    hoverText: string;
+    /** Subtle hover-pill background. */
+    hoverBg: string;
+    /** Active-pill background (accent). */
+    activeBg: string;
+    /** Focus-ring colour. */
+    ring: string;
+}
+
+/**
+ * NavOverflowMenu — the "More ▾" trigger + dropdown that holds the `NavBar` items
+ * which don't fit inline (the priority+ overflow set).
+ *
+ * It REUSES the shared `@dloizides/ui-layout` `ModalDropdown` — the exact component
+ * every other menu in the app uses — so the overflow menu is portalled, keyboard
+ * navigable, dismissed on outside-click / Escape, and opens on click, looking
+ * identical to the rest of the app's menus. The overflow entries are the same
+ * `NavItem`s (label + route + active state); selecting one navigates via the same
+ * `onNavigate` the inline links use.
+ *
+ * The trigger is a rounded pill matching a `NavBarLink`: muted at rest, and — when
+ * the ACTIVE route lives in the overflow set — it wears the accent pill so the
+ * active item stays visibly reachable behind the "…". The dropdown marks that same
+ * item selected (its `value` is the active overflow route). a11y: `ModalDropdown`
+ * owns the trigger's `role="button"` + `aria-expanded` + caller-supplied label/hint,
+ * and gives the options keyboard navigation.
+ *
+ * Contract discipline (as the rest of `@dloizides/ui-nav`): no FM / router / icon
+ * set / store; the label + hint are pre-localized strings from the caller and every
+ * colour comes from the theme (via the `NavBarLinkColors` the `NavBar` computed).
+ */
+
+interface NavOverflowMenuProps {
+    /** The items that spilled out of the inline row. */
+    items: NavItem[];
+    /** Current active route/path — decides the active-pill + selected option. */
+    pathname: string;
+    /** Navigation callback — receives the chosen item's `route`. */
+    onNavigate: (route: string) => void;
+    /** Theme-resolved link colours (same set the inline links use). */
+    colors: NavBarLinkColors;
+    /** Localized visible + accessible label for the trigger (e.g. "More"). */
+    label: string;
+    /** Localized accessibility hint for the trigger. */
+    hint: string;
+    /** testID for the trigger (options default to `` `${testID}-option-${route}` ``). */
+    testID: string;
+    /** Force a dropdown variant (default: responsive — inline menu on desktop). */
+    variant?: DropdownVariant;
+}
+declare const NavOverflowMenu: ({ items, pathname, onNavigate, colors, label, hint, testID, variant, }: NavOverflowMenuProps) => React.ReactElement;
 
 /**
  * MobileDrawer — the below-the-breakpoint face of `AppShell`'s back-office
@@ -334,6 +452,8 @@ declare const NAV_TEST_IDS: {
     readonly navBarToggle: "navbar-toggle";
     /** links container in the horizontal NavBar. */
     readonly navBarLinks: "navbar-links";
+    /** the "More ▾" priority+ overflow trigger in the horizontal NavBar (shown when items spill). */
+    readonly navBarOverflow: "navbar-overflow";
 };
 /** Suffixes appended to an `AppShell`'s required `testID` to name its regions. */
 declare const APP_SHELL_SUFFIX: {
@@ -399,6 +519,13 @@ declare function roleRoutesToNavItems(routes: RoleRoute[], translate: (key: stri
 declare function accessibleNavItems(user: NavUser, table: RoleRouteTable, translate: (key: string) => string): NavItem[];
 
 declare const ACTIVE_BORDER_RADIUS = 4;
+/**
+ * Horizontal gap (px) between adjacent inline items in the `NavBar` links row.
+ * Single source of truth: it is both the row's `columnGap` AND the gap the
+ * priority+ overflow fit ({@link computeVisibleCount}) reasons about, so the two
+ * can never drift apart.
+ */
+declare const NAV_LINK_GAP = 4;
 declare const navStyles: {
     sidebarContainer: {
         width: number;
@@ -521,4 +648,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, NAV_ICON_SIZE, NAV_TEST_IDS, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavUser, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, expandableStyles, isRouteActive, navStyles, resolveContentMaxWidth, roleRoutesToNavItems, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, type NavUser, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, expandableStyles, isRouteActive, navStyles, resolveContentMaxWidth, roleRoutesToNavItems, useContentMaxWidth };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
+import { DropdownVariant } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes, RoleRouteTable, RoleRoute } from '@dloizides/auth-web';
 
 /**
@@ -161,10 +162,19 @@ declare const Topbar: ({ left, language, notificationSlot, user, account, logout
  * hover bg=`surfaceElevated`, active=`palette.primary`, ring=`palette.primary`).
  * Hover/focus are web-only (react-native-web); native stays at the rest style.
  *
+ * Overflow ("…" priority+ menu). Above the `collapseBelow` breakpoint the links sit
+ * on ONE row; when they don't all fit, a measure pass ({@link useNavOverflow} +
+ * {@link computeVisibleCount}) keeps the leading items that fit inline and collapses
+ * the rest behind a "More ▾" trigger — the shared `ModalDropdown` (see
+ * {@link NavOverflowMenu}) — so no item is ever cut off. BELOW `collapseBelow` the
+ * whole set still collapses into the responsive hamburger drawer (all items stacked),
+ * so the two mechanisms don't overlap: hamburger for true mobile, "…" for the
+ * in-between desktop case where only SOME items spill.
+ *
  * Contract discipline (same as the rest of `@dloizides/ui-nav`): NO FM, router,
  * icon set, or store imports. Labels are pre-localized strings, icons are render
  * slots, and every colour is read from the theme. This is purely additive —
- * `Sidebar`/`Topbar` are unchanged.
+ * `Sidebar`/`Topbar` are unchanged and the new overflow labels are optional.
  */
 
 interface NavBarProps {
@@ -190,10 +200,118 @@ interface NavBarProps {
     renderMenuIcon?: (color: string, open: boolean) => React.ReactNode;
     /** Collapse the links behind a hamburger below this viewport width (default 760). */
     collapseBelow?: number;
+    /**
+     * Localized visible + accessible label for the "More ▾" overflow trigger shown when
+     * the inline links don't all fit on one row (priority+ menu). Defaults to `"More"`.
+     */
+    overflowLabel?: string;
+    /** Localized accessibility hint for the overflow trigger. */
+    overflowHint?: string;
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
 }
-declare const NavBar: ({ items, pathname, onNavigate, regionLabel, navigateHint, brand, right, menuLabel, menuHint, renderMenuIcon, collapseBelow, containerStyle, }: NavBarProps) => React.ReactElement;
+declare const NavBar: ({ items, pathname, onNavigate, regionLabel, navigateHint, brand, right, menuLabel, menuHint, renderMenuIcon, collapseBelow, overflowLabel, overflowHint, containerStyle, }: NavBarProps) => React.ReactElement;
+
+/**
+ * `Nav` — ONE component that renders EITHER the horizontal top bar (`NavBar`) or the
+ * vertical rail (`Sidebar`) from the same `NavItem[]`, chosen by a single
+ * `orientation` prop. It lets an app flip its navigation between a top bar and a side
+ * menu without swapping components or re-plumbing props:
+ *
+ *   <Nav orientation="horizontal" items={items} pathname={p} onNavigate={go} .../>  // NavBar
+ *   <Nav orientation="vertical"   items={items} pathname={p} onNavigate={go} .../>  // Sidebar
+ *
+ * `orientation` defaults to `"horizontal"`. The remaining props are exactly the
+ * delegate's props — a discriminated union — so TypeScript enforces the right prop
+ * set per orientation (e.g. `title` is required only for the vertical/Sidebar side,
+ * `collapseBelow` / `overflowLabel` only for the horizontal/NavBar side).
+ *
+ * `Nav` is purely additive: `NavBar` and `Sidebar` remain exported and unchanged, so
+ * every existing consumer (erevna / katalogos / kefi / agora) is untouched. Vertical
+ * navigation is the existing Sidebar — stacked links that scroll vertically, so it
+ * needs no overflow menu; the priority+ "…" overflow is a horizontal-bar concern.
+ */
+
+/** Which axis the navigation renders on. */
+type NavOrientation = 'horizontal' | 'vertical';
+type NavProps = ({
+    orientation?: 'horizontal';
+} & NavBarProps) | ({
+    orientation: 'vertical';
+} & SidebarProps);
+declare const Nav: (props: NavProps) => React.ReactElement;
+
+/**
+ * NavBarLink — a SINGLE horizontal `NavBar` link, extracted so each link owns its
+ * own hover/focus state (React hooks can't be per-item inside a map otherwise).
+ *
+ * It renders the v1 `.gn-links a` affordance, THEME-DRIVEN (no hard-coded colours
+ * beyond white ink on the accent pill):
+ *   - rest    → muted text (`colors.rest`), no background
+ *   - hover   → text brightens to full contrast (`colors.hoverText`) + a subtle
+ *               rounded-pill background (`colors.hoverBg`, e.g. v1 `#16223a`)
+ *   - active  → solid accent pill (`colors.activeBg`) with white ink + aria-current
+ *   - focus   → a themed keyboard focus ring (`colors.ring`)
+ * Hover/focus are WEB-only (react-native-web fires `onHoverIn/Out`); on native
+ * those handlers never fire, so the link stays at its rest style.
+ */
+
+/** Theme-resolved colours a link needs, computed once by `NavBar`. */
+interface NavBarLinkColors {
+    /** Muted link text at rest. */
+    rest: string;
+    /** Brightened link text on hover. */
+    hoverText: string;
+    /** Subtle hover-pill background. */
+    hoverBg: string;
+    /** Active-pill background (accent). */
+    activeBg: string;
+    /** Focus-ring colour. */
+    ring: string;
+}
+
+/**
+ * NavOverflowMenu — the "More ▾" trigger + dropdown that holds the `NavBar` items
+ * which don't fit inline (the priority+ overflow set).
+ *
+ * It REUSES the shared `@dloizides/ui-layout` `ModalDropdown` — the exact component
+ * every other menu in the app uses — so the overflow menu is portalled, keyboard
+ * navigable, dismissed on outside-click / Escape, and opens on click, looking
+ * identical to the rest of the app's menus. The overflow entries are the same
+ * `NavItem`s (label + route + active state); selecting one navigates via the same
+ * `onNavigate` the inline links use.
+ *
+ * The trigger is a rounded pill matching a `NavBarLink`: muted at rest, and — when
+ * the ACTIVE route lives in the overflow set — it wears the accent pill so the
+ * active item stays visibly reachable behind the "…". The dropdown marks that same
+ * item selected (its `value` is the active overflow route). a11y: `ModalDropdown`
+ * owns the trigger's `role="button"` + `aria-expanded` + caller-supplied label/hint,
+ * and gives the options keyboard navigation.
+ *
+ * Contract discipline (as the rest of `@dloizides/ui-nav`): no FM / router / icon
+ * set / store; the label + hint are pre-localized strings from the caller and every
+ * colour comes from the theme (via the `NavBarLinkColors` the `NavBar` computed).
+ */
+
+interface NavOverflowMenuProps {
+    /** The items that spilled out of the inline row. */
+    items: NavItem[];
+    /** Current active route/path — decides the active-pill + selected option. */
+    pathname: string;
+    /** Navigation callback — receives the chosen item's `route`. */
+    onNavigate: (route: string) => void;
+    /** Theme-resolved link colours (same set the inline links use). */
+    colors: NavBarLinkColors;
+    /** Localized visible + accessible label for the trigger (e.g. "More"). */
+    label: string;
+    /** Localized accessibility hint for the trigger. */
+    hint: string;
+    /** testID for the trigger (options default to `` `${testID}-option-${route}` ``). */
+    testID: string;
+    /** Force a dropdown variant (default: responsive — inline menu on desktop). */
+    variant?: DropdownVariant;
+}
+declare const NavOverflowMenu: ({ items, pathname, onNavigate, colors, label, hint, testID, variant, }: NavOverflowMenuProps) => React.ReactElement;
 
 /**
  * MobileDrawer — the below-the-breakpoint face of `AppShell`'s back-office
@@ -334,6 +452,8 @@ declare const NAV_TEST_IDS: {
     readonly navBarToggle: "navbar-toggle";
     /** links container in the horizontal NavBar. */
     readonly navBarLinks: "navbar-links";
+    /** the "More ▾" priority+ overflow trigger in the horizontal NavBar (shown when items spill). */
+    readonly navBarOverflow: "navbar-overflow";
 };
 /** Suffixes appended to an `AppShell`'s required `testID` to name its regions. */
 declare const APP_SHELL_SUFFIX: {
@@ -399,6 +519,13 @@ declare function roleRoutesToNavItems(routes: RoleRoute[], translate: (key: stri
 declare function accessibleNavItems(user: NavUser, table: RoleRouteTable, translate: (key: string) => string): NavItem[];
 
 declare const ACTIVE_BORDER_RADIUS = 4;
+/**
+ * Horizontal gap (px) between adjacent inline items in the `NavBar` links row.
+ * Single source of truth: it is both the row's `columnGap` AND the gap the
+ * priority+ overflow fit ({@link computeVisibleCount}) reasons about, so the two
+ * can never drift apart.
+ */
+declare const NAV_LINK_GAP = 4;
 declare const navStyles: {
     sidebarContainer: {
         width: number;
@@ -521,4 +648,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, NAV_ICON_SIZE, NAV_TEST_IDS, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavUser, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, expandableStyles, isRouteActive, navStyles, resolveContentMaxWidth, roleRoutesToNavItems, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, type NavUser, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, expandableStyles, isRouteActive, navStyles, resolveContentMaxWidth, roleRoutesToNavItems, useContentMaxWidth };