@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-navigation-menu.mjs

@@ -0,0 +1,1399 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, Injector, TemplateRef, ViewContainerRef, afterNextRender, booleanAttribute, computed, contentChild, effect, inject, input, isDevMode, model, signal, untracked, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { Directionality } from "@angular/cdk/bidi";
+import { Overlay } from "@angular/cdk/overlay";
+import { containsOwnedOverlay, registerOverlayOwnership } from "@raqm/ui/overlay-internal";
+import { FocusKeyManager } from "@angular/cdk/a11y";
+import { TemplatePortal } from "@angular/cdk/portal";
+const RAQM_NAVIGATION_MENU = new InjectionToken("RaqmNavigationMenu");
+const PANE_GLIDE_CLASS = "raqm-navigation-menu-overlay-pane--glide";
+const PANE_GLIDE_LEFT_CLASS = "raqm-navigation-menu-overlay-pane--x-left";
+const PANE_GLIDE_RIGHT_CLASS = "raqm-navigation-menu-overlay-pane--x-right";
+const POPUP_MEASURE_CLASS = "raqm-navigation-menu-popup--measure";
+function prefersReducedMotion() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function isVisible(element) {
+	return element.getClientRects().length > 0;
+}
+var RaqmNavigationMenuDismissal = class {
+	host;
+	openTimer;
+	closeTimer;
+	documentPointerDown = (event) => {
+		if (this.host.open() && !this.isInsideRootOrOverlay(event.target)) this.host.closeFromUser();
+	};
+	documentFocusOut = (event) => {
+		const target = event.target;
+		const overlay = this.host.pane();
+		if (target && !this.host.root.contains(target) && !overlay?.contains(target) && this.isInsideRootOrOverlay(target)) this.maybeCloseOnFocusOut(event);
+	};
+	documentPointerOver = (event) => {
+		if (event.pointerType !== "touch" && this.isInsideRootOrOverlay(event.target)) this.cancelHoverClose();
+	};
+	documentPointerOut = (event) => {
+		const overlay = this.host.pane();
+		const target = event.target;
+		if (event.pointerType !== "touch" && target && !this.host.root.contains(target) && !overlay?.contains(target) && this.isInsideRootOrOverlay(target) && !this.isInsideRootOrOverlay(event.relatedTarget)) this.scheduleHoverClose();
+	};
+	constructor(host) {
+		this.host = host;
+	}
+	attach() {
+		const document = this.host.root.ownerDocument;
+		document.addEventListener("pointerdown", this.documentPointerDown, true);
+		document.addEventListener("focusout", this.documentFocusOut, true);
+		document.addEventListener("pointerover", this.documentPointerOver, true);
+		document.addEventListener("pointerout", this.documentPointerOut, true);
+	}
+	detach() {
+		const document = this.host.root.ownerDocument;
+		document.removeEventListener("pointerdown", this.documentPointerDown, true);
+		document.removeEventListener("focusout", this.documentFocusOut, true);
+		document.removeEventListener("pointerover", this.documentPointerOver, true);
+		document.removeEventListener("pointerout", this.documentPointerOut, true);
+	}
+	scheduleHoverOpen(ref) {
+		if (ref.disabled || ref.triggerValue === null) return;
+		this.cancelHoverClose();
+		if (this.host.open()) {
+			this.cancelHoverOpen();
+			this.host.openFromTrigger(ref, "none");
+			return;
+		}
+		this.cancelHoverOpen();
+		this.openTimer = setTimeout(() => {
+			this.openTimer = void 0;
+			this.host.openFromTrigger(ref, "none");
+		}, 50);
+	}
+	cancelHoverOpen() {
+		if (this.openTimer !== void 0) {
+			clearTimeout(this.openTimer);
+			this.openTimer = void 0;
+		}
+	}
+	scheduleHoverClose() {
+		this.cancelHoverOpen();
+		this.cancelHoverClose();
+		if (!this.host.open()) return;
+		this.closeTimer = setTimeout(() => {
+			this.closeTimer = void 0;
+			this.host.closeFromUser();
+		}, 50);
+	}
+	cancelHoverClose() {
+		if (this.closeTimer !== void 0) {
+			clearTimeout(this.closeTimer);
+			this.closeTimer = void 0;
+		}
+	}
+	onPanelPointerEnter() {
+		this.cancelHoverClose();
+	}
+	onPanelPointerLeave(event) {
+		if (event.pointerType === "touch" || this.isInsideRootOrOverlay(event.relatedTarget)) return;
+		this.scheduleHoverClose();
+	}
+	maybeCloseOnFocusOut(event) {
+		const next = event.relatedTarget;
+		if (this.isInsideRootOrOverlay(next)) return;
+		if (!this.host.open()) return;
+		const target = event.target;
+		const targetInPanel = !!target && this.host.pane()?.contains(target) === true;
+		queueMicrotask(() => {
+			if (!this.host.open()) return;
+			if (targetInPanel && target && !target.isConnected) return;
+			if (this.isInsideRootOrOverlay(this.host.root.ownerDocument.activeElement)) return;
+			this.host.setUserValue(null);
+		});
+	}
+	isInsideRootOrOverlay(node) {
+		if (!node) return false;
+		const overlay = this.host.pane();
+		return containsOwnedOverlay(this.host.root, node) || (overlay ? containsOwnedOverlay(overlay, node) : false);
+	}
+	isInsideDetachedOverlay(node) {
+		return !!node && !this.host.root.contains(node) && this.isInsideRootOrOverlay(node);
+	}
+};
+function connectNavigationMenuEffects(host) {
+	effect(() => {
+		const next = host.activeEntry();
+		untracked(() => host.syncOverlay(next));
+	});
+	effect(() => {
+		const dir = host.resolvedDir();
+		untracked(() => host.setKeyManagerDirection(dir));
+	});
+	effect(() => {
+		const align = host.align();
+		untracked(() => host.realignOpenPanel(align));
+	});
+}
+let nextNavigationMenuId = 0;
+var RaqmNavigationMenuItems = class {
+	host;
+	topLevelItems = signal([], ...ngDevMode ? [{ debugName: "topLevelItems" }] : /* istanbul ignore next */ []);
+	panelLinkElements = signal([], ...ngDevMode ? [{ debugName: "panelLinkElements" }] : /* istanbul ignore next */ []);
+	panelRootId = `raqm-navigation-menu-panel-${++nextNavigationMenuId}`;
+	activeEntry = computed(() => {
+		const value = this.host.value();
+		if (value === null) return null;
+		return this.topLevelItems().find((item) => item.triggerValue === value) ?? null;
+	}, ...ngDevMode ? [{ debugName: "activeEntry" }] : /* istanbul ignore next */ []);
+	open = computed(() => this.activeEntry() !== null, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	activeValue = computed(() => this.activeEntry()?.triggerValue ?? null, ...ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []);
+	constructor(host) {
+		this.host = host;
+	}
+	registerTopLevel(ref) {
+		if (isDevMode() && ref.triggerValue !== null) {
+			if (ref.triggerValue.trim() === "") console.error("[raqm-navigation-menu] A trigger `value` must be a non-empty string.");
+			else if (this.topLevelItems().some((item) => item.triggerValue === ref.triggerValue)) console.error(`[raqm-navigation-menu] Duplicate trigger value "${ref.triggerValue}"; trigger values must be unique.`);
+		}
+		this.topLevelItems.update((items) => [...items, ref]);
+	}
+	unregisterTopLevel(ref) {
+		this.topLevelItems.update((items) => items.filter((item) => item !== ref));
+	}
+	registerPanelLink(element) {
+		this.panelLinkElements.update((elements) => [...elements, element]);
+	}
+	unregisterPanelLink(element) {
+		this.panelLinkElements.update((elements) => elements.filter((item) => item !== element));
+	}
+};
+var RaqmNavigationMenuKeyboard = class {
+	state;
+	host;
+	keyManager;
+	constructor(state, host) {
+		this.state = state;
+		this.host = host;
+	}
+	init(items, injector, direction) {
+		this.keyManager = new FocusKeyManager(items, injector).withWrap(false).withHorizontalOrientation(direction === "rtl" ? "rtl" : "ltr").withVerticalOrientation(false).skipPredicate((item) => item.disabled || !isVisible(item.element));
+	}
+	setDirection(direction) {
+		this.keyManager?.withHorizontalOrientation(direction === "rtl" ? "rtl" : "ltr");
+	}
+	destroy() {
+		this.keyManager?.destroy();
+		this.keyManager = void 0;
+	}
+	moveFocusAcrossTopLevel(event, ref) {
+		if (!this.keyManager) return;
+		this.keyManager.updateActiveItem(ref);
+		this.keyManager.onKeydown(event);
+	}
+	handleTopLevelTab(event, ref) {
+		if (event.shiftKey || !this.host.open()) return;
+		const focusable = this.host.topLevelItems().filter((item) => !item.disabled && isVisible(item.element));
+		const isLast = focusable[focusable.length - 1] === ref;
+		if (this.host.activeEntry() === ref || isLast) {
+			event.preventDefault();
+			this.focusContent("first");
+		}
+	}
+	handlePanelTab(event, element) {
+		const links = this.openPanelLinks();
+		const index = links.indexOf(element);
+		if (index === -1) return;
+		if (event.shiftKey) {
+			if (index === 0) {
+				event.preventDefault();
+				this.host.activeEntry()?.element.focus();
+			}
+			return;
+		}
+		if (index === links.length - 1) {
+			event.preventDefault();
+			const next = this.nextTabbableAfter(this.host.root);
+			if (next) next.focus();
+			else this.host.closeFromUser();
+		}
+	}
+	focusContent(focus) {
+		if (!this.host.open()) return;
+		const links = this.openPanelLinks();
+		if (links.length === 0) return;
+		(focus === "first" ? links[0] : links[links.length - 1]).focus();
+	}
+	onFocusIn(event) {
+		const target = event.target;
+		if (!target) return;
+		const item = this.host.topLevelItems().find((candidate) => candidate.element === target || candidate.element.contains(target));
+		if (item) this.keyManager?.updateActiveItem(item);
+	}
+	applyPendingFocus() {
+		const kind = this.state.pendingFocus;
+		this.state.pendingFocus = null;
+		if (kind === null) return;
+		this.focusContent(kind);
+		const overlay = this.host.pane();
+		if (overlay && !overlay.contains(document.activeElement)) queueMicrotask(() => this.focusContent(kind));
+	}
+	openPanelLinks() {
+		const overlay = this.host.pane();
+		if (!overlay) return [];
+		return this.host.panelLinkElements().filter((element) => {
+			if (!overlay.contains(element) || !isVisible(element)) return false;
+			const content = element.closest(".raqm-navigation-menu-content");
+			return content !== null && !content.hasAttribute("inert");
+		});
+	}
+	nextTabbableAfter(root) {
+		const candidates = Array.from(document.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])")).filter((element) => isVisible(element) && element.closest("[inert]") === null && !this.host.isInsideRootOrOverlay(element));
+		for (const candidate of candidates) {
+			const position = root.compareDocumentPosition(candidate);
+			if (position & Node.DOCUMENT_POSITION_FOLLOWING && !(position & Node.DOCUMENT_POSITION_CONTAINED_BY)) return candidate;
+		}
+		return null;
+	}
+};
+var RaqmNavigationMenuOverlay = class {
+	overlay;
+	viewContainerRef;
+	state;
+	items;
+	position;
+	pane;
+	dismissal;
+	keyboard;
+	host;
+	overlayRef;
+	positionStrategy;
+	keydownSubscription;
+	detachSubscription;
+	releaseOwnership;
+	switchTimer;
+	disposeTimer;
+	pendingDisposeOverlay;
+	constructor(overlay, viewContainerRef, state, items, position, pane, dismissal, keyboard, host) {
+		this.overlay = overlay;
+		this.viewContainerRef = viewContainerRef;
+		this.state = state;
+		this.items = items;
+		this.position = position;
+		this.pane = pane;
+		this.dismissal = dismissal;
+		this.keyboard = keyboard;
+		this.host = host;
+	}
+	get ref() {
+		return this.overlayRef;
+	}
+	get element() {
+		return this.overlayRef?.overlayElement;
+	}
+	syncOverlay(next) {
+		if (next === this.state.currentRef) return;
+		const previous = this.state.currentRef;
+		if (next === null) {
+			this.state.currentRef = null;
+			this.beginClose();
+			return;
+		}
+		if (previous === null) {
+			this.state.currentRef = next;
+			this.beginOpen(next);
+			return;
+		}
+		this.beginSwitch(previous, next);
+		this.state.currentRef = next;
+	}
+	realignOpenPanel(align) {
+		if (this.overlayRef && this.state.currentRef) {
+			const strategy = this.position.buildStrategy(this.state.currentRef.element);
+			this.positionStrategy = strategy;
+			this.overlayRef.updatePositionStrategy(strategy);
+		}
+	}
+	destroy() {
+		this.removeDocumentListeners();
+		this.keyboard.destroy();
+		this.dismissal.cancelHoverOpen();
+		this.dismissal.cancelHoverClose();
+		this.cancelSwitch();
+		this.pane.cancelPaneTransaction();
+		this.pane.releaseResizeObserver();
+		this.position.releaseSideWatch();
+		this.keydownSubscription?.unsubscribe();
+		this.keydownSubscription = void 0;
+		this.detachSubscription?.unsubscribe();
+		this.detachSubscription = void 0;
+		const overlayRef = this.overlayRef;
+		this.overlayRef = void 0;
+		this.positionStrategy = void 0;
+		overlayRef?.dispose();
+		this.flushPendingDispose();
+	}
+	removeDocumentListeners() {
+		this.dismissal.detach();
+		this.releaseOwnership?.();
+		this.releaseOwnership = void 0;
+	}
+	beginOpen(entry) {
+		this.flushPendingDispose();
+		this.cancelSwitch();
+		this.pane.cancelPaneTransaction();
+		const direction = this.host.direction();
+		this.state.overlayDir.set(direction);
+		this.state.activationDirection.set(null);
+		this.state.closing.set(false);
+		this.state.side.set("bottom");
+		this.state.panelId.set(this.items.panelRootId);
+		this.state.previousTemplate.set(null);
+		this.state.currentTemplate.set(entry.content());
+		const strategy = this.position.buildStrategy(entry.element);
+		this.positionStrategy = strategy;
+		const config = {
+			positionStrategy: strategy,
+			hasBackdrop: false,
+			scrollStrategy: this.overlay.scrollStrategies.reposition(),
+			panelClass: "raqm-navigation-menu-overlay-pane",
+			disposeOnNavigation: true,
+			direction
+		};
+		const overlayRef = this.overlay.create(config);
+		this.overlayRef = overlayRef;
+		this.releaseOwnership = registerOverlayOwnership(entry.element, overlayRef);
+		this.dismissal.attach();
+		this.position.watchSide(strategy);
+		this.keydownSubscription = overlayRef.keydownEvents().subscribe((event) => this.handleOverlayKeydown(event));
+		this.detachSubscription = overlayRef.detachments().subscribe(() => this.handleDetached());
+		overlayRef.attach(new TemplatePortal(this.host.panelTemplate(), this.viewContainerRef));
+		this.pane.attachResizeObserver(entry.element);
+		this.keyboard.applyPendingFocus();
+	}
+	beginSwitch(previous, next) {
+		const overlayRef = this.overlayRef;
+		if (!overlayRef) {
+			this.beginOpen(next);
+			return;
+		}
+		this.releaseOwnership?.();
+		this.releaseOwnership = registerOverlayOwnership(next.element, overlayRef);
+		this.cancelSwitch();
+		this.dismissal.cancelHoverClose();
+		const previousSide = this.state.side();
+		const previousBlockSize = this.pane.currentPopupBlockSize(overlayRef);
+		this.pane.cancelPaneTransaction();
+		this.state.activationDirection.set(this.directionBetween(previous, next));
+		this.pane.restartEnteringSlide();
+		this.state.previousTemplate.set(this.state.currentTemplate());
+		this.state.currentTemplate.set(next.content());
+		this.state.panelId.set(this.items.panelRootId);
+		this.position.releaseSideWatch();
+		const strategy = this.position.buildStrategy(next.element);
+		this.positionStrategy = strategy;
+		const pane = overlayRef.overlayElement;
+		this.position.armPaneGlideAxes(pane);
+		overlayRef.updatePositionStrategy(strategy);
+		this.position.watchSide(strategy);
+		this.pane.attachResizeObserver(next.element);
+		this.pane.schedulePlacement(previousSide, previousBlockSize, () => {
+			if (this.state.pendingFocus !== null) this.keyboard.applyPendingFocus();
+		});
+		if (prefersReducedMotion()) {
+			this.state.previousTemplate.set(null);
+			this.position.disarmPaneGlideAxes(pane);
+			return;
+		}
+		this.switchTimer = setTimeout(() => {
+			this.switchTimer = void 0;
+			this.state.previousTemplate.set(null);
+			this.position.disarmPaneGlideAxes(overlayRef.overlayElement);
+		}, 350);
+	}
+	beginClose() {
+		this.removeDocumentListeners();
+		this.cancelSwitch();
+		this.pane.cancelPaneTransaction();
+		this.dismissal.cancelHoverOpen();
+		this.dismissal.cancelHoverClose();
+		this.state.previousTemplate.set(null);
+		this.state.panelId.set(null);
+		const overlayRef = this.overlayRef;
+		this.overlayRef = void 0;
+		this.positionStrategy = void 0;
+		this.position.releaseSideWatch();
+		this.keydownSubscription?.unsubscribe();
+		this.keydownSubscription = void 0;
+		this.detachSubscription?.unsubscribe();
+		this.detachSubscription = void 0;
+		this.pane.releaseResizeObserver();
+		if (!overlayRef) {
+			this.state.currentTemplate.set(null);
+			return;
+		}
+		overlayRef.overlayElement.setAttribute("inert", "");
+		overlayRef.overlayElement.style.pointerEvents = "none";
+		if (prefersReducedMotion()) {
+			this.state.currentTemplate.set(null);
+			overlayRef.dispose();
+			return;
+		}
+		this.state.closing.set(true);
+		this.pendingDisposeOverlay = overlayRef;
+		this.disposeTimer = setTimeout(() => {
+			this.disposeTimer = void 0;
+			this.pendingDisposeOverlay = void 0;
+			this.state.closing.set(false);
+			this.state.currentTemplate.set(null);
+			overlayRef.dispose();
+		}, 150);
+	}
+	flushPendingDispose() {
+		if (this.disposeTimer !== void 0) {
+			clearTimeout(this.disposeTimer);
+			this.disposeTimer = void 0;
+		}
+		const overlayRef = this.pendingDisposeOverlay;
+		this.pendingDisposeOverlay = void 0;
+		this.state.closing.set(false);
+		overlayRef?.dispose();
+	}
+	handleDetached() {
+		this.removeDocumentListeners();
+		this.position.releaseSideWatch();
+		this.keydownSubscription?.unsubscribe();
+		this.keydownSubscription = void 0;
+		this.detachSubscription?.unsubscribe();
+		this.detachSubscription = void 0;
+		this.pane.releaseResizeObserver();
+		this.cancelSwitch();
+		this.pane.cancelPaneTransaction();
+		this.overlayRef = void 0;
+		this.positionStrategy = void 0;
+		this.state.currentTemplate.set(null);
+		this.state.previousTemplate.set(null);
+		this.state.panelId.set(null);
+		this.state.closing.set(false);
+		this.state.currentRef = null;
+	}
+	handleOverlayKeydown(event) {
+		const overlay = this.overlayRef?.overlayElement;
+		if (event.key !== "Escape" || !this.items.open() || !overlay || !overlay.contains(event.target)) return;
+		event.preventDefault();
+		const trigger = this.items.activeEntry()?.element;
+		this.host.closeFromUser();
+		trigger?.focus();
+	}
+	cancelSwitch() {
+		if (this.switchTimer !== void 0) {
+			clearTimeout(this.switchTimer);
+			this.switchTimer = void 0;
+		}
+	}
+	directionBetween(previous, next) {
+		const previousRect = previous.element.getBoundingClientRect();
+		return next.element.getBoundingClientRect().left > previousRect.left ? "right" : "left";
+	}
+};
+var RaqmNavigationMenuPane = class {
+	injector;
+	host;
+	resizeObserver;
+	paneTransactionRef;
+	paneTransactionGeneration = 0;
+	paneSizeFrame;
+	panePinnedPopup;
+	constructor(injector, host) {
+		this.injector = injector;
+		this.host = host;
+	}
+	schedulePlacement(previousSide, previousBlockSize, afterPlacement) {
+		const generation = ++this.paneTransactionGeneration;
+		this.paneTransactionRef = afterNextRender(() => {
+			this.paneTransactionRef = void 0;
+			if (generation !== this.paneTransactionGeneration) return;
+			this.applySwitchPlacement(previousSide, previousBlockSize, generation);
+			afterPlacement();
+		}, { injector: this.injector });
+	}
+	applySwitchPlacement(previousSide, previousBlockSize, generation) {
+		const popup = (this.host.overlay()?.overlayElement)?.querySelector(".raqm-navigation-menu-popup");
+		if (!popup) {
+			this.host.overlay()?.updatePosition();
+			return;
+		}
+		popup.classList.add(POPUP_MEASURE_CLASS);
+		this.syncPopupBlockSize();
+		this.host.overlay()?.updatePosition();
+		const finalBlockSize = popup.style.getPropertyValue("--raqm-navigation-menu-popup-block-size");
+		popup.classList.remove(POPUP_MEASURE_CLASS);
+		if (finalBlockSize === "") {
+			popup.style.removeProperty("block-size");
+			popup.style.removeProperty("transition");
+			return;
+		}
+		if (this.host.side() === previousSide && previousBlockSize !== "" && !prefersReducedMotion()) {
+			this.cancelPaneSizeFrame();
+			popup.style.transition = "none";
+			popup.style.blockSize = previousBlockSize;
+			this.panePinnedPopup = popup;
+			if (typeof requestAnimationFrame === "function") this.paneSizeFrame = requestAnimationFrame(() => {
+				this.paneSizeFrame = void 0;
+				if (generation !== this.paneTransactionGeneration) return;
+				this.releasePanePin();
+			});
+			else this.releasePanePin();
+			return;
+		}
+		popup.style.removeProperty("block-size");
+		popup.style.removeProperty("transition");
+	}
+	currentPopupBlockSize(overlayRef) {
+		const popup = overlayRef.overlayElement.querySelector(".raqm-navigation-menu-popup");
+		if (!popup || popup.offsetHeight === 0) return "";
+		return `${popup.offsetHeight}px`;
+	}
+	restartEnteringSlide() {
+		const entering = this.host.overlay()?.overlayElement?.querySelector(".raqm-navigation-menu-content--entering");
+		if (!entering) return;
+		entering.style.animation = "none";
+		entering.offsetWidth;
+		entering.style.animation = "";
+	}
+	attachResizeObserver(anchor) {
+		this.releaseResizeObserver();
+		if (typeof ResizeObserver === "undefined") return;
+		this.resizeObserver = new ResizeObserver(() => {
+			this.syncPopupBlockSize();
+			this.host.overlay()?.updatePosition();
+		});
+		this.resizeObserver.observe(anchor);
+		const overlay = this.host.overlay()?.overlayElement;
+		const popup = overlay?.querySelector(".raqm-navigation-menu-popup");
+		if (popup) this.resizeObserver.observe(popup);
+		const content = overlay?.querySelector(".raqm-navigation-menu-content--entering");
+		if (content) this.resizeObserver.observe(content);
+	}
+	syncPopupBlockSize() {
+		const overlay = this.host.overlay()?.overlayElement;
+		if (!overlay) return;
+		const popup = overlay.querySelector(".raqm-navigation-menu-popup");
+		const content = overlay.querySelector(".raqm-navigation-menu-content--entering");
+		if (!popup || !content) return;
+		popup.style.setProperty("--raqm-navigation-menu-popup-block-size", `${content.offsetHeight}px`);
+	}
+	releaseResizeObserver() {
+		this.resizeObserver?.disconnect();
+		this.resizeObserver = void 0;
+	}
+	cancelPaneTransaction() {
+		this.paneTransactionGeneration++;
+		this.paneTransactionRef?.destroy();
+		this.paneTransactionRef = void 0;
+		this.cancelPaneSizeFrame();
+	}
+	cancelPaneSizeFrame() {
+		if (this.paneSizeFrame !== void 0 && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.paneSizeFrame);
+		this.paneSizeFrame = void 0;
+		this.releasePanePin();
+	}
+	releasePanePin() {
+		const popup = this.panePinnedPopup;
+		if (!popup) return;
+		popup.style.removeProperty("block-size");
+		popup.style.removeProperty("transition");
+		this.panePinnedPopup = void 0;
+	}
+};
+var RaqmNavigationMenuPosition = class {
+	overlay;
+	state;
+	host;
+	sideSubscription;
+	constructor(overlay, state, host) {
+		this.overlay = overlay;
+		this.state = state;
+		this.host = host;
+	}
+	buildStrategy(origin) {
+		const strategy = this.overlay.position().flexibleConnectedTo(origin);
+		strategy.withPositions(this.buildPositions()).withFlexibleDimensions(false).withGrowAfterOpen(false).withPush(true).withViewportMargin(5);
+		return strategy;
+	}
+	buildPositions() {
+		const align = this.host.align() === "end" ? "end" : "start";
+		return [{
+			originX: align,
+			originY: "bottom",
+			overlayX: align,
+			overlayY: "top",
+			offsetY: 8
+		}, {
+			originX: align,
+			originY: "top",
+			overlayX: align,
+			overlayY: "bottom",
+			offsetY: -8
+		}];
+	}
+	watchSide(strategy) {
+		this.sideSubscription = strategy.positionChanges.subscribe((change) => {
+			this.state.side.set(change.connectionPair.originY === "top" ? "top" : "bottom");
+			this.armPaneGlide(this.host.pane() ?? null);
+		});
+	}
+	releaseSideWatch() {
+		this.sideSubscription?.unsubscribe();
+		this.sideSubscription = void 0;
+	}
+	armPaneGlide(pane) {
+		pane?.classList.add(PANE_GLIDE_CLASS);
+	}
+	armPaneGlideAxes(pane) {
+		if (!pane) return;
+		const usesRight = this.host.direction() === "rtl" ? this.host.align() === "start" : this.host.align() === "end";
+		pane.classList.toggle(PANE_GLIDE_LEFT_CLASS, !usesRight);
+		pane.classList.toggle(PANE_GLIDE_RIGHT_CLASS, usesRight);
+	}
+	disarmPaneGlideAxes(pane) {
+		pane?.classList.remove(PANE_GLIDE_LEFT_CLASS, PANE_GLIDE_RIGHT_CLASS);
+	}
+};
+var RaqmNavigationMenuState = class {
+	panelId = signal(null, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	overlayDir = signal("ltr", ...ngDevMode ? [{ debugName: "overlayDir" }] : /* istanbul ignore next */ []);
+	currentTemplate = signal(null, ...ngDevMode ? [{ debugName: "currentTemplate" }] : /* istanbul ignore next */ []);
+	previousTemplate = signal(null, ...ngDevMode ? [{ debugName: "previousTemplate" }] : /* istanbul ignore next */ []);
+	activationDirection = signal(null, ...ngDevMode ? [{ debugName: "activationDirection" }] : /* istanbul ignore next */ []);
+	side = signal("bottom", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	closing = signal(false, ...ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []);
+	currentRef = null;
+	pendingFocus = null;
+};
+var RaqmNavigationMenuComponent = class RaqmNavigationMenuComponent {
+	host = inject(ElementRef);
+	overlay = inject(Overlay);
+	viewContainerRef = inject(ViewContainerRef);
+	injector = inject(Injector);
+	directionality = inject(Directionality, { optional: true });
+	panelTemplate = viewChild.required("panel", {
+		...ngDevMode ? { debugName: "panelTemplate" } : /* istanbul ignore next */ {},
+		read: TemplateRef
+	});
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	dir = input(void 0, ...ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []);
+	state = new RaqmNavigationMenuState();
+	items = new RaqmNavigationMenuItems({ value: () => this.value() });
+	open = this.items.open;
+	activeValue = this.items.activeValue;
+	panelId = this.state.panelId;
+	overlayDir = this.state.overlayDir;
+	currentTemplate = this.state.currentTemplate;
+	previousTemplate = this.state.previousTemplate;
+	activationDirection = this.state.activationDirection;
+	side = this.state.side;
+	closing = this.state.closing;
+	position = new RaqmNavigationMenuPosition(this.overlay, this.state, {
+		align: () => this.align(),
+		direction: () => this.resolvedDir(),
+		pane: () => this.layer.element
+	});
+	pane = new RaqmNavigationMenuPane(this.injector, {
+		overlay: () => this.layer.ref,
+		side: () => this.state.side()
+	});
+	dismissal = new RaqmNavigationMenuDismissal({
+		root: this.host.nativeElement,
+		open: () => this.open(),
+		pane: () => this.layer.element,
+		openFromTrigger: (ref, focusContent) => this.openFromTrigger(ref, focusContent),
+		closeFromUser: () => this.closeFromUser(),
+		setUserValue: (value) => this.setUserValue(value)
+	});
+	keyboard = new RaqmNavigationMenuKeyboard(this.state, {
+		root: this.host.nativeElement,
+		open: () => this.open(),
+		activeEntry: () => this.items.activeEntry(),
+		topLevelItems: () => this.items.topLevelItems(),
+		pane: () => this.layer.element,
+		panelLinkElements: () => this.items.panelLinkElements(),
+		isInsideRootOrOverlay: (node) => this.dismissal.isInsideRootOrOverlay(node),
+		closeFromUser: () => this.closeFromUser()
+	});
+	layer = new RaqmNavigationMenuOverlay(this.overlay, this.viewContainerRef, this.state, this.items, this.position, this.pane, this.dismissal, this.keyboard, {
+		panelTemplate: () => this.panelTemplate(),
+		direction: () => this.resolvedDir(),
+		closeFromUser: () => this.closeFromUser()
+	});
+	resolvedDir = computed(() => {
+		const explicit = this.dir();
+		if (explicit === "ltr" || explicit === "rtl") return explicit;
+		if (getComputedStyle(this.host.nativeElement).direction === "rtl") return "rtl";
+		return this.directionality?.value ?? "ltr";
+	}, ...ngDevMode ? [{ debugName: "resolvedDir" }] : /* istanbul ignore next */ []);
+	constructor() {
+		connectNavigationMenuEffects({
+			activeEntry: () => this.items.activeEntry(),
+			resolvedDir: () => this.resolvedDir(),
+			align: () => this.align(),
+			syncOverlay: (next) => this.layer.syncOverlay(next),
+			setKeyManagerDirection: (direction) => this.keyboard.setDirection(direction),
+			realignOpenPanel: (align) => this.layer.realignOpenPanel(align)
+		});
+	}
+	ngOnInit() {
+		this.keyboard.init(this.items.topLevelItems, this.injector, this.resolvedDir());
+	}
+	ngOnDestroy() {
+		this.layer.destroy();
+	}
+	isActive(value) {
+		return this.activeValue() === value && this.open();
+	}
+	registerTopLevel(ref) {
+		this.items.registerTopLevel(ref);
+	}
+	unregisterTopLevel(ref) {
+		this.items.unregisterTopLevel(ref);
+	}
+	registerPanelLink(element) {
+		this.items.registerPanelLink(element);
+	}
+	unregisterPanelLink(element) {
+		this.items.unregisterPanelLink(element);
+	}
+	openFromTrigger(ref, focusContent) {
+		if (ref.disabled || ref.triggerValue === null) return;
+		this.dismissal.cancelHoverOpen();
+		this.dismissal.cancelHoverClose();
+		if (this.items.activeEntry() === ref) {
+			if (focusContent !== "none") this.keyboard.focusContent(focusContent);
+			return;
+		}
+		this.state.pendingFocus = focusContent === "none" ? null : focusContent;
+		this.setUserValue(ref.triggerValue);
+	}
+	toggleFromTrigger(ref) {
+		if (ref.disabled || ref.triggerValue === null) return;
+		if (this.items.activeEntry() === ref) {
+			this.closeFromUser();
+			return;
+		}
+		this.openFromTrigger(ref, "none");
+	}
+	closeFromUser() {
+		this.dismissal.cancelHoverOpen();
+		this.dismissal.cancelHoverClose();
+		this.setUserValue(null);
+	}
+	scheduleHoverOpen(ref) {
+		this.dismissal.scheduleHoverOpen(ref);
+	}
+	cancelHoverOpen() {
+		this.dismissal.cancelHoverOpen();
+	}
+	scheduleHoverClose() {
+		this.dismissal.scheduleHoverClose();
+	}
+	cancelHoverClose() {
+		this.dismissal.cancelHoverClose();
+	}
+	moveFocusAcrossTopLevel(event, ref) {
+		this.keyboard.moveFocusAcrossTopLevel(event, ref);
+	}
+	handleTopLevelTab(event, ref) {
+		this.keyboard.handleTopLevelTab(event, ref);
+	}
+	handlePanelTab(event, element) {
+		this.keyboard.handlePanelTab(event, element);
+	}
+	focusContent(focus) {
+		this.keyboard.focusContent(focus);
+	}
+	onFocusIn(event) {
+		this.keyboard.onFocusIn(event);
+	}
+	onFocusOut(event) {
+		this.dismissal.maybeCloseOnFocusOut(event);
+	}
+	onPanelFocusOut(event) {
+		this.dismissal.maybeCloseOnFocusOut(event);
+	}
+	onPanelPointerEnter() {
+		this.dismissal.onPanelPointerEnter();
+	}
+	onPanelPointerLeave(event) {
+		this.dismissal.onPanelPointerLeave(event);
+	}
+	isInsideDetachedOverlay(node) {
+		return this.dismissal.isInsideDetachedOverlay(node);
+	}
+	setUserValue(value) {
+		if (this.value() === value) return;
+		this.value.set(value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmNavigationMenuComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmNavigationMenuComponent,
+		isStandalone: true,
+		selector: "nav[raqm-navigation-menu]",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dir: {
+				classPropertyName: "dir",
+				publicName: "dir",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			listeners: {
+				"focusout": "onFocusOut($event)",
+				"focusin": "onFocusIn($event)"
+			},
+			properties: { "attr.data-raqm-open": "open() ? \"\" : null" },
+			classAttribute: "raqm-navigation-menu"
+		},
+		providers: [{
+			provide: RAQM_NAVIGATION_MENU,
+			useExisting: RaqmNavigationMenuComponent
+		}],
+		viewQueries: [{
+			propertyName: "panelTemplate",
+			first: true,
+			predicate: ["panel"],
+			descendants: true,
+			read: TemplateRef,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content />\r\n\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-navigation-menu-popup\"\r\n    [attr.dir]=\"overlayDir()\"\r\n    [attr.data-raqm-side]=\"side()\"\r\n    [attr.data-raqm-activation]=\"activationDirection()\"\r\n    [class.raqm-navigation-menu-popup--closing]=\"closing()\"\r\n    (focusout)=\"onPanelFocusOut($event)\"\r\n    (pointerenter)=\"onPanelPointerEnter()\"\r\n    (pointerleave)=\"onPanelPointerLeave($event)\"\r\n  >\r\n    <!-- Safe pointer path across the 8px gap. -->\r\n    <span class=\"raqm-navigation-menu-bridge\" aria-hidden=\"true\"></span>\r\n\r\n    <div class=\"raqm-navigation-menu-viewport\">\r\n      @if (previousTemplate(); as previous) {\r\n        <!-- Outgoing content, inert and hidden from assistive technology while it fades. -->\r\n        <div\r\n          class=\"raqm-navigation-menu-content raqm-navigation-menu-content--leaving\"\r\n          [attr.dir]=\"overlayDir()\"\r\n          aria-hidden=\"true\"\r\n          inert\r\n        >\r\n          <ng-container [ngTemplateOutlet]=\"previous\" />\r\n        </div>\r\n      }\r\n      @if (currentTemplate(); as current) {\r\n        <div\r\n          class=\"raqm-navigation-menu-content raqm-navigation-menu-content--entering\"\r\n          [attr.dir]=\"overlayDir()\"\r\n          [attr.id]=\"panelId()\"\r\n        >\r\n          <ng-container [ngTemplateOutlet]=\"current\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [".raqm-navigation-menu-popup{position:relative;border-radius:var(--raqm-radius-lg);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent),var(--raqm-shadow-lg);outline:none;block-size:var(--raqm-navigation-menu-popup-block-size, auto);animation:raqm-navigation-menu-popup-in var(--raqm-duration-fast) var(--raqm-ease-emphasized);transition:opacity var(--raqm-duration-base) var(--raqm-ease-standard),transform var(--raqm-duration-base) var(--raqm-ease-standard),block-size .35s var(--raqm-ease-emphasized);transform-origin:center top}.raqm-navigation-menu-popup--measure{transition:none}.raqm-navigation-menu-popup--closing{opacity:0;transform:scale(.9);transition-duration:var(--raqm-duration-base)}@keyframes raqm-navigation-menu-popup-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}.raqm-navigation-menu-bridge{position:absolute;inset-inline:0;block-size:10px;pointer-events:auto}.raqm-navigation-menu-popup[data-raqm-side=bottom] .raqm-navigation-menu-bridge{inset-block-start:-10px}.raqm-navigation-menu-popup[data-raqm-side=top] .raqm-navigation-menu-bridge{inset-block-end:-10px}.raqm-navigation-menu-viewport{position:relative;overflow:hidden;block-size:100%;border-radius:var(--raqm-radius-lg)}.raqm-navigation-menu-content{padding:var(--raqm-spacing);transition:opacity .35s var(--raqm-ease-emphasized),transform .35s var(--raqm-ease-emphasized),translate .35s var(--raqm-ease-emphasized);will-change:opacity,transform}.raqm-navigation-menu-content--leaving{position:absolute;inset-block-start:0;inset-inline:0;opacity:0}.raqm-navigation-menu-popup[data-raqm-activation=left] .raqm-navigation-menu-content--leaving{transform:translate(50%)}.raqm-navigation-menu-popup[data-raqm-activation=right] .raqm-navigation-menu-content--leaving,.raqm-navigation-menu-popup[dir=rtl][data-raqm-activation=left] .raqm-navigation-menu-content--leaving{transform:translate(-50%)}.raqm-navigation-menu-popup[dir=rtl][data-raqm-activation=right] .raqm-navigation-menu-content--leaving{transform:translate(50%)}.raqm-navigation-menu-content--entering{animation-duration:.35s;animation-timing-function:var(--raqm-ease-emphasized)}.raqm-navigation-menu-popup[data-raqm-activation=left] .raqm-navigation-menu-content--entering{animation-name:raqm-navigation-menu-content-from-start}.raqm-navigation-menu-popup[data-raqm-activation=right] .raqm-navigation-menu-content--entering,.raqm-navigation-menu-popup[dir=rtl][data-raqm-activation=left] .raqm-navigation-menu-content--entering{animation-name:raqm-navigation-menu-content-from-end}.raqm-navigation-menu-popup[dir=rtl][data-raqm-activation=right] .raqm-navigation-menu-content--entering{animation-name:raqm-navigation-menu-content-from-start}@keyframes raqm-navigation-menu-content-from-start{0%{opacity:0;transform:translate(-50%)}to{opacity:1;transform:none}}@keyframes raqm-navigation-menu-content-from-end{0%{opacity:0;transform:translate(50%)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.raqm-navigation-menu-popup,.raqm-navigation-menu-popup--closing,.raqm-navigation-menu-content,.raqm-navigation-menu-content--entering,.raqm-navigation-menu-content--leaving{animation:none;transition:none}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmNavigationMenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "nav[raqm-navigation-menu]",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-navigation-menu",
+				"[attr.data-raqm-open]": "open() ? \"\" : null",
+				"(focusout)": "onFocusOut($event)",
+				"(focusin)": "onFocusIn($event)"
+			},
+			providers: [{
+				provide: RAQM_NAVIGATION_MENU,
+				useExisting: RaqmNavigationMenuComponent
+			}],
+			template: "<ng-content />\r\n\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-navigation-menu-popup\"\r\n    [attr.dir]=\"overlayDir()\"\r\n    [attr.data-raqm-side]=\"side()\"\r\n    [attr.data-raqm-activation]=\"activationDirection()\"\r\n    [class.raqm-navigation-menu-popup--closing]=\"closing()\"\r\n    (focusout)=\"onPanelFocusOut($event)\"\r\n    (pointerenter)=\"onPanelPointerEnter()\"\r\n    (pointerleave)=\"onPanelPointerLeave($event)\"\r\n  >\r\n    <!-- Safe pointer path across the 8px gap. -->\r\n    <span class=\"raqm-navigation-menu-bridge\" aria-hidden=\"true\"></span>\r\n\r\n    <div class=\"raqm-navigation-menu-viewport\">\r\n      @if (previousTemplate(); as previous) {\r\n        <!-- Outgoing content, inert and hidden from assistive technology while it fades. -->\r\n        <div\r\n          class=\"raqm-navigation-menu-content raqm-navigation-menu-content--leaving\"\r\n          [attr.dir]=\"overlayDir()\"\r\n          aria-hidden=\"true\"\r\n          inert\r\n        >\r\n          <ng-container [ngTemplateOutlet]=\"previous\" />\r\n        </div>\r\n      }\r\n      @if (currentTemplate(); as current) {\r\n        <div\r\n          class=\"raqm-navigation-menu-content raqm-navigation-menu-content--entering\"\r\n          [attr.dir]=\"overlayDir()\"\r\n          [attr.id]=\"panelId()\"\r\n        >\r\n          <ng-container [ngTemplateOutlet]=\"current\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [".raqm-navigation-menu-popup{position:relative;border-radius:var(--raqm-radius-lg);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent),var(--raqm-shadow-lg);outline:none;block-size:var(--raqm-navigation-menu-popup-block-size, auto);animation:raqm-navigation-menu-popup-in var(--raqm-duration-fast) var(--raqm-ease-emphasized);transition:opacity var(--raqm-duration-base) var(--raqm-ease-standard),transform var(--raqm-duration-base) var(--raqm-ease-standard),block-size .35s var(--raqm-ease-emphasized);transform-origin:center top}.raqm-navigation-menu-popup--measure{transition:none}.raqm-navigation-menu-popup--closing{opacity:0;transform:scale(.9);transition-duration:var(--raqm-duration-base)}@keyframes raqm-navigation-menu-popup-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}.raqm-navigation-menu-bridge{position:absolute;inset-inline:0;block-size:10px;pointer-events:auto}.raqm-navigation-menu-popup[data-raqm-side=bottom] .raqm-navigation-menu-bridge{inset-block-start:-10px}.raqm-navigation-menu-popup[data-raqm-side=top] .raqm-navigation-menu-bridge{inset-block-end:-10px}.raqm-navigation-menu-viewport{position:relative;overflow:hidden;block-size:100%;border-radius:var(--raqm-radius-lg)}.raqm-navigation-menu-content{padding:var(--raqm-spacing);transition:opacity .35s var(--raqm-ease-emphasized),transform .35s var(--raqm-ease-emphasized),translate .35s var(--raqm-ease-emphasized);will-change:opacity,transform}.raqm-navigation-menu-content--leaving{position:absolute;inset-block-start:0;inset-inline:0;opacity:0}.raqm-navigation-menu-popup[data-raqm-activation=left] .raqm-navigation-menu-content--leaving{transform:translate(50%)}.raqm-navigation-menu-popup[data-raqm-activation=right] .raqm-navigation-menu-content--leaving,.raqm-navigation-menu-popup[dir=rtl][data-raqm-activation=left] .raqm-navigation-menu-content--leaving{transform:translate(-50%)}.raqm-navigation-menu-popup[dir=rtl][data-raqm-activation=right] .raqm-navigation-menu-content--leaving{transform:translate(50%)}.raqm-navigation-menu-content--entering{animation-duration:.35s;animation-timing-function:var(--raqm-ease-emphasized)}.raqm-navigation-menu-popup[data-raqm-activation=left] .raqm-navigation-menu-content--entering{animation-name:raqm-navigation-menu-content-from-start}.raqm-navigation-menu-popup[data-raqm-activation=right] .raqm-navigation-menu-content--entering,.raqm-navigation-menu-popup[dir=rtl][data-raqm-activation=left] .raqm-navigation-menu-content--entering{animation-name:raqm-navigation-menu-content-from-end}.raqm-navigation-menu-popup[dir=rtl][data-raqm-activation=right] .raqm-navigation-menu-content--entering{animation-name:raqm-navigation-menu-content-from-start}@keyframes raqm-navigation-menu-content-from-start{0%{opacity:0;transform:translate(-50%)}to{opacity:1;transform:none}}@keyframes raqm-navigation-menu-content-from-end{0%{opacity:0;transform:translate(50%)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.raqm-navigation-menu-popup,.raqm-navigation-menu-popup--closing,.raqm-navigation-menu-content,.raqm-navigation-menu-content--entering,.raqm-navigation-menu-content--leaving{animation:none;transition:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		panelTemplate: [{
+			type: i0.ViewChild,
+			args: ["panel", {
+				read: TemplateRef,
+				isSignal: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		dir: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dir",
+				required: false
+			}]
+		}]
+	}
+});
+const NO_CONTENT = signal(null, ...ngDevMode ? [{ debugName: "NO_CONTENT" }] : /* istanbul ignore next */ []);
+var RaqmNavigationMenuListDirective = class RaqmNavigationMenuListDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmNavigationMenuListDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmNavigationMenuListDirective,
+		isStandalone: true,
+		selector: "ul[raqm-navigation-menu-list]",
+		host: { classAttribute: "raqm-navigation-menu-list" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmNavigationMenuListDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ul[raqm-navigation-menu-list]",
+			host: { class: "raqm-navigation-menu-list" }
+		}]
+	}]
+});
+var RaqmNavigationMenuTriggerDirective = class RaqmNavigationMenuTriggerDirective {
+	host = inject(ElementRef);
+	menu = inject(RAQM_NAVIGATION_MENU, { optional: true });
+	destroyRef = inject(DestroyRef);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	contentDirective = contentChild(RaqmNavigationMenuContentDirective, ...ngDevMode ? [{ debugName: "contentDirective" }] : /* istanbul ignore next */ []);
+	contentTemplate = computed(() => this.contentDirective()?.content ?? null, ...ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	active = computed(() => this.menu?.isActive(this.value()) ?? false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	panelId = computed(() => this.menu?.panelId() ?? null, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	ref = (() => {
+		const self = this;
+		return {
+			get element() {
+				return self.host.nativeElement;
+			},
+			get triggerValue() {
+				return self.value();
+			},
+			get content() {
+				return self.contentTemplate;
+			},
+			get disabled() {
+				return self.disabled();
+			},
+			focus() {
+				self.host.nativeElement.focus();
+			}
+		};
+	})();
+	constructor() {
+		const element = this.host.nativeElement;
+		if (!element.hasAttribute("type")) element.setAttribute("type", "button");
+		if (isDevMode() && this.menu === null) console.error("[raqm-navigation-menu-trigger] No parent <nav raqm-navigation-menu> found; the trigger cannot open a panel.");
+		this.destroyRef.onDestroy(() => this.menu?.unregisterTopLevel(this.ref));
+	}
+	ngOnInit() {
+		this.menu?.registerTopLevel(this.ref);
+	}
+	onClick() {
+		if (this.disabled()) return;
+		this.menu?.toggleFromTrigger(this.ref);
+	}
+	onKeydown(event) {
+		if (this.disabled()) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				this.menu?.openFromTrigger(this.ref, "first");
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				this.menu?.openFromTrigger(this.ref, "last");
+				return;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				this.menu?.openFromTrigger(this.ref, "first");
+				return;
+			case "Escape":
+				if (this.menu?.open()) {
+					event.preventDefault();
+					this.menu.closeFromUser();
+				}
+				return;
+			case "ArrowLeft":
+			case "ArrowRight":
+				this.menu?.moveFocusAcrossTopLevel(event, this.ref);
+				return;
+			case "Tab":
+				this.menu?.handleTopLevelTab(event, this.ref);
+				return;
+			default: return;
+		}
+	}
+	onPointerEnter(event) {
+		if (event.pointerType === "touch" || this.disabled()) return;
+		this.menu?.scheduleHoverOpen(this.ref);
+	}
+	onPointerLeave(event) {
+		if (event.pointerType === "touch" || this.menu?.isInsideDetachedOverlay(event.relatedTarget)) return;
+		this.menu?.scheduleHoverClose();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmNavigationMenuTriggerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: RaqmNavigationMenuTriggerDirective,
+		isStandalone: true,
+		selector: "button[raqm-navigation-menu-trigger]",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"click": "onClick()",
+				"keydown": "onKeydown($event)",
+				"pointerenter": "onPointerEnter($event)",
+				"pointerleave": "onPointerLeave($event)"
+			},
+			properties: {
+				"attr.aria-expanded": "active() ? \"true\" : \"false\"",
+				"attr.aria-controls": "active() ? panelId() : null",
+				"attr.data-raqm-open": "active() ? \"\" : null",
+				"attr.disabled": "disabled() ? \"\" : null"
+			},
+			classAttribute: "raqm-navigation-menu-trigger"
+		},
+		queries: [{
+			propertyName: "contentDirective",
+			first: true,
+			predicate: RaqmNavigationMenuContentDirective,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmNavigationMenuTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-navigation-menu-trigger]",
+			host: {
+				class: "raqm-navigation-menu-trigger",
+				"[attr.aria-expanded]": "active() ? \"true\" : \"false\"",
+				"[attr.aria-controls]": "active() ? panelId() : null",
+				"[attr.data-raqm-open]": "active() ? \"\" : null",
+				"[attr.disabled]": "disabled() ? \"\" : null",
+				"(click)": "onClick()",
+				"(keydown)": "onKeydown($event)",
+				"(pointerenter)": "onPointerEnter($event)",
+				"(pointerleave)": "onPointerLeave($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		contentDirective: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RaqmNavigationMenuContentDirective), { isSignal: true }]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmNavigationMenuContentDirective = class RaqmNavigationMenuContentDirective {
+	content = inject(TemplateRef);
+	menu = inject(RAQM_NAVIGATION_MENU, { optional: true });
+	constructor() {
+		if (isDevMode() && this.menu === null) console.error("[raqm-navigation-menu-content] No parent <nav raqm-navigation-menu> found; the template is never rendered.");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmNavigationMenuContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmNavigationMenuContentDirective,
+		isStandalone: true,
+		selector: "ng-template[raqm-navigation-menu-content]",
+		exportAs: ["raqmNavigationMenuContent"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmNavigationMenuContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[raqm-navigation-menu-content]",
+			exportAs: "raqmNavigationMenuContent"
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmNavigationMenuLinkDirective = class RaqmNavigationMenuLinkDirective {
+	host = inject(ElementRef);
+	menu = inject(RAQM_NAVIGATION_MENU, { optional: true });
+	destroyRef = inject(DestroyRef);
+	active = input(false, {
+		...ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	constructor() {
+		this.destroyRef.onDestroy(() => this.menu?.unregisterPanelLink(this.host.nativeElement));
+	}
+	ngOnInit() {
+		this.menu?.registerPanelLink(this.host.nativeElement);
+	}
+	onClick(event) {
+		if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+		this.menu?.closeFromUser();
+	}
+	onKeydown(event) {
+		if (event.key === "Tab") this.menu?.handlePanelTab(event, this.host.nativeElement);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmNavigationMenuLinkDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmNavigationMenuLinkDirective,
+		isStandalone: true,
+		selector: "a[raqm-navigation-menu-link]",
+		inputs: { active: {
+			classPropertyName: "active",
+			publicName: "active",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			listeners: {
+				"click": "onClick($event)",
+				"keydown": "onKeydown($event)"
+			},
+			properties: { "attr.aria-current": "active() ? \"page\" : null" },
+			classAttribute: "raqm-navigation-menu-link"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmNavigationMenuLinkDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "a[raqm-navigation-menu-link]",
+			host: {
+				class: "raqm-navigation-menu-link",
+				"[attr.aria-current]": "active() ? \"page\" : null",
+				"(click)": "onClick($event)",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { active: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "active",
+			required: false
+		}]
+	}] }
+});
+var RaqmNavigationMenuTopLinkDirective = class RaqmNavigationMenuTopLinkDirective {
+	host = inject(ElementRef);
+	menu = inject(RAQM_NAVIGATION_MENU, { optional: true });
+	destroyRef = inject(DestroyRef);
+	ref = (() => {
+		const self = this;
+		return {
+			get element() {
+				return self.host.nativeElement;
+			},
+			get triggerValue() {
+				return null;
+			},
+			get content() {
+				return NO_CONTENT;
+			},
+			get disabled() {
+				return false;
+			},
+			focus() {
+				self.host.nativeElement.focus();
+			}
+		};
+	})();
+	constructor() {
+		this.destroyRef.onDestroy(() => this.menu?.unregisterTopLevel(this.ref));
+	}
+	ngOnInit() {
+		this.menu?.registerTopLevel(this.ref);
+	}
+	onKeydown(event) {
+		switch (event.key) {
+			case "ArrowLeft":
+			case "ArrowRight":
+				this.menu?.moveFocusAcrossTopLevel(event, this.ref);
+				return;
+			case "Tab":
+				this.menu?.handleTopLevelTab(event, this.ref);
+				return;
+			default: return;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmNavigationMenuTopLinkDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmNavigationMenuTopLinkDirective,
+		isStandalone: true,
+		selector: "a[raqm-navigation-menu-top-link]",
+		host: {
+			listeners: { "keydown": "onKeydown($event)" },
+			classAttribute: "raqm-navigation-menu-top-link"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmNavigationMenuTopLinkDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "a[raqm-navigation-menu-top-link]",
+			host: {
+				class: "raqm-navigation-menu-top-link",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+const RaqmNavigationMenu = [
+	RaqmNavigationMenuComponent,
+	RaqmNavigationMenuListDirective,
+	RaqmNavigationMenuTriggerDirective,
+	RaqmNavigationMenuContentDirective,
+	RaqmNavigationMenuLinkDirective,
+	RaqmNavigationMenuTopLinkDirective
+];
+export { RaqmNavigationMenu, RaqmNavigationMenuComponent, RaqmNavigationMenuContentDirective, RaqmNavigationMenuLinkDirective, RaqmNavigationMenuListDirective, RaqmNavigationMenuTopLinkDirective, RaqmNavigationMenuTriggerDirective };
+
+//# sourceMappingURL=raqm-ui-navigation-menu.mjs.map