@joanroucoux/cairn-ui 0.8.1 → 0.9.0

package/fesm2022/joanroucoux-cairn-ui-menu.mjs

@@ -1,183 +1,293 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, inject, ElementRef, computed, Directive, numberAttribute, signal, contentChildren, Component } from '@angular/core';
-
-const MENU_CLASSES = 'm-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16),inset_0_0_0_1px_var(--border)] text-(--foreground) transition-[opacity,scale,overlay,display] transition-discrete duration-(--duration-fast) not-open:duration-[120ms] ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100';
-const SHEET_CLASSES = 'max-lg:fixed max-lg:inset-x-4 max-lg:top-auto max-lg:w-auto max-lg:bottom-[calc(76px+env(safe-area-inset-bottom))] max-lg:min-w-0 max-lg:p-1.5 max-lg:bg-(--card) max-lg:shadow-[0_12px_32px_rgb(0_0_0/0.2),inset_0_0_0_1px_var(--border)] max-lg:backdrop:bg-[rgb(0_0_0/0.36)] max-lg:transition-[opacity,translate,overlay,display] max-lg:scale-100 max-lg:translate-y-4 max-lg:open:translate-y-0 max-lg:starting:open:scale-100 max-lg:starting:open:translate-y-4 max-lg:motion-reduce:translate-y-0 max-lg:motion-reduce:starting:open:translate-y-0';
-const SHEET_ITEM_CLASSES = 'flex w-full items-center gap-3 lg:pointer-fine:gap-2.5 min-h-12 lg:min-h-11 lg:pointer-fine:min-h-9 px-3 lg:pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-6px)] lg:rounded-[calc(var(--radius-container)-4px)] text-body lg:pointer-fine:text-label text-left whitespace-nowrap hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) transition-[background-color] duration-(--duration-fast) ease-out outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-5 [:where(&>svg)]:flex-none lg:[:where(&>svg)]:size-[18px] lg:pointer-fine:[:where(&>svg)]:size-4';
-const ITEM_CLASSES = 'flex w-full items-center gap-3 pointer-fine:gap-2.5 min-h-11 pointer-fine:min-h-9 px-3 pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-4px)] text-body pointer-fine:text-label text-left whitespace-nowrap hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) transition-[background-color] duration-(--duration-fast) ease-out outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-[18px] [:where(&>svg)]:flex-none pointer-fine:[:where(&>svg)]:size-4';
+import * as i0 from "@angular/core";
+import { Component, Directive, ElementRef, booleanAttribute, computed, contentChildren, inject, input, numberAttribute, signal } from "@angular/core";
+const MENU_CLASSES = "m-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16),inset_0_0_0_1px_var(--border)] text-(--foreground) transition-[opacity,scale,overlay,display] transition-discrete duration-(--duration-fast) not-open:duration-[120ms] ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100";
+const SHEET_CLASSES = "max-lg:fixed max-lg:inset-x-4 max-lg:top-auto max-lg:w-auto max-lg:bottom-[calc(76px+env(safe-area-inset-bottom))] max-lg:min-w-0 max-lg:p-1.5 max-lg:bg-(--card) max-lg:shadow-[0_12px_32px_rgb(0_0_0/0.2),inset_0_0_0_1px_var(--border)] max-lg:backdrop:bg-[rgb(0_0_0/0.36)] max-lg:transition-[opacity,translate,overlay,display] max-lg:scale-100 max-lg:translate-y-4 max-lg:open:translate-y-0 max-lg:starting:open:scale-100 max-lg:starting:open:translate-y-4 max-lg:motion-reduce:translate-y-0 max-lg:motion-reduce:starting:open:translate-y-0";
+const SHEET_ITEM_CLASSES = "flex w-full items-center gap-3 lg:pointer-fine:gap-2.5 min-h-12 lg:min-h-11 lg:pointer-fine:min-h-9 px-3 lg:pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-6px)] lg:rounded-[calc(var(--radius-container)-4px)] text-body lg:pointer-fine:text-label text-left whitespace-nowrap hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) transition-[background-color] duration-(--duration-fast) ease-out outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-5 [:where(&>svg)]:flex-none lg:[:where(&>svg)]:size-[18px] lg:pointer-fine:[:where(&>svg)]:size-4";
+const ITEM_CLASSES = "flex w-full items-center gap-3 pointer-fine:gap-2.5 min-h-11 pointer-fine:min-h-9 px-3 pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-4px)] text-body pointer-fine:text-label text-left whitespace-nowrap hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) transition-[background-color] duration-(--duration-fast) ease-out outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-[18px] [:where(&>svg)]:flex-none pointer-fine:[:where(&>svg)]:size-4";
+const CHECK_CLASSES = "after:ms-auto after:block after:h-3 after:w-1.5 after:flex-none after:rotate-45 after:border-r-2 after:border-b-2 after:border-current after:content-['']";
 const nextId = (() => {
-    let count = 0;
-    return () => `ui-menu-${++count}`;
+	let count = 0;
+	return () => `ui-menu-${++count}`;
 })();
