ardo 3.5.0 → 3.6.0

package/dist/{ui-B6X8gAvz.js → ui-Cs2nhBpA.js}

@@ -1,7 +1,7 @@
-import { a as ArdoProvider, d as useArdoSidebar, l as useArdoContexts, o as ArdoSiteConfigProvider, s as useArdoConfig, u as useArdoPageData } from "./sidebar-utils-C06DJsx4.js";
-import { $ as footerLink, A as home, B as MonitorIcon, F as ChevronDownIcon, G as SunIcon, H as PackageIcon, I as CodeIcon, K as WrenchIcon, L as FileCodeIcon, M as layout, N as BookOpenIcon, O as ArdoLayout, P as BoxIcon, R as FileTextIcon, U as SearchIcon, V as MoonIcon, W as SettingsIcon, Y as footerArdoLink, Z as footerContainer, j as homeMain, nt as footerPrimary, q as XIcon, tt as footerOwl, z as MessageCircleIcon } from "./DocPage-EIVMae_6.js";
-import { c as TwitterIcon, i as LinkedinIcon, n as GithubIcon, o as NpmIcon, u as YoutubeIcon } from "./brand-icons-Di8w0Nu9.js";
-import React, { Children, cloneElement, createContext, isValidElement, use, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { a as ArdoProvider, d as useArdoSidebar, l as useArdoContexts, o as ArdoSiteConfigProvider, s as useArdoConfig, u as useArdoPageData } from "./sidebar-utils-tTBVAPLE.js";
+import { B as ChevronDownIcon, F as home, G as MonitorIcon, H as FileCodeIcon, I as homeMain, J as SearchIcon, K as MoonIcon, L as layout, N as ArdoLayout, Q as XIcon, R as BookOpenIcon, U as FileTextIcon, V as CodeIcon, W as MessageCircleIcon, X as SunIcon, Y as SettingsIcon, Z as WrenchIcon, et as footerArdoLink, it as footerLink, nt as footerContainer, ot as footerOwl, q as PackageIcon, st as footerPrimary, z as BoxIcon } from "./DocPage-Yt8MMpBg.js";
+import { c as TwitterIcon, i as LinkedinIcon, n as GithubIcon, o as NpmIcon, u as YoutubeIcon } from "./brand-icons-DBTSSnty.js";
+import React, { Children, cloneElement, createContext, isValidElement, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Link, NavLink, Outlet, isRouteErrorResponse, useLocation, useMatches, useNavigate, useRouteError } from "react-router";
 import "./assets/src/ui/components/HeaderSearch.css.ts.vanilla-KAo_Mlc-.css";
@@ -224,6 +224,45 @@ function ArdoFooter({ children, className, ardoLink = true, message, copyright,
 var inline = "xapf7e0";
 var trigger = "xapf7e1";
 //#endregion
+//#region src/ui/components/search-a11y.ts
+function getSearchOptionId(listboxId, resultId, index) {
+	return `${listboxId}-option-${toDomIdSegment(resultId)}-${index}`;
+}
+function getActiveSearchOptionId({ getOptionId, isOpen, results, selectedIndex }) {
+	if (!isOpen || results.length === 0) return;
+	const selectedResult = getResultAtIndex(results, selectedIndex);
+	if (selectedResult == null) return;
+	return getOptionId(selectedResult.id, selectedIndex);
+}
+function getSearchKeyboardAction({ key, results, selectedIndex }) {
+	switch (key) {
+		case "ArrowDown": return results.length > 0 ? {
+			type: "select-index",
+			index: Math.min(selectedIndex + 1, results.length - 1)
+		} : { type: "none" };
+		case "ArrowUp": return results.length > 0 ? {
+			type: "select-index",
+			index: Math.max(selectedIndex - 1, 0)
+		} : { type: "none" };
+		case "Enter": {
+			const selectedResult = getResultAtIndex(results, selectedIndex);
+			return selectedResult == null ? { type: "none" } : {
+				type: "navigate",
+				path: selectedResult.path
+			};
+		}
+		case "Escape": return { type: "close" };
+		default: return { type: "none" };
+	}
+}
+function toDomIdSegment(value) {
+	return Array.from(value, (char) => char.charCodeAt(0).toString(36)).join("-");
+}
+function getResultAtIndex(results, selectedIndex) {
+	if (selectedIndex < 0 || selectedIndex >= results.length) return;
+	return results[selectedIndex];
+}
+//#endregion
 //#region src/ui/components/search-hooks.ts
 function useGlobalSearchShortcut(inputRef, setIsOpen) {
 	useEffect(() => {
@@ -311,6 +350,64 @@ function SearchPopover({ anchorRef, children }) {
 	}), document.body);
 }
 //#endregion
+//#region src/ui/components/SearchResults.tsx
+function SearchResults({ getOptionId, listboxId, results, selectedIndex, query, onClose }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [results.length > 0 ? /* @__PURE__ */ jsx("ul", {
+		id: listboxId,
+		className: searchResults,
+		role: "listbox",
+		"aria-label": "Search results",
+		children: results.map((result, index) => /* @__PURE__ */ jsx("li", {
+			role: "presentation",
+			children: /* @__PURE__ */ jsxs(Link, {
+				id: getOptionId(result.id, index),
+				to: result.path,
+				role: "option",
+				"aria-selected": index === selectedIndex,
+				className: [searchResult, index === selectedIndex && "selected"].filter(Boolean).join(" "),
+				onClick: onClose,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: searchResultTitle,
+					children: result.title
+				}), result.section !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "wxcdiv7",
+					children: result.section
+				})]
+			})
+		}, result.id))
+	}) : /* @__PURE__ */ jsx("div", {
+		id: listboxId,
+		role: "listbox",
+		"aria-label": "Search results",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: searchNoResults,
+			role: "status",
+			"aria-live": "polite",
+			children: [/* @__PURE__ */ jsx(ArdoOwlMark, {
+				size: 36,
+				className: searchNoResultsOwl,
+				title: ""
+			}), /* @__PURE__ */ jsxs("span", { children: [
+				"No results found for \"",
+				query,
+				"\""
+			] })]
+		})
+	}), /* @__PURE__ */ jsxs("div", {
+		className: searchFooter,
+		children: [
+			/* @__PURE__ */ jsxs("span", { children: [
+				/* @__PURE__ */ jsx("kbd", { children: "↑" }),
+				" ",
+				/* @__PURE__ */ jsx("kbd", { children: "↓" }),
+				" to navigate"
+			] }),
+			/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("kbd", { children: "↵" }), " to select"] }),
+			/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("kbd", { children: "esc" }), " to close"] })
+		]
+	})] });
+}
+//#endregion
 //#region src/ui/components/Search.tsx
 function useSearchIndex() {
 	return useMemo(() => {
@@ -348,46 +445,6 @@ function normalizeResults(rawResults) {
 		}];
 	});
 }
