@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/components/nav-bar/nav-bar.js

@@ -6,13 +6,13 @@ import { Button } from "../../core/button.js";
 import { useIsMobile } from "../../core/hooks/use-mobile.js";
 import { useNavBarOverflow } from "./use-nav-bar-overflow.js";
 import { useNavBarScroll } from "./use-nav-bar-scroll.js";
+import { useNavBarHoverDetails } from "./use-nav-bar-hover-details.js";
 import { NavBarDetailsPanel } from "./nav-bar-details-panel.js";
 import { NavBarMobileMenu } from "./nav-bar-mobile-menu.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, Menu, X } from "lucide-react";
-import { motion } from "motion/react";
-import { createPortal } from "react-dom";
+import { LayoutGroup, motion } from "motion/react";
+import { ChevronDown, Menu } from "lucide-react";
 //#region src/components/nav-bar/nav-bar.tsx
 var PRESET_TEXT = {
 	primary: "text-primary",
@@ -74,7 +74,9 @@ function resolveNavColor(color) {
 		bgStyle: { backgroundColor: `color-mix(in srgb, ${color} 10%, transparent)` }
 	};
 }
-function NavBar({ logo, items, rightContent, activeId: activeIdProp, defaultActiveId, onActiveChange, openDetailsId: openDetailsIdProp, onDetailsPanelChange, position = "sticky", height, morphOnScroll = false, morphScrollThreshold = 50, morphScrollContainer, moreLabel = "More", linkComponent, color = "primary", mobileMenuTitle, mobileMenuTrigger, className, itemsClassName }) {
+var PILL_PANEL_RADIUS = 24;
+var TRANSLUCENT_BACKGROUND = "backdrop-blur-md supports-[backdrop-filter]:bg-background/80";
+function NavBar({ logo, items, rightContent, activeId: activeIdProp, defaultActiveId, onActiveChange, openDetailsId: openDetailsIdProp, onDetailsPanelChange, openDetailsOn = "click", position = "sticky", height, morphOnScroll = false, morphScrollThreshold = 50, morphScrollContainer, moreLabel = "More", linkComponent, color = "primary", mobileMenuTitle, mobileMenuTrigger, className, topClassName, topBackground = "translucent", itemsClassName }) {
 	const isMobile = useIsMobile();
 	const resolvedColor = resolveNavColor(color);
 	const navRef = React$1.useRef(null);
@@ -89,49 +91,113 @@ function NavBar({ logo, items, rightContent, activeId: activeIdProp, defaultActi
 		onChange: onDetailsPanelChange
 	});
 	const [mobileMenuOpen, setMobileMenuOpen] = React$1.useState(false);
-	const [navRect, setNavRect] = React$1.useState({
+	const hoverDetails = openDetailsOn === "hover" && !isMobile;
+	const { triggerHandlers, panelHandlers, clearTimers } = useNavBarHoverDetails({
+		enabled: hoverDetails,
+		openDetailsId,
+		setOpenDetailsId
+	});
+	const focusPanelOnOpen = React$1.useRef(false);
+	const [frame, setFrame] = React$1.useState({
 		bottom: 0,
+		left: 0,
 		width: 0,
-		left: 0
+		borderWidth: "0px",
+		borderColor: "transparent",
+		radius: 0
 	});
-	const { containerRef, measureRef, moreButtonMeasureRef, visibleIds, overflowIds, showMore, measuring } = useNavBarOverflow(items);
+	const panelRef = React$1.useRef(null);
+	const [panelVisible, setPanelVisible] = React$1.useState(false);
+	const [barHeight, setBarHeight] = React$1.useState(0);
+	const { containerRef, measureRef, moreButtonMeasureRef, visibleIds, overflowIds, showMore, measuring } = useNavBarOverflow(items, !isMobile);
 	const { isScrolled } = useNavBarScroll({
 		enabled: morphOnScroll && !isMobile,
 		threshold: morphScrollThreshold,
 		scrollContainerRef: morphScrollContainer
 	});
+	const { isScrolled: isPastTop } = useNavBarScroll({
+		enabled: Boolean(topClassName),
+		threshold: morphScrollThreshold,
+		scrollContainerRef: morphScrollContainer
+	});
+	const atTop = Boolean(topClassName) && !isPastTop;
+	const atTopClassName = atTop ? topClassName : void 0;
+	const isPill = isScrolled && morphOnScroll && !isMobile;
+	const background = panelVisible && !isPill || atTop && topBackground === "solid" ? "bg-background" : TRANSLUCENT_BACKGROUND;
+	const pillRadius = barHeight > 0 ? barHeight / 2 : 9999;
 	React$1.useEffect(() => {
-		if (!openDetailsId || !navRef.current) return;
-		const updateRect = () => {
-			if (navRef.current) {
-				const rect = navRef.current.getBoundingClientRect();
-				setNavRect({
-					bottom: rect.bottom,
-					width: rect.width,
-					left: rect.left
-				});
-			}
-		};
-		updateRect();
-		window.addEventListener("scroll", updateRect, { passive: true });
-		window.addEventListener("resize", updateRect, { passive: true });
+		if (openDetailsId) setPanelVisible(true);
+	}, [openDetailsId]);
+	const updateFrame = React$1.useCallback(() => {
+		const nav = navRef.current;
+		if (!nav) return;
+		const rect = nav.getBoundingClientRect();
+		const style = getComputedStyle(nav);
+		const hasSideBorder = parseFloat(style.borderLeftWidth) > 0;
+		setFrame({
+			bottom: rect.bottom,
+			left: rect.left,
+			width: rect.width,
+			borderWidth: hasSideBorder ? style.borderLeftWidth : style.borderBottomWidth,
+			borderColor: hasSideBorder ? style.borderLeftColor : style.borderBottomColor,
+			radius: isPill ? PILL_PANEL_RADIUS : Math.min(parseFloat(style.borderTopLeftRadius) || PILL_PANEL_RADIUS, PILL_PANEL_RADIUS)
+		});
+	}, [isPill]);
+	React$1.useEffect(() => {
+		const nav = navRef.current;
+		if (!openDetailsId || !nav) return;
+		updateFrame();
+		window.addEventListener("scroll", updateFrame, {
+			passive: true,
+			capture: true
+		});
+		window.addEventListener("resize", updateFrame, { passive: true });
+		const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updateFrame);
+		ro?.observe(nav);
 		return () => {
-			window.removeEventListener("scroll", updateRect);
-			window.removeEventListener("resize", updateRect);
+			window.removeEventListener("scroll", updateFrame, { capture: true });
+			window.removeEventListener("resize", updateFrame);
+			ro?.disconnect();
 		};
-	}, [openDetailsId]);
+	}, [openDetailsId, updateFrame]);
+	React$1.useEffect(() => {
+		const nav = navRef.current;
+		if (!morphOnScroll || !nav || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(() => setBarHeight(nav.offsetHeight));
+		ro.observe(nav);
+		setBarHeight(nav.offsetHeight);
+		return () => ro.disconnect();
+	}, [morphOnScroll, isMobile]);
 	React$1.useEffect(() => {
 		if (!openDetailsId) return;
 		const handleKeyDown = (e) => {
-			if (e.key === "Escape") setOpenDetailsId(null);
+			if (e.key === "Escape") {
+				if (panelRef.current?.contains(document.activeElement)) {
+					const triggers = navRef.current?.querySelectorAll("[data-nav-details-trigger]") ?? [];
+					Array.from(triggers).find((el) => el.dataset.navDetailsTrigger === openDetailsId)?.focus();
+				}
+				clearTimers();
+				setOpenDetailsId(null);
+			}
 		};
 		document.addEventListener("keydown", handleKeyDown);
 		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [openDetailsId, setOpenDetailsId]);
+	}, [
+		openDetailsId,
+		setOpenDetailsId,
+		clearTimers
+	]);
+	React$1.useEffect(() => {
+		if (!openDetailsId || !focusPanelOnOpen.current) return;
+		focusPanelOnOpen.current = false;
+		panelRef.current?.querySelector("a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex=\"-1\"])")?.focus();
+	}, [openDetailsId]);
 	React$1.useEffect(() => {
 		if (!openDetailsId) return;
 		const handleMouseDown = (e) => {
-			if (navRef.current && !navRef.current.contains(e.target)) setOpenDetailsId(null);
+			const target = e.target;
+			if (navRef.current?.contains(target) || panelRef.current?.contains(target) || target.closest?.("[data-radix-popper-content-wrapper]")) return;
+			setOpenDetailsId(null);
 		};
 		document.addEventListener("mousedown", handleMouseDown);
 		return () => document.removeEventListener("mousedown", handleMouseDown);
@@ -146,51 +212,48 @@ function NavBar({ logo, items, rightContent, activeId: activeIdProp, defaultActi
 		setActiveId,
 		setOpenDetailsId
 	]);
+	const handleHoverLinkClick = React$1.useCallback((item) => {
+		item.onClick?.();
+		setActiveId(item.id);
+		clearTimers();
+		setOpenDetailsId(null);
+	}, [
+		setActiveId,
+		setOpenDetailsId,
+		clearTimers
+	]);
+	const handleHoverLinkKeyDown = React$1.useCallback((item, e) => {
+		if (e.key !== "ArrowDown") return;
+		e.preventDefault();
+		clearTimers();
+		focusPanelOnOpen.current = true;
+		setOpenDetailsId(item.id);
+	}, [setOpenDetailsId, clearTimers]);
 	React$1.useEffect(() => {
-		if (isMobile) setOpenDetailsId(null);
+		if (isMobile) {
+			setOpenDetailsId(null);
+			setPanelVisible(false);
+		}
 	}, [isMobile, setOpenDetailsId]);
 	const resolvedHeight = height ?? "var(--espd-navbar-height)";
 	const activeDetailsItem = openDetailsId ? items.find((i) => i.id === openDetailsId) : void 0;
-	const [overflowDetailsItem, setOverflowDetailsItem] = React$1.useState(null);
-	const overflowDetailsRef = React$1.useRef(null);
-	const moreButtonRef = React$1.useRef(null);
-	const [overflowPanelPos, setOverflowPanelPos] = React$1.useState({
-		top: 0,
-		right: 0
-	});
-	React$1.useEffect(() => {
-		if (!overflowDetailsItem || !moreButtonRef.current) return;
-		const rect = moreButtonRef.current.getBoundingClientRect();
-		setOverflowPanelPos({
-			top: rect.bottom + 8,
-			right: window.innerWidth - rect.right
-		});
-	}, [overflowDetailsItem]);
-	React$1.useEffect(() => {
-		if (!overflowDetailsItem) return;
-		const handleMouseDown = (e) => {
-			if (overflowDetailsRef.current && !overflowDetailsRef.current.contains(e.target) && moreButtonRef.current && !moreButtonRef.current.contains(e.target)) setOverflowDetailsItem(null);
-		};
-		const handleKeyDown = (e) => {
-			if (e.key === "Escape") setOverflowDetailsItem(null);
-		};
-		document.addEventListener("mousedown", handleMouseDown);
-		document.addEventListener("keydown", handleKeyDown);
-		return () => {
-			document.removeEventListener("mousedown", handleMouseDown);
-			document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, [overflowDetailsItem]);
+	const detailsDirection = useDetailsDirection(items, openDetailsId ?? null);
+	const highlightId = React$1.useId();
 	const hasActiveOverflowItem = overflowIds.some((id) => id === activeId);
-	const navClasses = cn("relative z-50 w-full", "backdrop-blur-md supports-[backdrop-filter]:bg-background/80", position === "sticky" && "sticky", position === "fixed" && "fixed left-0", morphOnScroll && "mx-auto overflow-hidden", isScrolled && morphOnScroll ? "border border-header-border" : "border-b border-header-border", className);
+	const isOverflowDetailsOpen = openDetailsId != null && overflowIds.includes(openDetailsId);
+	const navClasses = cn("relative z-50 w-full transition-[color,background-color,border-color,box-shadow] duration-300", background, position === "sticky" && "sticky", position === "fixed" && "fixed left-0", morphOnScroll && "mx-auto overflow-hidden", isScrolled && morphOnScroll ? "border border-header-border" : "border-b border-header-border", className, atTopClassName, panelVisible && "rounded-b-none border-b-border/60", isScrolled && morphOnScroll && "shadow-[shadow:var(--espd-elevation-navbar,var(--espd-elevation-overlay,var(--shadow-lg)))]", isScrolled && morphOnScroll && panelVisible && "[clip-path:inset(-80px_-80px_0_-80px)]");
+	const topRadius = isScrolled ? panelVisible ? PILL_PANEL_RADIUS : pillRadius : 0;
 	const morphAnimateProps = morphOnScroll ? {
 		initial: false,
 		animate: {
 			maxWidth: isScrolled ? 896 : 3e3,
-			borderRadius: isScrolled ? 9999 : 0,
-			top: isScrolled ? 12 : 0,
-			boxShadow: isScrolled ? "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)" : "0 0 0 0 rgba(0,0,0,0)"
+			borderTopLeftRadius: topRadius,
+			borderTopRightRadius: topRadius,
+			borderBottomLeftRadius: panelVisible ? 0 : topRadius,
+			borderBottomRightRadius: panelVisible ? 0 : topRadius,
+			top: isScrolled ? 12 : 0
 		},
+		onUpdate: openDetailsId ? updateFrame : void 0,
 		transition: {
 			type: "spring",
 			stiffness: 300,
@@ -199,7 +262,7 @@ function NavBar({ logo, items, rightContent, activeId: activeIdProp, defaultActi
 	} : { style: { top: 0 } };
 	if (isMobile) return /* @__PURE__ */ jsxs("nav", {
 		ref: navRef,
-		className: cn("relative z-50 w-full border-b border-header-border", "backdrop-blur-md supports-[backdrop-filter]:bg-background/80", position === "sticky" && "sticky top-0", position === "fixed" && "fixed top-0 left-0", className),
+		className: cn("relative z-50 w-full border-b border-header-border", background, position === "sticky" && "sticky top-0", position === "fixed" && "fixed top-0 left-0", className, atTopClassName),
 		"aria-label": "Main navigation",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-3 px-4",
@@ -247,6 +310,7 @@ function NavBar({ logo, items, rightContent, activeId: activeIdProp, defaultActi
 	return /* @__PURE__ */ jsxs(motion.nav, {
 		ref: navRef,
 		className: navClasses,
+		"data-details-open": panelVisible ? "" : void 0,
 		...morphAnimateProps,
 		"aria-label": "Main navigation",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -286,74 +350,68 @@ function NavBar({ logo, items, rightContent, activeId: activeIdProp, defaultActi
 								hasActiveOverflowItem: false
 							})
 						}),
-						/* @__PURE__ */ jsx("ul", {
-							className: cn("flex items-center gap-1 list-none m-0 p-0", measuring && "opacity-0"),
-							role: "menubar",
-							"aria-label": "Main navigation",
-							children: items.filter((item) => visibleIds.includes(item.id)).map((item) => /* @__PURE__ */ jsx("li", {
-								role: "none",
-								className: "shrink-0",
-								children: /* @__PURE__ */ jsx(NavBarItemTrigger, {
-									item,
-									isActive: activeId === item.id,
-									isDetailsOpen: openDetailsId === item.id,
-									onClick: () => handleItemClick(item),
-									linkComponent,
-									resolvedColor,
-									isPill: isScrolled && morphOnScroll
+						/* @__PURE__ */ jsx(LayoutGroup, {
+							id: highlightId,
+							children: /* @__PURE__ */ jsx("ul", {
+								className: cn("flex items-center gap-1 list-none m-0 p-0", measuring && "opacity-0"),
+								role: "menubar",
+								"aria-label": "Main navigation",
+								children: items.filter((item) => visibleIds.includes(item.id)).map((item) => {
+									const hoverLink = hoverDetails && Boolean(item.details && item.href);
+									return /* @__PURE__ */ jsx("li", {
+										role: "none",
+										className: "shrink-0",
+										children: /* @__PURE__ */ jsx(NavBarItemTrigger, {
+											item,
+											isActive: activeId === item.id,
+											isDetailsOpen: openDetailsId === item.id,
+											onClick: () => hoverLink ? handleHoverLinkClick(item) : handleItemClick(item),
+											linkComponent,
+											resolvedColor,
+											isPill: isScrolled && morphOnScroll,
+											detailsAsLink: hoverLink,
+											highlightLayoutId: hoverDetails ? void 0 : `${highlightId}-details-highlight`,
+											plainHover: hoverDetails,
+											hoverHandlers: item.details ? triggerHandlers(item.id) : void 0,
+											onKeyDown: hoverLink ? (e) => handleHoverLinkKeyDown(item, e) : void 0
+										})
+									}, item.id);
 								})
-							}, item.id))
+							})
 						}),
 						showMore && /* @__PURE__ */ jsx("div", {
-							ref: moreButtonRef,
 							className: cn("shrink-0 ml-1", measuring && "opacity-0"),
-							children: /* @__PURE__ */ jsxs(DropdownMenu, {
-								onOpenChange: (open) => {
-									if (open) setOverflowDetailsItem(null);
-								},
-								children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-									asChild: true,
-									children: /* @__PURE__ */ jsx(MoreButton, {
-										label: moreLabel,
-										hasActiveOverflowItem,
-										resolvedColor
-									})
-								}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-									align: "end",
-									sideOffset: 8,
-									children: items.filter((item) => overflowIds.includes(item.id)).map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-										onClick: () => {
-											item.onClick?.();
-											setActiveId(item.id);
-											setOpenDetailsId(null);
-											if (item.details) setOverflowDetailsItem(overflowDetailsItem?.id === item.id ? null : item);
-										},
-										className: cn(activeId === item.id && `${resolvedColor.textClass} ${resolvedColor.bgClass}`),
-										style: activeId === item.id && resolvedColor.textStyle ? {
-											...resolvedColor.textStyle,
-											...resolvedColor.bgStyle
-										} : void 0,
-										disabled: item.disabled,
-										children: [item.icon, item.label]
-									}, item.id))
-								})]
-							})
-						}),
-						overflowDetailsItem?.details && createPortal(/* @__PURE__ */ jsxs("div", {
-							ref: overflowDetailsRef,
-							className: cn("fixed z-50", "w-max max-w-[min(24rem,calc(100vw-2rem))]", "rounded-lg border border-border bg-background p-4 shadow-lg", "animate-in fade-in-0 zoom-in-95"),
-							style: {
-								top: overflowPanelPos.top,
-								right: overflowPanelPos.right
-							},
-							children: [/* @__PURE__ */ jsx("button", {
-								type: "button",
-								onClick: () => setOverflowDetailsItem(null),
-								className: cn("absolute top-2 right-2 p-1 rounded-md", "text-foreground/40 hover:text-foreground hover:bg-foreground/5", "transition-colors cursor-pointer"),
-								"aria-label": "Close panel",
-								children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-							}), overflowDetailsItem.details]
-						}), document.body)
+							children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx(MoreButton, {
+									label: moreLabel,
+									hasActiveOverflowItem,
+									isDetailsOpen: isOverflowDetailsOpen,
+									resolvedColor
+								})
+							}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+								align: "end",
+								sideOffset: 8,
+								children: items.filter((item) => overflowIds.includes(item.id)).map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+									onClick: () => handleItemClick(item),
+									"aria-haspopup": item.details ? "true" : void 0,
+									className: cn(activeId === item.id && `${resolvedColor.textClass} ${resolvedColor.bgClass}`),
+									style: activeId === item.id && resolvedColor.textStyle ? {
+										...resolvedColor.textStyle,
+										...resolvedColor.bgStyle
+									} : void 0,
+									disabled: item.disabled,
+									children: [
+										item.icon,
+										item.label,
+										item.details && /* @__PURE__ */ jsx(ChevronDown, {
+											className: cn("ml-auto size-3.5 opacity-60 transition-transform duration-200", openDetailsId === item.id && "rotate-180"),
+											"aria-hidden": "true"
+										})
+									]
+								}, item.id))
+							})] })
+						})
 					]
 				}),
 				rightContent && /* @__PURE__ */ jsx("div", {
@@ -362,36 +420,80 @@ function NavBar({ logo, items, rightContent, activeId: activeIdProp, defaultActi
 				})
 			]
 		}), /* @__PURE__ */ jsx(NavBarDetailsPanel, {
+			ref: panelRef,
 			item: activeDetailsItem,
 			openDetailsId: openDetailsId ?? null,
 			onClose: () => setOpenDetailsId(null),
-			navBottomOffset: navRect.bottom,
-			navWidth: navRect.width,
-			navLeft: navRect.left
+			frame,
+			direction: detailsDirection,
+			backgroundClassName: isPill ? TRANSLUCENT_BACKGROUND : "bg-background",
+			themeClassName: atTopClassName,
+			backdropCoversBar: isPill,
+			onExitComplete: () => {
+				if (!openDetailsId) setPanelVisible(false);
+			},
+			onPointerEnter: panelHandlers?.onPointerEnter,
+			onPointerLeave: panelHandlers?.onPointerLeave
 		})]
 	});
 }
