@capra/core 1.11.0 → 1.12.0

package/dist/index.cjs

@@ -1063,8 +1063,8 @@ Collapse.displayName = "Collapse";
 //#endregion
 //#region src/components/InputRow/InputRow.module.css
 var InputRow_module_default = {
-	"addon": "capra-InputRow-module-6vZh0q-addon",
-	"row": "capra-InputRow-module-6vZh0q-row"
+	"addon": "capra-InputRow-module-hUHSXW-addon",
+	"row": "capra-InputRow-module-hUHSXW-row"
 };
 //#endregion
 //#region src/components/InputRow/InputRow.tsx
@@ -3300,7 +3300,7 @@ const VerticalNavigationContext = react.createContext(null);
 * Can be a link (if href is provided) or a button.
 * Supports icons, active state, and 'subItem' variant for indentation.
 */
-const Item = ({ as, icon, label, isActive, href, FORCE__className, isDisabled, onClick, variant = "default", rightElement, ...props }) => {
+const Item = ({ as, icon, label, isActive, href, FORCE__className, isDisabled, onClick, variant = "default", rightElement, DANGEROUS_DO_NOT_USE__after, ...props }) => {
 	if (!react.useContext(VerticalNavigationContext)) throw new Error("VerticalNavigation.Item must be used within VerticalNavigation");
 	const isLink = Boolean(href);
 	const Component = as ?? (isLink ? "a" : "button");
@@ -3350,7 +3350,7 @@ const Item = ({ as, icon, label, isActive, href, FORCE__className, isDisabled, o
 		variant: "body-sm-normal",
 		color: "inherit",
 		FORCE__className: VerticalNavigation_module_default.label
-	}, label), rightElement ? /* @__PURE__ */ react.createElement("span", { className: VerticalNavigation_module_default.right }, rightElement) : null));
+	}, label), rightElement ? /* @__PURE__ */ react.createElement("span", { className: VerticalNavigation_module_default.right }, rightElement) : null), DANGEROUS_DO_NOT_USE__after);
 };
 /**
 * A toggle button to collapse/expand the navigation.
@@ -4120,20 +4120,21 @@ const Toast = {
 //#endregion
 //#region src/components/Menu/Menu.module.css
 var Menu_module_default = {
-	"divider": "capra-Menu-module-3G4VeG-divider",
-	"header": "capra-Menu-module-3G4VeG-header",
-	"list": "capra-Menu-module-3G4VeG-list",
-	"menu": "capra-Menu-module-3G4VeG-menu",
-	"menuItem": "capra-Menu-module-3G4VeG-menuItem",
-	"menuItemDescription": "capra-Menu-module-3G4VeG-menuItemDescription",
-	"menuItemLabel": "capra-Menu-module-3G4VeG-menuItemLabel",
-	"menuItemLeadingGutter": "capra-Menu-module-3G4VeG-menuItemLeadingGutter",
-	"menuItemListItemShell": "capra-Menu-module-3G4VeG-menuItemListItemShell",
-	"menuItemShortcut": "capra-Menu-module-3G4VeG-menuItemShortcut",
-	"menuItemTrailingGroup": "capra-Menu-module-3G4VeG-menuItemTrailingGroup",
-	"menuItemTrailingGutter": "capra-Menu-module-3G4VeG-menuItemTrailingGutter",
-	"menuTriggerSlot": "capra-Menu-module-3G4VeG-menuTriggerSlot",
-	"section": "capra-Menu-module-3G4VeG-section"
+	"divider": "capra-Menu-module-HIhAFW-divider",
+	"header": "capra-Menu-module-HIhAFW-header",
+	"list": "capra-Menu-module-HIhAFW-list",
+	"menu": "capra-Menu-module-HIhAFW-menu",
+	"menuItem": "capra-Menu-module-HIhAFW-menuItem",
+	"menuItemDescription": "capra-Menu-module-HIhAFW-menuItemDescription",
+	"menuItemLabel": "capra-Menu-module-HIhAFW-menuItemLabel",
+	"menuItemLeadingGutter": "capra-Menu-module-HIhAFW-menuItemLeadingGutter",
+	"menuItemListItemShell": "capra-Menu-module-HIhAFW-menuItemListItemShell",
+	"menuItemShortcut": "capra-Menu-module-HIhAFW-menuItemShortcut",
+	"menuItemTrailingGroup": "capra-Menu-module-HIhAFW-menuItemTrailingGroup",
+	"menuItemTrailingGutter": "capra-Menu-module-HIhAFW-menuItemTrailingGutter",
+	"menuTriggerSlot": "capra-Menu-module-HIhAFW-menuTriggerSlot",
+	"section": "capra-Menu-module-HIhAFW-section",
+	"slot": "capra-Menu-module-HIhAFW-slot"
 };
 //#endregion
 //#region src/components/Menu/Menu.tsx
@@ -4223,7 +4224,7 @@ const MenuItem = ({ as: Component, label, description, ariaLabel, href, disabled
 	const labelContent = children ?? label;
 	const showDescription = description != null && description !== "";
 	const textValue = ariaLabel || (typeof label === "string" ? label : void 0) || (typeof children === "string" ? children : void 0) || "";
-	const listItemContent = /* @__PURE__ */ react.createElement(react.Fragment, null, (indent || icon) && /* @__PURE__ */ react.createElement(ListItem.Leading, { FORCE__className: icon ? Menu_module_default.menuItemLeadingGutter : void 0 }, icon && /* @__PURE__ */ react.createElement("span", { "aria-hidden": "true" }, icon)), /* @__PURE__ */ react.createElement(ListItem.Content, null, /* @__PURE__ */ react.createElement(ListItem.Label, null, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemLabel }, labelContent)), showDescription ? /* @__PURE__ */ react.createElement(ListItem.Description, null, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemDescription }, description)) : null), (shortcut || parent) && /* @__PURE__ */ react.createElement(ListItem.Trailing, { FORCE__className: Menu_module_default.menuItemTrailingGutter }, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemTrailingGroup }, [shortcut ? /* @__PURE__ */ react.createElement("span", {
+	const listItemContent = /* @__PURE__ */ react.createElement(react.Fragment, null, (indent || icon) && /* @__PURE__ */ react.createElement(ListItem.Leading, { FORCE__className: icon ? Menu_module_default.menuItemLeadingGutter : void 0 }, icon), /* @__PURE__ */ react.createElement(ListItem.Content, null, /* @__PURE__ */ react.createElement(ListItem.Label, null, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemLabel }, labelContent)), showDescription ? /* @__PURE__ */ react.createElement(ListItem.Description, null, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemDescription }, description)) : null), (shortcut || parent) && /* @__PURE__ */ react.createElement(ListItem.Trailing, { FORCE__className: Menu_module_default.menuItemTrailingGutter }, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemTrailingGroup }, [shortcut ? /* @__PURE__ */ react.createElement("span", {
 		key: "shortcut",
 		className: Menu_module_default.menuItemShortcut
 	}, shortcut) : null, parent ? /* @__PURE__ */ react.createElement(_capra_icons.ChevronRight, {
@@ -4251,7 +4252,8 @@ const MenuItem = ({ as: Component, label, description, ariaLabel, href, disabled
 		"data-has-description": showDescription || void 0,
 		render,
 		onClick,
-		onPress
+		onPress,
+		...rest
 	}, /* @__PURE__ */ react.createElement(ListItem, {
 		as: "div",
 		role: "presentation",
@@ -4293,7 +4295,6 @@ const MenuSubmenu = ({ label, children, itemHoverAppearance = "default", itemAct
 	}, listItemContent)), /* @__PURE__ */ react.createElement(PopoverSurface, {
 		placement: "rightTop",
 		isNonModal: true,
-		shouldFlip: false,
 		offsets: [0, 0],
 		removeContentPadding: true
 	}, /* @__PURE__ */ react.createElement("div", menuSessionId != null ? { [MENU_SESSION_DATA_ATTR]: menuSessionId } : {}, /* @__PURE__ */ react.createElement(react_aria_components.Menu, {
@@ -4361,7 +4362,7 @@ function MenuPanelFocusScope({ controlledOpen, children }) {
 		restoreFocus: true
 	}, children));
 }
-const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset = 0, trapFocus = false, FORCE__className: classNameOverride }) => {
+const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset = 2, trapFocus = false, FORCE__className: classNameOverride }) => {
 	const sessionId = react.useId();
 	const menuPanel = /* @__PURE__ */ react.createElement(react_aria_components.Menu, {
 		className: clsx(Menu_module_default.menu, classNameOverride),
@@ -4428,6 +4429,17 @@ var TabNav_module_default = {
 const SUB_KEY_SEP = "::";
 /** Delay before closing a subnav on pointer leave (hover), so users can move into the menu. */
 const HOVER_CLOSE_DELAY_MS = 150;
+function getRoutedLinkProps(source) {
+	return {
+		href: source.href,
+		hrefLang: source.hrefLang,
+		target: source.target,
+		rel: source.rel,
+		download: source.download,
+		referrerPolicy: source.referrerPolicy,
+		routerOptions: source.routerOptions
+	};
+}
 function optionalAriaLabelProps(source) {
 	const v = source["aria-label"];
 	return v != null && v !== "" ? { "aria-label": v } : {};
@@ -4437,7 +4449,7 @@ function optionalAriaLabelProps(source) {
 * Tab items are links that redirect to URLs. With `subItems`, horizontal tabs open a dropdown menu; vertical tabs
 * use an inline indented list (Tab Nav | Vertical in Figma).
 */
-const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", centered = false, tabBarExtraSlot, wrap = true, FORCE__className: classNameOverride, "aria-label": ariaLabel = "Navigation", ...props }) => {
+const TabNav = ({ activeKey, onTabPress, onTabClick, items, tabPlacement = "horizontal", centered = false, tabBarExtraSlot, wrap = true, FORCE__className: classNameOverride, "aria-label": ariaLabel = "Navigation", ...props }) => {
 	const [subMenuOpen, setSubMenuOpen] = react.useState({});
 	const hoverCloseTimeoutRef = react.useRef(null);
 	const pendingKeyboardFocusKeyRef = react.useRef(null);
@@ -4598,15 +4610,6 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 		getEnabledMenuItems,
 		getTriggerElement
 	]);
-	const handleTabClick = (key, event) => {
-		const item = items.find((i) => i.key === key);
-		if (item?.disabled) {
-			event.preventDefault();
-			return;
-		}
-		if (item?.subItems?.length) return;
-		onTabClick?.(key, event);
-	};
 	const handleKeyDown = (event, key) => {
 		const itemIndex = items.findIndex((i) => i.key === key);
 		if (itemIndex === -1) return;
@@ -4743,37 +4746,24 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 			}, item.subItems.map((sub) => {
 				const subActive = activeMainKey === item.key && activeSubKey === sub.key;
 				const compoundKey = `${item.key}${SUB_KEY_SEP}${sub.key}`;
-				const subCommon = {
+				return /* @__PURE__ */ react.createElement("li", {
+					key: sub.key,
+					className: TabNav_module_default.subTabListItem
+				}, /* @__PURE__ */ react.createElement(react_aria_components.Link, {
 					"data-tab-key": compoundKey,
 					"data-indent": true,
 					"data-variant": "default",
 					"data-active": subActive || void 0,
-					"data-disabled": sub.disabled || void 0,
 					id: `tabnav-${item.key}-${sub.key}`,
 					className: clsx(TabNav_module_default.tab, TabNav_module_default.subTab),
-					"aria-current": subActive ? "page" : void 0
-				};
-				if (sub.href && sub.disabled) return /* @__PURE__ */ react.createElement("li", {
-					key: sub.key,
-					className: TabNav_module_default.subTabListItem
-				}, /* @__PURE__ */ react.createElement("a", {
-					...subCommon,
-					...optionalAriaLabelProps(sub),
-					href: sub.href,
-					"aria-disabled": true,
-					tabIndex: -1,
-					onClick: (e) => e.preventDefault()
-				}, /* @__PURE__ */ react.createElement("span", {
-					className: TabNav_module_default.indentSpacer,
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ react.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
-				if (sub.href) return /* @__PURE__ */ react.createElement("li", {
-					key: sub.key,
-					className: TabNav_module_default.subTabListItem
-				}, /* @__PURE__ */ react.createElement("a", {
-					...subCommon,
+					"aria-current": subActive ? "page" : void 0,
 					...optionalAriaLabelProps(sub),
-					href: sub.href,
+					...getRoutedLinkProps(sub),
+					isDisabled: sub.disabled,
+					onPress: () => {
+						sub.onPress?.();
+						onTabPress?.(compoundKey);
+					},
 					onClick: (e) => {
 						sub.onClick?.(e);
 						onTabClick?.(compoundKey, e);
@@ -4783,26 +4773,6 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 					className: TabNav_module_default.indentSpacer,
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ react.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
-				return /* @__PURE__ */ react.createElement("li", {
-					key: sub.key,
-					className: TabNav_module_default.subTabListItem
-				}, /* @__PURE__ */ react.createElement("span", {
-					...subCommon,
-					...optionalAriaLabelProps(sub),
-					role: "link",
-					"aria-disabled": sub.disabled,
-					tabIndex: sub.disabled ? -1 : 0,
-					onKeyDown: (e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							sub.onClick?.(e);
-							onTabClick?.(compoundKey, e);
-						} else handleKeyDown(e, item.key);
-					}
-				}, /* @__PURE__ */ react.createElement("span", {
-					className: TabNav_module_default.indentSpacer,
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ react.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
 			})));
 		}
 		if (hasSubItems) {
@@ -4826,7 +4796,7 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 				itemActiveLabelSemibold: false,
 				panelPadding: "none",
 				popoverOffset: 1,
-				open: subMenuOpen[item.key],
+				open: Boolean(subMenuOpen[item.key]),
 				onOpenChange: (open) => {
 					if (open) {
 						openSubMenu(item.key);
@@ -4862,36 +4832,30 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 					ariaLabel: sub["aria-label"],
 					href: sub.href,
 					disabled: sub.disabled,
+					routerOptions: sub.routerOptions,
 					active: activeSubKey === sub.key,
+					onPress: () => {
+						sub.onPress?.();
+						onTabPress?.(`${item.key}${SUB_KEY_SEP}${sub.key}`);
+						closeMenu();
+					},
 					onClick: (e) => {
 						sub.onClick?.(e);
-						closeMenu();
+						onTabClick?.(`${item.key}${SUB_KEY_SEP}${sub.key}`, e);
 					}
 				});
 			}));
 		}
-		if (item.href && !item.disabled) return /* @__PURE__ */ react.createElement(react_aria_components.Link, {
+		return /* @__PURE__ */ react.createElement(react_aria_components.Link, {
 			key: item.key,
 			...commonTabProps,
-			href: item.href,
+			...getRoutedLinkProps(item),
+			isDisabled: item.disabled,
 			"aria-current": ariaCurrentPage ? "page" : void 0,
-			onClick: (e) => handleTabClick(item.key, e),
+			onPress: () => onTabPress?.(item.key),
+			onClick: (e) => onTabClick?.(item.key, e),
 			onKeyDown: (e) => handleKeyDown(e, item.key)
 		}, renderTabContent(item));
-		return /* @__PURE__ */ react.createElement("span", {
-			key: item.key,
-			...commonTabProps,
-			role: "link",
-			"aria-disabled": item.disabled,
-			"aria-current": ariaCurrentPage ? "page" : void 0,
-			tabIndex: item.disabled ? -1 : computedTabIndex ?? 0,
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					handleTabClick(item.key, e);
-				} else handleKeyDown(e, item.key);
-			}
-		}, renderTabContent(item));
 	})), tabBarExtraSlot && /* @__PURE__ */ react.createElement("div", { className: TabNav_module_default.extraContent }, tabBarExtraSlot)));
 };
 TabNav.displayName = "TabNav";

package/dist/index.d.cts

@@ -1378,6 +1378,11 @@ type VerticalNavigationItemBaseProps<As extends React$2.ElementType> = Omit<Reac
    * Text label for the item.
    */
   label: string;
+  /**
+   * DO NOT USE! Temporary workaround. This prop **will be removed** in an upcoming minor version.
+   * @deprecated
+   */
+  DANGEROUS_DO_NOT_USE__after?: React$2.ReactNode;
 };
 type VerticalNavigationDefaultItemProps<As extends React$2.ElementType> = VerticalNavigationItemBaseProps<As> & {
   /**
@@ -1404,7 +1409,7 @@ type VerticalNavigationItemProps<As extends React$2.ElementType> = VerticalNavig
  * Can be a link (if href is provided) or a button.
  * Supports icons, active state, and 'subItem' variant for indentation.
  */
-declare const Item: <As extends React$2.ElementType>({ as, icon, label, isActive, href, FORCE__className, isDisabled, onClick, variant, rightElement, ...props }: VerticalNavigationItemProps<As>) => React$2.JSX.Element;
+declare const Item: <As extends React$2.ElementType>({ as, icon, label, isActive, href, FORCE__className, isDisabled, onClick, variant, rightElement, DANGEROUS_DO_NOT_USE__after, ...props }: VerticalNavigationItemProps<As>) => React$2.JSX.Element;
 type VerticalNavigationCollapseProps = React$2.ButtonHTMLAttributes<HTMLButtonElement> & StylingOverrideProps;
 /**
  * A toggle button to collapse/expand the navigation.
@@ -1736,7 +1741,7 @@ declare const Toast: ToastAPI & {
 };
 //#endregion
 //#region src/components/Menu/Menu.d.ts
-type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.ComponentPropsWithoutRef<As>, 'className' | 'as' | 'children' | 'href' | 'onClick' | 'disabled' | 'type' | 'role'> & StylingOverrideProps & {
+type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.ComponentPropsWithoutRef<As>, 'className' | 'as' | 'children' | 'href' | 'onClick' | 'disabled' | 'type' | 'role'> & RoutedLinkProps & StylingOverrideProps & {
   /**
    * The component to use for the item. Default is either 'a' or 'button' based on the presence of the href prop.
    */
@@ -1753,10 +1758,6 @@ type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.Componen
    * Accessible name when it differs from the visible `label` (e.g. tab position and selection state). Passed to the menu item as `aria-label`.
    */
   ariaLabel?: string;
-  /**
-   * URL for the default native `<a>` (full document navigation). With `as={Link}` from your router, use that component’s props (`to`, `href`, …) instead or in addition.
-   */
-  href?: string;
   /**
    * Whether the item is disabled.
    */
@@ -1903,8 +1904,9 @@ interface MenuProps extends StylingOverrideProps {
   panelPadding?: 'default' | 'none';
   /**
    * Gap along the main axis between the trigger and the menu panel (React Aria `Popover` `offset`).
-   * Use a small value (e.g. 1) when the panel should clear a trigger underline/border (e.g. horizontal TabNav).
-   * @default 0
+   * Defaults to 2px to match `spacing.xs`; `Popover` positioning takes a number, so the token cannot be applied via CSS.
+   * Use a smaller value (e.g. 1) when the panel should clear a trigger underline/border (e.g. horizontal TabNav).
+   * @default 2
    */
   popoverOffset?: number;
   /**
@@ -1967,7 +1969,7 @@ declare const tabNavPlacements: readonly ['horizontal', 'vertical'];
 type TabNavPlacement = (typeof tabNavPlacements)[number];
 declare const tabNavItemVariants: readonly ['default', 'dropdown'];
 type TabNavItemVariant = (typeof tabNavItemVariants)[number];
-interface TabNavSubItemType {
+interface TabNavSubItemType extends RoutedLinkProps {
   /** Unique key for the sub-item. */
   key: string;
   /** Visible text in the submenu row (dropdown or vertical list). */
@@ -1978,10 +1980,17 @@ interface TabNavSubItemType {
   href?: string;
   /** Whether the sub-item is disabled. */
   disabled?: boolean;
-  /** Click handler. Use e.preventDefault() in demos to prevent navigation. */
+  /**
+   * Press handler.
+   */
+  onPress?: () => void;
+  /**
+   * Click handler. Use e.preventDefault() in demos to prevent navigation.
+   * @deprecated Use `onPress` instead.
+   */
   onClick?: (e: React$2.MouseEvent) => void;
 }
-interface TabNavItemType {
+interface TabNavItemType extends RoutedLinkProps {
   /**
    * Unique key for the tab.
    */
@@ -1990,11 +1999,6 @@ interface TabNavItemType {
   name: React$2.ReactNode;
   /** Optional accessible name for the tab (maps to `aria-label` on the control). */
   'aria-label'?: string;
-  /**
-   * Link URL. When provided, the tab navigates to this URL on click.
-   * Required for tabs without subItems.
-   */
-  href?: string;
   /**
    * Whether the tab is disabled.
    */
@@ -2023,8 +2027,13 @@ type TabNavProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLDivEle
    * Key of the currently active tab (for visual styling). Typically derived from the current URL.
    */
   activeKey?: string;
+  /**
+   * Callback when a tab link is pressed (before navigation).
+   */
+  onTabPress?: (key: string) => void;
   /**
    * Callback when a tab link is clicked (before navigation).
+   * @deprecated Use `onTabPress` instead.
    */
   onTabClick?: (key: string, event: React$2.MouseEvent) => void;
   /**
@@ -2051,7 +2060,7 @@ type TabNavProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLDivEle
    */
   wrap?: boolean;
 };
-declare function TabNav({ activeKey, onTabClick, items, tabPlacement, centered, tabBarExtraSlot, wrap, FORCE__className: classNameOverride, 'aria-label': ariaLabel, ...props }: TabNavProps): React$2.JSX.Element;
+declare function TabNav({ activeKey, onTabPress, onTabClick, items, tabPlacement, centered, tabBarExtraSlot, wrap, FORCE__className: classNameOverride, 'aria-label': ariaLabel, ...props }: TabNavProps): React$2.JSX.Element;
 declare namespace TabNav {
   var displayName: string;
 }

package/dist/index.d.mts

@@ -1378,6 +1378,11 @@ type VerticalNavigationItemBaseProps<As extends React$2.ElementType> = Omit<Reac
    * Text label for the item.
    */
   label: string;
+  /**
+   * DO NOT USE! Temporary workaround. This prop **will be removed** in an upcoming minor version.
+   * @deprecated
+   */
+  DANGEROUS_DO_NOT_USE__after?: React$2.ReactNode;
 };
 type VerticalNavigationDefaultItemProps<As extends React$2.ElementType> = VerticalNavigationItemBaseProps<As> & {
   /**
@@ -1404,7 +1409,7 @@ type VerticalNavigationItemProps<As extends React$2.ElementType> = VerticalNavig
  * Can be a link (if href is provided) or a button.
  * Supports icons, active state, and 'subItem' variant for indentation.
  */
-declare const Item: <As extends React$2.ElementType>({ as, icon, label, isActive, href, FORCE__className, isDisabled, onClick, variant, rightElement, ...props }: VerticalNavigationItemProps<As>) => React$2.JSX.Element;
+declare const Item: <As extends React$2.ElementType>({ as, icon, label, isActive, href, FORCE__className, isDisabled, onClick, variant, rightElement, DANGEROUS_DO_NOT_USE__after, ...props }: VerticalNavigationItemProps<As>) => React$2.JSX.Element;
 type VerticalNavigationCollapseProps = React$2.ButtonHTMLAttributes<HTMLButtonElement> & StylingOverrideProps;
 /**
  * A toggle button to collapse/expand the navigation.
@@ -1736,7 +1741,7 @@ declare const Toast: ToastAPI & {
 };
 //#endregion
 //#region src/components/Menu/Menu.d.ts
-type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.ComponentPropsWithoutRef<As>, 'className' | 'as' | 'children' | 'href' | 'onClick' | 'disabled' | 'type' | 'role'> & StylingOverrideProps & {
+type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.ComponentPropsWithoutRef<As>, 'className' | 'as' | 'children' | 'href' | 'onClick' | 'disabled' | 'type' | 'role'> & RoutedLinkProps & StylingOverrideProps & {
   /**
    * The component to use for the item. Default is either 'a' or 'button' based on the presence of the href prop.
    */
@@ -1753,10 +1758,6 @@ type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.Componen
    * Accessible name when it differs from the visible `label` (e.g. tab position and selection state). Passed to the menu item as `aria-label`.
    */
   ariaLabel?: string;
-  /**
-   * URL for the default native `<a>` (full document navigation). With `as={Link}` from your router, use that component’s props (`to`, `href`, …) instead or in addition.
-   */
-  href?: string;
   /**
    * Whether the item is disabled.
    */
@@ -1903,8 +1904,9 @@ interface MenuProps extends StylingOverrideProps {
   panelPadding?: 'default' | 'none';
   /**
    * Gap along the main axis between the trigger and the menu panel (React Aria `Popover` `offset`).
-   * Use a small value (e.g. 1) when the panel should clear a trigger underline/border (e.g. horizontal TabNav).
-   * @default 0
+   * Defaults to 2px to match `spacing.xs`; `Popover` positioning takes a number, so the token cannot be applied via CSS.
+   * Use a smaller value (e.g. 1) when the panel should clear a trigger underline/border (e.g. horizontal TabNav).
+   * @default 2
    */
   popoverOffset?: number;
   /**
@@ -1967,7 +1969,7 @@ declare const tabNavPlacements: readonly ['horizontal', 'vertical'];
 type TabNavPlacement = (typeof tabNavPlacements)[number];
 declare const tabNavItemVariants: readonly ['default', 'dropdown'];
 type TabNavItemVariant = (typeof tabNavItemVariants)[number];
-interface TabNavSubItemType {
+interface TabNavSubItemType extends RoutedLinkProps {
   /** Unique key for the sub-item. */
   key: string;
   /** Visible text in the submenu row (dropdown or vertical list). */
@@ -1978,10 +1980,17 @@ interface TabNavSubItemType {
   href?: string;
   /** Whether the sub-item is disabled. */
   disabled?: boolean;
-  /** Click handler. Use e.preventDefault() in demos to prevent navigation. */
+  /**
+   * Press handler.
+   */
+  onPress?: () => void;
+  /**
+   * Click handler. Use e.preventDefault() in demos to prevent navigation.
+   * @deprecated Use `onPress` instead.
+   */
   onClick?: (e: React$2.MouseEvent) => void;
 }
-interface TabNavItemType {
+interface TabNavItemType extends RoutedLinkProps {
   /**
    * Unique key for the tab.
    */
@@ -1990,11 +1999,6 @@ interface TabNavItemType {
   name: React$2.ReactNode;
   /** Optional accessible name for the tab (maps to `aria-label` on the control). */
   'aria-label'?: string;
-  /**
-   * Link URL. When provided, the tab navigates to this URL on click.
-   * Required for tabs without subItems.
-   */
-  href?: string;
   /**
    * Whether the tab is disabled.
    */
@@ -2023,8 +2027,13 @@ type TabNavProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLDivEle
    * Key of the currently active tab (for visual styling). Typically derived from the current URL.
    */
   activeKey?: string;
+  /**
+   * Callback when a tab link is pressed (before navigation).
+   */
+  onTabPress?: (key: string) => void;
   /**
    * Callback when a tab link is clicked (before navigation).
+   * @deprecated Use `onTabPress` instead.
    */
   onTabClick?: (key: string, event: React$2.MouseEvent) => void;
   /**
@@ -2051,7 +2060,7 @@ type TabNavProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLDivEle
    */
   wrap?: boolean;
 };
-declare function TabNav({ activeKey, onTabClick, items, tabPlacement, centered, tabBarExtraSlot, wrap, FORCE__className: classNameOverride, 'aria-label': ariaLabel, ...props }: TabNavProps): React$2.JSX.Element;
+declare function TabNav({ activeKey, onTabPress, onTabClick, items, tabPlacement, centered, tabBarExtraSlot, wrap, FORCE__className: classNameOverride, 'aria-label': ariaLabel, ...props }: TabNavProps): React$2.JSX.Element;
 declare namespace TabNav {
   var displayName: string;
 }