@rivinia/menu 0.1.0 → 0.3.2

package/fesm2022/rivinia-menu-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { Component, Directive, ElementRef, ViewEncapsulation, afterRenderEffect, computed, effect, inject, input, output, signal } from "@angular/core";
+import { Component, Directive, ElementRef, ViewEncapsulation, afterRenderEffect, computed, contentChildren, effect, inject, input, output, signal } from "@angular/core";
 import { RiviniaMenu } from "@rivinia/menu";
 const MENU_GAP = 6;
 const EDGE = 8;
@@ -31,6 +31,7 @@ function computeMenuPosition(trigger, panel, placement, viewport, rtl, gap = 6)
 		flipped
 	};
 }
+let nextPanelId = 0;
 var RiviniaMenuItem = class RiviniaMenuItem {
 	id = input.required(...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
 	disabled = input(false, {
@@ -38,6 +39,8 @@ var RiviniaMenuItem = class RiviniaMenuItem {
 		transform: (v) => v === "" || v === true
 	});
 	checked = input(null, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	label = input(null, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef, { optional: true });
 	menu = inject(RiviniaMenuComponent, {
 		optional: true,
 		skipSelf: true
@@ -53,20 +56,41 @@ var RiviniaMenuItem = class RiviniaMenuItem {
 		const checked = this.checked();
 		return checked === null ? null : String(checked);
 	}
+	isDisabled() {
+		if (this.disabled()) return true;
+		return this.host?.nativeElement?.disabled === true;
+	}
 	pick() {
 		this.menu?.pickItem(this.id());
 	}
 	hover() {
 		this.menu?.hoverItem(this.id());
 	}
+	registeredId = null;
+	constructor() {
+		effect(() => {
+			const id = this.id();
+			const menu = this.menu;
+			if (this.registeredId === null) return;
+			if (this.registeredId !== id) menu?.unregisterItem(this.registeredId);
+			menu?.registerItem({
+				id,
+				disabled: this.isDisabled()
+			});
+			this.registeredId = id;
+		});
+	}
 	ngOnInit() {
+		this.registeredId = this.id();
 		this.menu?.registerItem({
 			id: this.id(),
-			disabled: this.disabled()
+			disabled: this.isDisabled()
 		});
 	}
 	ngOnDestroy() {
-		this.menu?.unregisterItem(this.id());
+		if (this.registeredId === null) return;
+		this.menu?.unregisterItem(this.registeredId);
+		this.registeredId = null;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -103,6 +127,13 @@ var RiviniaMenuItem = class RiviniaMenuItem {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		host: {
@@ -113,8 +144,9 @@ var RiviniaMenuItem = class RiviniaMenuItem {
 			properties: {
 				"attr.role": "computedRole()",
 				"attr.data-rv-id": "id()",
+				"attr.data-rv-label": "label()",
 				"attr.tabindex": "tab()",
-				"attr.aria-disabled": "disabled()",
+				"attr.aria-disabled": "isDisabled()",
 				"attr.data-active": "active()",
 				"attr.aria-checked": "checkedAttr()"
 			}
@@ -135,8 +167,9 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				"[attr.role]": "computedRole()",
 				"[attr.data-rv-id]": "id()",
+				"[attr.data-rv-label]": "label()",
 				"[attr.tabindex]": "tab()",
-				"[attr.aria-disabled]": "disabled()",
+				"[attr.aria-disabled]": "isDisabled()",
 				"[attr.data-active]": "active()",
 				"[attr.aria-checked]": "checkedAttr()",
 				"(click)": "pick()",
@@ -144,6 +177,7 @@ i0.ɵɵngDeclareClassMetadata({
 			}
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		id: [{
 			type: i0.Input,
@@ -168,18 +202,36 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "checked",
 				required: false
 			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				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 */ []);
+	menuLabel = input(null, ...ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []);
+	items = input(null, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	panelClass = input(null, ...ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []);
+	itemClass = input(null, ...ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []);
 	picked = output();
 	opened = output();
 	closed = output();
 	owned = new RiviniaMenu();
 	self = inject(ElementRef);
+	projectedItems = contentChildren(RiviniaMenuItem, {
+		...ngDevMode ? { debugName: "projectedItems" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	panelId = `rv-menu-panel-${++nextPanelId}`;
 	focusPending = false;
+	pendingActivation = 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 */ []);
@@ -188,19 +240,38 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
 	controller() {
 		return this.menu() ?? this.owned;
 	}
+	dataItems() {
+		return this.ambiguous() ? [] : this.items() ?? [];
+	}
+	checkedFor(id) {
+		const c = this.controller();
+		return typeof c.isSelected === "function" ? c.isSelected(id) : null;
+	}
+	ambiguous() {
+		return this.items() !== null && this.projectedItems().length > 0;
+	}
 	registerItem(item) {
-		this.controller().register(item);
+		const c = this.controller();
+		c.register(item);
+		if (this.pendingActivation && c.open() && c.activeId() === null && !item.disabled) {
+			c.activateFirst();
+			this.pendingActivation = false;
+		}
 	}
 	unregisterItem(id) {
 		this.controller().unregister(id);
 	}
 	constructor() {
+		effect(() => {
+			if (!this.ambiguous()) return;
+			throw new Error("rv-menu: `[items]` cannot be combined with projected `rvMenuItem` children — pick one way to populate the panel.");
+		});
 		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);
+				if (host && !host.contains(event.target)) this.doClose(false);
 			};
 			document.addEventListener("pointerdown", onPointer);
 			const onScroll = (event) => {
@@ -222,6 +293,7 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
 			const trigger = this.triggerEl();
 			trigger?.setAttribute("aria-haspopup", "menu");
 			trigger?.setAttribute("aria-expanded", String(open));
+			trigger?.setAttribute("aria-controls", this.panelId);
 		});
 		afterRenderEffect(() => {
 			if (this.controller().open() && !this.positioned()) this.showAndPosition();
@@ -279,10 +351,9 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
 	}
 	markOpening() {
 		this.focusPending = true;
-		if (typeof window !== "undefined" && this.topLayerSupported) {
-			this.flipped.set(false);
-			this.positioned.set(false);
-		}
+		this.pendingActivation = true;
+		this.flipped.set(false);
+		this.positioned.set(false);
 	}
 	onTriggerClick() {
 		const c = this.controller();
@@ -347,12 +418,23 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
 				event.preventDefault();
 				this.pickFocused();
 				break;
-			case "Tab":
+			case "Tab": {
+				event.preventDefault();
+				const backwards = event.shiftKey;
 				this.doClose(false);
+				this.focusAdjacentToTrigger(backwards);
 				break;
+			}
 			default: this.onTypeahead(event);
 		}
 	}
+	resetTypeahead() {
+		this.typeBuffer = "";
+		if (this.typeTimer !== null) {
+			clearTimeout(this.typeTimer);
+			this.typeTimer = null;
+		}
+	}
 	onTypeahead(event) {
 		if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
 		const ch = event.key.toLocaleLowerCase();
@@ -371,7 +453,7 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
 		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()
+			text: (el.getAttribute("data-rv-label") ?? 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) {
@@ -381,8 +463,11 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
 		return rows[0].id;
 	}
 	pickFocused() {
-		const id = this.controller().pickActive();
+		const c = this.controller();
+		const id = c.pickActive();
 		if (id === null) return;
+		const item = c.items().find((i) => i.id === id);
+		if (!item || item.disabled) return;
 		this.doClose(false);
 		this.picked.emit({ id });
 	}
@@ -396,16 +481,22 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
 	}
 	doClose(restoreFocus) {
 		const was = this.controller().open();
+		this.resetTypeahead();
 		this.controller().closeMenu();
 		if (was) this.closed.emit();
 		if (restoreFocus) this.focusTrigger();
 	}
 	consumePendingFocus() {
-		if (!this.controller().open() || !this.focusPending) return;
-		this.focusPending = false;
+		if (!this.positioned() || !this.controller().open() || !this.focusPending) return;
 		const root = this.self.nativeElement.querySelector(".rv-menu-panel");
+		if (!root) return;
 		const active = this.activeDocumentElement();
-		if (root && (!active || !root.contains(active))) this.focusActive();
+		if (active && root.contains(active)) {
+			this.focusPending = false;
+			return;
+		}
+		this.focusPending = false;
+		this.focusActive();
 	}
 	focusActive() {
 		const id = this.controller().activeId();
@@ -428,6 +519,22 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
 		if (!wrap) return null;
 		return wrap.querySelector("button, a, [tabindex]") ?? wrap;
 	}
+	focusAdjacentToTrigger(backwards) {
+		try {
+			const trigger = this.triggerEl();
+			const doc = trigger?.ownerDocument;
+			if (!trigger || !doc) return;
+			const stops = [...doc.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])")].filter((el) => {
+				if (el.hasAttribute("disabled") || el.getAttribute("aria-hidden") === "true") return false;
+				if (el.closest(".rv-menu-panel")) return false;
+				return el.getClientRects().length > 0;
+			});
+			stops.sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+			const at = stops.indexOf(trigger);
+			if (at === -1) return;
+			stops[backwards ? at - 1 : at + 1]?.focus({ preventScroll: true });
+		} catch {}
+	}
 	focusTrigger() {
 		try {
 			this.triggerEl()?.focus({ preventScroll: true });
@@ -461,6 +568,34 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			menuLabel: {
+				classPropertyName: "menuLabel",
+				publicName: "menuLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panelClass: {
+				classPropertyName: "panelClass",
+				publicName: "panelClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			itemClass: {
+				classPropertyName: "itemClass",
+				publicName: "itemClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -468,16 +603,25 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
 			opened: "opened",
 			closed: "closed"
 		},
+		queries: [{
+			propertyName: "projectedItems",
+			predicate: RiviniaMenuItem,
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
 		template: `
     <div class="rv-menu-trigger" (click)="onTriggerClick()" (keydown)="onTriggerKey($event)">
-      <ng-content select="[rv-menu-trigger]"></ng-content>
+      <ng-content select="[rv-menu-trigger], [rvMenuTrigger]"></ng-content>
     </div>
     @if (controller().open()) {
       <div
         #panel
         class="rv-menu-panel"
+        [class]="panelClass()"
         role="menu"
+        [attr.id]="panelId"
+        [attr.aria-label]="menuLabel()"
         [attr.popover]="topLayerSupported ? 'manual' : null"
         [attr.data-placement]="placement()"
         [attr.data-flipped]="flipped()"
@@ -485,12 +629,36 @@ var RiviniaMenuComponent = class RiviniaMenuComponent {
         [attr.data-top-layer]="topLayerSupported"
         (keydown)="onPanelKey($event)"
       >
-        <ng-content select="[rv-menu-panel]"></ng-content>
+        @if (dataItems().length > 0) {
+          @for (item of dataItems(); track item.id) {
+            <button
+              rvMenuItem
+              [id]="item.id"
+              [disabled]="item.disabled ?? false"
+              [checked]="checkedFor(item.id)"
+              [class]="itemClass()"
+            >
+              {{ item.label }}
+            </button>
+          }
+        }
+        <ng-content select="[rv-menu-panel], [rvMenuPanel]"></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"],
+		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, #e0e0e0);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{position:absolute;z-index:var(--rv-menu-z, 500);min-width:var(--rv-menu-width, 16rem);max-width:calc(100dvw - 2rem);max-height:min(20rem,calc(100dvh - 2rem));overflow-y:auto;background:var(--rv-menu-bg, #ffffff);color:var(--rv-menu-fg, #111111);font-family:var(--rv-menu-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);border:1px solid var(--rv-menu-border, #e0e0e0);border-radius:var(--rv-menu-radius, 12px);box-shadow:var(--rv-menu-shadow, 0 16px 48px rgba(0, 0, 0, .22));padding:var(--rv-menu-pad, 6px)}.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{transform-origin:top center;animation:rv-menu-in var(--rv-menu-duration, .16s) var(--rv-menu-easing, cubic-bezier(.16, 1, .3, 1))}.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, -6px)) scale(.96)}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: RiviniaMenuItem,
+			selector: "[rvMenuItem]",
+			inputs: [
+				"id",
+				"disabled",
+				"checked",
+				"label"
+			]
+		}],
 		encapsulation: i0.ViewEncapsulation.None
 	});
 };
@@ -505,15 +673,19 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "rv-menu",
 			standalone: true,
 			encapsulation: ViewEncapsulation.None,
+			imports: [RiviniaMenuItem],
 			template: `
     <div class="rv-menu-trigger" (click)="onTriggerClick()" (keydown)="onTriggerKey($event)">
-      <ng-content select="[rv-menu-trigger]"></ng-content>
+      <ng-content select="[rv-menu-trigger], [rvMenuTrigger]"></ng-content>
     </div>
     @if (controller().open()) {
       <div
         #panel
         class="rv-menu-panel"
+        [class]="panelClass()"
         role="menu"
+        [attr.id]="panelId"
+        [attr.aria-label]="menuLabel()"
         [attr.popover]="topLayerSupported ? 'manual' : null"
         [attr.data-placement]="placement()"
         [attr.data-flipped]="flipped()"
@@ -521,11 +693,24 @@ i0.ɵɵngDeclareClassMetadata({
         [attr.data-top-layer]="topLayerSupported"
         (keydown)="onPanelKey($event)"
       >
-        <ng-content select="[rv-menu-panel]"></ng-content>
+        @if (dataItems().length > 0) {
+          @for (item of dataItems(); track item.id) {
+            <button
+              rvMenuItem
+              [id]="item.id"
+              [disabled]="item.disabled ?? false"
+              [checked]="checkedFor(item.id)"
+              [class]="itemClass()"
+            >
+              {{ item.label }}
+            </button>
+          }
+        }
+        <ng-content select="[rv-menu-panel], [rvMenuPanel]"></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"]
+			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, #e0e0e0);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{position:absolute;z-index:var(--rv-menu-z, 500);min-width:var(--rv-menu-width, 16rem);max-width:calc(100dvw - 2rem);max-height:min(20rem,calc(100dvh - 2rem));overflow-y:auto;background:var(--rv-menu-bg, #ffffff);color:var(--rv-menu-fg, #111111);font-family:var(--rv-menu-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);border:1px solid var(--rv-menu-border, #e0e0e0);border-radius:var(--rv-menu-radius, 12px);box-shadow:var(--rv-menu-shadow, 0 16px 48px rgba(0, 0, 0, .22));padding:var(--rv-menu-pad, 6px)}.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{transform-origin:top center;animation:rv-menu-in var(--rv-menu-duration, .16s) var(--rv-menu-easing, cubic-bezier(.16, 1, .3, 1))}.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, -6px)) scale(.96)}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -546,6 +731,38 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		menuLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuLabel",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		panelClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panelClass",
+				required: false
+			}]
+		}],
+		itemClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemClass",
+				required: false
+			}]
+		}],
 		picked: [{
 			type: i0.Output,
 			args: ["picked"]
@@ -557,6 +774,13 @@ i0.ɵɵngDeclareClassMetadata({
 		closed: [{
 			type: i0.Output,
 			args: ["closed"]
+		}],
+		projectedItems: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RiviniaMenuItem), {
+				descendants: true,
+				isSignal: true
+			}]
 		}]
 	}
 });