-function SearchResults({ results, selectedIndex, query, onClose }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [results.length > 0 ? /* @__PURE__ */ jsx("ul", {
-		className: searchResults,
-		children: results.map((result, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, {
-			to: result.path,
-			className: [searchResult, index === selectedIndex && "selected"].filter(Boolean).join(" "),
-			onClick: onClose,
-			children: [/* @__PURE__ */ jsx("span", {
-				className: searchResultTitle,
-				children: result.title
-			}), result.section !== void 0 && /* @__PURE__ */ jsx("span", {
-				className: "wxcdiv7",
-				children: result.section
-			})]
-		}) }, result.id))
-	}) : /* @__PURE__ */ jsxs("div", {
-		className: searchNoResults,
-		children: [/* @__PURE__ */ jsx(ArdoOwlMark, {
-			size: 36,
-			className: searchNoResultsOwl,
-			title: ""
-		}), /* @__PURE__ */ jsxs("span", { children: [
-			"No results found for \"",
-			query,
-			"\""
-		] })]
-	}), /* @__PURE__ */ jsxs("div", {
-		className: searchFooter,
-		children: [
-			/* @__PURE__ */ jsxs("span", { children: [
-				/* @__PURE__ */ jsx("kbd", { children: "↑" }),
-				" ",
-				/* @__PURE__ */ jsx("kbd", { children: "↓" }),
-				" to navigate"
-			] }),
-			/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("kbd", { children: "↵" }), " to select"] }),
-			/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("kbd", { children: "esc" }), " to close"] })
-		]
-	})] });
-}
 function useSearch(searchIndex) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [query, setQuery] = useState("");
@@ -415,7 +472,7 @@ function useSearch(searchIndex) {
 		search
 	};
 }