-var MoreButton = React$1.forwardRef(function MoreButton({ label, hasActiveOverflowItem, resolvedColor, ...props }, ref) {
+var HIGHLIGHT_TRANSITION = {
+	type: "spring",
+	stiffness: 520,
+	damping: 40,
+	mass: .8
+};
+/**
+* Where the open item sits relative to the one open before it, for the
+* panel's content to slide that way: `1` right, `-1` left, `0` fresh.
+*/
+function useDetailsDirection(items, openId) {
+	const [state, setState] = React$1.useState({
+		id: openId,
+		direction: 0
+	});
+	if (state.id !== openId) {
+		const from = state.id ? items.findIndex((i) => i.id === state.id) : -1;
+		const to = openId ? items.findIndex((i) => i.id === openId) : -1;
+		setState({
+			id: openId,
+			direction: openId ? from < 0 || to < 0 || from === to ? 0 : to > from ? 1 : -1 : state.direction
+		});
+	}
+	return state.direction;
+}
+var MoreButton = React$1.forwardRef(function MoreButton({ label, hasActiveOverflowItem, isDetailsOpen = false, resolvedColor, ...props }, ref) {
+	const highlighted = hasActiveOverflowItem || isDetailsOpen;
 	return /* @__PURE__ */ jsxs("button", {
 		ref,
 		type: "button",
-		className: cn("inline-flex items-center gap-1 px-3 h-8 rounded-md", "text-sm font-medium whitespace-nowrap cursor-pointer", "transition-colors duration-150", "text-foreground/80 hover:text-foreground", resolvedColor ? resolvedColor.hoverBgClass : "hover:bg-foreground/5", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", hasActiveOverflowItem && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`),
-		style: hasActiveOverflowItem && resolvedColor?.textStyle ? {
+		className: cn("inline-flex items-center gap-1 px-3 h-8 rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))]", "text-sm font-medium whitespace-nowrap cursor-pointer", "transition-colors duration-[var(--espd-duration-fast,150ms)]", "text-foreground/80 hover:text-foreground", resolvedColor ? resolvedColor.hoverBgClass : "hover:bg-foreground/5", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", highlighted && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`),
+		style: highlighted && resolvedColor?.textStyle ? {
 			...resolvedColor.textStyle,
 			...resolvedColor.bgStyle
 		} : void 0,
 		"aria-label": "More navigation items",
 		...props,
-		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })]
+		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-3.5 transition-transform duration-200", isDetailsOpen && "rotate-180") })]
 	});
 });
-function NavBarItemTrigger({ item, isActive, isDetailsOpen, onClick, linkComponent, tabIndex, resolvedColor, isPill }) {
-	const classes = cn("inline-flex items-center gap-1 px-3 h-8", isPill ? "rounded-full" : "rounded-md", "text-sm font-medium whitespace-nowrap cursor-pointer", "transition-colors duration-150", "text-foreground/80 hover:text-foreground", resolvedColor ? resolvedColor.hoverBgClass : "hover:bg-foreground/5", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`, isDetailsOpen && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`, item.disabled && "opacity-50 pointer-events-none");
-	const colorStyle = resolvedColor?.textStyle && (isActive || isDetailsOpen) ? {
+function NavBarItemTrigger({ item, isActive, isDetailsOpen, onClick, linkComponent, tabIndex, resolvedColor, isPill, detailsAsLink = false, hoverHandlers, onKeyDown, highlightLayoutId, plainHover = false }) {
+	const slidingHighlight = isDetailsOpen && Boolean(highlightLayoutId);
+	const classes = cn("relative isolate inline-flex items-center gap-1 px-3 h-8", isPill ? "rounded-full" : "rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))]", "text-sm font-medium whitespace-nowrap cursor-pointer", "transition-colors duration-[var(--espd-duration-fast,150ms)]", "text-foreground/80 hover:text-foreground", !plainHover && (resolvedColor ? resolvedColor.hoverBgClass : "hover:bg-foreground/5"), "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive && !slidingHighlight && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`, isDetailsOpen && !isActive && plainHover && "text-foreground", isDetailsOpen && !plainHover && resolvedColor && (slidingHighlight ? resolvedColor.textClass : `${resolvedColor.textClass} ${resolvedColor.bgClass}`), item.disabled && "opacity-50 pointer-events-none");
+	const colorStyle = resolvedColor?.textStyle && (isActive || isDetailsOpen && !plainHover) ? {
 		...resolvedColor.textStyle,
-		...resolvedColor.bgStyle
+		...slidingHighlight ? void 0 : resolvedColor.bgStyle
 	} : void 0;
+	const detailsTriggerId = tabIndex === -1 ? void 0 : item.id;
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		slidingHighlight && /* @__PURE__ */ jsx(motion.span, {
+			layoutId: highlightLayoutId,
+			"aria-hidden": "true",
+			"data-slot": "nav-bar-details-highlight",
+			className: cn("absolute inset-0 -z-10 rounded-[inherit]", resolvedColor?.bgClass),
+			style: resolvedColor?.bgStyle,
+			transition: HIGHLIGHT_TRANSITION
+		}),
 		item.icon && /* @__PURE__ */ jsx("span", {
 			className: "shrink-0",
 			children: item.icon
@@ -402,14 +504,30 @@ function NavBarItemTrigger({ item, isActive, isDetailsOpen, onClick, linkCompone
 			"aria-hidden": "true"
 		})
 	] });
+	if (item.details && item.href && detailsAsLink) return /* @__PURE__ */ jsx(linkComponent ?? "a", {
+		...linkComponent ? { to: item.href } : { href: item.href },
+		...hoverHandlers,
+		className: classes,
+		style: colorStyle,
+		onClick,
+		onKeyDown,
+		role: "menuitem",
+		"aria-expanded": isDetailsOpen,
+		"aria-haspopup": "true",
+		"data-nav-details-trigger": detailsTriggerId,
+		tabIndex,
+		children: content
+	});
 	if (item.details) return /* @__PURE__ */ jsx("button", {
 		type: "button",
+		...hoverHandlers,
 		className: classes,
 		style: colorStyle,
 		onClick,
 		role: "menuitem",
 		"aria-expanded": isDetailsOpen,
 		"aria-haspopup": "true",
+		"data-nav-details-trigger": detailsTriggerId,
 		disabled: item.disabled,
 		tabIndex,
 		children: content

package/dist/components/nav-bar/use-nav-bar-hover-details.js

@@ -0,0 +1,80 @@
+import * as React$1 from "react";
+//#region src/components/nav-bar/use-nav-bar-hover-details.ts
+/** Pause before a hovered item opens its panel, so a pointer passing over the bar opens nothing. */
+var HOVER_OPEN_DELAY = 120;
+/** Grace before the panel closes once the pointer leaves, long enough to cross from the item into the panel. */
+var HOVER_CLOSE_DELAY = 250;
+var isTouch = (event) => event.pointerType === "touch";
+/**
+* Hover intent for the details panels: an item opens its panel after a short
+* pause, the panel stays open while the pointer is over the item or the panel
+* itself, and closes a moment after it has left both. With a panel already
+* open, moving to another item switches at once. Touch never opens on hover
+* (a tap is a click, and a click follows the link).
+*/
+function useNavBarHoverDetails({ enabled, openDetailsId, setOpenDetailsId }) {
+	const openTimer = React$1.useRef(null);
+	const closeTimer = React$1.useRef(null);
+	const openIdRef = React$1.useRef(openDetailsId);
+	openIdRef.current = openDetailsId;
+	const clearTimers = React$1.useCallback(() => {
+		if (openTimer.current) clearTimeout(openTimer.current);
+		if (closeTimer.current) clearTimeout(closeTimer.current);
+		openTimer.current = null;
+		closeTimer.current = null;
+	}, []);
+	React$1.useEffect(() => clearTimers, [clearTimers]);
+	const scheduleClose = React$1.useCallback(() => {
+		if (openTimer.current) clearTimeout(openTimer.current);
+		openTimer.current = null;
+		if (closeTimer.current) clearTimeout(closeTimer.current);
+		closeTimer.current = setTimeout(() => {
+			closeTimer.current = null;
+			setOpenDetailsId(null);
+		}, HOVER_CLOSE_DELAY);
+	}, [setOpenDetailsId]);
+	const cancelClose = React$1.useCallback(() => {
+		if (closeTimer.current) clearTimeout(closeTimer.current);
+		closeTimer.current = null;
+	}, []);
+	return {
+		triggerHandlers: React$1.useCallback((id) => {
+			if (!enabled) return void 0;
+			return {
+				onPointerEnter: (event) => {
+					if (isTouch(event)) return;
+					cancelClose();
+					if (openTimer.current) clearTimeout(openTimer.current);
+					if (openIdRef.current) {
+						setOpenDetailsId(id);
+						return;
+					}
+					openTimer.current = setTimeout(() => {
+						openTimer.current = null;
+						setOpenDetailsId(id);
+					}, HOVER_OPEN_DELAY);
+				},
+				onPointerLeave: (event) => {
+					if (isTouch(event)) return;
+					scheduleClose();
+				}
+			};
+		}, [
+			enabled,
+			cancelClose,
+			scheduleClose,
+			setOpenDetailsId
+		]),
+		panelHandlers: enabled ? {
+			onPointerEnter: (event) => {
+				if (!isTouch(event)) cancelClose();
+			},
+			onPointerLeave: (event) => {
+				if (!isTouch(event)) scheduleClose();
+			}
+		} : void 0,
+		clearTimers
+	};
+}
+//#endregion
+export { HOVER_CLOSE_DELAY, HOVER_OPEN_DELAY, useNavBarHoverDetails };

package/dist/components/nav-bar/use-nav-bar-overflow.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 //#region src/components/nav-bar/use-nav-bar-overflow.ts
 var ITEM_GAP = 4;
-function useNavBarOverflow(items) {
+function useNavBarOverflow(items, enabled = true) {
 	const containerRef = useRef(null);
 	const measureRef = useRef(null);
 	const moreButtonMeasureRef = useRef(null);
@@ -49,17 +49,17 @@ function useNavBarOverflow(items) {
 		setMeasuring(false);
 	}, [items]);
 	useLayoutEffect(() => {
-		recalculate();
-	}, [recalculate]);
+		if (enabled) recalculate();
+	}, [recalculate, enabled]);
 	useEffect(() => {
 		const container = containerRef.current;
-		if (!container || typeof ResizeObserver === "undefined") return;
+		if (!container || !enabled || typeof ResizeObserver === "undefined") return;
 		const ro = new ResizeObserver(() => {
 			recalculate();
 		});
 		ro.observe(container);
 		return () => ro.disconnect();
-	}, [recalculate]);
+	}, [recalculate, enabled]);
 	return {
 		containerRef,
 		measureRef,