52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T37c0,"use client"; import { forwardRef, useCallback, useEffect, useInsertionEffect, useRef, useState } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { NAVIGATION_MENU_KEY } from "./types"; import type { NavigationMenuContext } from "./types"; export interface NavigationMenuProps { /** The open item's value, `""` when every panel is closed. */ value?: string; /** Fires whenever the open item changes, from any trigger — pointer, keyboard or dismissal. */ onValueChange?: (value: string) => void; /** Accessible name for the `

` landmark. */ label?: string; /** Delay in ms before a hovered trigger opens its panel. */ openDelay?: number; /** Delay in ms before a panel closes after the pointer leaves it and its trigger. */ closeDelay?: number; /** Typically a single `NavigationMenuList`. */ children?: ReactNode; /** Additional CSS classes for the `

`. */ className?: string; } /** * Disclosure navigation: a row of triggers, at most one panel open at a time. * * The root element arrives through the ref channel rather than a `ref` prop, * per PORTING.md — the source declares `ref = $bindable(null)`. * * Rest props are not spread: the source reads only these props and has no * rest-props object, so the port carries no wider attribute surface than the * component it mirrors. */ export const NavigationMenu = forwardRef(function NavigationMenu( { value: valueProp, onValueChange, label = "Main", openDelay = 150, closeDelay = 200, children, className, }, forwardedRef ) { // The React shape of the source's `value = $bindable("")`: an internal copy // seeded from the prop, re-synced during render whenever the CALLER changes // the prop, and free to move on its own in between. That is what makes all // three call shapes work off one implementation — a caller driving `value` // from its own state, a caller who passes only `onValueChange`, and a // caller who passes neither and lets the trigger row run the whole thing. // // Re-synced in the render path, not an effect: an effect would paint one // frame of the stale value first, and the pattern React documents for // "adjust state when a prop changes" is exactly this. const [value, setValueState] = useState(valueProp ?? ""); const [lastValueProp, setLastValueProp] = useState(valueProp); if (lastValueProp !== valueProp) { setLastValueProp(valueProp); setValueState(valueProp ?? ""); } // The open value as it stands RIGHT NOW, ahead of the re-render `setValue` // schedules. The source's `value` is a `$state` assignment, visible to the // very next statement; React state is not, and every decision function // below branches on it. Two dismisses inside one tick are the case that // makes the difference observable: without this the second would pass // `setValue`'s equality guard and report `onValueChange("")` twice. // // Written eagerly by `setValue` (which only ever runs from a handler or a // timer, never a render) and re-synced from the committed value in an // insertion effect, never during render — a render React throws away must // not be able to publish a value nothing committed. const valueRef = useRef(value); useInsertionEffect(() => { valueRef.current = value; }, [value]); const [listEl, setListEl] = useState(null); // Registration order of mounted triggers. It exists purely so something // rendered changes when a trigger mounts or unmounts; the actual // left-to-right *order* used below always comes from a live DOM query, // never from this array's own order, so a trigger that mounts out of // visual order still navigates correctly. const [registeredOrder, setRegisteredOrder] = useState([]); const [focusedValueState, setFocusedValueState] = useState(null); // State, exactly as the source keeps it — and the `$state` is load-bearing // even though nothing renders it. In the source, the panel effect reads it // through `consumeFocusRequest()` and is therefore SUBSCRIBED to it, so a // later `requestFocus()` write re-runs that effect and moves focus into the // panel. A ref here would be written by the keydown and observed by // nothing, which breaks the one case where no other input to the panel // effect moves: pressing Enter/Space/ArrowDown on a trigger whose panel is // ALREADY open. `open()` short-circuits on its equality guard and `focus()` // re-sets the same value, so the panel's `isOpen`, node and item value are // all unchanged, and the focus request would be silently dropped. const [pendingFocusValue, setPendingFocusValue] = useState(null); const openTimer = useRef | undefined>(undefined); const closeTimer = useRef | undefined>(undefined); const clearOpenTimer = useCallback(() => { if (openTimer.current !== undefined) { clearTimeout(openTimer.current); openTimer.current = undefined; } }, []); const clearCloseTimer = useCallback(() => { if (closeTimer.current !== undefined) { clearTimeout(closeTimer.current); closeTimer.current = undefined; } }, []); function setValue(next: string) { clearOpenTimer(); clearCloseTimer(); if (valueRef.current === next) return; valueRef.current = next; setValueState(next); onValueChange?.(next); } // Queried fresh on every call rather than cached, so a trigger that mounted // out of visual order — or one a keyed list reordered after mounting — is // correct on the very next arrow press. const triggerButtons = useCallback((): HTMLElement[] => { if (!listEl) return []; return Array.from(listEl.querySelectorAll("[data-ft-nav-trigger]")); }, [listEl]); // The roving order: triggers a keyboard can actually land on. A consumer // can forward the native `disabled` attribute to a trigger, and a disabled // button cannot take focus, so it never holds the tab stop and arrows skip // it. const navigableTriggers = useCallback( (): HTMLElement[] => triggerButtons().filter((el) => !(el as HTMLButtonElement).disabled), [triggerButtons] ); const getTriggerElement = useCallback( (itemValue: string): HTMLElement | null => { return triggerButtons().find((el) => el.dataset.value === itemValue) ?? null; }, [triggerButtons] ); function open(itemValue: string) { setValue(itemValue); } function close() { const closing = valueRef.current; setValue(""); // Escape and an outside click both route through this one function (see // NavigationMenuContent's single dismiss layer), so both return focus // to the trigger. Real browsers already send an outside click's own // focus to whatever the user actually clicked, as the *default* action // of the underlying mousedown — which runs after every listener, // including this one — so a click on another focusable element still // lands there; this only "sticks" for a click on non-focusable space, // where landing on the trigger beats losing focus to ``. jsdom // does not implement that default action (see the component test // file), so this refocus is unconditionally visible there — it is the // correct outcome for Escape either way. // // It also runs BEFORE the panel is marked inert: the state update is // still queued at this point, so focus is already on the trigger by the // time the exit starts and a keyboard user is never stranded on // `` for the length of the fade. if (closing) { getTriggerElement(closing)?.focus(); } } function toggle(itemValue: string) { if (valueRef.current === itemValue) { close(); } else { open(itemValue); } } function scheduleOpen(itemValue: string) { clearCloseTimer(); if (valueRef.current === itemValue) return; if (valueRef.current !== "") { // Something else is already open: the pointer is travelling along // the row it already committed to, not arriving fresh, so switch // with no delay. Re-running the open delay here is the flicker // every hover-with-intent surface has to avoid past its first item. open(itemValue); return; } clearOpenTimer(); openTimer.current = setTimeout(() => setValue(itemValue), openDelay); } function scheduleClose() { clearOpenTimer(); if (valueRef.current === "") return; clearCloseTimer(); // No refocus here, unlike `close()` — this fires from the pointer // leaving, and forcing focus onto the trigger would yank it away from // wherever keyboard focus actually is. closeTimer.current = setTimeout(() => setValue(""), closeDelay); } function cancelClose() { clearCloseTimer(); } // The request side is identity-stable — a trigger only ever calls it from a // keydown, and nothing depends on it by identity. const requestFocus = useCallback((itemValue: string) => { setPendingFocusValue(itemValue); }, []); // The consume side is re-created whenever the pending value moves, and that // identity change IS the subscription: it is listed in // `NavigationMenuContent`'s panel-focus effect dependencies, so a fresh // `requestFocus` re-runs that effect the way the source's `$state` read // re-runs its `$effect`. It is deliberately NOT stable across a pending // change — a permanently stable identity is what dropped the focus move on // an already-open panel. // // It cannot loop: consuming sets the pending value to `null`, which changes // the identity once more, and the re-run then finds nothing to consume and // writes nothing. A consume that matches nothing writes nothing either. const consumeFocusRequest = useCallback( (itemValue: string): boolean => { if (pendingFocusValue !== itemValue) return false; setPendingFocusValue(null); return true; }, [pendingFocusValue] ); function collapseIfOpen(itemValue: string) { if (valueRef.current === itemValue) setValue(""); } const focus = useCallback((itemValue: string) => { setFocusedValueState(itemValue); }, []); // Identity-stable for the same reason as `requestFocus`: a trigger calls it // from its own mount effect and lists it in that effect's dependencies, so // a fresh function per root render would unregister and re-register // forever. The updaters also return the array unchanged when there is // nothing to do, so a duplicate register never schedules a render — the // React counterpart of the `untrack` the source wraps the body in. const registerTrigger = useCallback((itemValue: string): (() => void) => { setRegisteredOrder((order) => (order.includes(itemValue) ? order : [...order, itemValue])); return () => { setRegisteredOrder((order) => { const i = order.indexOf(itemValue); if (i === -1) return order; const next = order.slice(); next.splice(i, 1); return next; }); }; }, []); const setListRef = useCallback((element: HTMLElement | null) => { setListEl(element); }, []); function goTo(button: HTMLElement) { const nextValue = button.dataset.value; if (nextValue === undefined) return; setFocusedValueState(nextValue); button.focus(); // An already-open panel follows keyboard focus the same way it already // follows the pointer along the row (see `scheduleOpen`) — a panel left // open under a trigger that no longer has focus reads as broken, not as // "still open". if (valueRef.current !== "" && valueRef.current !== nextValue) { open(nextValue); } } function move(from: string, delta: number) { const buttons = navigableTriggers(); if (buttons.length === 0) return; const fromIndex = buttons.findIndex((el) => el.dataset.value === from); const base = fromIndex === -1 ? 0 : fromIndex; const nextIndex = (((base + delta) % buttons.length) + buttons.length) % buttons.length; goTo(buttons[nextIndex]!); } function moveToEdge(edge: "first" | "last") { const buttons = navigableTriggers(); if (buttons.length === 0) return; goTo(edge === "first" ? buttons[0]! : buttons[buttons.length - 1]!); } // Recomputed on every render, so it settles the instant a trigger // registers, unregisters, or the roving position itself moves. let focusedValue: string | null = null; if (focusedValueState !== null && registeredOrder.includes(focusedValueState)) { focusedValue = focusedValueState; } else if (registeredOrder.length === 0) { focusedValue = null; } else if (value !== "" && registeredOrder.includes(value)) { focusedValue = value; } else { // Prefer live DOM order over registration order for the initial // fallback: a trigger that mounts later but renders first on screen // still becomes the first tab stop. A read, never a write — the render // stays pure, exactly as the source's getter is. focusedValue = navigableTriggers()[0]?.dataset.value ?? registeredOrder[0]!; } // Rebuilt on every render rather than memoised, and that rebuild is what // re-renders the pieces below — the React counterpart of the source // context's live getters. A memo would have to be keyed on every function // here, each of which closes over `value` and is therefore fresh per // render anyway, so it would never hit. The three members something depends // on by identity — `registerTrigger`, `setListRef` and `requestFocus` — are // stable regardless; `consumeFocusRequest` moves with the pending focus // value on purpose, see above. const context: NavigationMenuContext = { value, openDelay, closeDelay, listRef: listEl, focusedValue, setListRef, getTriggerElement, registerTrigger, open, close, toggle, scheduleOpen, scheduleClose, cancelClose, requestFocus, consumeFocusRequest, collapseIfOpen, focus, move, moveToEdge, }; // A pending hover-intent timer must never fire into an unmounted tree. useEffect(() => { return () => { clearOpenTimer(); clearCloseTimer(); }; }, [clearOpenTimer, clearCloseTimer]); return ( ); }); NavigationMenu.displayName = "NavigationMenu"; 55:T20ff,"use client"; import { forwardRef } from "react"; import type { FocusEvent, ReactNode } from "react"; import { cn } from "../../utils"; import { Portal } from "../../internals/Portal"; import { useAnchorPosition } from "../../internals/use-anchor-position"; import { useDismissable } from "../../internals/dismissable"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useElementRef } from "../../internals/dom/use-element-ref"; import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr"; import { anchored, originFor } from "../../internals/motion/anchored"; import { usePresence } from "../../internals/motion/presence"; import { useNavigationMenuContext, useNavigationMenuItemContext } from "./types"; import "./navigation-menu-content.css"; export interface NavigationMenuContentProps { /** The panel's content — typically a feature tile plus a stack of `NavigationMenuLink`s. */ children?: ReactNode; /** Additional CSS classes. */ className?: string; } export const NavigationMenuContent = forwardRef( function NavigationMenuContent({ children, className }, forwardedRef) { const item = useNavigationMenuItemContext(); const root = useNavigationMenuContext(); const isOpen = root.value === item.value; // Convention C-1: the NODE, not a ref. The panel is created by // `presence.mounted`, so a `useRef` + `[]`-deps effect would still be // holding `null` when the dismiss layer and the positioner look for it, // and neither would ever arm — silently. const [panel, setPanelNode] = useElementRef(); const presence = usePresence(isOpen); // The placement as ACTUALLY resolved. Anchored to the whole list rather // than to a single trigger — every panel drops out of the row, // start-aligned to it — and the growth origin follows whatever // `computePosition` settled on: it flips the requested `"bottom"` to // `"top"` for a nav sitting low in the viewport, and the resolved ALIGN // differs from the requested one whenever clamping slid the panel along // the cross axis, where an entrance grown from the requested corner // would expand from the far corner instead. const { side: resolvedSide, align: resolvedAlign } = useAnchorPosition(panel, { anchor: root.listRef, side: "bottom", align: "start", offset: 6, }); // `active: isOpen` disarms the dismiss layer the instant the panel stops // being the open one, so a second Escape during the fade is neither // answered again nor swallowed on its way to whatever sits underneath. // // The trigger is excluded so a pointerdown on it is a toggle rather // than an outside click that closes and immediately reopens. useDismissable(panel, { onDismiss: root.close, exclude: () => [root.getTriggerElement(item.value)], active: isOpen, }); // Only Enter/Space/ArrowDown on the trigger ever calls `requestFocus` // (see NavigationMenuTrigger) — a hover- or click-open leaves this a // no-op, and focus stays exactly where it already was. // // The node guard runs BEFORE the consume, where the source checks it // after: `useElementRef` publishes the panel one commit after the // branch mounts, so consuming on the pass where the node is still null // would spend the request on nothing and the focus move would be lost. // Same observable behaviour, one guard reordered. // // `consumeFocusRequest` in the dependency array is the subscription, // not ceremony: the root re-creates it whenever the pending focus value // moves, which is what re-runs this effect for a key press on a trigger // whose panel is ALREADY open — the one case where `isOpen`, `panel` // and `item.value` all stay put. const { consumeFocusRequest } = root; useIsomorphicLayoutEffect(() => { if (!isOpen) return; if (!panel) return; if (!consumeFocusRequest(item.value)) return; const target = panel.querySelector("a[href], button:not([disabled])") ?? panel; target.focus(); }, [isOpen, panel, consumeFocusRequest, item.value]); // The disclosure equivalent of a trigger-side focusout handler: Tab is // never trapped in here (see the README — a modal focus trap would break // "Tab moves through the panel's links naturally"), so when focus leaves // this panel on its own, have the panel that no longer has focus close // itself rather than linger, invisible-to-the-eye-but-still-"open", off // in the portal. function handleFocusOut(event: FocusEvent) { const next = event.relatedTarget as Node | null; if (next && panel?.contains(next)) return; root.collapseIfOpen(item.value); } // Convention C-2: composed ABOVE the conditional below. Calling this // inside the JSX branch would be a conditional hook and would throw the // first time `mounted` flips. // // ONE bidirectional leg, never a split in/out pair: Svelte reports // `direction: "both"` for a bidirectional directive and cannot tell an // arrival from a departure on its own, and a bidirectional leg gets the // in-flight counterpart's position handed to it, so a panel re-opened // inside its own fade continues from where it is instead of snapping. // That matters more here than on a click-only surface: this one closes // on a hover-intent timer, and a pointer that wanders back onto the bar // mid-close is ordinary rather than exceptional. const panelRef = useComposedRefs( setPanelNode, forwardedRef, presence.register(anchored, (entering) => ({ side: resolvedSide, entering })) ); /* No `role` here on purpose, same reasoning as Popover's content: this is a disclosure panel, not a dialog, and it has no title to anchor `aria-labelledby` on other than the trigger it already points at. Reachability comes from `aria-labelledby` + real DOM focus, not from a landmark role — and deliberately *not* from a focus trap: a NavigationMenu panel is not modal (see the README's "why not role=menu" section), so Tab must be free to walk out of it into the rest of the page. The motion lives in `internals/motion/anchored.js`, shared with every other floating surface. Two deliberate consequences: there are no pixels of `translateY` — travel a panel can only fake, since the positioner owns `left`/`top` on this same element — and the rise grows from the panel edge nearest the list rather than from its own centre. Visibility never depends on any of it: `presence.mounted` gates the DOM, and under reduced motion the panel simply appears and disappears. `data-state` is an ordinary React attribute (divergence D-2) carrying `surfaceState`'s TWO values — never `"opening"` (convention C-5). `inert` is not written by hand either: `usePresence` sets it on the registered node for the whole exit, which keeps a panel on its way out from taking a click on one of its links. `data-align` reports the REQUESTED alignment, as the source does, while the growth origin uses the RESOLVED one. Focus needs nothing here: `NavigationMenu`'s own `close()` refocuses the trigger from a plain function outside the mount gate, so the return lands at the dismiss instant rather than at unmount. `` stays ABOVE the mounted gate, and the gate wraps its CHILDREN: `usePortalTarget` resolves its container in a layout effect, so a Portal that first mounts in the same commit as the surface renders null on that pass — presence would then find no registered legs and the entrance would be silently skipped. */ return ( {presence.mounted ? (

{children}

) : null} ); } ); NavigationMenuContent.displayName = "NavigationMenuContent"; 56:T6b8,"use client"; import { useMemo } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useFancyId } from "../../internals/use-id"; import { NAVIGATION_MENU_ITEM_KEY } from "./types"; import type { NavigationMenuItemContext } from "./types"; export interface NavigationMenuItemProps { /** This item's value — what `NavigationMenu`'s `value` becomes while its panel is open. */ value: string; /** A `NavigationMenuTrigger` + `NavigationMenuContent` pair. */ children?: ReactNode; /** Additional CSS classes. */ className?: string; } /** * One disclosure in the row: its trigger, its panel, and the identity that * ties the two together. * * The source exposes no ref here, so neither does this (PORTING.md's * per-component ref rule). */ export function NavigationMenuItem({ value, children, className }: NavigationMenuItemProps) { // Stable across SSR and hydration — `uid()` throws on the server, and the // trigger's `aria-controls` / the panel's `aria-labelledby` need to agree // with themselves from the first server-rendered paint (convention C-6). const baseId = useFancyId(); // Memoised on its two scalar inputs, so a re-render that changes neither // does not re-run the effects the trigger and the panel key on this // object's members. const context = useMemo( () => ({ value, triggerId: `${baseId}-trigger`, contentId: `${baseId}-content` }), [value, baseId] ); return (

{children}

); } NavigationMenuItem.displayName = "NavigationMenuItem"; 57:T976,"use client"; import type { AnchorHTMLAttributes, ReactNode } from "react"; import { cn } from "../../utils"; import "./navigation-menu-link.css"; export interface NavigationMenuLinkProps extends Omit< AnchorHTMLAttributes, "className" | "href" | "title" | "children" > { /** Destination URL. */ href: string; /** Marks this as the current page: sets `aria-current="page"` and the current-row styling. */ current?: boolean; /** The row's title. Ignored when `children` is given. */ title?: string; /** The row's supporting description, shown under the title. Ignored when `children` is given. */ description?: string; /** Marks the destination as off-site: opens in a new tab with a safe `rel`, and adds an sr-only note. */ external?: boolean; /** * Full override for the row's content — e.g. the mockup's feature tile, * which pairs an icon with its title on one line. Takes over from * `title`/`description` entirely when given. */ children?: ReactNode; /** Additional CSS classes. */ className?: string; } /** * A row inside a panel. An ordinary anchor, deliberately — never * `role="menuitem"`. * * The source exposes no ref here, so neither does this. */ export function NavigationMenuLink({ href, current = false, title, description, external = false, children, className, ...rest }: NavigationMenuLinkProps) { const classes = cn( "ft-navigation-menu-link flex flex-col gap-0.5 rounded-lg px-2.5 py-2 text-left no-underline transition-colors", "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none", current && "bg-accent text-accent-foreground", className ); return ( {children ? ( children ) : ( <> {title ? ( {title} ) : null} {description ? ( {description} ) : null} )} {external ? (opens in a new tab) : null} ); } NavigationMenuLink.displayName = "NavigationMenuLink"; 58:T7bf,"use client"; import { forwardRef, useEffect } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useElementRef } from "../../internals/dom/use-element-ref"; import { useNavigationMenuContext } from "./types"; export interface NavigationMenuListProps { /** The `NavigationMenuItem`s (and any plain link that isn't a disclosure). */ children?: ReactNode; /** Additional CSS classes. */ className?: string; } export const NavigationMenuList = forwardRef( function NavigationMenuList({ children, className }, forwardedRef) { const { setListRef } = useNavigationMenuContext(); // Convention C-1: the NODE, not a ref. The root keys work on this // element's existence — a panel anchors against it and the trigger row // is queried from it — so it has to publish itself the moment it // appears, not one `[]`-deps effect too late. const [node, setNode] = useElementRef(); // Convention C-2: composed at the top of the body, never inside the JSX. const listRef = useComposedRefs(setNode, forwardedRef); // This is the element every panel anchors against (start-aligned to the // whole row, not to whichever trigger opened it — see // NavigationMenuContent) and the element trigger buttons are queried // from for roving-tabindex order. Handing the root a plain element // reference, not a render prop, keeps `NavigationMenuTrigger` / // `NavigationMenuContent` unaware that a `NavigationMenuList` even // exists. useEffect(() => { setListRef(node); return () => setListRef(null); }, [setListRef, node]); return (

{children} ); } ); NavigationMenuList.displayName = "NavigationMenuList"; 59:T1715,"use client"; import { forwardRef, useEffect, useRef } from "react"; import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, PointerEvent, ReactNode, } from "react"; import { cn } from "../../utils"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useNavigationMenuContext, useNavigationMenuItemContext } from "./types"; import "./navigation-menu-trigger.css"; interface NavigationMenuTriggerOwnProps { /** The trigger's label. */ children?: ReactNode; /** Additional CSS classes. */ className?: string; } /** * Native ` ); } ); NavigationMenuTrigger.displayName = "NavigationMenuTrigger"; 5a:T46b,/* * Optional utility for the mockup's feature tile — a `NavigationMenuLink` * rendered as the panel's highlighted first column. Not a boolean prop: the * mockup only ever shows one per panel, so a prop would exist for a single * call site, where `className="ft-navigation-menu-feature"` composes with * everything else the `className` prop already merges in. Reads * `--ft-nav-accent`, which `NavigationMenuContent` declares — this class only * ever makes visual sense on a link rendered inside a content panel, so the * property is always present by the time it's read here. * * The source's `