@ojiepermana/angular 22.1.14 → 22.2.0

package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs

@@ -1,208 +1,453 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, input, output, Directive, computed, Component, model, forwardRef, contentChildren, Injector, TemplateRef, ViewContainerRef, DestroyRef, signal } from '@angular/core';
-import { cn, injectUniqueId } from '@ojiepermana/angular/component/utils/core';
-import { FocusKeyManager } from '@angular/cdk/a11y';
-import * as i1 from '@ojiepermana/angular/component/utils/scale';
-import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
-import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { merge } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { connectedPositionFor, oppositeSide } from '@ojiepermana/angular/component/utils/overlay';
-
-const MENU_OVERLAY = new InjectionToken('MenuOverlayController');
-/**
- * Marker every `MenuTrigger` provides on its own element.
- *
- * A submenu is a menu item that also opens a menu. Choosing it must open the
- * submenu, not close the menu it lives in, so an item that finds this marker on
- * itself skips the close-after-select step.
- */
-const MENU_SUBMENU_TRIGGER = new InjectionToken('MenuSubmenuTrigger');
-
-class MenuFocusableItem {
-    el = inject(ElementRef);
-    /** Present whenever the item is rendered inside a `MenuTrigger` overlay. */
-    overlay = inject(MENU_OVERLAY, { optional: true });
-    /** True when this same element also opens a submenu. */
-    opensSubmenu = inject(MENU_SUBMENU_TRIGGER, { optional: true, self: true }) ?? false;
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
-    inset = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    variant = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    selected = output();
-    get disabled() {
-        return this.disabledInput();
-    }
-    focus() {
-        this.el.nativeElement.focus();
-    }
-    getLabel() {
-        return this.el.nativeElement.textContent?.trim() ?? '';
-    }
-    buildItemClasses(extraClass = '') {
-        return cn('relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none', 'transition-colors focus:bg-accent focus:text-accent-foreground', 'aria-disabled:pointer-events-none aria-disabled:opacity-50', 'data-[inset=true]:pl-8', 'data-[variant=destructive]:text-destructive', 'data-[variant=destructive]:focus:bg-destructive/10', 'data-[variant=destructive]:focus:text-destructive', extraClass, this.class());
-    }
-    /**
-     * Consume the keystroke that activated the item.
-     *
-     * Items render on `button` hosts, and a button turns Enter and Space into an
-     * activation click of its own. With `(click)` and `(keydown.enter|space)` both
-     * wired to the same handler that click runs the handler a SECOND time: a
-     * checkbox toggled on keydown flipped straight back, so `aria-checked` never
-     * moved, and a plain item emitted `selected` twice whenever the menu was told
-     * not to close. Preventing the default suppresses the synthesised click, which
-     * leaves exactly one activation per keystroke on native and non-native hosts
-     * alike. It also stops Space from scrolling the page behind the menu.
-     */
-    emitSelection(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            return false;
-        }
-        if (event.type === 'keydown') {
-            event.preventDefault();
-        }
-        this.selected.emit(event);
-        return true;
-    }
-    /**
-     * Close the menu and return focus to the trigger, which is the menu pattern.
-     *
-     * Call this AFTER the item has updated its own state: closing tears down the
-     * overlay view, and a checkbox or radio that wrote its model afterwards would
-     * never propagate the change. A consumer that already closes the menu by hand
-     * is fine, closing twice is a no-op.
-     */
-    finishSelection() {
-        if (this.opensSubmenu) {
-            return;
-        }
-        this.overlay?.closeAfterSelect();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuFocusableItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: MenuFocusableItem, isStandalone: true, inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuFocusableItem, decorators: [{
-            type: Directive
-        }], propDecorators: { disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
-class MenuGroupComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: MenuGroupComponent, isStandalone: true, selector: "MenuGroup", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'MenuGroup',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"group"',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class MenuRadioGroupBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuRadioGroupBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: MenuRadioGroupBase, isStandalone: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuRadioGroupBase, decorators: [{
-            type: Directive
-        }] });
-class MenuRadioGroupComponent extends MenuRadioGroupBase {
-    value = model(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    isChecked(value) {
-        return this.value() === value;
-    }
-    select(value) {
-        this.value.set(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: MenuRadioGroupComponent, isStandalone: true, selector: "MenuRadioGroup", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.role": "\"group\"" } }, providers: [
-            { provide: MenuRadioGroupBase, useExisting: forwardRef(() => MenuRadioGroupComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuRadioGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'MenuRadioGroup',
-                    providers: [
-                        { provide: MenuRadioGroupBase, useExisting: forwardRef(() => MenuRadioGroupComponent) },
-                    ],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"group"',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class MenuItemComponent extends MenuFocusableItem {
-    classes = computed(() => this.buildItemClasses(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    handleClick(e) {
-        if (!this.emitSelection(e)) {
-            return;
-        }
-        this.finishSelection();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: MenuItemComponent, isStandalone: true, selector: "MenuItem, button[MenuItem]", host: { attributes: { "tabindex": "-1" }, listeners: { "click": "handleClick($any($event))", "keydown.enter": "handleClick($any($event))", "keydown.space": "handleClick($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitem\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.data-inset": "inset() ? \"true\" : null", "attr.data-variant": "variant()" } }, providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuItemComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'MenuItem, button[MenuItem]',
-                    providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuItemComponent) }],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"menuitem"',
-                        tabindex: '-1',
-                        '[attr.aria-disabled]': 'disabled ? "true" : null',
-                        '[attr.data-inset]': 'inset() ? "true" : null',
-                        '[attr.data-variant]': 'variant()',
-                        '(click)': 'handleClick($any($event))',
-                        '(keydown.enter)': 'handleClick($any($event))',
-                        '(keydown.space)': 'handleClick($any($event))',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }] });
-class MenuCheckboxItemComponent extends MenuFocusableItem {
-    checked = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    classes = computed(() => this.buildItemClasses('pl-8'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    // A checkbox item does NOT close the menu, unlike a plain item or a radio.
-    //
-    // Ticking boxes is a repeated action by nature -- a column picker, a filter
-    // list -- and closing after each one turned "hide three columns" into three
-    // trips through the trigger. Radio stays as it is: choosing one of several
-    // genuinely ends the interaction, so closing there is right.
-    //
-    // Escape, Tab, a click outside, or picking a plain item all still close it, so
-    // there is no way to get stuck in an open menu.
-    toggle(event) {
-        if (!this.emitSelection(event)) {
-            return;
-        }
-        this.checked.set(!this.checked());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuCheckboxItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MenuCheckboxItemComponent, isStandalone: true, selector: "MenuCheckboxItem, button[MenuCheckboxItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "toggle($any($event))", "keydown.enter": "toggle($any($event))", "keydown.space": "toggle($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitemcheckbox\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-variant": "variant()" } }, providers: [
-            { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuCheckboxItemComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Directive, ElementRef, InjectionToken, Injector, TemplateRef, ViewContainerRef, computed, contentChildren, forwardRef, inject, input, model, output, signal } from "@angular/core";
+import { cn, injectUniqueId } from "@ojiepermana/angular/component/utils/core";
+import { FocusKeyManager } from "@angular/cdk/a11y";
+import * as i1 from "@ojiepermana/angular/component/utils/scale";
+import { ComponentScaleDirective } from "@ojiepermana/angular/component/utils/scale";
+import { Overlay } from "@angular/cdk/overlay";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { merge } from "rxjs";
+import { filter } from "rxjs/operators";
+import { connectedPositionFor, oppositeSide } from "@ojiepermana/angular/component/utils/overlay";
+const MENU_OVERLAY = new InjectionToken("MenuOverlayController");
+const MENU_SUBMENU_TRIGGER = new InjectionToken("MenuSubmenuTrigger");
+var MenuFocusableItem = class MenuFocusableItem {
+	el = inject(ElementRef);
+	overlay = inject(MENU_OVERLAY, { optional: true });
+	opensSubmenu = inject(MENU_SUBMENU_TRIGGER, {
+		optional: true,
+		self: true
+	}) ?? false;
+	disabledInput = input(false, {
+		...ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {},
+		alias: "disabled"
+	});
+	inset = input(false, ...ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	selected = output();
+	get disabled() {
+		return this.disabledInput();
+	}
+	focus() {
+		this.el.nativeElement.focus();
+	}
+	getLabel() {
+		return this.el.nativeElement.textContent?.trim() ?? "";
+	}
+	buildItemClasses(extraClass = "") {
+		return cn("relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none", "transition-colors focus:bg-accent focus:text-accent-foreground", "aria-disabled:pointer-events-none aria-disabled:opacity-50", "data-[inset=true]:pl-8", "data-[variant=destructive]:text-destructive", "data-[variant=destructive]:focus:bg-destructive/10", "data-[variant=destructive]:focus:text-destructive", extraClass, this.class());
+	}
+	emitSelection(event) {
+		if (this.disabled) {
+			event.preventDefault();
+			return false;
+		}
+		if (event.type === "keydown") event.preventDefault();
+		this.selected.emit(event);
+		return true;
+	}
+	finishSelection() {
+		if (this.opensSubmenu) return;
+		this.overlay?.closeAfterSelect();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuFocusableItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: MenuFocusableItem,
+		isStandalone: true,
+		inputs: {
+			disabledInput: {
+				classPropertyName: "disabledInput",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { selected: "selected" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuFocusableItem,
+	decorators: [{ type: Directive }],
+	propDecorators: {
+		disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Output,
+			args: ["selected"]
+		}]
+	}
+});
+var MenuGroupComponent = class MenuGroupComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("block", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuGroupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: MenuGroupComponent,
+		isStandalone: true,
+		selector: "MenuGroup",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.role": "\"group\""
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "MenuGroup",
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"group\""
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var MenuRadioGroupBase = class MenuRadioGroupBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuRadioGroupBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: MenuRadioGroupBase,
+		isStandalone: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuRadioGroupBase,
+	decorators: [{ type: Directive }]
+});
+var MenuRadioGroupComponent = class MenuRadioGroupComponent extends MenuRadioGroupBase {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("block", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	isChecked(value) {
+		return this.value() === value;
+	}
+	select(value) {
+		this.value.set(value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuRadioGroupComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: MenuRadioGroupComponent,
+		isStandalone: true,
+		selector: "MenuRadioGroup",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { properties: {
+			"class": "classes()",
+			"attr.role": "\"group\""
+		} },
+		providers: [{
+			provide: MenuRadioGroupBase,
+			useExisting: forwardRef(() => MenuRadioGroupComponent)
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuRadioGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "MenuRadioGroup",
+			providers: [{
+				provide: MenuRadioGroupBase,
+				useExisting: forwardRef(() => MenuRadioGroupComponent)
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"group\""
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var MenuItemComponent = class MenuItemComponent extends MenuFocusableItem {
+	classes = computed(() => this.buildItemClasses(), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	handleClick(e) {
+		if (!this.emitSelection(e)) return;
+		this.finishSelection();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuItemComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: MenuItemComponent,
+		isStandalone: true,
+		selector: "MenuItem, button[MenuItem]",
+		host: {
+			attributes: { "tabindex": "-1" },
+			listeners: {
+				"click": "handleClick($any($event))",
+				"keydown.enter": "handleClick($any($event))",
+				"keydown.space": "handleClick($any($event))"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.role": "\"menuitem\"",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-inset": "inset() ? \"true\" : null",
+				"attr.data-variant": "variant()"
+			}
+		},
+		providers: [{
+			provide: MenuFocusableItem,
+			useExisting: forwardRef(() => MenuItemComponent)
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "MenuItem, button[MenuItem]",
+			providers: [{
+				provide: MenuFocusableItem,
+				useExisting: forwardRef(() => MenuItemComponent)
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"menuitem\"",
+				tabindex: "-1",
+				"[attr.aria-disabled]": "disabled ? \"true\" : null",
+				"[attr.data-inset]": "inset() ? \"true\" : null",
+				"[attr.data-variant]": "variant()",
+				"(click)": "handleClick($any($event))",
+				"(keydown.enter)": "handleClick($any($event))",
+				"(keydown.space)": "handleClick($any($event))"
+			},
+			template: `<ng-content />`
+		}]
+	}]
+});
+var MenuCheckboxItemComponent = class MenuCheckboxItemComponent extends MenuFocusableItem {
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	classes = computed(() => this.buildItemClasses("pl-8"), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	toggle(event) {
+		if (!this.emitSelection(event)) return;
+		this.checked.set(!this.checked());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuCheckboxItemComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: MenuCheckboxItemComponent,
+		isStandalone: true,
+		selector: "MenuCheckboxItem, button[MenuCheckboxItem]",
+		inputs: { checked: {
+			classPropertyName: "checked",
+			publicName: "checked",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { checked: "checkedChange" },
+		host: {
+			attributes: { "tabindex": "-1" },
+			listeners: {
+				"click": "toggle($any($event))",
+				"keydown.enter": "toggle($any($event))",
+				"keydown.space": "toggle($any($event))"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.role": "\"menuitemcheckbox\"",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.aria-checked": "checked()",
+				"attr.data-state": "checked() ? \"checked\" : \"unchecked\"",
+				"attr.data-variant": "variant()"
+			}
+		},
+		providers: [{
+			provide: MenuFocusableItem,
+			useExisting: forwardRef(() => MenuCheckboxItemComponent)
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       @if (checked()) {
         <svg
@@ -220,28 +465,36 @@ class MenuCheckboxItemComponent extends MenuFocusableItem {
       }
     </span>
     <ng-content />
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuCheckboxItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'MenuCheckboxItem, button[MenuCheckboxItem]',
-                    providers: [
-                        { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuCheckboxItemComponent) },
-                    ],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"menuitemcheckbox"',
-                        tabindex: '-1',
-                        '[attr.aria-disabled]': 'disabled ? "true" : null',
-                        '[attr.aria-checked]': 'checked()',
-                        '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
-                        '[attr.data-variant]': 'variant()',
-                        '(click)': 'toggle($any($event))',
-                        '(keydown.enter)': 'toggle($any($event))',
-                        '(keydown.space)': 'toggle($any($event))',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuCheckboxItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "MenuCheckboxItem, button[MenuCheckboxItem]",
+			providers: [{
+				provide: MenuFocusableItem,
+				useExisting: forwardRef(() => MenuCheckboxItemComponent)
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"menuitemcheckbox\"",
+				tabindex: "-1",
+				"[attr.aria-disabled]": "disabled ? \"true\" : null",
+				"[attr.aria-checked]": "checked()",
+				"[attr.data-state]": "checked() ? \"checked\" : \"unchecked\"",
+				"[attr.data-variant]": "variant()",
+				"(click)": "toggle($any($event))",
+				"(keydown.enter)": "toggle($any($event))",
+				"(keydown.space)": "toggle($any($event))"
+			},
+			template: `
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       @if (checked()) {
         <svg
@@ -259,435 +512,748 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
       }
     </span>
     <ng-content />
-  `,
-                }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
-class MenuRadioItemComponent extends MenuFocusableItem {
-    group = inject(MenuRadioGroupBase);
-    value = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    checked = computed(() => this.group.isChecked(this.value()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    classes = computed(() => this.buildItemClasses('pl-8'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    select(event) {
-        if (!this.emitSelection(event)) {
-            return;
-        }
-        this.group.select(this.value());
-        this.finishSelection();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuRadioItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MenuRadioItemComponent, isStandalone: true, selector: "MenuRadioItem, button[MenuRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "select($any($event))", "keydown.enter": "select($any($event))", "keydown.space": "select($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitemradio\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-variant": "variant()" } }, providers: [
-            { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuRadioItemComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `
+  `
+		}]
+	}],
+	propDecorators: { checked: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "checked",
+			required: false
+		}]
+	}, {
+		type: i0.Output,
+		args: ["checkedChange"]
+	}] }
+});
+var MenuRadioItemComponent = class MenuRadioItemComponent extends MenuFocusableItem {
+	group = inject(MenuRadioGroupBase);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	checked = computed(() => this.group.isChecked(this.value()), ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	classes = computed(() => this.buildItemClasses("pl-8"), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	select(event) {
+		if (!this.emitSelection(event)) return;
+		this.group.select(this.value());
+		this.finishSelection();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuRadioItemComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: MenuRadioItemComponent,
+		isStandalone: true,
+		selector: "MenuRadioItem, button[MenuRadioItem]",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "tabindex": "-1" },
+			listeners: {
+				"click": "select($any($event))",
+				"keydown.enter": "select($any($event))",
+				"keydown.space": "select($any($event))"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.role": "\"menuitemradio\"",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.aria-checked": "checked()",
+				"attr.data-state": "checked() ? \"checked\" : \"unchecked\"",
+				"attr.data-variant": "variant()"
+			}
+		},
+		providers: [{
+			provide: MenuFocusableItem,
+			useExisting: forwardRef(() => MenuRadioItemComponent)
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       @if (checked()) {
         <span aria-hidden="true" class="h-2 w-2 rounded-full bg-current"></span>
       }
     </span>
     <ng-content />
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuRadioItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'MenuRadioItem, button[MenuRadioItem]',
-                    providers: [
-                        { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuRadioItemComponent) },
-                    ],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"menuitemradio"',
-                        tabindex: '-1',
-                        '[attr.aria-disabled]': 'disabled ? "true" : null',
-                        '[attr.aria-checked]': 'checked()',
-                        '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
-                        '[attr.data-variant]': 'variant()',
-                        '(click)': 'select($any($event))',
-                        '(keydown.enter)': 'select($any($event))',
-                        '(keydown.space)': 'select($any($event))',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuRadioItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "MenuRadioItem, button[MenuRadioItem]",
+			providers: [{
+				provide: MenuFocusableItem,
+				useExisting: forwardRef(() => MenuRadioItemComponent)
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"menuitemradio\"",
+				tabindex: "-1",
+				"[attr.aria-disabled]": "disabled ? \"true\" : null",
+				"[attr.aria-checked]": "checked()",
+				"[attr.data-state]": "checked() ? \"checked\" : \"unchecked\"",
+				"[attr.data-variant]": "variant()",
+				"(click)": "select($any($event))",
+				"(keydown.enter)": "select($any($event))",
+				"(keydown.space)": "select($any($event))"
+			},
+			template: `
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       @if (checked()) {
         <span aria-hidden="true" class="h-2 w-2 rounded-full bg-current"></span>
       }
     </span>
     <ng-content />
-  `,
-                }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
-class MenuSeparatorComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('-mx-1 my-1 block h-px bg-border', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: MenuSeparatorComponent, isStandalone: true, selector: "MenuSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"separator\"", "attr.aria-orientation": "\"horizontal\"" } }, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'MenuSeparator',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"separator"',
-                        '[attr.aria-orientation]': '"horizontal"',
-                    },
-                    template: '',
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class MenuLabelComponent {
-    inset = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('px-2 py-1.5 text-sm font-semibold text-foreground', this.inset() ? 'pl-8' : '', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: MenuLabelComponent, isStandalone: true, selector: "MenuLabel", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuLabelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'MenuLabel',
-                    host: { '[class]': 'classes()' },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class MenuShortcutComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: MenuShortcutComponent, isStandalone: true, selector: "MenuShortcut, span[MenuShortcut]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuShortcutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'MenuShortcut, span[MenuShortcut]',
-                    host: { '[class]': 'classes()' },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Surface rendered inside the overlay. Hosts keyboard navigation for its items.
- */
-class MenuSurfaceComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    items = contentChildren(MenuFocusableItem, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
-    /** Present whenever the surface is rendered by a `MenuTrigger`. */
-    overlay = inject(MENU_OVERLAY, { optional: true });
-    /**
-     * Emitted when the surface asks to be closed (today: on Tab). The trigger now
-     * closes itself, so consumers no longer have to wire this up; it stays for
-     * anyone who already listens to it.
-     */
-    closeRequested = output();
-    /** Tied to the trigger's `aria-controls`, so the pair references each other. */
-    surfaceId = this.overlay?.surfaceId ?? injectUniqueId('MenuSurface');
-    /** Names the menu after the control that opened it. */
-    labelledBy = this.overlay?.triggerId ?? null;
-    keyManager = new FocusKeyManager(this.items, inject(Injector))
-        .withWrap()
-        .withTypeAhead()
-        .skipPredicate((item) => item.disabled);
-    classes = computed(() => cn('z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    ngAfterContentInit() {
-        // Focus the first enabled item when the menu opens.
-        queueMicrotask(() => this.keyManager.setFirstItemActive());
-    }
-    onArrow(e, delta) {
-        e.preventDefault();
-        this.keyManager.cancelTypeahead();
-        if (delta > 0) {
-            this.keyManager.setNextItemActive();
-        }
-        else {
-            this.keyManager.setPreviousItemActive();
-        }
-    }
-    // ArrowLeft closes a SUBMENU and hands focus back to the item that opened it,
-    // which is the menu pattern.
-    //
-    // A root menu leaves the key alone. The row of menus above it owns left and
-    // right there: a `Menubar` listens for them on its own overlay to walk to the
-    // neighbouring menu, and it only ever sees the key because this surface let it
-    // carry on bubbling.
-    onArrowLeft(e) {
-        if (!this.overlay?.isSubmenu) {
-            return;
-        }
-        e.preventDefault();
-        this.overlay.close();
-    }
-    onHome(e) {
-        e.preventDefault();
-        this.keyManager.cancelTypeahead();
-        this.keyManager.setFirstItemActive();
-    }
-    onEnd(e) {
-        e.preventDefault();
-        this.keyManager.cancelTypeahead();
-        this.keyManager.setLastItemActive();
-    }
-    // Routes printable characters into the key manager's type-ahead buffer, which
-    // is the only thing that fills it: `withTypeAhead()` above configures the
-    // buffer, but nothing reaches it unless `onKeydown` is called.
-    //
-    // Only printable characters are forwarded, and Space is not one of them here.
-    // Every other key already has an owner -- the arrows and Home/End above, Enter
-    // and Space on the item, Tab on the trigger -- and handing those to the key
-    // manager as well would run two handlers for one keystroke.
-    //
-    // Space belongs to the item unconditionally. Letting it extend a search in
-    // progress, so that a two-word label could be matched past its first word,
-    // would mean intercepting the key BEFORE the focused item acts on it: this
-    // listener runs on the bubbling phase, by which point `(keydown.space)` on the
-    // item has already activated it and closed the menu. Reaching it would take a
-    // capture-phase listener that swallows Space, which is a lot of machinery, and
-    // a way to activate an item that stops working mid-search, for a matching
-    // nicety the menu contract never asked for.
-    onTypeAhead(e) {
-        if (e.key.length !== 1 || e.key === ' ' || e.ctrlKey || e.metaKey || e.altKey) {
-            return;
-        }
-        this.keyManager.onKeydown(e);
-    }
-    onTab(e) {
-        // No preventDefault: the menu closes, focus goes back to the trigger, and
-        // the browser carries on with the tab sequence from there.
-        void e;
-        this.closeRequested.emit();
-        this.overlay?.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuSurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: MenuSurfaceComponent, isStandalone: true, selector: "MenuSurface", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.arrowLeft": "onArrowLeft($any($event))", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))", "keydown.tab": "onTab($any($event))", "keydown": "onTypeAhead($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menu\"", "attr.id": "surfaceId", "attr.aria-labelledby": "labelledBy" } }, queries: [{ propertyName: "items", predicate: MenuFocusableItem, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuSurfaceComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'MenuSurface',
-                    hostDirectives: [
-                        {
-                            directive: ComponentScaleDirective,
-                            inputs: ['radius', 'density'],
-                        },
-                    ],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"menu"',
-                        '[attr.id]': 'surfaceId',
-                        '[attr.aria-labelledby]': 'labelledBy',
-                        tabindex: '-1',
-                        '(keydown.arrowDown)': 'onArrow($any($event), 1)',
-                        '(keydown.arrowUp)': 'onArrow($any($event), -1)',
-                        '(keydown.arrowLeft)': 'onArrowLeft($any($event))',
-                        '(keydown.home)': 'onHome($any($event))',
-                        '(keydown.end)': 'onEnd($any($event))',
-                        '(keydown.tab)': 'onTab($any($event))',
-                        '(keydown)': 'onTypeAhead($any($event))',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MenuFocusableItem), { ...{ descendants: true }, isSignal: true }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
-/**
- * Wraps an `<ng-template>` that holds `<MenuSurface>` + items.
- */
-class MenuContentDirective {
-    componentScale = inject(ComponentScaleDirective);
-    radius = this.componentScale.radius;
-    density = this.componentScale.density;
-    template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: MenuContentDirective, isStandalone: true, selector: "ng-template[MenuContent]", exportAs: ["MenuContent"], hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[MenuContent]',
-                    exportAs: 'MenuContent',
-                    hostDirectives: [
-                        {
-                            directive: ComponentScaleDirective,
-                            inputs: ['radius', 'density'],
-                        },
-                    ],
-                }]
-        }] });
-
-/**
- * Zero, because the gap between a trigger and its menu is NOT a position offset.
- *
- * CDK applies `offsetX`/`offsetY` as a `transform` on the pane, and it does so
- * AFTER clamping the pane to the viewport -- so an offset pushes the panel back
- * off screen by exactly its own size, which is how the panel's top edge ended up
- * at minus four on a phone. The gap is transparent padding on the pane instead
- * (`.menu-panel` in the theme's global layer): padding is part of the box CDK
- * measures, so the clamp accounts for it.
- */
+  `
+		}]
+	}],
+	propDecorators: { value: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "value",
+			required: true
+		}]
+	}] }
+});
+var MenuSeparatorComponent = class MenuSeparatorComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("-mx-1 my-1 block h-px bg-border", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuSeparatorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: MenuSeparatorComponent,
+		isStandalone: true,
+		selector: "MenuSeparator",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.role": "\"separator\"",
+			"attr.aria-orientation": "\"horizontal\""
+		} },
+		ngImport: i0,
+		template: "",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuSeparatorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "MenuSeparator",
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"separator\"",
+				"[attr.aria-orientation]": "\"horizontal\""
+			},
+			template: ""
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var MenuLabelComponent = class MenuLabelComponent {
+	inset = input(false, ...ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("px-2 py-1.5 text-sm font-semibold text-foreground", this.inset() ? "pl-8" : "", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuLabelComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: MenuLabelComponent,
+		isStandalone: true,
+		selector: "MenuLabel",
+		inputs: {
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuLabelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "MenuLabel",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var MenuShortcutComponent = class MenuShortcutComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("ml-auto text-xs tracking-widest text-muted-foreground", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuShortcutComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: MenuShortcutComponent,
+		isStandalone: true,
+		selector: "MenuShortcut, span[MenuShortcut]",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuShortcutComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "MenuShortcut, span[MenuShortcut]",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var MenuSurfaceComponent = class MenuSurfaceComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	items = contentChildren(MenuFocusableItem, {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	overlay = inject(MENU_OVERLAY, { optional: true });
+	closeRequested = output();
+	surfaceId = this.overlay?.surfaceId ?? injectUniqueId("MenuSurface");
+	labelledBy = this.overlay?.triggerId ?? null;
+	keyManager = new FocusKeyManager(this.items, inject(Injector)).withWrap().withTypeAhead().skipPredicate((item) => item.disabled);
+	classes = computed(() => cn("z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	ngAfterContentInit() {
+		queueMicrotask(() => this.keyManager.setFirstItemActive());
+	}
+	onArrow(e, delta) {
+		e.preventDefault();
+		this.keyManager.cancelTypeahead();
+		if (delta > 0) this.keyManager.setNextItemActive();
+		else this.keyManager.setPreviousItemActive();
+	}
+	onArrowLeft(e) {
+		if (!this.overlay?.isSubmenu) return;
+		e.preventDefault();
+		this.overlay.close();
+	}
+	onHome(e) {
+		e.preventDefault();
+		this.keyManager.cancelTypeahead();
+		this.keyManager.setFirstItemActive();
+	}
+	onEnd(e) {
+		e.preventDefault();
+		this.keyManager.cancelTypeahead();
+		this.keyManager.setLastItemActive();
+	}
+	onTypeAhead(e) {
+		if (e.key.length !== 1 || e.key === " " || e.ctrlKey || e.metaKey || e.altKey) return;
+		this.keyManager.onKeydown(e);
+	}
+	onTab(e) {
+		this.closeRequested.emit();
+		this.overlay?.close();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuSurfaceComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: MenuSurfaceComponent,
+		isStandalone: true,
+		selector: "MenuSurface",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { closeRequested: "closeRequested" },
+		host: {
+			attributes: { "tabindex": "-1" },
+			listeners: {
+				"keydown.arrowDown": "onArrow($any($event), 1)",
+				"keydown.arrowUp": "onArrow($any($event), -1)",
+				"keydown.arrowLeft": "onArrowLeft($any($event))",
+				"keydown.home": "onHome($any($event))",
+				"keydown.end": "onEnd($any($event))",
+				"keydown.tab": "onTab($any($event))",
+				"keydown": "onTypeAhead($any($event))"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.role": "\"menu\"",
+				"attr.id": "surfaceId",
+				"attr.aria-labelledby": "labelledBy"
+			}
+		},
+		queries: [{
+			propertyName: "items",
+			predicate: MenuFocusableItem,
+			descendants: true,
+			isSignal: true
+		}],
+		hostDirectives: [{
+			directive: i1.ComponentScaleDirective,
+			inputs: [
+				"radius",
+				"radius",
+				"density",
+				"density"
+			]
+		}],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuSurfaceComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "MenuSurface",
+			hostDirectives: [{
+				directive: ComponentScaleDirective,
+				inputs: ["radius", "density"]
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"menu\"",
+				"[attr.id]": "surfaceId",
+				"[attr.aria-labelledby]": "labelledBy",
+				tabindex: "-1",
+				"(keydown.arrowDown)": "onArrow($any($event), 1)",
+				"(keydown.arrowUp)": "onArrow($any($event), -1)",
+				"(keydown.arrowLeft)": "onArrowLeft($any($event))",
+				"(keydown.home)": "onHome($any($event))",
+				"(keydown.end)": "onEnd($any($event))",
+				"(keydown.tab)": "onTab($any($event))",
+				"(keydown)": "onTypeAhead($any($event))"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => MenuFocusableItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}],
+		closeRequested: [{
+			type: i0.Output,
+			args: ["closeRequested"]
+		}]
+	}
+});
+var MenuContentDirective = class MenuContentDirective {
+	componentScale = inject(ComponentScaleDirective);
+	radius = this.componentScale.radius;
+	density = this.componentScale.density;
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: MenuContentDirective,
+		isStandalone: true,
+		selector: "ng-template[MenuContent]",
+		exportAs: ["MenuContent"],
+		hostDirectives: [{
+			directive: i1.ComponentScaleDirective,
+			inputs: [
+				"radius",
+				"radius",
+				"density",
+				"density"
+			]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[MenuContent]",
+			exportAs: "MenuContent",
+			hostDirectives: [{
+				directive: ComponentScaleDirective,
+				inputs: ["radius", "density"]
+			}]
+		}]
+	}]
+});
 const MENU_SIDE_OFFSET = 0;
-/**
- * Opens an `<ng-template MenuContent>` anchored to the trigger element.
- */
-class MenuTriggerDirective {
-    overlay = inject(Overlay);
-    vcr = inject(ViewContainerRef);
-    el = inject(ElementRef);
-    destroyRef = inject(DestroyRef);
-    injector = inject(Injector);
-    /**
-     * The controller of the menu this trigger lives in, if any. Present only when
-     * the trigger is itself an item of another menu, which is exactly what makes
-     * the menu it opens a submenu.
-     */
-    parentMenu = inject(MENU_OVERLAY, { optional: true });
-    MenuTrigger = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "MenuTrigger" }] : /* istanbul ignore next */ []));
-    side = input('bottom', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-    align = input('start', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /**
-     * Close the menu when an item is chosen, which is the WAI ARIA menu pattern
-     * and the default here. Set it to `false` for a menu that stays open, for
-     * example a list of checkbox items the user toggles several of in a row.
-     */
-    closeOnSelect = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
-    /**
-     * Id used for `aria-controls` and for the surface's `aria-labelledby`. A
-     * consumer's own `id` on the trigger element always wins.
-     */
-    triggerId = this.el.nativeElement.id || injectUniqueId('MenuTrigger');
-    surfaceId = injectUniqueId('MenuSurface');
-    openedChange = output();
-    overlayRef = null;
-    isOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.destroyRef.onDestroy(() => this.close({ restoreFocus: false }));
-    }
-    toggle() {
-        if (this.disabled())
-            return;
-        if (this.isOpen()) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    openAndFocus(e) {
-        if (this.disabled())
-            return;
-        e.preventDefault();
-        this.open();
-    }
-    openForSide(e, side) {
-        if (this.disabled() || this.side() !== side)
-            return;
-        e.preventDefault();
-        this.open();
-    }
-    open() {
-        if (this.isOpen() || this.disabled())
-            return;
-        const primary = connectedPositionFor(this.side(), this.align(), MENU_SIDE_OFFSET);
-        const fallbackSide = this.side() === 'top' || this.side() === 'bottom' ? oppositeSide(this.side()) : this.side();
-        const fallback = connectedPositionFor(fallbackSide, this.align(), MENU_SIDE_OFFSET);
-        this.overlayRef = this.overlay.create({
-            positionStrategy: this.overlay
-                .position()
-                .flexibleConnectedTo(this.el)
-                .withPositions([primary, fallback]),
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            hasBackdrop: false,
-            panelClass: 'menu-panel',
-        });
-        const controller = {
-            surfaceId: this.surfaceId,
-            triggerId: this.triggerId,
-            isSubmenu: this.parentMenu !== null,
-            close: () => this.close(),
-            closeAfterSelect: () => {
-                if (this.closeOnSelect())
-                    this.close();
-            },
-        };
-        const portal = new TemplatePortal(this.MenuTrigger().template, this.vcr, undefined, Injector.create({
-            parent: this.injector,
-            providers: [{ provide: MENU_OVERLAY, useValue: controller }],
-        }));
-        this.overlayRef.attach(portal);
-        merge(this.overlayRef
-            .outsidePointerEvents()
-            .pipe(filter((e) => !this.el.nativeElement.contains(e.target))), this.overlayRef.detachments())
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.close({ restoreFocus: false }));
-        this.overlayRef
-            .keydownEvents()
-            .pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e.key === 'Escape'))
-            .subscribe(() => this.close());
-        // Tab closes the menu and hands focus back to the trigger WITHOUT preventing
-        // the default, so the browser then continues the tab sequence from the
-        // trigger. That is what the menu pattern asks for: Tab leaves the menu and
-        // lands wherever normal tab order says, rather than being swallowed.
-        this.overlayRef
-            .keydownEvents()
-            .pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e.key === 'Tab'))
-            .subscribe(() => this.close());
-        this.isOpen.set(true);
-        this.openedChange.emit(true);
-    }
-    close(options = {}) {
-        const { restoreFocus = true } = options;
-        if (!this.isOpen())
-            return;
-        const overlayRef = this.overlayRef;
-        this.overlayRef = null;
-        this.isOpen.set(false);
-        overlayRef?.dispose();
-        if (!this.destroyRef.destroyed) {
-            this.openedChange.emit(false);
-        }
-        if (restoreFocus) {
-            this.el.nativeElement.focus();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: MenuTriggerDirective, isStandalone: true, selector: "[MenuTrigger]", inputs: { MenuTrigger: { classPropertyName: "MenuTrigger", publicName: "MenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "openAndFocus($any($event))", "keydown.space": "openAndFocus($any($event))", "keydown.arrowDown": "openAndFocus($any($event))", "keydown.arrowRight": "openForSide($any($event), \"right\")", "keydown.arrowLeft": "openForSide($any($event), \"left\")" }, properties: { "attr.id": "triggerId", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? surfaceId : null" } }, providers: [{ provide: MENU_SUBMENU_TRIGGER, useValue: true }], exportAs: ["MenuTrigger"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[MenuTrigger]',
-                    exportAs: 'MenuTrigger',
-                    providers: [{ provide: MENU_SUBMENU_TRIGGER, useValue: true }],
-                    host: {
-                        '[attr.id]': 'triggerId',
-                        '[attr.aria-haspopup]': '"menu"',
-                        '[attr.aria-expanded]': 'isOpen()',
-                        '[attr.aria-controls]': 'isOpen() ? surfaceId : null',
-                        '(click)': 'toggle()',
-                        '(keydown.enter)': 'openAndFocus($any($event))',
-                        '(keydown.space)': 'openAndFocus($any($event))',
-                        '(keydown.arrowDown)': 'openAndFocus($any($event))',
-                        '(keydown.arrowRight)': 'openForSide($any($event), "right")',
-                        '(keydown.arrowLeft)': 'openForSide($any($event), "left")',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { MenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "MenuTrigger", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { MENU_OVERLAY, MENU_SUBMENU_TRIGGER, MenuCheckboxItemComponent, MenuContentDirective, MenuFocusableItem, MenuGroupComponent, MenuItemComponent, MenuLabelComponent, MenuRadioGroupBase, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective };
+var MenuTriggerDirective = class MenuTriggerDirective {
+	overlay = inject(Overlay);
+	vcr = inject(ViewContainerRef);
+	el = inject(ElementRef);
+	destroyRef = inject(DestroyRef);
+	injector = inject(Injector);
+	parentMenu = inject(MENU_OVERLAY, { optional: true });
+	MenuTrigger = input.required(...ngDevMode ? [{ debugName: "MenuTrigger" }] : /* istanbul ignore next */ []);
+	side = input("bottom", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	closeOnSelect = input(true, ...ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []);
+	triggerId = this.el.nativeElement.id || injectUniqueId("MenuTrigger");
+	surfaceId = injectUniqueId("MenuSurface");
+	openedChange = output();
+	overlayRef = null;
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.destroyRef.onDestroy(() => this.close({ restoreFocus: false }));
+	}
+	toggle() {
+		if (this.disabled()) return;
+		if (this.isOpen()) this.close();
+		else this.open();
+	}
+	openAndFocus(e) {
+		if (this.disabled()) return;
+		e.preventDefault();
+		this.open();
+	}
+	openForSide(e, side) {
+		if (this.disabled() || this.side() !== side) return;
+		e.preventDefault();
+		this.open();
+	}
+	open() {
+		if (this.isOpen() || this.disabled()) return;
+		const primary = connectedPositionFor(this.side(), this.align(), MENU_SIDE_OFFSET);
+		const fallbackSide = this.side() === "top" || this.side() === "bottom" ? oppositeSide(this.side()) : this.side();
+		const fallback = connectedPositionFor(fallbackSide, this.align(), MENU_SIDE_OFFSET);
+		this.overlayRef = this.overlay.create({
+			positionStrategy: this.overlay.position().flexibleConnectedTo(this.el).withPositions([primary, fallback]),
+			scrollStrategy: this.overlay.scrollStrategies.reposition(),
+			hasBackdrop: false,
+			panelClass: "menu-panel"
+		});
+		const controller = {
+			surfaceId: this.surfaceId,
+			triggerId: this.triggerId,
+			isSubmenu: this.parentMenu !== null,
+			close: () => this.close(),
+			closeAfterSelect: () => {
+				if (this.closeOnSelect()) this.close();
+			}
+		};
+		const portal = new TemplatePortal(this.MenuTrigger().template, this.vcr, void 0, Injector.create({
+			parent: this.injector,
+			providers: [{
+				provide: MENU_OVERLAY,
+				useValue: controller
+			}]
+		}));
+		this.overlayRef.attach(portal);
+		merge(this.overlayRef.outsidePointerEvents().pipe(filter((e) => !this.el.nativeElement.contains(e.target))), this.overlayRef.detachments()).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.close({ restoreFocus: false }));
+		this.overlayRef.keydownEvents().pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e.key === "Escape")).subscribe(() => this.close());
+		this.overlayRef.keydownEvents().pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e.key === "Tab")).subscribe(() => this.close());
+		this.isOpen.set(true);
+		this.openedChange.emit(true);
+	}
+	close(options = {}) {
+		const { restoreFocus = true } = options;
+		if (!this.isOpen()) return;
+		const overlayRef = this.overlayRef;
+		this.overlayRef = null;
+		this.isOpen.set(false);
+		overlayRef?.dispose();
+		if (!this.destroyRef.destroyed) this.openedChange.emit(false);
+		if (restoreFocus) this.el.nativeElement.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuTriggerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: MenuTriggerDirective,
+		isStandalone: true,
+		selector: "[MenuTrigger]",
+		inputs: {
+			MenuTrigger: {
+				classPropertyName: "MenuTrigger",
+				publicName: "MenuTrigger",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnSelect: {
+				classPropertyName: "closeOnSelect",
+				publicName: "closeOnSelect",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { openedChange: "openedChange" },
+		host: {
+			listeners: {
+				"click": "toggle()",
+				"keydown.enter": "openAndFocus($any($event))",
+				"keydown.space": "openAndFocus($any($event))",
+				"keydown.arrowDown": "openAndFocus($any($event))",
+				"keydown.arrowRight": "openForSide($any($event), \"right\")",
+				"keydown.arrowLeft": "openForSide($any($event), \"left\")"
+			},
+			properties: {
+				"attr.id": "triggerId",
+				"attr.aria-haspopup": "\"menu\"",
+				"attr.aria-expanded": "isOpen()",
+				"attr.aria-controls": "isOpen() ? surfaceId : null"
+			}
+		},
+		providers: [{
+			provide: MENU_SUBMENU_TRIGGER,
+			useValue: true
+		}],
+		exportAs: ["MenuTrigger"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[MenuTrigger]",
+			exportAs: "MenuTrigger",
+			providers: [{
+				provide: MENU_SUBMENU_TRIGGER,
+				useValue: true
+			}],
+			host: {
+				"[attr.id]": "triggerId",
+				"[attr.aria-haspopup]": "\"menu\"",
+				"[attr.aria-expanded]": "isOpen()",
+				"[attr.aria-controls]": "isOpen() ? surfaceId : null",
+				"(click)": "toggle()",
+				"(keydown.enter)": "openAndFocus($any($event))",
+				"(keydown.space)": "openAndFocus($any($event))",
+				"(keydown.arrowDown)": "openAndFocus($any($event))",
+				"(keydown.arrowRight)": "openForSide($any($event), \"right\")",
+				"(keydown.arrowLeft)": "openForSide($any($event), \"left\")"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		MenuTrigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "MenuTrigger",
+				required: true
+			}]
+		}],
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		closeOnSelect: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnSelect",
+				required: false
+			}]
+		}],
+		openedChange: [{
+			type: i0.Output,
+			args: ["openedChange"]
+		}]
+	}
+});
+export { MENU_OVERLAY, MENU_SUBMENU_TRIGGER, MenuCheckboxItemComponent, MenuContentDirective, MenuFocusableItem, MenuGroupComponent, MenuItemComponent, MenuLabelComponent, MenuRadioGroupBase, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective };