@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-menubar.mjs

@@ -0,0 +1,1523 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, booleanAttribute, computed, contentChildren, effect, forwardRef, inject, input, model, signal, untracked } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UI_MENU_CTX, UI_MENU_ITEM, UI_MENU_SUB, UiElementHost, UiMenuContentBase, UiMenuItemBase, UiMenuRootBase, UiMenuSelectEvent, UiMenuSubBase, UiMenuSubTriggerBase, cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+import { contextMenuCheckboxItemClass, contextMenuLabelClass, contextMenuRadioItemClass } from "@loomui-ng/ui/context-menu";
+const menubarClass = "flex h-8 items-center gap-0.5 rounded-lg border p-[3px]";
+const menubarTriggerClass = "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted";
+const menubarContentClass = "z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95";
+const menubarItemClass = "group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!";
+const menubarSubTriggerClass = "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4";
+const menubarSeparatorClass = "-mx-1 my-1 h-px bg-border";
+const menubarShortcutClass = "ms-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground";
+const UI_MENUBAR_GENERATED = [];
+const ITEM_CLASS = menubarItemClass;
+const SUB_TRIGGER_CLASS = menubarSubTriggerClass;
+const CHECKBOX_CLASS = contextMenuCheckboxItemClass.replace(/context-menu/g, "menubar");
+const RADIO_CLASS = contextMenuRadioItemClass.replace(/context-menu/g, "menubar");
+const LABEL_CLASS = contextMenuLabelClass.replace(/context-menu/g, "menubar");
+const SEPARATOR_CLASS = menubarSeparatorClass;
+const SHORTCUT_CLASS = menubarShortcutClass;
+const CONTENT_CLASS = menubarContentClass;
+var UiMenubarItem = class UiMenubarItem extends UiMenuItemBase {
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => cn(ITEM_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarItem,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiMenubarItem,
+		isStandalone: true,
+		selector: "[uiMenubarItem], ui-menubar-item",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"data-slot": "menubar-item",
+				"role": "menuitem"
+			},
+			listeners: {
+				"focus": "onFocus()",
+				"blur": "onBlur()",
+				"pointermove": "onPointerMove()",
+				"pointerleave": "onPointerLeave()",
+				"click": "activate()"
+			},
+			properties: {
+				"attr.data-disabled": "disabled ? \"\" : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-highlighted": "highlighted() ? \"\" : null",
+				"attr.data-variant": "variant()",
+				"attr.data-inset": "inset() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: UI_MENU_ITEM,
+			useExisting: forwardRef(() => UiMenubarItem)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarItem], ui-menubar-item",
+			hostDirectives: [UiElementHost],
+			providers: [{
+				provide: UI_MENU_ITEM,
+				useExisting: forwardRef(() => UiMenubarItem)
+			}],
+			host: {
+				tabindex: "-1",
+				"[attr.data-disabled]": "disabled ? \"\" : null",
+				"[attr.aria-disabled]": "disabled ? \"true\" : null",
+				"[attr.data-highlighted]": "highlighted() ? \"\" : null",
+				"(focus)": "onFocus()",
+				"(blur)": "onBlur()",
+				"(pointermove)": "onPointerMove()",
+				"(pointerleave)": "onPointerLeave()",
+				"(click)": "activate()",
+				"data-slot": "menubar-item",
+				role: "menuitem",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-inset]": "inset() ? \"\" : null",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}]
+	}
+});
+const CHECK = "<svg uiIcon=\"check\" class=\"size-4\"></svg>";
+var UiMenubarCheckboxItem = class UiMenubarCheckboxItem extends UiMenuItemBase {
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => cn(CHECKBOX_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	beforeSelect() {
+		this.checked.update((v) => !v);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarCheckboxItem,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiMenubarCheckboxItem,
+		isStandalone: true,
+		selector: "[uiMenubarCheckboxItem], ui-menubar-checkbox-item",
+		inputs: {
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { checked: "checkedChange" },
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"data-slot": "menubar-checkbox-item",
+				"role": "menuitemcheckbox"
+			},
+			listeners: {
+				"focus": "onFocus()",
+				"blur": "onBlur()",
+				"pointermove": "onPointerMove()",
+				"pointerleave": "onPointerLeave()",
+				"click": "activate()"
+			},
+			properties: {
+				"attr.data-disabled": "disabled ? \"\" : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-highlighted": "highlighted() ? \"\" : null",
+				"attr.aria-checked": "checked()",
+				"attr.data-state": "checked() ? \"checked\" : \"unchecked\"",
+				"attr.data-inset": "inset() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: UI_MENU_ITEM,
+			useExisting: forwardRef(() => UiMenubarCheckboxItem)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: "\n    <ng-content />\n    <span class=\"pointer-events-none absolute end-2 flex items-center justify-center\" data-slot=\"menubar-checkbox-item-indicator\">\n      @if (checked()) { <svg uiIcon=\"check\" class=\"size-4\"></svg> }\n    </span>\n  ",
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarCheckboxItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiMenubarCheckboxItem], ui-menubar-checkbox-item",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: UI_MENU_ITEM,
+				useExisting: forwardRef(() => UiMenubarCheckboxItem)
+			}],
+			host: {
+				tabindex: "-1",
+				"[attr.data-disabled]": "disabled ? \"\" : null",
+				"[attr.aria-disabled]": "disabled ? \"true\" : null",
+				"[attr.data-highlighted]": "highlighted() ? \"\" : null",
+				"(focus)": "onFocus()",
+				"(blur)": "onBlur()",
+				"(pointermove)": "onPointerMove()",
+				"(pointerleave)": "onPointerLeave()",
+				"(click)": "activate()",
+				"data-slot": "menubar-checkbox-item",
+				role: "menuitemcheckbox",
+				"[attr.aria-checked]": "checked()",
+				"[attr.data-state]": "checked() ? \"checked\" : \"unchecked\"",
+				"[attr.data-inset]": "inset() ? \"\" : null",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    <ng-content />
+    <span class="pointer-events-none absolute end-2 flex items-center justify-center" data-slot="menubar-checkbox-item-indicator">
+      @if (checked()) { ${CHECK} }
+    </span>
+  `
+		}]
+	}],
+	propDecorators: {
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}],
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}]
+	}
+});
+var UiMenubarRadioGroup = class UiMenubarRadioGroup {
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarRadioGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiMenubarRadioGroup,
+		isStandalone: true,
+		selector: "[uiMenubarRadioGroup], ui-menubar-radio-group",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { value: "valueChange" },
+		host: { attributes: {
+			"role": "group",
+			"data-slot": "menubar-radio-group"
+		} },
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarRadioGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarRadioGroup], ui-menubar-radio-group",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "group",
+				"data-slot": "menubar-radio-group"
+			}
+		}]
+	}],
+	propDecorators: { value: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "value",
+			required: false
+		}]
+	}, {
+		type: i0.Output,
+		args: ["valueChange"]
+	}] }
+});
+var UiMenubarRadioItem = class UiMenubarRadioItem extends UiMenuItemBase {
+	group = inject(UiMenubarRadioGroup);
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	checked = computed(() => this.group.value() === this.value(), ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(RADIO_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	beforeSelect() {
+		this.group.value.set(this.value());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarRadioItem,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiMenubarRadioItem,
+		isStandalone: true,
+		selector: "[uiMenubarRadioItem], ui-menubar-radio-item",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"data-slot": "menubar-radio-item",
+				"role": "menuitemradio"
+			},
+			listeners: {
+				"focus": "onFocus()",
+				"blur": "onBlur()",
+				"pointermove": "onPointerMove()",
+				"pointerleave": "onPointerLeave()",
+				"click": "activate()"
+			},
+			properties: {
+				"attr.data-disabled": "disabled ? \"\" : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-highlighted": "highlighted() ? \"\" : null",
+				"attr.aria-checked": "checked()",
+				"attr.data-state": "checked() ? \"checked\" : \"unchecked\"",
+				"attr.data-inset": "inset() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: UI_MENU_ITEM,
+			useExisting: forwardRef(() => UiMenubarRadioItem)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: "\n    <ng-content />\n    <span class=\"pointer-events-none absolute end-2 flex items-center justify-center\" data-slot=\"menubar-radio-item-indicator\">\n      @if (checked()) { <svg uiIcon=\"check\" class=\"size-4\"></svg> }\n    </span>\n  ",
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarRadioItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiMenubarRadioItem], ui-menubar-radio-item",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: UI_MENU_ITEM,
+				useExisting: forwardRef(() => UiMenubarRadioItem)
+			}],
+			host: {
+				tabindex: "-1",
+				"[attr.data-disabled]": "disabled ? \"\" : null",
+				"[attr.aria-disabled]": "disabled ? \"true\" : null",
+				"[attr.data-highlighted]": "highlighted() ? \"\" : null",
+				"(focus)": "onFocus()",
+				"(blur)": "onBlur()",
+				"(pointermove)": "onPointerMove()",
+				"(pointerleave)": "onPointerLeave()",
+				"(click)": "activate()",
+				"data-slot": "menubar-radio-item",
+				role: "menuitemradio",
+				"[attr.aria-checked]": "checked()",
+				"[attr.data-state]": "checked() ? \"checked\" : \"unchecked\"",
+				"[attr.data-inset]": "inset() ? \"\" : null",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    <ng-content />
+    <span class="pointer-events-none absolute end-2 flex items-center justify-center" data-slot="menubar-radio-item-indicator">
+      @if (checked()) { ${CHECK} }
+    </span>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}]
+	}
+});
+var UiMenubarSub = class UiMenubarSub extends UiMenuSubBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarSub,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiMenubarSub,
+		isStandalone: true,
+		selector: "[uiMenubarSub], ui-menubar-sub",
+		providers: [{
+			provide: UI_MENU_CTX,
+			useExisting: forwardRef(() => UiMenubarSub)
+		}, {
+			provide: UI_MENU_SUB,
+			useExisting: forwardRef(() => UiMenubarSub)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarSub,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarSub], ui-menubar-sub",
+			hostDirectives: [UiElementHost],
+			providers: [{
+				provide: UI_MENU_CTX,
+				useExisting: forwardRef(() => UiMenubarSub)
+			}, {
+				provide: UI_MENU_SUB,
+				useExisting: forwardRef(() => UiMenubarSub)
+			}]
+		}]
+	}]
+});
+var UiMenubarSubTrigger = class UiMenubarSubTrigger extends UiMenuSubTriggerBase {
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => cn(SUB_TRIGGER_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarSubTrigger,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiMenubarSubTrigger,
+		isStandalone: true,
+		selector: "[uiMenubarSubTrigger], ui-menubar-sub-trigger",
+		inputs: { inset: {
+			classPropertyName: "inset",
+			publicName: "inset",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"data-slot": "menubar-sub-trigger",
+				"role": "menuitem",
+				"aria-haspopup": "menu"
+			},
+			listeners: {
+				"focus": "onFocus()",
+				"blur": "onBlur()",
+				"pointermove": "onPointerMove()",
+				"pointerleave": "onPointerLeave()",
+				"click": "activate()"
+			},
+			properties: {
+				"attr.data-disabled": "disabled ? \"\" : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-highlighted": "highlighted() ? \"\" : null",
+				"attr.aria-expanded": "sub.open()",
+				"attr.data-state": "sub.open() ? \"open\" : \"closed\"",
+				"attr.data-inset": "inset() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: UI_MENU_ITEM,
+			useExisting: forwardRef(() => UiMenubarSubTrigger)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    <ng-content />
+    <svg uiIcon="chevron-right" class="ms-auto rtl:rotate-180"></svg>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarSubTrigger,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiMenubarSubTrigger], ui-menubar-sub-trigger",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: UI_MENU_ITEM,
+				useExisting: forwardRef(() => UiMenubarSubTrigger)
+			}],
+			host: {
+				tabindex: "-1",
+				"[attr.data-disabled]": "disabled ? \"\" : null",
+				"[attr.aria-disabled]": "disabled ? \"true\" : null",
+				"[attr.data-highlighted]": "highlighted() ? \"\" : null",
+				"(focus)": "onFocus()",
+				"(blur)": "onBlur()",
+				"(pointermove)": "onPointerMove()",
+				"(pointerleave)": "onPointerLeave()",
+				"(click)": "activate()",
+				"data-slot": "menubar-sub-trigger",
+				role: "menuitem",
+				"aria-haspopup": "menu",
+				"[attr.aria-expanded]": "sub.open()",
+				"[attr.data-state]": "sub.open() ? \"open\" : \"closed\"",
+				"[attr.data-inset]": "inset() ? \"\" : null",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    <ng-content />
+    <svg uiIcon="chevron-right" class="ms-auto rtl:rotate-180"></svg>
+  `
+		}]
+	}],
+	propDecorators: { inset: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "inset",
+			required: false
+		}]
+	}] }
+});
+var UiMenubarSubContent = class UiMenubarSubContent extends UiMenuContentBase {
+	root = inject(UiMenubarSub);
+	menu = this.root;
+	varPrefix = "--radix-menubar";
+	side = input("right", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	sideOffset = input(0, ...ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []);
+	items = contentChildren(UI_MENU_ITEM, {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	classes = computed(() => cn(CONTENT_CLASS, "w-auto", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	menuItems() {
+		return this.items();
+	}
+	constructor() {
+		super();
+		this.isSub = true;
+		this.init();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarSubContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiMenubarSubContent,
+		isStandalone: true,
+		selector: "[uiMenubarSubContent], ui-menubar-sub-content",
+		inputs: {
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sideOffset: {
+				classPropertyName: "sideOffset",
+				publicName: "sideOffset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "menu",
+				"aria-orientation": "vertical",
+				"data-slot": "menubar-sub-content",
+				"tabindex": "-1"
+			},
+			listeners: { "keydown": "onMenuKeydown($event)" },
+			properties: {
+				"attr.data-state": "root.state()",
+				"attr.dir": "dir.value",
+				"attr.class": "classes()"
+			}
+		},
+		queries: [{
+			propertyName: "items",
+			predicate: UI_MENU_ITEM,
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarSubContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarSubContent], ui-menubar-sub-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "menu",
+				"aria-orientation": "vertical",
+				"data-slot": "menubar-sub-content",
+				tabindex: "-1",
+				"[attr.data-state]": "root.state()",
+				"[attr.dir]": "dir.value",
+				"[attr.class]": "classes()",
+				"(keydown)": "onMenuKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		sideOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideOffset",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => UI_MENU_ITEM), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiMenubarLabel = class UiMenubarLabel {
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(LABEL_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarLabel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiMenubarLabel,
+		isStandalone: true,
+		selector: "[uiMenubarLabel], ui-menubar-label",
+		inputs: {
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "menubar-label" },
+			properties: {
+				"attr.data-inset": "inset() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarLabel,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarLabel], ui-menubar-label",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "menubar-label",
+				"[attr.data-inset]": "inset() ? \"\" : null",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiMenubarSeparator = class UiMenubarSeparator {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(SEPARATOR_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarSeparator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiMenubarSeparator,
+		isStandalone: true,
+		selector: "[uiMenubarSeparator], ui-menubar-separator",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "separator",
+				"aria-orientation": "horizontal",
+				"data-slot": "menubar-separator"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarSeparator,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarSeparator], ui-menubar-separator",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "separator",
+				"aria-orientation": "horizontal",
+				"data-slot": "menubar-separator",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiMenubarShortcut = class UiMenubarShortcut {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(SHORTCUT_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarShortcut,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiMenubarShortcut,
+		isStandalone: true,
+		selector: "[uiMenubarShortcut], ui-menubar-shortcut",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "menubar-shortcut" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarShortcut,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarShortcut], ui-menubar-shortcut",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "menubar-shortcut",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiMenubarGroup = class UiMenubarGroup {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiMenubarGroup,
+		isStandalone: true,
+		selector: "[uiMenubarGroup], ui-menubar-group",
+		host: { attributes: {
+			"role": "group",
+			"data-slot": "menubar-group"
+		} },
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarGroup], ui-menubar-group",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "group",
+				"data-slot": "menubar-group"
+			}
+		}]
+	}]
+});
+const MENUBAR_SHARED = [
+	UiMenubarItem,
+	UiMenubarCheckboxItem,
+	UiMenubarRadioGroup,
+	UiMenubarRadioItem,
+	UiMenubarSub,
+	UiMenubarSubTrigger,
+	UiMenubarSubContent,
+	UiMenubarLabel,
+	UiMenubarSeparator,
+	UiMenubarShortcut,
+	UiMenubarGroup
+];
+var UiMenubar = class UiMenubar {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	menus = contentChildren(forwardRef(() => UiMenubarMenu), {
+		...ngDevMode ? { debugName: "menus" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	active = signal(null, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	lastActive = signal(null, ...ngDevMode ? [{ debugName: "lastActive" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(menubarClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	activate(menu) {
+		this.active.set(menu);
+		if (menu) this.lastActive.set(menu);
+		for (const m of this.menus()) if (m !== menu && m.open()) m.open.set(false);
+	}
+	step(from, dir, open) {
+		const menus = this.menus();
+		const target = menus[(menus.indexOf(from) + (dir === "next" ? 1 : -1) + menus.length) % menus.length];
+		if (!target) return;
+		target.keyboardOpen = open ? "first" : null;
+		target.triggerEl()?.focus();
+		if (open) {
+			this.activate(target);
+			target.open.set(true);
+		}
+	}
+	tabStop = computed(() => this.active() ?? this.lastActive() ?? this.menus()[0] ?? null, ...ngDevMode ? [{ debugName: "tabStop" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiMenubar,
+		isStandalone: true,
+		selector: "[uiMenubar], ui-menubar",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "menubar",
+				"data-slot": "menubar",
+				"data-orientation": "horizontal"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		queries: [{
+			propertyName: "menus",
+			predicate: i0.forwardRef(() => UiMenubarMenu),
+			descendants: true,
+			isSignal: true
+		}],
+		exportAs: ["uiMenubar"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubar,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubar], ui-menubar",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiMenubar",
+			host: {
+				role: "menubar",
+				"data-slot": "menubar",
+				"data-orientation": "horizontal",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		menus: [{
+			type: i0.ContentChildren,
+			args: [forwardRef(() => UiMenubarMenu), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiMenubarMenu = class UiMenubarMenu extends UiMenuRootBase {
+	bar = inject(UiMenubar);
+	triggerEl = this.trigger;
+	constructor() {
+		super();
+		effect(() => {
+			const open = this.open();
+			untracked(() => {
+				if (open) this.bar.activate(this);
+				else if (this.bar.active() === this) this.bar.active.set(null);
+			});
+		});
+	}
+	horizontal(dir) {
+		this.bar.step(this, dir, true);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiMenubarMenu,
+		isStandalone: true,
+		selector: "[uiMenubarMenu], ui-menubar-menu",
+		providers: [{
+			provide: UI_MENU_CTX,
+			useExisting: forwardRef(() => UiMenubarMenu)
+		}],
+		exportAs: ["uiMenubarMenu"],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarMenu,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarMenu], ui-menubar-menu",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiMenubarMenu",
+			providers: [{
+				provide: UI_MENU_CTX,
+				useExisting: forwardRef(() => UiMenubarMenu)
+			}]
+		}]
+	}],
+	ctorParameters: () => []
+});
+var UiMenubarTrigger = class UiMenubarTrigger {
+	menu = inject(UiMenubarMenu);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(menubarTriggerClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const el = inject(ElementRef).nativeElement;
+		this.menu.trigger.set(el);
+		this.menu.triggerId.set(el.id || `${this.menu.id}-trigger`);
+	}
+	onClick() {
+		this.menu.keyboardOpen = null;
+		this.menu.toggle();
+	}
+	onEnter() {
+		const active = this.menu.bar.active();
+		if (active && active !== this.menu) {
+			this.menu.keyboardOpen = null;
+			this.menu.open.set(true);
+		}
+	}
+	onKeydown(e) {
+		const rtl = this.menu.dirIsRtl();
+		const next = rtl ? "ArrowLeft" : "ArrowRight";
+		const prev = rtl ? "ArrowRight" : "ArrowLeft";
+		if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+			e.preventDefault();
+			this.menu.keyboardOpen = "first";
+			this.menu.open.set(true);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			this.menu.keyboardOpen = "last";
+			this.menu.open.set(true);
+		} else if (e.key === next) {
+			e.preventDefault();
+			this.menu.bar.step(this.menu, "next", false);
+		} else if (e.key === prev) {
+			e.preventDefault();
+			this.menu.bar.step(this.menu, "prev", false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiMenubarTrigger,
+		isStandalone: true,
+		selector: "[uiMenubarTrigger], ui-menubar-trigger",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "menuitem",
+				"aria-haspopup": "menu",
+				"data-slot": "menubar-trigger",
+				"data-orientation": "horizontal"
+			},
+			listeners: {
+				"click": "onClick()",
+				"focus": "menu.bar.lastActive.set(menu)",
+				"pointerenter": "onEnter()",
+				"keydown": "onKeydown($event)"
+			},
+			properties: {
+				"attr.id": "menu.triggerId()",
+				"attr.aria-expanded": "menu.open()",
+				"attr.aria-controls": "menu.open() ? menu.id : null",
+				"attr.data-state": "menu.open() ? \"open\" : \"closed\"",
+				"attr.tabindex": "menu.bar.tabStop() === menu ? 0 : -1",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarTrigger], ui-menubar-trigger",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "menuitem",
+				"aria-haspopup": "menu",
+				"data-slot": "menubar-trigger",
+				"data-orientation": "horizontal",
+				"[attr.id]": "menu.triggerId()",
+				"[attr.aria-expanded]": "menu.open()",
+				"[attr.aria-controls]": "menu.open() ? menu.id : null",
+				"[attr.data-state]": "menu.open() ? \"open\" : \"closed\"",
+				"[attr.tabindex]": "menu.bar.tabStop() === menu ? 0 : -1",
+				"[attr.class]": "classes()",
+				"(click)": "onClick()",
+				"(focus)": "menu.bar.lastActive.set(menu)",
+				"(pointerenter)": "onEnter()",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiMenubarContent = class UiMenubarContent extends UiMenuContentBase {
+	root = inject(UiMenubarMenu);
+	menu = this.root;
+	varPrefix = "--radix-menubar";
+	align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	sideOffset = input(8, ...ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []);
+	items = contentChildren(UI_MENU_ITEM, {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	classes = computed(() => cn(menubarContentClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	menuItems() {
+		return this.items();
+	}
+	constructor() {
+		super();
+		this.init();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenubarContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiMenubarContent,
+		isStandalone: true,
+		selector: "[uiMenubarContent], ui-menubar-content",
+		inputs: {
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sideOffset: {
+				classPropertyName: "sideOffset",
+				publicName: "sideOffset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "menu",
+				"aria-orientation": "vertical",
+				"data-slot": "menubar-content",
+				"data-orientation": "vertical",
+				"data-radix-menubar-content": "",
+				"tabindex": "-1"
+			},
+			listeners: { "keydown": "onMenuKeydown($event)" },
+			properties: {
+				"id": "root.id",
+				"attr.aria-labelledby": "root.triggerId()",
+				"attr.data-state": "root.state()",
+				"attr.dir": "dir.value",
+				"attr.class": "classes()"
+			}
+		},
+		queries: [{
+			propertyName: "items",
+			predicate: UI_MENU_ITEM,
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenubarContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenubarContent], ui-menubar-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "menu",
+				"aria-orientation": "vertical",
+				"data-slot": "menubar-content",
+				"data-orientation": "vertical",
+				"data-radix-menubar-content": "",
+				tabindex: "-1",
+				"[id]": "root.id",
+				"[attr.aria-labelledby]": "root.triggerId()",
+				"[attr.data-state]": "root.state()",
+				"[attr.dir]": "dir.value",
+				"[attr.class]": "classes()",
+				"(keydown)": "onMenuKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		sideOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideOffset",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => UI_MENU_ITEM), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+const UI_MENUBAR = [
+	UiMenubar,
+	UiMenubarMenu,
+	UiMenubarTrigger,
+	UiMenubarContent,
+	...MENUBAR_SHARED
+];
+export { MENUBAR_SHARED, UI_MENUBAR, UI_MENUBAR_GENERATED, UiMenuSelectEvent, UiMenubar, UiMenubarCheckboxItem, UiMenubarContent, UiMenubarGroup, UiMenubarItem, UiMenubarLabel, UiMenubarMenu, UiMenubarRadioGroup, UiMenubarRadioItem, UiMenubarSeparator, UiMenubarShortcut, UiMenubarSub, UiMenubarSubContent, UiMenubarSubTrigger, UiMenubarTrigger, menubarClass, menubarContentClass, menubarItemClass, menubarSeparatorClass, menubarShortcutClass, menubarSubTriggerClass, menubarTriggerClass };
+
+//# sourceMappingURL=loomui-ng-ui-menubar.mjs.map