-/**
- * One action of a `ui-menu`; `destructive` paints it in `--negative`.
- *
- * @example
- * <button uiMenuItem destructive (click)="remove()">Delete the line</button>
- */
-class UiMenuItem {
-    destructive = input(false, { ...(ngDevMode ? { debugName: "destructive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    #host = inject(ElementRef).nativeElement;
-    #menu = inject(UiMenu);
-    classes = computed(() => `${this.#menu.sheet() ? SHEET_ITEM_CLASSES : ITEM_CLASSES}${this.destructive() ? ' text-(--negative)' : ''}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    focus() {
-        this.#host.focus();
-    }
-    hasFocus() {
-        return this.#host === document.activeElement;
-    }
-    onClick() {
-        this.#menu.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiMenuItem, isStandalone: true, selector: "button[uiMenuItem]", inputs: { destructive: { classPropertyName: "destructive", publicName: "destructive", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "click": "onClick()" }, properties: { "class": "classes()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenuItem, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[uiMenuItem]',
-                    host: {
-                        role: 'menuitem',
-                        tabindex: '-1',
-                        '[class]': 'classes()',
-                        '(click)': 'onClick()',
-                    },
-                }]
-        }], propDecorators: { destructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "destructive", required: false }] }] } });
-/**
- * Secondary actions menu, opened from its trigger through the native Popover API. With `sheet`, below
- * 64rem it opens as a bottom action sheet above the tab bar instead of beside its trigger, and
- * `heading` names what the actions apply to. `width` fixes the outer popover width in pixels (the sheet
- * always spans the screen below 64rem); without it the menu fits its content.
- *
- * @example
- * <button ui-button size="icon" aria-label="More" [uiMenuTrigger]="menu">...</button>
- * <ui-menu #menu label="Line actions">
- *   <button uiMenuItem (click)="edit()">Edit</button>
- *   <button uiMenuItem destructive (click)="remove()">Delete the line</button>
- * </ui-menu>
- */
-class UiMenu {
-    label = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    sheet = input(false, { ...(ngDevMode ? { debugName: "sheet" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    heading = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
-    width = input(undefined, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    menuId = nextId();
-    isOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    hasWidth = computed(() => Number.isFinite(this.width()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasWidth" }] : /* istanbul ignore next */ []));
-    widthVar = computed(() => (this.hasWidth() ? `${this.width()}px` : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "widthVar" }] : /* istanbul ignore next */ []));
-    classes = computed(() => {
-        const width = !this.hasWidth() ? '' : this.sheet() ? ' lg:w-(--ui-menu-width)' : ' w-(--ui-menu-width)';
-        return `${MENU_CLASSES}${this.sheet() ? ` ${SHEET_CLASSES}` : ''}${width}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    items = contentChildren(UiMenuItem, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    #host = inject(ElementRef).nativeElement;
-    #trigger = null;
-    open(trigger) {
-        this.#trigger = trigger;
-        this.isOpen.set(true);
-        if (typeof this.#host.showPopover === 'function') {
-            this.#host.showPopover();
-        }
-        if (this.#isSheet()) {
-            this.#host.style.position = '';
-            this.#host.style.top = '';
-            this.#host.style.left = '';
-            this.#host.style.right = '';
-            this.#host.style.bottom = '';
-        }
-        else {
-            this.#position(trigger);
-        }
-        this.items()[0]?.focus();
-    }
-    close() {
-        const wasOpen = this.isOpen();
-        this.#applyClosed();
-        if (wasOpen && typeof this.#host.hidePopover === 'function') {
-            this.#host.hidePopover();
-        }
-    }
-    #applyClosed() {
-        this.isOpen.set(false);
-        this.#trigger?.focus();
-        this.#trigger = null;
-    }
-    onToggle(event) {
-        if (event.newState === 'closed') {
-            this.#applyClosed();
-        }
-    }
-    onKeydown(event) {
-        if (event.key === 'Tab' || event.key === 'Escape') {
-            event.preventDefault();
-            this.close();
-            return;
-        }
-        const items = this.items();
-        const currentIndex = items.findIndex((item) => item.hasFocus());
-        const lastIndex = items.length - 1;
-        let nextIndex;
-        switch (event.key) {
-            case 'ArrowDown':
-                nextIndex = currentIndex >= lastIndex ? 0 : currentIndex + 1;
-                break;
-            case 'ArrowUp':
-                nextIndex = currentIndex <= 0 ? lastIndex : currentIndex - 1;
-                break;
-            case 'Home':
-                nextIndex = 0;
-                break;
-            case 'End':
-                nextIndex = lastIndex;
-                break;
-        }
-        if (nextIndex === undefined) {
-            return;
-        }
-        event.preventDefault();
-        items[nextIndex]?.focus();
-    }
-    #isSheet() {
-        return this.sheet() && typeof window.matchMedia === 'function' && !window.matchMedia('(min-width: 64rem)').matches;
-    }
-    #position(trigger) {
-        const margin = 8;
-        const triggerRect = trigger.getBoundingClientRect();
-        const menuRect = { width: this.#host.offsetWidth, height: this.#host.offsetHeight };
-        const fitsBelow = window.innerHeight - triggerRect.bottom >= menuRect.height + margin;
-        const top = fitsBelow ? triggerRect.bottom + 4 : Math.max(margin, triggerRect.top - menuRect.height - 4);
-        const left = Math.min(Math.max(triggerRect.right - menuRect.width, margin), window.innerWidth - menuRect.width - margin);
-        this.#host.style.position = 'fixed';
-        this.#host.style.top = `${Math.min(top, window.innerHeight - menuRect.height - margin)}px`;
-        this.#host.style.left = `${left}px`;
-        this.#host.style.right = 'auto';
-        this.#host.style.bottom = 'auto';
-        this.#host.style.transformOrigin = fitsBelow ? 'top right' : 'bottom right';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiMenu, isStandalone: true, selector: "ui-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sheet: { classPropertyName: "sheet", publicName: "sheet", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menu", "popover": "auto" }, listeners: { "toggle": "onToggle($event)", "keydown": "onKeydown($event)" }, properties: { "id": "menuId", "style.--ui-menu-width": "widthVar()", "class": "classes()", "attr.aria-label": "label()" } }, queries: [{ propertyName: "items", predicate: UiMenuItem, isSignal: true }], ngImport: i0, template: `
+var UiMenuItem = class UiMenuItem {
+	destructive = input(false, {
+		...ngDevMode ? { debugName: "destructive" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	checked = input(...ngDevMode ? [void 0, { debugName: "checked" }] : /* istanbul ignore next */ []);
+	#host = inject(ElementRef).nativeElement;
+	#menu = inject(UiMenu);
+	role = computed(() => this.checked() === void 0 ? "menuitem" : "menuitemradio", ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	classes = computed(() => `${this.#menu.sheet() ? SHEET_ITEM_CLASSES : ITEM_CLASSES}${this.destructive() ? " text-(--negative)" : ""}${this.checked() ? ` ${CHECK_CLASSES}` : ""}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	focus() {
+		this.#host.focus();
+	}
+	hasFocus() {
+		return this.#host === document.activeElement;
+	}
+	onClick() {
+		this.#menu.close();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiMenuItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiMenuItem,
+		isStandalone: true,
+		selector: "button[uiMenuItem]",
+		inputs: {
+			destructive: {
+				classPropertyName: "destructive",
+				publicName: "destructive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "tabindex": "-1" },
+			listeners: { "click": "onClick()" },
+			properties: {
+				"attr.role": "role()",
+				"attr.aria-checked": "checked() === undefined ? null : checked()",
+				"class": "classes()"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiMenuItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[uiMenuItem]",
+			host: {
+				"[attr.role]": "role()",
+				"[attr.aria-checked]": "checked() === undefined ? null : checked()",
+				tabindex: "-1",
+				"[class]": "classes()",
+				"(click)": "onClick()"
+			}
+		}]
+	}],
+	propDecorators: {
+		destructive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "destructive",
+				required: false
+			}]
+		}],
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}]
+	}
+});
+var UiMenu = class UiMenu {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	sheet = input(false, {
+		...ngDevMode ? { debugName: "sheet" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	heading = input(...ngDevMode ? [void 0, { debugName: "heading" }] : /* istanbul ignore next */ []);
+	width = input(void 0, {
+		...ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	menuId = nextId();
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	hasWidth = computed(() => Number.isFinite(this.width()), ...ngDevMode ? [{ debugName: "hasWidth" }] : /* istanbul ignore next */ []);
+	widthVar = computed(() => this.hasWidth() ? `${this.width()}px` : null, ...ngDevMode ? [{ debugName: "widthVar" }] : /* istanbul ignore next */ []);
+	classes = computed(() => {
+		const width = !this.hasWidth() ? "" : this.sheet() ? " lg:w-(--ui-menu-width)" : " w-(--ui-menu-width)";
+		return `${MENU_CLASSES}${this.sheet() ? ` ${SHEET_CLASSES}` : ""}${width}`;
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	items = contentChildren(UiMenuItem, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	#host = inject(ElementRef).nativeElement;
+	#trigger = null;
+	open(trigger) {
+		this.#trigger = trigger;
+		this.isOpen.set(true);
+		if (typeof this.#host.showPopover === "function") this.#host.showPopover();
+		if (this.#isSheet()) {
+			this.#host.style.position = "";
+			this.#host.style.top = "";
+			this.#host.style.left = "";
+			this.#host.style.right = "";
+			this.#host.style.bottom = "";
+		} else this.#position(trigger);
+		(this.items().find((item) => item.checked()) ?? this.items()[0])?.focus();
+	}
+	close() {
+		const wasOpen = this.isOpen();
+		this.#applyClosed();
+		if (wasOpen && typeof this.#host.hidePopover === "function") this.#host.hidePopover();
+	}
+	#applyClosed() {
+		this.isOpen.set(false);
+		this.#trigger?.focus();
+		this.#trigger = null;
+	}
+	onToggle(event) {
+		if (event.newState === "closed") this.#applyClosed();
+	}
+	onKeydown(event) {
+		if (event.key === "Tab" || event.key === "Escape") {
+			event.preventDefault();
+			this.close();
+			return;
+		}
+		const items = this.items();
+		const currentIndex = items.findIndex((item) => item.hasFocus());
+		const lastIndex = items.length - 1;
+		let nextIndex;
+		switch (event.key) {
+			case "ArrowDown":
+				nextIndex = currentIndex >= lastIndex ? 0 : currentIndex + 1;
+				break;
+			case "ArrowUp":
+				nextIndex = currentIndex <= 0 ? lastIndex : currentIndex - 1;
+				break;
+			case "Home":
+				nextIndex = 0;
+				break;
+			case "End": nextIndex = lastIndex;
+		}
+		if (nextIndex === void 0) return;
+		event.preventDefault();
+		items[nextIndex]?.focus();
+	}
+	#isSheet() {
+		return this.sheet() && typeof window.matchMedia === "function" && !window.matchMedia("(min-width: 64rem)").matches;
+	}
+	#position(trigger) {
+		const margin = 8;
+		const triggerRect = trigger.getBoundingClientRect();
+		const menuRect = {
+			width: this.#host.offsetWidth,
+			height: this.#host.offsetHeight
+		};
+		const fitsBelow = window.innerHeight - triggerRect.bottom >= menuRect.height + margin;
+		const top = fitsBelow ? triggerRect.bottom + 4 : Math.max(margin, triggerRect.top - menuRect.height - 4);
+		const left = Math.min(Math.max(triggerRect.right - menuRect.width, margin), window.innerWidth - menuRect.width - margin);
+		this.#host.style.position = "fixed";
+		this.#host.style.top = `${Math.min(top, window.innerHeight - menuRect.height - margin)}px`;
+		this.#host.style.left = `${left}px`;
+		this.#host.style.right = "auto";
+		this.#host.style.bottom = "auto";
+		this.#host.style.transformOrigin = fitsBelow ? "top right" : "bottom right";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiMenu,
+		isStandalone: true,
+		selector: "ui-menu",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			sheet: {
+				classPropertyName: "sheet",
+				publicName: "sheet",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "menu",
+				"popover": "auto"
+			},
+			listeners: {
+				"toggle": "onToggle($event)",
+				"keydown": "onKeydown($event)"
+			},
+			properties: {
+				"id": "menuId",
+				"style.--ui-menu-width": "widthVar()",
+				"class": "classes()",
+				"attr.aria-label": "label()"
+			}
+		},
+		queries: [{
+			propertyName: "items",
+			predicate: UiMenuItem,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     @if (sheet() && heading()) {
       <div aria-hidden="true" class="text-label px-3 pt-2 pb-1.5 leading-[17px] text-(--muted-foreground) lg:hidden">
         {{ heading() }}
       </div>
     }
     <ng-content />
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenu, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-menu',
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiMenu,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-menu",
+			template: `
     @if (sheet() && heading()) {
       <div aria-hidden="true" class="text-label px-3 pt-2 pb-1.5 leading-[17px] text-(--muted-foreground) lg:hidden">
         {{ heading() }}
@@ -185,57 +295,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     }
     <ng-content />
   `,
-                    host: {
-                        role: 'menu',
-                        popover: 'auto',
-                        '[id]': 'menuId',
-                        '[style.--ui-menu-width]': 'widthVar()',
-                        '[class]': 'classes()',
-                        '[attr.aria-label]': 'label()',
-                        '(toggle)': 'onToggle($event)',
-                        '(keydown)': 'onKeydown($event)',
-                    },
-                }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], sheet: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheet", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UiMenuItem), { isSignal: true }] }] } });
-/**
- * Opens a `ui-menu` from a trigger element and wires `aria-haspopup`, `aria-expanded` and
- * `aria-controls` on it.
- *
- * @example
- * <button ui-button size="icon" aria-label="More" [uiMenuTrigger]="menu">...</button>
- */
-class UiMenuTrigger {
-    uiMenuTrigger = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "uiMenuTrigger" }] : /* istanbul ignore next */ []));
-    #host = inject(ElementRef).nativeElement;
-    toggle() {
-        const menu = this.uiMenuTrigger();
-        if (menu.isOpen()) {
-            menu.close();
-        }
-        else {
-            menu.open(this.#host);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiMenuTrigger, isStandalone: true, selector: "[uiMenuTrigger]", inputs: { uiMenuTrigger: { classPropertyName: "uiMenuTrigger", publicName: "uiMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-expanded": "uiMenuTrigger().isOpen()", "attr.aria-controls": "uiMenuTrigger().menuId" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenuTrigger, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uiMenuTrigger]',
-                    host: {
-                        'aria-haspopup': 'menu',
-                        '[attr.aria-expanded]': 'uiMenuTrigger().isOpen()',
-                        '[attr.aria-controls]': 'uiMenuTrigger().menuId',
-                        '(click)': 'toggle()',
-                    },
-                }]
-        }], propDecorators: { uiMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiMenuTrigger", required: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			host: {
+				role: "menu",
+				popover: "auto",
+				"[id]": "menuId",
+				"[style.--ui-menu-width]": "widthVar()",
+				"[class]": "classes()",
+				"[attr.aria-label]": "label()",
+				"(toggle)": "onToggle($event)",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		sheet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sheet",
+				required: false
+			}]
+		}],
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => UiMenuItem), { isSignal: true }]
+		}]
+	}
+});
+var UiMenuTrigger = class UiMenuTrigger {
+	uiMenuTrigger = input.required(...ngDevMode ? [{ debugName: "uiMenuTrigger" }] : /* istanbul ignore next */ []);
+	#host = inject(ElementRef).nativeElement;
+	toggle() {
+		const menu = this.uiMenuTrigger();
+		if (menu.isOpen()) menu.close();
+		else menu.open(this.#host);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiMenuTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiMenuTrigger,
+		isStandalone: true,
+		selector: "[uiMenuTrigger]",
+		inputs: { uiMenuTrigger: {
+			classPropertyName: "uiMenuTrigger",
+			publicName: "uiMenuTrigger",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "aria-haspopup": "menu" },
+			listeners: { "click": "toggle()" },
+			properties: {
+				"attr.aria-expanded": "uiMenuTrigger().isOpen()",
+				"attr.aria-controls": "uiMenuTrigger().menuId"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiMenuTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiMenuTrigger]",
+			host: {
+				"aria-haspopup": "menu",
+				"[attr.aria-expanded]": "uiMenuTrigger().isOpen()",
+				"[attr.aria-controls]": "uiMenuTrigger().menuId",
+				"(click)": "toggle()"
+			}
+		}]
+	}],
+	propDecorators: { uiMenuTrigger: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "uiMenuTrigger",
+			required: true
+		}]
+	}] }
+});
 export { UiMenu, UiMenuItem, UiMenuTrigger };
-//# sourceMappingURL=joanroucoux-cairn-ui-menu.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-menu.mjs.map