@rivinia/menu 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,79 @@
-# Temporary Holding Version
+# @rivinia/menu
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm version](https://img.shields.io/npm/v/@rivinia/menu.svg)](https://www.npmjs.com/package/@rivinia/menu)
+[![license](https://img.shields.io/npm/l/@rivinia/menu.svg)](https://www.npmjs.com/package/@rivinia/menu)
+
+Headless menu behavior for Angular 22+. Per-instance open state, item
+registry, and keyboard navigation model — no DOM, no styling, no
+positioning. Rendering lives in `@rivinia/menu/ui` (or your own UI).
+
+- Version: **0.1.0**
+- Requires: **Angular `^22.0.0`**, `tslib`
+
+## Install
+
+```bash
+npm install @rivinia/menu
+```
+
+## Quick start
+
+```ts
+const menu = new RiviniaMenu();
+menu.register({ id: 'profile' });
+menu.register({ id: 'logout' });
+
+menu.openMenu(); // focuses 'profile'
+menu.activateNext(); // 'logout' (disabled items are skipped, then wraps)
+menu.closeMenu();
+```
+
+Keyboard mapping (UI-owned, behavior owned here): Enter/Space/ArrowDown
+opens, Escape closes (UI restores focus to the trigger), arrows/Home/End
+move through enabled items, printable characters typeahead to the next match
+(buffer resets after 500ms), Tab closes and moves on naturally.
+
+## API
+
+| Export        | Kind  | Purpose                                                                                                                       |
+| ------------- | ----- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `RiviniaMenu` | class | per-instance controller: `open/activeId/items` signals + `register/unregister/openMenu/closeMenu/toggle/activate*/pickActive` |
+| types         | types | `RiviniaMenuController` (structural UI contract), `RiviniaMenuItem`, `RiviniaMenuPlacement`, `RiviniaMenuFocus`               |
+
+## Ready-made UI (`@rivinia/menu/ui`)
+
+Optional secondary entry point. Zero new runtime dependencies.
+
+```html
+<rv-menu [menu]="menu" [placement]="'bottom-start'" (picked)="go($event)">
+  <button rv-menu-trigger><img src="avatar.png" alt="Account" /></button>
+  <div rv-menu-panel>
+    <div class="head">Sophie · sophie@ui.live</div>
+    <button rvMenuItem id="profile">Profile</button>
+    <button rvMenuItem id="logout">Sign out</button>
+  </div>
+</rv-menu>
+```
+
+```ts
+menu = new RiviniaMenu();
+```
+
+Keyboard (APG menu-button pattern): Enter/Space/↓ opens, Escape closes and
+refocuses the trigger, arrows/Home/End move through enabled items, printable
+characters typeahead to the next match, Tab closes
+and moves on (non-modal by design), outside pointer-down closes. The trigger
+carries `aria-haspopup="menu"` + `aria-expanded` (synced onto the
+consumer's trigger element). Disabled
+items are skipped and reported via `aria-disabled`. SSR renders closed.
+
+Positioning: capable browsers render the panel in the top layer (manual
+`popover` + measured `fixed` coordinates) — it escapes clipping ancestors
+and flips to the fitting side near viewport edges (`data-flipped`
+re-aims the enter animation). Older browsers keep absolute placement with
+the same classes. Outside scroll/resize closes (scrolling inside the panel
+is exempt). Pure helper `computeMenuPosition` is exported for testing.
+
+## License
+
+MIT.

package/fesm2022/rivinia-menu-ui.mjs

@@ -0,0 +1,565 @@
+import * as i0 from "@angular/core";
+import { Component, Directive, ElementRef, ViewEncapsulation, afterRenderEffect, computed, effect, inject, input, output, signal } from "@angular/core";
+import { RiviniaMenu } from "@rivinia/menu";
+const MENU_GAP = 6;
+const EDGE = 8;
+function computeMenuPosition(trigger, panel, placement, viewport, rtl, gap = 6) {
+	const [vertical, horizontal] = placement.split("-");
+	const below = vertical !== "top";
+	const alignLeft = horizontal !== "end" !== rtl;
+	let left = alignLeft ? trigger.left : trigger.left + trigger.width - panel.width;
+	let top = below ? trigger.top + trigger.height + gap : trigger.top - gap - panel.height;
+	let flipped = false;
+	const fitsBelow = trigger.top + trigger.height + gap + panel.height <= viewport.height - EDGE;
+	const fitsAbove = trigger.top - gap - panel.height >= EDGE;
+	if (below && top + panel.height > viewport.height - EDGE && fitsAbove) {
+		top = trigger.top - gap - panel.height;
+		flipped = true;
+	} else if (!below && top < EDGE && fitsBelow) {
+		top = trigger.top + trigger.height + gap;
+		flipped = true;
+	}
+	const fitsLeft = trigger.left + trigger.width - panel.width >= EDGE;
+	const fitsRight = trigger.left + panel.width <= viewport.width - EDGE;
+	if (alignLeft && left + panel.width > viewport.width - EDGE && fitsLeft) left = trigger.left + trigger.width - panel.width;
+	else if (!alignLeft && left < EDGE && fitsRight) left = trigger.left;
+	left = Math.min(Math.max(left, EDGE), Math.max(EDGE, viewport.width - panel.width - EDGE));
+	top = Math.min(Math.max(top, EDGE), Math.max(EDGE, viewport.height - panel.height - EDGE));
+	return {
+		left: Math.round(left),
+		top: Math.round(top),
+		flipped
+	};
+}
+var RiviniaMenuItem = class RiviniaMenuItem {
+	id = input.required(...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: (v) => v === "" || v === true
+	});
+	checked = input(null, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	menu = inject(RiviniaMenuComponent, {
+		optional: true,
+		skipSelf: true
+	});
+	active = computed(() => this.menu?.controller().activeId() === this.id(), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	tab() {
+		return this.active() ? "0" : "-1";
+	}
+	computedRole() {
+		return this.checked() === null ? "menuitem" : "menuitemcheckbox";
+	}
+	checkedAttr() {
+		const checked = this.checked();
+		return checked === null ? null : String(checked);
+	}
+	pick() {
+		this.menu?.pickItem(this.id());
+	}
+	hover() {
+		this.menu?.hoverItem(this.id());
+	}
+	ngOnInit() {
+		this.menu?.registerItem({
+			id: this.id(),
+			disabled: this.disabled()
+		});
+	}
+	ngOnDestroy() {
+		this.menu?.unregisterItem(this.id());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RiviniaMenuItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RiviniaMenuItem,
+		isStandalone: true,
+		selector: "[rvMenuItem]",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"click": "pick()",
+				"pointerenter": "hover()"
+			},
+			properties: {
+				"attr.role": "computedRole()",
+				"attr.data-rv-id": "id()",
+				"attr.tabindex": "tab()",
+				"attr.aria-disabled": "disabled()",
+				"attr.data-active": "active()",
+				"attr.aria-checked": "checkedAttr()"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RiviniaMenuItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[rvMenuItem]",
+			standalone: true,
+			host: {
+				"[attr.role]": "computedRole()",
+				"[attr.data-rv-id]": "id()",
+				"[attr.tabindex]": "tab()",
+				"[attr.aria-disabled]": "disabled()",
+				"[attr.data-active]": "active()",
+				"[attr.aria-checked]": "checkedAttr()",
+				"(click)": "pick()",
+				"(pointerenter)": "hover()"
+			}
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}]
+	}
+});
+var RiviniaMenuComponent = class RiviniaMenuComponent {
+	menu = input(null, ...ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []);
+	placement = input("bottom-start", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	picked = output();
+	opened = output();
+	closed = output();
+	owned = new RiviniaMenu();
+	self = inject(ElementRef);
+	focusPending = false;
+	topLayerSupported = typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype;
+	positioned = signal(false, ...ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []);
+	flipped = signal(false, ...ngDevMode ? [{ debugName: "flipped" }] : /* istanbul ignore next */ []);
+	typeBuffer = "";
+	typeTimer = null;
+	controller() {
+		return this.menu() ?? this.owned;
+	}
+	registerItem(item) {
+		this.controller().register(item);
+	}
+	unregisterItem(id) {
+		this.controller().unregister(id);
+	}
+	constructor() {
+		effect((onCleanup) => {
+			if (typeof window === "undefined") return;
+			if (!this.controller().open()) return;
+			const onPointer = (event) => {
+				const host = this.self.nativeElement;
+				if (host && !host.contains(event.target)) this.doClose(true);
+			};
+			document.addEventListener("pointerdown", onPointer);
+			const onScroll = (event) => {
+				const panel = this.self.nativeElement.querySelector(".rv-menu-panel");
+				if (panel && event.target instanceof Node && panel.contains(event.target)) return;
+				this.doClose(false);
+			};
+			window.addEventListener("scroll", onScroll, true);
+			window.addEventListener("resize", onScroll);
+			onCleanup(() => {
+				document.removeEventListener("pointerdown", onPointer);
+				window.removeEventListener("scroll", onScroll, true);
+				window.removeEventListener("resize", onScroll);
+			});
+		});
+		effect(() => {
+			if (typeof document === "undefined") return;
+			const open = this.controller().open();
+			const trigger = this.triggerEl();
+			trigger?.setAttribute("aria-haspopup", "menu");
+			trigger?.setAttribute("aria-expanded", String(open));
+		});
+		afterRenderEffect(() => {
+			if (this.controller().open() && !this.positioned()) this.showAndPosition();
+			this.consumePendingFocus();
+		});
+	}
+	showAndPosition() {
+		const root = this.self.nativeElement.querySelector(".rv-menu-panel");
+		if (!root) return;
+		if (typeof window === "undefined" || !this.topLayerSupported) {
+			this.positioned.set(true);
+			return;
+		}
+		try {
+			const popover = root;
+			if (typeof popover.showPopover !== "function") {
+				this.positioned.set(true);
+				return;
+			}
+			popover.showPopover();
+			const trigger = this.triggerEl()?.getBoundingClientRect();
+			if (!trigger) {
+				this.positioned.set(true);
+				return;
+			}
+			const at = computeMenuPosition({
+				left: trigger.left,
+				top: trigger.top,
+				width: trigger.width,
+				height: trigger.height
+			}, {
+				width: root.offsetWidth,
+				height: root.offsetHeight
+			}, this.placement(), {
+				width: window.innerWidth,
+				height: window.innerHeight
+			}, this.isRtl());
+			root.style.left = `${at.left}px`;
+			root.style.top = `${at.top}px`;
+			this.flipped.set(at.flipped);
+			this.positioned.set(true);
+		} catch {
+			this.positioned.set(true);
+		}
+	}
+	isRtl() {
+		try {
+			const doc = typeof document === "undefined" ? null : document.documentElement;
+			if (doc?.dir === "rtl") return true;
+			if (doc?.dir === "ltr") return false;
+			return getComputedStyle(this.self.nativeElement).direction === "rtl";
+		} catch {
+			return false;
+		}
+	}
+	markOpening() {
+		this.focusPending = true;
+		if (typeof window !== "undefined" && this.topLayerSupported) {
+			this.flipped.set(false);
+			this.positioned.set(false);
+		}
+	}
+	onTriggerClick() {
+		const c = this.controller();
+		c.toggle();
+		if (c.open()) {
+			this.opened.emit();
+			this.markOpening();
+		} else this.closed.emit();
+	}
+	onTriggerKey(event) {
+		const c = this.controller();
+		switch (event.key) {
+			case "Enter":
+			case " ":
+			case "ArrowDown":
+				event.preventDefault();
+				c.openMenu("first");
+				this.opened.emit();
+				this.markOpening();
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				c.openMenu("last");
+				this.opened.emit();
+				this.markOpening();
+				break;
+			case "Escape": if (c.open()) {
+				event.preventDefault();
+				this.doClose(true);
+			}
+		}
+	}
+	onPanelKey(event) {
+		const c = this.controller();
+		switch (event.key) {
+			case "Escape":
+				event.preventDefault();
+				this.doClose(true);
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				c.activateNext();
+				this.focusActive();
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				c.activatePrevious();
+				this.focusActive();
+				break;
+			case "Home":
+				event.preventDefault();
+				c.activateFirst();
+				this.focusActive();
+				break;
+			case "End":
+				event.preventDefault();
+				c.activateLast();
+				this.focusActive();
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				this.pickFocused();
+				break;
+			case "Tab":
+				this.doClose(false);
+				break;
+			default: this.onTypeahead(event);
+		}
+	}
+	onTypeahead(event) {
+		if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+		const ch = event.key.toLocaleLowerCase();
+		if (!(this.typeBuffer !== "" && [...this.typeBuffer].every((c) => c === ch))) this.typeBuffer += ch;
+		if (this.typeTimer !== null) clearTimeout(this.typeTimer);
+		this.typeTimer = setTimeout(() => {
+			this.typeBuffer = "";
+			this.typeTimer = null;
+		}, 500);
+		const id = this.matchTypeahead(this.typeBuffer);
+		if (id !== null && this.controller().activate(id)) this.focusActive();
+	}
+	matchTypeahead(buffer) {
+		const root = this.self.nativeElement.querySelector(".rv-menu-panel");
+		if (!root) return null;
+		const enabled = new Set(this.controller().items().filter((i) => !i.disabled).map((i) => i.id));
+		const rows = [...root.querySelectorAll("[data-rv-id]")].map((el) => ({
+			id: el.getAttribute("data-rv-id") ?? "",
+			text: (el.textContent ?? "").trim().toLocaleLowerCase()
+		})).filter((r) => enabled.has(r.id) && r.text.startsWith(buffer));
+		if (rows.length === 0) return null;
+		if (new Set(buffer).size === 1) {
+			const ids = rows.map((r) => r.id);
+			return ids[(ids.indexOf(this.controller().activeId() ?? "") + 1) % ids.length];
+		}
+		return rows[0].id;
+	}
+	pickFocused() {
+		const id = this.controller().pickActive();
+		if (id === null) return;
+		this.doClose(false);
+		this.picked.emit({ id });
+	}
+	pickItem(id) {
+		if (!this.controller().activate(id)) return;
+		this.doClose(false);
+		this.picked.emit({ id });
+	}
+	hoverItem(id) {
+		this.controller().activate(id);
+	}
+	doClose(restoreFocus) {
+		const was = this.controller().open();
+		this.controller().closeMenu();
+		if (was) this.closed.emit();
+		if (restoreFocus) this.focusTrigger();
+	}
+	consumePendingFocus() {
+		if (!this.controller().open() || !this.focusPending) return;
+		this.focusPending = false;
+		const root = this.self.nativeElement.querySelector(".rv-menu-panel");
+		const active = this.activeDocumentElement();
+		if (root && (!active || !root.contains(active))) this.focusActive();
+	}
+	focusActive() {
+		const id = this.controller().activeId();
+		const root = this.self.nativeElement.querySelector(".rv-menu-panel");
+		if (!root) return;
+		const target = id ? root.querySelector(`[data-rv-id="${CSS.escape(id)}"]`) : root.querySelector("[rvmenuitem]");
+		try {
+			target?.focus({ preventScroll: true });
+		} catch {}
+	}
+	activeDocumentElement() {
+		try {
+			return typeof document === "undefined" ? null : document.activeElement;
+		} catch {
+			return null;
+		}
+	}
+	triggerEl() {
+		const wrap = this.self.nativeElement.querySelector(".rv-menu-trigger");
+		if (!wrap) return null;
+		return wrap.querySelector("button, a, [tabindex]") ?? wrap;
+	}
+	focusTrigger() {
+		try {
+			this.triggerEl()?.focus({ preventScroll: true });
+		} catch {}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RiviniaMenuComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RiviniaMenuComponent,
+		isStandalone: true,
+		selector: "rv-menu",
+		inputs: {
+			menu: {
+				classPropertyName: "menu",
+				publicName: "menu",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			picked: "picked",
+			opened: "opened",
+			closed: "closed"
+		},
+		ngImport: i0,
+		template: `
+    <div class="rv-menu-trigger" (click)="onTriggerClick()" (keydown)="onTriggerKey($event)">
+      <ng-content select="[rv-menu-trigger]"></ng-content>
+    </div>
+    @if (controller().open()) {
+      <div
+        #panel
+        class="rv-menu-panel"
+        role="menu"
+        [attr.popover]="topLayerSupported ? 'manual' : null"
+        [attr.data-placement]="placement()"
+        [attr.data-flipped]="flipped()"
+        [attr.data-positioned]="positioned()"
+        [attr.data-top-layer]="topLayerSupported"
+        (keydown)="onPanelKey($event)"
+      >
+        <ng-content select="[rv-menu-panel]"></ng-content>
+      </div>
+    }
+  `,
+		isInline: true,
+		styles: [".rv-menu-trigger{display:inline-flex;align-items:center}.rv-menu-panel{display:flex;flex-direction:column;gap:2px}.rv-menu-panel hr{border:0;border-top:1px solid var(--rv-menu-border);margin:6px 4px}rv-menu{position:relative;display:inline-block}.rv-menu-panel[data-top-layer=true]{position:fixed;inset:auto;margin:0}.rv-menu-panel[data-positioned=false]{animation:none}.rv-menu-panel[data-top-layer=true][data-placement^=bottom][data-flipped=true]{transform-origin:bottom center}.rv-menu-panel[data-top-layer=true][data-placement^=top][data-flipped=true]{transform-origin:top center}.rv-menu-panel{--rv-menu-bg: #ffffff;--rv-menu-fg: #111111;--rv-menu-muted: #555555;--rv-menu-border: #e0e0e0;--rv-menu-radius: 12px;--rv-menu-shadow: 0 16px 48px rgba(0, 0, 0, .22);--rv-menu-pad: 6px;--rv-menu-width: 16rem;--rv-menu-font: system-ui, -apple-system, \"Segoe UI\", sans-serif;position:absolute;z-index:var(--rv-menu-z, 500);min-width:var(--rv-menu-width);max-width:calc(100dvw - 2rem);max-height:min(20rem,calc(100dvh - 2rem));overflow-y:auto;background:var(--rv-menu-bg);color:var(--rv-menu-fg);font-family:var(--rv-menu-font);border:1px solid var(--rv-menu-border);border-radius:var(--rv-menu-radius);box-shadow:var(--rv-menu-shadow);padding:var(--rv-menu-pad)}@media(prefers-color-scheme:dark){.rv-menu-panel{--rv-menu-bg: #161616;--rv-menu-fg: #f2f2f2;--rv-menu-muted: #a8a8a8;--rv-menu-border: #333333}}.rv-menu-panel[data-placement=bottom-start]{inset-block-start:calc(100% + 6px);inset-inline-start:0}.rv-menu-panel[data-placement=bottom-end]{inset-block-start:calc(100% + 6px);inset-inline-end:0}.rv-menu-panel[data-placement=top-start]{inset-block-end:calc(100% + 6px);inset-inline-start:0}.rv-menu-panel[data-placement=top-end]{inset-block-end:calc(100% + 6px);inset-inline-end:0}.rv-menu-panel [rvmenuitem]{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:1.4;text-align:start;padding:8px 10px;cursor:pointer}.rv-menu-panel [rvmenuitem][data-active=true]{background:color-mix(in srgb,currentColor 10%,transparent)}.rv-menu-panel [rvmenuitem]:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.rv-menu-panel [rvmenuitem]:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.rv-menu-panel [rvmenuitem][aria-disabled=true]{opacity:.45;cursor:default}.rv-menu-panel [rvmenuitem] svg,.rv-menu-panel [rvmenuitem] [data-icon]{width:16px;height:16px;flex:none;color:var(--rv-menu-muted)}.rv-menu-panel [rvmenuitem][data-active=true] svg,.rv-menu-panel [rvmenuitem][data-active=true] [data-icon]{color:inherit}.rv-menu-panel{--rv-menu-duration: .16s;--rv-menu-easing: cubic-bezier(.16, 1, .3, 1);--rv-menu-from-y: -6px;transform-origin:top center;animation:rv-menu-in var(--rv-menu-duration) var(--rv-menu-easing)}.rv-menu-panel[data-placement=top-start],.rv-menu-panel[data-placement=top-end]{--rv-menu-from-y: 6px;transform-origin:bottom center}@media(prefers-reduced-motion:reduce){.rv-menu-panel{animation:none}}@keyframes rv-menu-in{0%{opacity:0;transform:translateY(var(--rv-menu-from-y)) scale(.96)}}\n"],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RiviniaMenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rv-menu",
+			standalone: true,
+			encapsulation: ViewEncapsulation.None,
+			template: `
+    <div class="rv-menu-trigger" (click)="onTriggerClick()" (keydown)="onTriggerKey($event)">
+      <ng-content select="[rv-menu-trigger]"></ng-content>
+    </div>
+    @if (controller().open()) {
+      <div
+        #panel
+        class="rv-menu-panel"
+        role="menu"
+        [attr.popover]="topLayerSupported ? 'manual' : null"
+        [attr.data-placement]="placement()"
+        [attr.data-flipped]="flipped()"
+        [attr.data-positioned]="positioned()"
+        [attr.data-top-layer]="topLayerSupported"
+        (keydown)="onPanelKey($event)"
+      >
+        <ng-content select="[rv-menu-panel]"></ng-content>
+      </div>
+    }
+  `,
+			styles: [".rv-menu-trigger{display:inline-flex;align-items:center}.rv-menu-panel{display:flex;flex-direction:column;gap:2px}.rv-menu-panel hr{border:0;border-top:1px solid var(--rv-menu-border);margin:6px 4px}rv-menu{position:relative;display:inline-block}.rv-menu-panel[data-top-layer=true]{position:fixed;inset:auto;margin:0}.rv-menu-panel[data-positioned=false]{animation:none}.rv-menu-panel[data-top-layer=true][data-placement^=bottom][data-flipped=true]{transform-origin:bottom center}.rv-menu-panel[data-top-layer=true][data-placement^=top][data-flipped=true]{transform-origin:top center}.rv-menu-panel{--rv-menu-bg: #ffffff;--rv-menu-fg: #111111;--rv-menu-muted: #555555;--rv-menu-border: #e0e0e0;--rv-menu-radius: 12px;--rv-menu-shadow: 0 16px 48px rgba(0, 0, 0, .22);--rv-menu-pad: 6px;--rv-menu-width: 16rem;--rv-menu-font: system-ui, -apple-system, \"Segoe UI\", sans-serif;position:absolute;z-index:var(--rv-menu-z, 500);min-width:var(--rv-menu-width);max-width:calc(100dvw - 2rem);max-height:min(20rem,calc(100dvh - 2rem));overflow-y:auto;background:var(--rv-menu-bg);color:var(--rv-menu-fg);font-family:var(--rv-menu-font);border:1px solid var(--rv-menu-border);border-radius:var(--rv-menu-radius);box-shadow:var(--rv-menu-shadow);padding:var(--rv-menu-pad)}@media(prefers-color-scheme:dark){.rv-menu-panel{--rv-menu-bg: #161616;--rv-menu-fg: #f2f2f2;--rv-menu-muted: #a8a8a8;--rv-menu-border: #333333}}.rv-menu-panel[data-placement=bottom-start]{inset-block-start:calc(100% + 6px);inset-inline-start:0}.rv-menu-panel[data-placement=bottom-end]{inset-block-start:calc(100% + 6px);inset-inline-end:0}.rv-menu-panel[data-placement=top-start]{inset-block-end:calc(100% + 6px);inset-inline-start:0}.rv-menu-panel[data-placement=top-end]{inset-block-end:calc(100% + 6px);inset-inline-end:0}.rv-menu-panel [rvmenuitem]{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:1.4;text-align:start;padding:8px 10px;cursor:pointer}.rv-menu-panel [rvmenuitem][data-active=true]{background:color-mix(in srgb,currentColor 10%,transparent)}.rv-menu-panel [rvmenuitem]:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.rv-menu-panel [rvmenuitem]:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.rv-menu-panel [rvmenuitem][aria-disabled=true]{opacity:.45;cursor:default}.rv-menu-panel [rvmenuitem] svg,.rv-menu-panel [rvmenuitem] [data-icon]{width:16px;height:16px;flex:none;color:var(--rv-menu-muted)}.rv-menu-panel [rvmenuitem][data-active=true] svg,.rv-menu-panel [rvmenuitem][data-active=true] [data-icon]{color:inherit}.rv-menu-panel{--rv-menu-duration: .16s;--rv-menu-easing: cubic-bezier(.16, 1, .3, 1);--rv-menu-from-y: -6px;transform-origin:top center;animation:rv-menu-in var(--rv-menu-duration) var(--rv-menu-easing)}.rv-menu-panel[data-placement=top-start],.rv-menu-panel[data-placement=top-end]{--rv-menu-from-y: 6px;transform-origin:bottom center}@media(prefers-reduced-motion:reduce){.rv-menu-panel{animation:none}}@keyframes rv-menu-in{0%{opacity:0;transform:translateY(var(--rv-menu-from-y)) scale(.96)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		menu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menu",
+				required: false
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		picked: [{
+			type: i0.Output,
+			args: ["picked"]
+		}],
+		opened: [{
+			type: i0.Output,
+			args: ["opened"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}]
+	}
+});
+export { MENU_GAP, RiviniaMenuComponent, RiviniaMenuItem, computeMenuPosition };
+
+//# sourceMappingURL=rivinia-menu-ui.mjs.map

package/fesm2022/rivinia-menu-ui.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rivinia-menu-ui.mjs","names":[],"sources":["../../../projects/menu/ui/src/lib/menu-position.ts","../../../projects/menu/ui/src/lib/menu-panel.ts"],"sourcesContent":["import type { RiviniaMenuPlacement } from '@rivinia/menu';\n\n/** Trigger rect in viewport coordinates. */\nexport interface MenuTriggerRect {\n  readonly left: number;\n  readonly top: number;\n  readonly width: number;\n  readonly height: number;\n}\n\n/** Measured panel size. */\nexport interface MenuPanelSize {\n  readonly width: number;\n  readonly height: number;\n}\n\n/** Viewport size. */\nexport interface MenuViewport {\n  readonly width: number;\n  readonly height: number;\n}\n\n/** Fixed-position coordinates plus whether the vertical side flipped. */\nexport interface MenuCoordinates {\n  readonly left: number;\n  readonly top: number;\n  readonly flipped: boolean;\n}\n\n/** Gap between trigger and panel. */\nexport const MENU_GAP = 6;\n/** Minimum distance kept from viewport edges. */\nconst EDGE = 8;\n\n/**\n * Pure top-layer position for a menu panel: anchors to the trigger per\n * `placement` (logical, RTL-aware), flips to the opposite vertical side when\n * the preferred side overflows but the other fits, then clamps inside the\n * viewport. Zero DOM access — unit-testable with fake rects; the component\n * only measures and applies.\n */\nexport function computeMenuPosition(\n  trigger: MenuTriggerRect,\n  panel: MenuPanelSize,\n  placement: RiviniaMenuPlacement,\n  viewport: MenuViewport,\n  rtl: boolean,\n  gap = MENU_GAP,\n): MenuCoordinates {\n  const [vertical, horizontal] = placement.split('-');\n  const below = vertical !== 'top';\n  // Logical start: left edge in LTR, right edge in RTL.\n  const alignLeft = (horizontal !== 'end') !== rtl;\n\n  let left = alignLeft ? trigger.left : trigger.left + trigger.width - panel.width;\n  let top = below ? trigger.top + trigger.height + gap : trigger.top - gap - panel.height;\n  let flipped = false;\n\n  const fitsBelow = trigger.top + trigger.height + gap + panel.height <= viewport.height - EDGE;\n  const fitsAbove = trigger.top - gap - panel.height >= EDGE;\n  if (below && top + panel.height > viewport.height - EDGE && fitsAbove) {\n    top = trigger.top - gap - panel.height;\n    flipped = true;\n  } else if (!below && top < EDGE && fitsBelow) {\n    top = trigger.top + trigger.height + gap;\n    flipped = true;\n  }\n\n  const fitsLeft = trigger.left + trigger.width - panel.width >= EDGE;\n  const fitsRight = trigger.left + panel.width <= viewport.width - EDGE;\n  if (alignLeft && left + panel.width > viewport.width - EDGE && fitsLeft) {\n    left = trigger.left + trigger.width - panel.width;\n  } else if (!alignLeft && left < EDGE && fitsRight) {\n    left = trigger.left;\n  }\n\n  left = Math.min(Math.max(left, EDGE), Math.max(EDGE, viewport.width - panel.width - EDGE));\n  top = Math.min(Math.max(top, EDGE), Math.max(EDGE, viewport.height - panel.height - EDGE));\n  return { left: Math.round(left), top: Math.round(top), flipped };\n}\n","import {\n  Component,\n  Directive,\n  ElementRef,\n  ViewEncapsulation,\n  afterRenderEffect,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport type { RiviniaMenuController } from '@rivinia/menu';\nimport { RiviniaMenu } from '@rivinia/menu';\nimport type { RiviniaMenuUiPlacement } from './ui-menu-types';\nimport { computeMenuPosition } from './menu-position';\n\n/** Payload of {@link RiviniaMenuComponent.picked}. */\nexport interface MenuPick {\n  readonly id: string;\n}\n\n/**\n * Marker + behavior for one navigable row. Registers itself with the\n * enclosing menu on init (unregisters on destroy), exposes `data-rv-id`\n * for focus targeting, and keeps `tabindex`/`aria-disabled` in sync.\n * Non-`rvMenuItem` content (headers, dividers, badges) is skipped by\n * keyboard navigation automatically.\n */\n@Directive({\n  selector: '[rvMenuItem]',\n  standalone: true,\n  host: {\n    '[attr.role]': 'computedRole()',\n    '[attr.data-rv-id]': 'id()',\n    '[attr.tabindex]': 'tab()',\n    '[attr.aria-disabled]': 'disabled()',\n    '[attr.data-active]': 'active()',\n    '[attr.aria-checked]': 'checkedAttr()',\n    '(click)': 'pick()',\n    '(pointerenter)': 'hover()',\n  },\n})\nexport class RiviniaMenuItem {\n  readonly id = input.required<string>();\n  readonly disabled = input(false, {\n    transform: (v: boolean | string) => v === '' || v === true,\n  });\n  /**\n   * Tri-state selection (e.g. multi-select options). `null` (default) renders\n   * a plain `menuitem`; a boolean renders `menuitemcheckbox` + `aria-checked`\n   * so screen readers announce the state (the visual check alone is silent).\n   */\n  readonly checked = input<boolean | null>(null);\n\n  private readonly menu = inject(RiviniaMenuComponent, { optional: true, skipSelf: true });\n  private readonly active = computed(() => this.menu?.controller().activeId() === this.id());\n\n  protected tab(): string {\n    return this.active() ? '0' : '-1';\n  }\n\n  protected computedRole(): string {\n    return this.checked() === null ? 'menuitem' : 'menuitemcheckbox';\n  }\n\n  protected checkedAttr(): string | null {\n    const checked = this.checked();\n    return checked === null ? null : String(checked);\n  }\n\n  /** Mouse pick: disabled items are ignored (controller refuses them). */\n  protected pick(): void {\n    this.menu?.pickItem(this.id());\n  }\n\n  /** Mouse hover follows keyboard focus so highlight tracks the pointer. */\n  protected hover(): void {\n    this.menu?.hoverItem(this.id());\n  }\n\n  ngOnInit(): void {\n    this.menu?.registerItem({ id: this.id(), disabled: this.disabled() });\n  }\n\n  ngOnDestroy(): void {\n    this.menu?.unregisterItem(this.id());\n  }\n}\n\n/**\n * Ready-made dropdown menu. Binds a {@link RiviniaMenu} controller (or owns\n * one when omitted) and projects trigger + panel:\n *\n * ```html\n * <rv-menu [menu]=\"menu\" [placement]=\"'bottom-start'\" (picked)=\"go($event)\">\n *   <button rv-menu-trigger><img src=\"avatar.png\" alt=\"Account\" /></button>\n *   <div rv-menu-panel>\n *     <div class=\"head\">Sophie · sophie@ui.live</div>\n *     <button rvMenuItem id=\"profile\">Profile</button>\n *     <button rvMenuItem id=\"logout\">Sign out</button>\n *   </div>\n * </rv-menu>\n * ```\n *\n * Keyboard: Enter/Space/ArrowDown opens; Escape closes and refocuses the\n * trigger; arrows/Home/End move through enabled items; Tab closes and moves\n * on (non-modal by design). Outside pointer-down closes. SSR renders closed.\n */\n@Component({\n  selector: 'rv-menu',\n  standalone: true,\n  // Deliberately unencapsulated: projected item buttons belong to the\n  // consumer's template, and emulated descendant selectors never match\n  // projected content (measured in Chrome: `display` stayed `inline-block`).\n  // Every rule below is scoped under `.rv-menu-panel` / `.rv-menu-trigger`,\n  // so nothing leaks into application styles.\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <div class=\"rv-menu-trigger\" (click)=\"onTriggerClick()\" (keydown)=\"onTriggerKey($event)\">\n      <ng-content select=\"[rv-menu-trigger]\"></ng-content>\n    </div>\n    @if (controller().open()) {\n      <div\n        #panel\n        class=\"rv-menu-panel\"\n        role=\"menu\"\n        [attr.popover]=\"topLayerSupported ? 'manual' : null\"\n        [attr.data-placement]=\"placement()\"\n        [attr.data-flipped]=\"flipped()\"\n        [attr.data-positioned]=\"positioned()\"\n        [attr.data-top-layer]=\"topLayerSupported\"\n        (keydown)=\"onPanelKey($event)\"\n      >\n        <ng-content select=\"[rv-menu-panel]\"></ng-content>\n      </div>\n    }\n  `,\n  styles: [\n    `\n      .rv-menu-trigger {\n        display: inline-flex;\n        align-items: center;\n      }\n      .rv-menu-panel {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      .rv-menu-panel hr {\n        border: 0;\n        border-top: 1px solid var(--rv-menu-border);\n        margin: 6px 4px;\n      }\n      /* NOTE: the :host pseudo-class does not exist without encapsulation,\n         so the host element is styled directly (still rv-prefixed).\n         Relative positioning anchors the no-popover fallback panel. */\n      rv-menu {\n        position: relative;\n        display: inline-block;\n      }\n      /* Top-layer mode (popover-capable browsers): the panel escapes every\n         clipping ancestor and stacking context. Coordinates come from the\n         component (fixed + measured + flipped); the absolute placement\n         classes below stay as the no-popover fallback. */\n      .rv-menu-panel[data-top-layer='true'] {\n        position: fixed;\n        inset: auto;\n        margin: 0;\n      }\n      .rv-menu-panel[data-positioned='false'] {\n        animation: none;\n      }\n      /* Flipped panels grow out of the opposite edge (matches coordinates). */\n      .rv-menu-panel[data-top-layer='true'][data-placement^='bottom'][data-flipped='true'] {\n        transform-origin: bottom center;\n      }\n      .rv-menu-panel[data-top-layer='true'][data-placement^='top'][data-flipped='true'] {\n        transform-origin: top center;\n      }\n      .rv-menu-panel {\n        --rv-menu-bg: #ffffff;\n        --rv-menu-fg: #111111;\n        --rv-menu-muted: #555555;\n        --rv-menu-border: #e0e0e0;\n        --rv-menu-radius: 12px;\n        --rv-menu-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);\n        --rv-menu-pad: 6px;\n        --rv-menu-width: 16rem;\n        --rv-menu-font: system-ui, -apple-system, 'Segoe UI', sans-serif;\n        position: absolute;\n        z-index: var(--rv-menu-z, 500);\n        min-width: var(--rv-menu-width);\n        max-width: calc(100dvw - 2rem);\n        /* Long lists scroll inside the panel instead of leaving the viewport. */\n        max-height: min(20rem, calc(100dvh - 2rem));\n        overflow-y: auto;\n        background: var(--rv-menu-bg);\n        color: var(--rv-menu-fg);\n        font-family: var(--rv-menu-font);\n        border: 1px solid var(--rv-menu-border);\n        border-radius: var(--rv-menu-radius);\n        box-shadow: var(--rv-menu-shadow);\n        padding: var(--rv-menu-pad);\n      }\n      @media (prefers-color-scheme: dark) {\n        .rv-menu-panel {\n          --rv-menu-bg: #161616;\n          --rv-menu-fg: #f2f2f2;\n          --rv-menu-muted: #a8a8a8;\n          --rv-menu-border: #333333;\n        }\n      }\n      .rv-menu-panel[data-placement='bottom-start'] {\n        inset-block-start: calc(100% + 6px);\n        inset-inline-start: 0;\n      }\n      .rv-menu-panel[data-placement='bottom-end'] {\n        inset-block-start: calc(100% + 6px);\n        inset-inline-end: 0;\n      }\n      .rv-menu-panel[data-placement='top-start'] {\n        inset-block-end: calc(100% + 6px);\n        inset-inline-start: 0;\n      }\n      .rv-menu-panel[data-placement='top-end'] {\n        inset-block-end: calc(100% + 6px);\n        inset-inline-end: 0;\n      }\n      .rv-menu-panel [rvmenuitem] {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        width: 100%;\n        min-height: 40px;\n        border: 0;\n        border-radius: 8px;\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-size: 14px;\n        line-height: 1.4;\n        text-align: start;\n        padding: 8px 10px;\n        cursor: pointer;\n      }\n      .rv-menu-panel [rvmenuitem][data-active='true'] {\n        background: color-mix(in srgb, currentColor 10%, transparent);\n      }\n      .rv-menu-panel [rvmenuitem]:hover {\n        background: color-mix(in srgb, currentColor 8%, transparent);\n      }\n      .rv-menu-panel [rvmenuitem]:focus-visible {\n        outline: 2px solid currentColor;\n        outline-offset: -2px;\n      }\n      .rv-menu-panel [rvmenuitem][aria-disabled='true'] {\n        opacity: 0.45;\n        cursor: default;\n      }\n      /* Optional icons: consumer projects any svg/icon content; the UI only\n         owns sizing, alignment and tone so rows stay consistent. */\n      .rv-menu-panel [rvmenuitem] svg,\n      .rv-menu-panel [rvmenuitem] [data-icon] {\n        width: 16px;\n        height: 16px;\n        flex: none;\n        color: var(--rv-menu-muted);\n      }\n      .rv-menu-panel [rvmenuitem][data-active='true'] svg,\n      .rv-menu-panel [rvmenuitem][data-active='true'] [data-icon] {\n        color: inherit;\n      }\n      /* Opening motion (researched: Radix/shadcn/HeadlessUI pattern):\n         fade + scale from the trigger edge + a small slide toward rest.\n         Origin follows the vertical side so the panel grows out of the\n         trigger; duration/easing stay overridable via vars. */\n      .rv-menu-panel {\n        --rv-menu-duration: 160ms;\n        --rv-menu-easing: cubic-bezier(0.16, 1, 0.3, 1);\n        --rv-menu-from-y: -6px;\n        transform-origin: top center;\n        animation: rv-menu-in var(--rv-menu-duration) var(--rv-menu-easing);\n      }\n      .rv-menu-panel[data-placement='top-start'],\n      .rv-menu-panel[data-placement='top-end'] {\n        --rv-menu-from-y: 6px;\n        transform-origin: bottom center;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .rv-menu-panel {\n          animation: none;\n        }\n      }\n      @keyframes rv-menu-in {\n        from {\n          opacity: 0;\n          transform: translateY(var(--rv-menu-from-y)) scale(0.96);\n        }\n      }\n    `,\n  ],\n})\nexport class RiviniaMenuComponent {\n  /**\n   * External controller (shared/test double). Omitted → the component owns\n   * a private one (simplest embedding).\n   */\n  readonly menu = input<RiviniaMenuController | null>(null);\n  /** Panel placement relative to the trigger. @default 'bottom-start' */\n  readonly placement = input<RiviniaMenuUiPlacement>('bottom-start');\n\n  /** Fired when the user picks an enabled item (id). Closes first. */\n  readonly picked = output<MenuPick>();\n  readonly opened = output<void>();\n  readonly closed = output<void>();\n\n  private readonly owned = new RiviniaMenu();\n  private readonly self = inject(ElementRef<HTMLElement>);\n  /** Deferred initial focus: set on open paths, consumed after render. */\n  private focusPending = false;\n  /**\n   * Manual popover support (top-layer). Feature-detected: modern browsers\n   * escape clipping ancestors; older ones keep the absolute fallback.\n   */\n  protected readonly topLayerSupported =\n    typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype;\n  /** Coordinates applied (gates the enter animation until measured). */\n  protected readonly positioned = signal(false);\n  /** Whether the panel flipped to the opposite vertical side. */\n  protected readonly flipped = signal(false);\n  /** Printable-character search buffer; reset by timer after 500ms quiet. */\n  private typeBuffer = '';\n  private typeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** Effective controller: external input or the owned fallback. */\n  controller(): RiviniaMenuController {\n    return this.menu() ?? this.owned;\n  }\n\n  /** Called by {@link RiviniaMenuItem} directives. */\n  registerItem(item: { id: string; disabled: boolean }): void {\n    this.controller().register(item);\n  }\n\n  /** Called by {@link RiviniaMenuItem} directives. */\n  unregisterItem(id: string): void {\n    this.controller().unregister(id);\n  }\n\n  constructor() {\n    effect((onCleanup) => {\n      if (typeof window === 'undefined') return;\n      if (!this.controller().open()) return;\n      const onPointer = (event: PointerEvent) => {\n        const host = this.self.nativeElement;\n        if (host && !host.contains(event.target as Node)) this.doClose(true);\n      };\n      document.addEventListener('pointerdown', onPointer);\n      // Coordinates go stale on outside scroll/resize — close instead of\n      // drifting (native-select-like; scrolling inside the panel is exempt).\n      // Like Tab-close, this is APG-consistent non-modal behavior.\n      const onScroll = (event: Event) => {\n        const panel = this.self.nativeElement.querySelector('.rv-menu-panel');\n        if (panel && event.target instanceof Node && panel.contains(event.target)) return;\n        this.doClose(false);\n      };\n      window.addEventListener('scroll', onScroll, true);\n      window.addEventListener('resize', onScroll);\n      onCleanup(() => {\n        document.removeEventListener('pointerdown', onPointer);\n        window.removeEventListener('scroll', onScroll, true);\n        window.removeEventListener('resize', onScroll);\n      });\n    });\n    // APG menu-button: the trigger exposes haspopup + expanded. The trigger\n    // element is consumer-owned, so the attributes sync onto its focusable\n    // child (or the wrapper itself as a fallback).\n    effect(() => {\n      if (typeof document === 'undefined') return;\n      const open = this.controller().open();\n      const trigger = this.triggerEl();\n      trigger?.setAttribute('aria-haspopup', 'menu');\n      trigger?.setAttribute('aria-expanded', String(open));\n    });\n    afterRenderEffect(() => {\n      if (this.controller().open() && !this.positioned()) this.showAndPosition();\n      this.consumePendingFocus();\n    });\n  }\n\n  /**\n   * Top-layer presentation: show the manual popover, measure trigger +\n   * panel, and pin fixed coordinates (flipping when needed). Runs inside\n   * afterRender — before paint, so no flash. Falls back to the absolute CSS\n   * placement when popover is unsupported (jsdom included).\n   */\n  private showAndPosition(): void {\n    const root = this.self.nativeElement.querySelector('.rv-menu-panel') as HTMLElement | null;\n    if (!root) return;\n    if (typeof window === 'undefined' || !this.topLayerSupported) {\n      this.positioned.set(true);\n      return;\n    }\n    try {\n      const popover = root as HTMLElement & { showPopover?: () => void };\n      if (typeof popover.showPopover !== 'function') {\n        this.positioned.set(true);\n        return;\n      }\n      popover.showPopover();\n      const trigger = this.triggerEl()?.getBoundingClientRect();\n      if (!trigger) {\n        this.positioned.set(true);\n        return;\n      }\n      const at = computeMenuPosition(\n        { left: trigger.left, top: trigger.top, width: trigger.width, height: trigger.height },\n        { width: root.offsetWidth, height: root.offsetHeight },\n        this.placement(),\n        { width: window.innerWidth, height: window.innerHeight },\n        this.isRtl(),\n      );\n      root.style.left = `${at.left}px`;\n      root.style.top = `${at.top}px`;\n      this.flipped.set(at.flipped);\n      this.positioned.set(true);\n    } catch {\n      this.positioned.set(true);\n    }\n  }\n\n  private isRtl(): boolean {\n    try {\n      const doc = typeof document === 'undefined' ? null : document.documentElement;\n      if (doc?.dir === 'rtl') return true;\n      if (doc?.dir === 'ltr') return false;\n      return getComputedStyle(this.self.nativeElement).direction === 'rtl';\n    } catch {\n      return false;\n    }\n  }\n\n  /** Mark an opening pass: deferred focus + (top-layer) re-measurement. */\n  private markOpening(): void {\n    this.focusPending = true;\n    if (typeof window !== 'undefined' && this.topLayerSupported) {\n      this.flipped.set(false);\n      this.positioned.set(false);\n    }\n  }\n\n  protected onTriggerClick(): void {\n    const c = this.controller();\n    c.toggle();\n    if (c.open()) {\n      this.opened.emit();\n      this.markOpening();\n    } else {\n      // Focus never left the trigger on toggle-close — restore is a no-op.\n      this.closed.emit();\n    }\n  }\n\n  protected onTriggerKey(event: KeyboardEvent): void {\n    const c = this.controller();\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n      case 'ArrowDown':\n        event.preventDefault();\n        c.openMenu('first');\n        this.opened.emit();\n        this.markOpening();\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        c.openMenu('last');\n        this.opened.emit();\n        this.markOpening();\n        break;\n      case 'Escape':\n        if (c.open()) {\n          event.preventDefault();\n          this.doClose(true);\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  protected onPanelKey(event: KeyboardEvent): void {\n    const c = this.controller();\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault();\n        this.doClose(true);\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        c.activateNext();\n        this.focusActive();\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        c.activatePrevious();\n        this.focusActive();\n        break;\n      case 'Home':\n        event.preventDefault();\n        c.activateFirst();\n        this.focusActive();\n        break;\n      case 'End':\n        event.preventDefault();\n        c.activateLast();\n        this.focusActive();\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        this.pickFocused();\n        break;\n      case 'Tab':\n        this.doClose(false);\n        break;\n      default:\n        this.onTypeahead(event);\n        break;\n    }\n  }\n\n  /**\n   * APG printable-character search: typing moves focus to the next enabled\n   * item whose visible text starts with the buffer. Repeating one character\n   * cycles through its matches; the buffer resets after 500ms of quiet.\n   * Labels are UI-owned (read from the DOM), so this lives in the component,\n   * not the headless controller.\n   */\n  private onTypeahead(event: KeyboardEvent): void {\n    if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;\n    const ch = event.key.toLocaleLowerCase();\n    // Repeating one character cycles its matches instead of growing the buffer.\n    const cycling = this.typeBuffer !== '' && [...this.typeBuffer].every((c) => c === ch);\n    if (!cycling) this.typeBuffer += ch;\n    if (this.typeTimer !== null) clearTimeout(this.typeTimer);\n    this.typeTimer = setTimeout(() => {\n      this.typeBuffer = '';\n      this.typeTimer = null;\n    }, 500);\n    const id = this.matchTypeahead(this.typeBuffer);\n    if (id !== null && this.controller().activate(id)) this.focusActive();\n  }\n\n  private matchTypeahead(buffer: string): string | null {\n    const root: HTMLElement | null = this.self.nativeElement.querySelector('.rv-menu-panel');\n    if (!root) return null;\n    const enabled = new Set(\n      this.controller()\n        .items()\n        .filter((i) => !i.disabled)\n        .map((i) => i.id),\n    );\n    const rows = [...root.querySelectorAll('[data-rv-id]')]\n      .map((el) => ({\n        id: el.getAttribute('data-rv-id') ?? '',\n        text: (el.textContent ?? '').trim().toLocaleLowerCase(),\n      }))\n      .filter((r) => enabled.has(r.id) && r.text.startsWith(buffer));\n    if (rows.length === 0) return null;\n    if (new Set(buffer).size === 1) {\n      // Repeated character: cycle from after the current item.\n      const ids = rows.map((r) => r.id);\n      const at = ids.indexOf(this.controller().activeId() ?? '');\n      return ids[(at + 1) % ids.length];\n    }\n    return rows[0].id;\n  }\n\n  private pickFocused(): void {\n    const c = this.controller();\n    const id = c.pickActive();\n    if (id === null) return;\n    this.doClose(false);\n    this.picked.emit({ id });\n  }\n\n  /**\n   * Mouse pick of a concrete item. Called by {@link RiviniaMenuItem}.\n   * Disabled/unknown ids are ignored via `activate` (returns false).\n   */\n  pickItem(id: string): void {\n    if (!this.controller().activate(id)) return;\n    this.doClose(false);\n    this.picked.emit({ id });\n  }\n\n  /** Mouse hover tracks keyboard focus. Called by {@link RiviniaMenuItem}. */\n  hoverItem(id: string): void {\n    this.controller().activate(id);\n  }\n\n  private doClose(restoreFocus: boolean): void {\n    const was = this.controller().open();\n    this.controller().closeMenu();\n    if (was) this.closed.emit();\n    if (restoreFocus) this.focusTrigger();\n  }\n\n  /**\n   * Initial focus after open. The panel only exists in the DOM after the\n   * opening change-detection pass, so focusing synchronously races rendering.\n   * afterRenderEffect re-runs when `open` flips (reactive read) and executes\n   * after the commit — panel present, in apps and in tests. Never runs on the\n   * server (SSR-safe by construction). Skips when focus already sits inside\n   * the panel, so later renders never steal it back.\n   */\n  private consumePendingFocus(): void {\n    const open = this.controller().open();\n    if (!open || !this.focusPending) return;\n    this.focusPending = false;\n    const root: HTMLElement | null = this.self.nativeElement.querySelector('.rv-menu-panel');\n    const active = this.activeDocumentElement();\n    if (root && (!active || !root.contains(active))) this.focusActive();\n  }\n\n  private focusActive(): void {\n    const id = this.controller().activeId();\n    const root: HTMLElement | null = this.self.nativeElement.querySelector('.rv-menu-panel');\n    if (!root) return;\n    const target = id\n      ? root.querySelector<HTMLElement>(`[data-rv-id=\"${CSS.escape(id)}\"]`)\n      : root.querySelector<HTMLElement>('[rvmenuitem]');\n    try {\n      target?.focus({ preventScroll: true });\n    } catch {\n      // Focus is best-effort.\n    }\n  }\n\n  private activeDocumentElement(): Element | null {\n    try {\n      return typeof document === 'undefined' ? null : document.activeElement;\n    } catch {\n      return null;\n    }\n  }\n\n  /** Focusable trigger child (APG target) or the wrapper as fallback. */\n  private triggerEl(): HTMLElement | null {\n    const wrap = this.self.nativeElement.querySelector('.rv-menu-trigger') as HTMLElement | null;\n    if (!wrap) return null;\n    return (wrap.querySelector('button, a, [tabindex]') as HTMLElement | null) ?? wrap;\n  }\n\n  private focusTrigger(): void {\n    try {\n      this.triggerEl()?.focus({ preventScroll: true });\n    } catch {\n      // Best-effort.\n    }\n  }\n}\n"],"mappings":"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"}

package/fesm2022/rivinia-menu.mjs

@@ -0,0 +1,71 @@
+import { signal } from "@angular/core";
+var RiviniaMenu = class {
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	activeId = signal(null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	_items = signal([], ...ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []);
+	items = this._items.asReadonly();
+	register(item) {
+		this._items.update((list) => {
+			const at = list.findIndex((i) => i.id === item.id);
+			if (at === -1) return [...list, { ...item }];
+			return list.map((i, index) => index === at ? {
+				...i,
+				...item
+			} : i);
+		});
+	}
+	unregister(id) {
+		this._items.update((list) => list.filter((i) => i.id !== id));
+		if (this.activeId() === id) this.activeId.set(null);
+	}
+	openMenu(focus = "first") {
+		this.open.set(true);
+		if (focus === "first") this.activateFirst();
+		else if (focus === "last") this.activateLast();
+		else this.activeId.set(null);
+	}
+	closeMenu() {
+		this.open.set(false);
+		this.activeId.set(null);
+	}
+	toggle(focus = "first") {
+		if (this.open()) this.closeMenu();
+		else this.openMenu(focus);
+	}
+	pickActive() {
+		return this.activeId();
+	}
+	activateFirst() {
+		this.activeId.set(firstEnabled(this._items()));
+	}
+	activateLast() {
+		const enabled = this._items().filter((i) => !i.disabled);
+		this.activeId.set(enabled.length > 0 ? enabled[enabled.length - 1].id : null);
+	}
+	activateNext() {
+		this.step(1);
+	}
+	activatePrevious() {
+		this.step(-1);
+	}
+	activate(id) {
+		if (!this._items().find((i) => i.id === id && !i.disabled)) return false;
+		this.activeId.set(id);
+		return true;
+	}
+	step(direction) {
+		const enabled = this._items().filter((i) => !i.disabled);
+		if (enabled.length === 0) {
+			this.activeId.set(null);
+			return;
+		}
+		const next = enabled[(enabled.findIndex((i) => i.id === this.activeId()) + direction + enabled.length) % enabled.length];
+		this.activeId.set(next.id);
+	}
+};
+function firstEnabled(items) {
+	return items.find((i) => !i.disabled)?.id ?? null;
+}
+export { RiviniaMenu };
+
+//# sourceMappingURL=rivinia-menu.mjs.map

package/fesm2022/rivinia-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rivinia-menu.mjs","names":[],"sources":["../../../projects/menu/src/lib/rivinia-menu.ts"],"sourcesContent":["import { signal } from '@angular/core';\nimport type { RiviniaMenuController, RiviniaMenuFocus, RiviniaMenuItem } from './menu-types';\n\n/**\n * Headless per-menu controller. Owns open state, the registered items and\n * the active (keyboard-focused) item — no DOM, no styling, no positioning.\n * Instantiate one per menu (`new RiviniaMenu()`); rendering and focus moves\n * are the UI layer's job (`@rivinia/menu/ui` implements them).\n *\n * Navigation skips disabled items and wraps around. Closing clears the\n * active item; the UI restores focus to the trigger.\n */\nexport class RiviniaMenu implements RiviniaMenuController {\n  /** Whether the panel is open. */\n  readonly open = signal(false);\n  /** Id of the keyboard-active item (`null` when closed or unfocused). */\n  readonly activeId = signal<string | null>(null);\n\n  private readonly _items = signal<readonly RiviniaMenuItem[]>([]);\n  /** Registered items, in registration order. */\n  readonly items = this._items.asReadonly();\n\n  /** Register an item (idempotent by id — re-register updates it). */\n  register(item: RiviniaMenuItem): void {\n    this._items.update((list) => {\n      const at = list.findIndex((i) => i.id === item.id);\n      if (at === -1) return [...list, { ...item }];\n      return list.map((i, index) => (index === at ? { ...i, ...item } : i));\n    });\n  }\n\n  /** Remove an item; clears `activeId` when it pointed at it. */\n  unregister(id: string): void {\n    this._items.update((list) => list.filter((i) => i.id !== id));\n    if (this.activeId() === id) this.activeId.set(null);\n  }\n\n  /** Open and optionally focus the first/last enabled item. */\n  openMenu(focus: RiviniaMenuFocus = 'first'): void {\n    this.open.set(true);\n    if (focus === 'first') this.activateFirst();\n    else if (focus === 'last') this.activateLast();\n    else this.activeId.set(null);\n  }\n\n  /** Close and clear the active item. Focus restoration is UI-owned. */\n  closeMenu(): void {\n    this.open.set(false);\n    this.activeId.set(null);\n  }\n\n  toggle(focus: RiviniaMenuFocus = 'first'): void {\n    if (this.open()) this.closeMenu();\n    else this.openMenu(focus);\n  }\n\n  /** The active id, or `null` when nothing is active. */\n  pickActive(): string | null {\n    return this.activeId();\n  }\n\n  activateFirst(): void {\n    this.activeId.set(firstEnabled(this._items()));\n  }\n\n  activateLast(): void {\n    const enabled = this._items().filter((i) => !i.disabled);\n    this.activeId.set(enabled.length > 0 ? enabled[enabled.length - 1].id : null);\n  }\n\n  activateNext(): void {\n    this.step(1);\n  }\n\n  activatePrevious(): void {\n    this.step(-1);\n  }\n\n  activate(id: string): boolean {\n    const found = this._items().find((i) => i.id === id && !i.disabled);\n    if (!found) return false;\n    this.activeId.set(id);\n    return true;\n  }\n\n  private step(direction: 1 | -1): void {\n    const enabled = this._items().filter((i) => !i.disabled);\n    if (enabled.length === 0) {\n      this.activeId.set(null);\n      return;\n    }\n    const at = enabled.findIndex((i) => i.id === this.activeId());\n    const next = enabled[(at + direction + enabled.length) % enabled.length];\n    this.activeId.set(next.id);\n  }\n}\n\nfunction firstEnabled(items: readonly RiviniaMenuItem[]): string | null {\n  return items.find((i) => !i.disabled)?.id ?? null;\n}\n"],"mappings":";AAYA,IAAa,cAAb,MAAwB;CAEb,OAAO,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,WAAW,OAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAE9B,SAAS,OAAmC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEvD,QAAQ,KAAK,OAAO,WAAU;CAGvC,SAAS,MAAqB;EAC5B,KAAK,OAAO,QAAQ,SAAQ;GAC1B,MAAM,KAAK,KAAK,WAAW,MAAM,EAAE,OAAO,KAAK,EAAE;GACjD,IAAI,OAAO,IAAI,OAAO,CAAC,GAAG,MAAM,EAAE,GAAG,KAAI,CAAE;GAC3C,OAAO,KAAK,KAAK,GAAG,UAAW,UAAU,KAAK;IAAE,GAAG;IAAG,GAAG;GAAI,IAAK,CAAE;EACtE,CAAC;CACH;CAGA,WAAW,IAAU;EACnB,KAAK,OAAO,QAAQ,SAAS,KAAK,QAAQ,MAAM,EAAE,OAAO,EAAE,CAAC;EAC5D,IAAI,KAAK,SAAQ,MAAO,IAAI,KAAK,SAAS,IAAI,IAAI;CACpD;CAGA,SAAS,QAA0B,SAAO;EACxC,KAAK,KAAK,IAAI,IAAI;EAClB,IAAI,UAAU,SAAS,KAAK,cAAa;OACpC,IAAI,UAAU,QAAQ,KAAK,aAAY;OACvC,KAAK,SAAS,IAAI,IAAI;CAC7B;CAGA,YAAS;EACP,KAAK,KAAK,IAAI,KAAK;EACnB,KAAK,SAAS,IAAI,IAAI;CACxB;CAEA,OAAO,QAA0B,SAAO;EACtC,IAAI,KAAK,KAAI,GAAI,KAAK,UAAS;OAC1B,KAAK,SAAS,KAAK;CAC1B;CAGA,aAAU;EACR,OAAO,KAAK,SAAQ;CACtB;CAEA,gBAAa;EACX,KAAK,SAAS,IAAI,aAAa,KAAK,OAAM,CAAE,CAAC;CAC/C;CAEA,eAAY;EACV,MAAM,UAAU,KAAK,OAAM,CAAE,CAAC,QAAQ,MAAM,CAAC,EAAE,QAAQ;EACvD,KAAK,SAAS,IAAI,QAAQ,SAAS,IAAI,QAAQ,QAAQ,SAAS,EAAE,CAAC,KAAK,IAAI;CAC9E;CAEA,eAAY;EACV,KAAK,KAAK,CAAC;CACb;CAEA,mBAAgB;EACd,KAAK,KAAK,EAAE;CACd;CAEA,SAAS,IAAU;EAEjB,IAAI,CADU,KAAK,OAAM,CAAE,CAAC,MAAM,MAAM,EAAE,OAAO,MAAM,CAAC,EAAE,QACrD,GAAO,OAAO;EACnB,KAAK,SAAS,IAAI,EAAE;EACpB,OAAO;CACT;CAEQ,KAAK,WAAiB;EAC5B,MAAM,UAAU,KAAK,OAAM,CAAE,CAAC,QAAQ,MAAM,CAAC,EAAE,QAAQ;EACvD,IAAI,QAAQ,WAAW,GAAG;GACxB,KAAK,SAAS,IAAI,IAAI;GACtB;EACF;EAEA,MAAM,OAAO,SADF,QAAQ,WAAW,MAAM,EAAE,OAAO,KAAK,SAAQ,CACpC,IAAK,YAAY,QAAQ,UAAU,QAAQ;EACjE,KAAK,SAAS,IAAI,KAAK,EAAE;CAC3B;AACD;AAED,SAAS,aAAa,OAAiC;CACrD,OAAO,MAAM,MAAM,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,MAAM;AAC/C"}

package/package.json

@@ -1,6 +1,36 @@
 {
   "name": "@rivinia/menu",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Headless menu behavior for Angular: open state, keyboard navigation, item registry.",
+  "keywords": [
+    "angular",
+    "menu",
+    "dropdown",
+    "signals",
+    "typescript"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/core": "^22.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/rivinia-menu.mjs",
+  "typings": "types/rivinia-menu.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/rivinia-menu.d.ts",
+      "default": "./fesm2022/rivinia-menu.mjs"
+    },
+    "./ui": {
+      "types": "./types/rivinia-menu-ui.d.ts",
+      "default": "./fesm2022/rivinia-menu-ui.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }

package/types/rivinia-menu-ui.d.ts

@@ -0,0 +1,208 @@
+import { RiviniaMenuController, RiviniaMenuPlacement } from "@rivinia/menu";
+import * as i0 from "@angular/core";
+/** Panel placement relative to the trigger. Logical (RTL-aware). */
+type RiviniaMenuUiPlacement = RiviniaMenuPlacement;
+/** Payload of {@link RiviniaMenuComponent.picked}. */
+interface MenuPick {
+  readonly id: string;
+}
+/**
+ * Marker + behavior for one navigable row. Registers itself with the
+ * enclosing menu on init (unregisters on destroy), exposes `data-rv-id`
+ * for focus targeting, and keeps `tabindex`/`aria-disabled` in sync.
+ * Non-`rvMenuItem` content (headers, dividers, badges) is skipped by
+ * keyboard navigation automatically.
+ */
+export declare class RiviniaMenuItem {
+  readonly id: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+  /**
+   * Tri-state selection (e.g. multi-select options). `null` (default) renders
+   * a plain `menuitem`; a boolean renders `menuitemcheckbox` + `aria-checked`
+   * so screen readers announce the state (the visual check alone is silent).
+   */
+  readonly checked: import("@angular/core").InputSignal<boolean | null>;
+  private readonly menu;
+  private readonly active;
+  protected tab(): string;
+  protected computedRole(): string;
+  protected checkedAttr(): string | null;
+  /** Mouse pick: disabled items are ignored (controller refuses them). */
+  protected pick(): void;
+  /** Mouse hover follows keyboard focus so highlight tracks the pointer. */
+  protected hover(): void;
+  ngOnInit(): void;
+  ngOnDestroy(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RiviniaMenuItem, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<RiviniaMenuItem, "[rvMenuItem]", never, {
+    "id": {
+      "alias": "id";
+      "required": true;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "checked": {
+      "alias": "checked";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Ready-made dropdown menu. Binds a {@link RiviniaMenu} controller (or owns
+ * one when omitted) and projects trigger + panel:
+ *
+ * ```html
+ * <rv-menu [menu]="menu" [placement]="'bottom-start'" (picked)="go($event)">
+ *   <button rv-menu-trigger><img src="avatar.png" alt="Account" /></button>
+ *   <div rv-menu-panel>
+ *     <div class="head">Sophie · sophie@ui.live</div>
+ *     <button rvMenuItem id="profile">Profile</button>
+ *     <button rvMenuItem id="logout">Sign out</button>
+ *   </div>
+ * </rv-menu>
+ * ```
+ *
+ * Keyboard: Enter/Space/ArrowDown opens; Escape closes and refocuses the
+ * trigger; arrows/Home/End move through enabled items; Tab closes and moves
+ * on (non-modal by design). Outside pointer-down closes. SSR renders closed.
+ */
+export declare class RiviniaMenuComponent {
+  /**
+   * External controller (shared/test double). Omitted → the component owns
+   * a private one (simplest embedding).
+   */
+  readonly menu: import("@angular/core").InputSignal<RiviniaMenuController | null>;
+  /** Panel placement relative to the trigger. @default 'bottom-start' */
+  readonly placement: import("@angular/core").InputSignal<import("@rivinia/menu").RiviniaMenuPlacement>;
+  /** Fired when the user picks an enabled item (id). Closes first. */
+  readonly picked: import("@angular/core").OutputEmitterRef<MenuPick>;
+  readonly opened: import("@angular/core").OutputEmitterRef<void>;
+  readonly closed: import("@angular/core").OutputEmitterRef<void>;
+  private readonly owned;
+  private readonly self;
+  /** Deferred initial focus: set on open paths, consumed after render. */
+  private focusPending;
+  /**
+   * Manual popover support (top-layer). Feature-detected: modern browsers
+   * escape clipping ancestors; older ones keep the absolute fallback.
+   */
+  protected readonly topLayerSupported: boolean;
+  /** Coordinates applied (gates the enter animation until measured). */
+  protected readonly positioned: import("@angular/core").WritableSignal<boolean>;
+  /** Whether the panel flipped to the opposite vertical side. */
+  protected readonly flipped: import("@angular/core").WritableSignal<boolean>;
+  /** Printable-character search buffer; reset by timer after 500ms quiet. */
+  private typeBuffer;
+  private typeTimer;
+  /** Effective controller: external input or the owned fallback. */
+  controller(): RiviniaMenuController;
+  /** Called by {@link RiviniaMenuItem} directives. */
+  registerItem(item: {
+    id: string;
+    disabled: boolean;
+  }): void;
+  /** Called by {@link RiviniaMenuItem} directives. */
+  unregisterItem(id: string): void;
+  constructor();
+  /**
+   * Top-layer presentation: show the manual popover, measure trigger +
+   * panel, and pin fixed coordinates (flipping when needed). Runs inside
+   * afterRender — before paint, so no flash. Falls back to the absolute CSS
+   * placement when popover is unsupported (jsdom included).
+   */
+  private showAndPosition;
+  private isRtl;
+  /** Mark an opening pass: deferred focus + (top-layer) re-measurement. */
+  private markOpening;
+  protected onTriggerClick(): void;
+  protected onTriggerKey(event: KeyboardEvent): void;
+  protected onPanelKey(event: KeyboardEvent): void;
+  /**
+   * APG printable-character search: typing moves focus to the next enabled
+   * item whose visible text starts with the buffer. Repeating one character
+   * cycles through its matches; the buffer resets after 500ms of quiet.
+   * Labels are UI-owned (read from the DOM), so this lives in the component,
+   * not the headless controller.
+   */
+  private onTypeahead;
+  private matchTypeahead;
+  private pickFocused;
+  /**
+   * Mouse pick of a concrete item. Called by {@link RiviniaMenuItem}.
+   * Disabled/unknown ids are ignored via `activate` (returns false).
+   */
+  pickItem(id: string): void;
+  /** Mouse hover tracks keyboard focus. Called by {@link RiviniaMenuItem}. */
+  hoverItem(id: string): void;
+  private doClose;
+  /**
+   * Initial focus after open. The panel only exists in the DOM after the
+   * opening change-detection pass, so focusing synchronously races rendering.
+   * afterRenderEffect re-runs when `open` flips (reactive read) and executes
+   * after the commit — panel present, in apps and in tests. Never runs on the
+   * server (SSR-safe by construction). Skips when focus already sits inside
+   * the panel, so later renders never steal it back.
+   */
+  private consumePendingFocus;
+  private focusActive;
+  private activeDocumentElement;
+  /** Focusable trigger child (APG target) or the wrapper as fallback. */
+  private triggerEl;
+  private focusTrigger;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RiviniaMenuComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RiviniaMenuComponent, "rv-menu", never, {
+    "menu": {
+      "alias": "menu";
+      "required": false;
+      "isSignal": true;
+    };
+    "placement": {
+      "alias": "placement";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "picked": "picked";
+    "opened": "opened";
+    "closed": "closed";
+  }, never, ["[rv-menu-trigger]", "[rv-menu-panel]"], true, never>;
+}
+/** Trigger rect in viewport coordinates. */
+interface MenuTriggerRect {
+  readonly left: number;
+  readonly top: number;
+  readonly width: number;
+  readonly height: number;
+}
+/** Measured panel size. */
+interface MenuPanelSize {
+  readonly width: number;
+  readonly height: number;
+}
+/** Viewport size. */
+interface MenuViewport {
+  readonly width: number;
+  readonly height: number;
+}
+/** Fixed-position coordinates plus whether the vertical side flipped. */
+interface MenuCoordinates {
+  readonly left: number;
+  readonly top: number;
+  readonly flipped: boolean;
+}
+/** Gap between trigger and panel. */
+export declare const MENU_GAP = 6;
+/**
+ * Pure top-layer position for a menu panel: anchors to the trigger per
+ * `placement` (logical, RTL-aware), flips to the opposite vertical side when
+ * the preferred side overflows but the other fits, then clamps inside the
+ * viewport. Zero DOM access — unit-testable with fake rects; the component
+ * only measures and applies.
+ */
+export declare function computeMenuPosition(trigger: MenuTriggerRect, panel: MenuPanelSize, placement: RiviniaMenuPlacement, viewport: MenuViewport, rtl: boolean, gap?: number): MenuCoordinates;
+export type { MenuCoordinates, MenuPanelSize, MenuPick, MenuTriggerRect, MenuViewport, RiviniaMenuUiPlacement };

package/types/rivinia-menu.d.ts

@@ -0,0 +1,71 @@
+import { Signal } from "@angular/core";
+/**
+ * One navigable menu entry. The controller only tracks identity and
+ * enabled state — labels, icons, badges and actions are UI-owned.
+ */
+interface RiviniaMenuItem {
+  readonly id: string;
+  /** Skipped by keyboard navigation and reported as disabled. @default false */
+  readonly disabled?: boolean;
+}
+/** Panel placement relative to the trigger. Logical (RTL-aware). */
+type RiviniaMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+/** Which item takes focus when the menu opens. @default 'first' */
+type RiviniaMenuFocus = 'first' | 'last' | 'none';
+/**
+ * Structural slice of {@link RiviniaMenu} a UI layer drives. The full
+ * controller satisfies it from any module realm (same input-composition
+ * rule as `@rivinia/modal`'s host manager interface).
+ */
+interface RiviniaMenuController {
+  readonly open: Signal<boolean>;
+  readonly activeId: Signal<string | null>;
+  readonly items: Signal<readonly RiviniaMenuItem[]>;
+  register(item: RiviniaMenuItem): void;
+  unregister(id: string): void;
+  openMenu(focus?: RiviniaMenuFocus): void;
+  closeMenu(): void;
+  toggle(focus?: RiviniaMenuFocus): void;
+  pickActive(): string | null;
+  activateFirst(): void;
+  activateLast(): void;
+  activateNext(): void;
+  activatePrevious(): void;
+  activate(id: string): boolean;
+}
+/**
+ * Headless per-menu controller. Owns open state, the registered items and
+ * the active (keyboard-focused) item — no DOM, no styling, no positioning.
+ * Instantiate one per menu (`new RiviniaMenu()`); rendering and focus moves
+ * are the UI layer's job (`@rivinia/menu/ui` implements them).
+ *
+ * Navigation skips disabled items and wraps around. Closing clears the
+ * active item; the UI restores focus to the trigger.
+ */
+export declare class RiviniaMenu implements RiviniaMenuController {
+  /** Whether the panel is open. */
+  readonly open: import("@angular/core").WritableSignal<boolean>;
+  /** Id of the keyboard-active item (`null` when closed or unfocused). */
+  readonly activeId: import("@angular/core").WritableSignal<string | null>;
+  private readonly _items;
+  /** Registered items, in registration order. */
+  readonly items: import("@angular/core").Signal<readonly RiviniaMenuItem[]>;
+  /** Register an item (idempotent by id — re-register updates it). */
+  register(item: RiviniaMenuItem): void;
+  /** Remove an item; clears `activeId` when it pointed at it. */
+  unregister(id: string): void;
+  /** Open and optionally focus the first/last enabled item. */
+  openMenu(focus?: RiviniaMenuFocus): void;
+  /** Close and clear the active item. Focus restoration is UI-owned. */
+  closeMenu(): void;
+  toggle(focus?: RiviniaMenuFocus): void;
+  /** The active id, or `null` when nothing is active. */
+  pickActive(): string | null;
+  activateFirst(): void;
+  activateLast(): void;
+  activateNext(): void;
+  activatePrevious(): void;
+  activate(id: string): boolean;
+  private step;
+}
+export type { RiviniaMenuController, RiviniaMenuFocus, RiviniaMenuItem, RiviniaMenuPlacement };