-function SearchInput({ inputRef, placeholder, query, hasQuery, onSearch, onKeyDown, onFocus }) {
+function SearchInput({ inputRef, placeholder, query, hasQuery, onSearch, onKeyDown, onFocus, activeOptionId, expanded, listboxId }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: searchField,
 		children: [
@@ -431,7 +488,13 @@ function SearchInput({ inputRef, placeholder, query, hasQuery, onSearch, onKeyDo
 				},
 				onKeyDown,
 				onFocus,
-				"aria-label": "Search"
+				"aria-label": "Search",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": expanded,
+				"aria-controls": listboxId,
+				"aria-activedescendant": activeOptionId,
+				"aria-haspopup": "listbox"
 			}),
 			hasQuery && /* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -451,12 +514,32 @@ function SearchInput({ inputRef, placeholder, query, hasQuery, onSearch, onKeyDo
 		]
 	});
 }
+function useSearchA11y({ expanded, results, selectedIndex }) {
+	const listboxId = `${useId()}-results`;
+	const getOptionId = (resultId, index) => getSearchOptionId(listboxId, resultId, index);
+	return {
+		activeOptionId: getActiveSearchOptionId({
+			getOptionId,
+			isOpen: expanded,
+			results,
+			selectedIndex
+		}),
+		getOptionId,
+		listboxId
+	};
+}
 function ArdoSearch({ placeholder = "Search...", autoFocus = false }) {
 	const navigate = useNavigate();
 	const containerRef = useRef(null);
 	const inputRef = useRef(null);
 	const state = useSearch(useSearchIndex());
 	const hasQuery = state.query.trim().length > 0;
+	const expanded = state.isOpen && hasQuery;
+	const searchA11y = useSearchA11y({
+		expanded,
+		results: state.results,
+		selectedIndex: state.selectedIndex
+	});
 	useEffect(() => {
 		if (autoFocus) inputRef.current?.focus();
 	}, [autoFocus]);
@@ -468,39 +551,34 @@ function ArdoSearch({ placeholder = "Search...", autoFocus = false }) {
 		setIsOpen: state.setIsOpen
 	});
 	const handleKeyDown = (e) => {
-		switch (e.key) {
-			case "ArrowDown":
-				if (state.results.length > 0) {
-					e.preventDefault();
-					state.setSelectedIndex((p) => Math.min(p + 1, state.results.length - 1));
-				}
-				break;
-			case "ArrowUp":
-				if (state.results.length > 0) {
+		const action = getSearchKeyboardAction({
+			key: e.key,
+			results: state.results,
+			selectedIndex: state.selectedIndex
+		});
+		switch (action.type) {
+			case "select-index":
+				if (state.isOpen) {
 					e.preventDefault();
-					state.setSelectedIndex((p) => Math.max(p - 1, 0));
+					state.setSelectedIndex(action.index);
 				}
 				break;
-			case "Enter": {
-				const p = state.results[state.selectedIndex]?.path;
-				if (typeof p === "string") {
-					e.preventDefault();
-					navigate(p);
-					state.setIsOpen(false);
-				}
+			case "navigate":
+				e.preventDefault();
+				navigate(action.path);
+				state.setIsOpen(false);
 				break;
-			}
-			case "Escape":
+			case "close":
 				state.setIsOpen(false);
 				inputRef.current?.blur();
 				break;
-			default: break;
+			case "none": break;
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: search,
 		ref: containerRef,
-		"data-expanded": state.isOpen || hasQuery ? "true" : "false",
+		"data-expanded": expanded ? "true" : "false",
 		onMouseDown: () => inputRef.current?.focus(),
 		children: [/* @__PURE__ */ jsx(SearchInput, {
 			inputRef,
@@ -511,10 +589,15 @@ function ArdoSearch({ placeholder = "Search...", autoFocus = false }) {
 			onKeyDown: handleKeyDown,
 			onFocus: () => {
 				if (hasQuery) state.setIsOpen(true);
-			}
-		}), state.isOpen && hasQuery && /* @__PURE__ */ jsx(SearchPopover, {
+			},
+			activeOptionId: searchA11y.activeOptionId,
+			expanded,
+			listboxId: searchA11y.listboxId
+		}), expanded && /* @__PURE__ */ jsx(SearchPopover, {
 			anchorRef: containerRef,
 			children: /* @__PURE__ */ jsx(SearchResults, {
+				getOptionId: searchA11y.getOptionId,
+				listboxId: searchA11y.listboxId,
 				results: state.results,
 				selectedIndex: state.selectedIndex,
 				query: state.query,
@@ -667,6 +750,131 @@ var mobilePanelClose = "qjc2r5e";
 var mobilePanelHeader = "qjc2r5d";
 var mobilePanelSidebar = "qjc2r5g";
 //#endregion
+//#region src/ui/mobile-drawer-a11y.ts
+function getTrappedFocusTarget({ activeElement, focusableElements, shiftKey }) {
+	const firstElement = focusableElements[0];
+	const lastElement = focusableElements.at(-1);
+	if (firstElement == null || lastElement == null) return;
+	if (shiftKey && activeElement === firstElement) return lastElement;
+	if (!shiftKey && activeElement === lastElement) return firstElement;
+}
+//#endregion
+//#region src/ui/MobileSlidePanel.tsx
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+function MobileSlidePanel({ logo: logo$2, title, nav, themeToggle, triggerRef, children, onClose }) {
+	const panelRef = useRef(null);
+	useMobilePanelFocus({
+		onClose,
+		panelRef,
+		triggerRef
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: mobileBackdrop,
+		"data-open": "true",
+		onClick: onClose
+	}), /* @__PURE__ */ jsxs("div", {
+		ref: panelRef,
+		className: mobilePanel,
+		"data-open": "true",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": title === "" ? "Navigation menu" : `${title} navigation menu`,
+		tabIndex: -1,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: mobilePanelHeader,
+				children: [/* @__PURE__ */ jsx(Link, {
+					to: "/",
+					className: logoLink,
+					onClick: onClose,
+					children: logo$2 != null && /* @__PURE__ */ jsx("img", {
+						src: typeof logo$2 === "string" ? logo$2 : logo$2.light,
+						alt: title,
+						className: "qjc2r56"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "0.5rem"
+					},
+					children: [themeToggle && /* @__PURE__ */ jsx(ArdoThemeToggle, {}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: mobilePanelClose,
+						onClick: onClose,
+						"aria-label": "Close menu",
+						children: /* @__PURE__ */ jsx(XIcon, { size: 20 })
+					})]
+				})]
+			}),
+			nav != null && /* @__PURE__ */ jsx("div", {
+				className: "qjc2r5f",
+				onClickCapture: handleLinkClick(onClose),
+				children: nav
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: mobilePanelSidebar,
+				onClickCapture: handleLinkClick(onClose),
+				children
+			})
+		]
+	})] });
+}
+function useMobilePanelFocus({ onClose, panelRef, triggerRef }) {
+	useEffect(() => {
+		const panel = panelRef.current;
+		if (panel == null) return;
+		const triggerElement = triggerRef.current;
+		focusInitialPanelElement(panel);
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onClose();
+				return;
+			}
+			if (event.key === "Tab") trapPanelFocus(event, panel);
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			triggerElement?.focus();
+		};
+	}, [
+		onClose,
+		panelRef,
+		triggerRef
+	]);
+}
+function focusInitialPanelElement(panel) {
+	(getFocusablePanelElements(panel)[0] ?? panel).focus();
+}
+function trapPanelFocus(event, panel) {
+	const focusableElements = getFocusablePanelElements(panel);
+	const target = getTrappedFocusTarget({
+		activeElement: document.activeElement instanceof HTMLElement ? document.activeElement : null,
+		focusableElements,
+		shiftKey: event.shiftKey
+	});
+	if (target == null) return;
+	event.preventDefault();
+	target.focus();
+}
+function getFocusablePanelElements(panel) {
+	return [...panel.querySelectorAll(FOCUSABLE_SELECTOR)].filter((element) => !element.hasAttribute("disabled") && element.getAttribute("aria-hidden") !== "true");
+}
+function handleLinkClick(onClose) {
+	return (event) => {
+		if (event.target instanceof HTMLElement && event.target.closest("a") !== null) onClose();
+	};
+}
+//#endregion
 //#region src/ui/Header.tsx
 /**
 * Mobile menu open state — resets on navigation and locks body scroll
@@ -686,14 +894,18 @@ function useMobileMenu() {
 	}, [open]);
 	return [open, setOpen];
 }
-function ArdoHeader({ logo: logo$2, title, nav, actions, search = true, searchPlaceholder, themeToggle = true, mobileMenuContent, className }) {
+function ArdoHeader({ logo: logo$1, title, nav, actions, search = true, searchPlaceholder, themeToggle = true, mobileMenuContent, className }) {
 	const config = useArdoConfig();
 	const [mobileMenuOpen, setMobileMenuOpen] = useMobileMenu();
-	const resolvedLogo = logo$2;
+	const mobileMenuButtonRef = useRef(null);
+	const resolvedLogo = logo$1;
 	const resolvedTitle = title ?? config.title;
 	const hasLogo = resolvedLogo !== void 0;
 	const hasTitle = resolvedTitle !== "";
 	const hasMobileMenu = mobileMenuContent != null;
+	const closeMobileMenu = useCallback(() => {
+		setMobileMenuOpen(false);
+	}, [setMobileMenuOpen]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("header", {
 		className: className ?? "qjc2r50",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -702,6 +914,7 @@ function ArdoHeader({ logo: logo$2, title, nav, actions, search = true, searchPl
 				/* @__PURE__ */ jsxs("div", {
 					className: headerLeft,
 					children: [hasMobileMenu && /* @__PURE__ */ jsx("button", {
+						ref: mobileMenuButtonRef,
 						type: "button",
 						className: "qjc2r58",
 						onClick: () => {
@@ -747,72 +960,16 @@ function ArdoHeader({ logo: logo$2, title, nav, actions, search = true, searchPl
 				})
 			]
 		})
-	}), hasMobileMenu && /* @__PURE__ */ jsx(MobileSlidePanel, {
-		isOpen: mobileMenuOpen,
+	}), hasMobileMenu && mobileMenuOpen && /* @__PURE__ */ jsx(MobileSlidePanel, {
 		logo: resolvedLogo,
 		title: resolvedTitle,
 		nav,
 		themeToggle,
-		onClose: () => {
-			setMobileMenuOpen(false);
-		},
+		triggerRef: mobileMenuButtonRef,
+		onClose: closeMobileMenu,
 		children: mobileMenuContent
 	})] });
 }
-function MobileSlidePanel({ isOpen, logo: logo$1, title, nav, themeToggle, children, onClose }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: mobileBackdrop,
-		"data-open": isOpen,
-		onClick: onClose
-	}), /* @__PURE__ */ jsxs("div", {
-		className: mobilePanel,
-		"data-open": isOpen,
-		"aria-hidden": !isOpen,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: mobilePanelHeader,
-				children: [/* @__PURE__ */ jsx(Link, {
-					to: "/",
-					className: logoLink,
-					onClick: onClose,
-					children: logo$1 != null && /* @__PURE__ */ jsx("img", {
-						src: typeof logo$1 === "string" ? logo$1 : logo$1.light,
-						alt: title,
-						className: "qjc2r56"
-					})
-				}), /* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						alignItems: "center",
-						gap: "0.5rem"
-					},
-					children: [themeToggle && /* @__PURE__ */ jsx(ArdoThemeToggle, {}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: mobilePanelClose,
-						onClick: onClose,
-						"aria-label": "Close menu",
-						children: /* @__PURE__ */ jsx(XIcon, { size: 20 })
-					})]
-				})]
-			}),
-			nav != null && /* @__PURE__ */ jsx("div", {
-				className: "qjc2r5f",
-				onClickCapture: handleLinkClick(onClose),
-				children: nav
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: mobilePanelSidebar,
-				onClickCapture: handleLinkClick(onClose),
-				children
-			})
-		]
-	})] });
-}
-function handleLinkClick(onClose) {
-	return (event) => {
-		if (event.target instanceof HTMLElement && event.target.closest("a") !== null) onClose();
-	};
-}
 function ArdoSocialLink({ href, icon, ariaLabel, className }) {
 	return /* @__PURE__ */ jsx("a", {
 		href,
@@ -1760,4 +1917,4 @@ function ArdoNavLink({ to, href, children, className, activeMatch: _activeMatch
 //#endregion
 export { ArdoOwlMark as _, ArdoHero as a, ArdoRoot as c, ArdoSidebarLink as d, ArdoHeader as f, ArdoFooter as g, ArdoSearch as h, ArdoErrorBoundary as i, ArdoSidebar as l, ArdoThemeToggle as m, ArdoNavLink as n, ArdoFeatureCard as o, ArdoSocialLink as p, ArdoHomePage as r, ArdoFeatures as s, ArdoNav as t, ArdoSidebarGroup as u };
 
-//# sourceMappingURL=ui-B6X8gAvz.js.map
+//# sourceMappingURL=ui-Cs2nhBpA.js.map