@lilydesignsystem/angular-menu-picker 0.0.0-stage → 0.1.0

package/AGENTS.md

@@ -0,0 +1,49 @@
+# AGENTS — MenuPicker (Angular helper)
+
+Single source of truth: [spec/index.md](./spec/index.md). Read it first; everything below is a fast index.
+
+## What this package is
+
+A Angular headless dropdown control. A single-icon button (a bundled **hamburger** SVG) that opens a disclosure panel holding
+**whatever the app provides** — links, buttons, forms. Ships no CSS, no content and no English; the one bundled asset is the
+default button icon.
+
+## Files
+
+| File | Purpose |
+| ---- | ------- |
+| `spec/index.md` | Specification-driven contract (canonical). |
+| `menu-picker.component.ts` | Implementation. Angular signals + TypeScript. |
+| `menu-picker.component.spec.ts` | Vitest spec, mapped to the §7 clauses. |
+| `index.ts` | Barrel re-export. |
+| `index.md` | User guide. |
+| `docs/accessibility.md` | Tradeoffs, stated plainly. |
+| `examples/` | A links panel, a form panel using `close`, and a custom icon. |
+
+## Public surface
+
+Selector `lily-menu-picker` (`exportAs: "lilyMenuPicker"`); exports `MenuPicker`, `MenuPickerIcon`, `nextMenuPickerId`, `FOCUSABLE`; type `ChildArgs`.
+Required input: `label`.
+
+## Behaviour contract (one paragraph)
+
+Activating the button toggles a panel of projected content (`<ng-content>`). Focus stays on the button on click;
+`ArrowDown`/`ArrowUp` on the button move into the panel's first/last focusable element. `Escape` closes and refocuses the
+button; `Tab`, an outside click or focus leaving closes. Activating a link, button or `[role="menuitem"]` inside closes the
+panel unless `closeOnSelect={false}` or a `data-menu-picker-keep-open` ancestor says otherwise. Nothing is applied to the
+document and nothing is persisted.
+
+## HTML
+
+`<div class="menu-picker">` → `<button class="menu-picker-button">` with an `aria-hidden` SVG (`menu-picker-icon`) →
+`<div class="menu-picker-tooltip" role="tooltip">` → `<div class="menu-picker-panel" role="group" hidden>`.
+
+**Not an ARIA menu.** The panel's content is arbitrary, so there is no `role="menu"` and no roving focus; it is a disclosure.
+
+## Conventions this package follows
+
+- Angular signals; strict TypeScript on the public surface.
+- Runtime dependency: `@lilydesignsystem/angular-headless` (the trigger's `IconButton`) beside `@angular/core`.
+- No bundled CSS, fonts, images, links or English. The one bundled asset is the default hamburger icon, always overridable
+  through `icon`.
+- Every user-facing string comes from props or from the app's own content.

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog — MenuPicker (Angular)
+
+All notable changes to this helper are documented in this file. The format is loosely based on
+[Keep a Changelog](https://keepachangelog.com/) and the project follows [Semantic Versioning](https://semver.org/).
+
+## 0.1.0 — 2026-10-08
+
+**First release.** An icon button (a bundled three-line hamburger SVG) opening a disclosure panel that holds whatever the
+app provides. Props: `label`, `open` (bindable), `closeOnSelect`, `onOpenChange`, `children({ open, close })`, `icon`.
+A named `role="group"` panel (not an ARIA menu), closes on select / Escape / Tab / outside click / focus leaving,
+hover/keyboard-focus tooltip. No default content and no English. Spec §7 has 21 acceptance clauses; the suite has one test
+each.

package/dist/README.md

@@ -0,0 +1,63 @@
+# MenuPicker (Angular helper)
+
+A headless Angular control for **a dropdown of whatever your app provides**: a single-icon button (a bundled
+three-line hamburger SVG) that opens a panel you fill with links, buttons, a search form, a few settings — anything.
+
+The single source of truth is [spec/index.md](./spec/index.md). This file is the human-readable guide.
+
+## Install
+
+```ts
+import { MenuPicker, MenuPickerIcon } from "@lilydesignsystem/angular-menu-picker";
+```
+
+## Quick start
+
+```ts
+@Component({
+  standalone: true,
+  imports: [MenuPicker],
+  template: `
+    <lily-menu-picker label="Menu">
+      <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/about/">About Us</a></li>
+        <li><button type="button" (click)="signOut()">Sign out</button></li>
+      </ul>
+    </lily-menu-picker>
+  `,
+})
+export class Header {}
+```
+
+`label` is the button's accessible name, the panel's name and the tooltip text. There is **no default content**: the package
+ships no links and no English, so the panel's content, and every word on it, is yours.
+
+## Closing from your content
+
+Give the element a template reference to its `exportAs`:
+
+```html
+<lily-menu-picker #menu="lilyMenuPicker" label="Menu">
+  <form (submit)="$event.preventDefault(); search(); menu.close()">
+    <input type="search" aria-label="Search" />
+  </form>
+</lily-menu-picker>
+```
+
+By default, activating a link, a button or a `[role="menuitem"]` inside the panel closes it. Turn that off with
+`[closeOnSelect]="false"`, or opt one element or region out with a `data-menu-picker-keep-open` ancestor.
+
+## Inputs and outputs
+
+`label` (required), `[(open)]`, `closeOnSelect` (default `true`), `className`; projected content is the panel, and a projected
+`<ng-template lilyMenuPickerIcon let-args>` replaces the **icon**, not the content.
+
+## Styling
+
+Headless: no CSS ships. Target `.menu-picker`, `.menu-picker-button`, `.menu-picker-icon`, `.menu-picker-tooltip`,
+`.menu-picker-panel`. The 45 reference themes in the monorepo's `themes/` style all of them, including the popup placement.
+
+## Examples
+
+[examples/](./examples/README.md): a links panel, a panel with a form and `close`, and a custom icon.

package/dist/fesm2022/lilydesignsystem-angular-menu-picker.mjs

@@ -0,0 +1,494 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, computed, contentChild, effect, input, model, signal, viewChild } from "@angular/core";
+import { IconButton } from "@lilydesignsystem/angular-headless";
+let uid = 0;
+function nextMenuPickerId() {
+	uid += 1;
+	return `menu-picker-${uid}`;
+}
+const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+var MenuPickerIcon = class MenuPickerIcon {
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: MenuPickerIcon,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.1",
+			type: MenuPickerIcon,
+			isStandalone: true,
+			selector: "ng-template[lilyMenuPickerIcon]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: MenuPickerIcon,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[lilyMenuPickerIcon]",
+			standalone: true
+		}]
+	}]
+});
+var MenuPicker = class MenuPicker {
+	constructor() {
+		this.label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+		this.closeOnSelect = input(true, ...ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []);
+		this.className = input("", ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
+		this.iconTemplate = contentChild(MenuPickerIcon, {
+			...ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {},
+			read: TemplateRef
+		});
+		this.rootRef = viewChild.required("rootEl", ...ngDevMode ? [{ debugName: "rootRef" }] : /* istanbul ignore next */ []);
+		this.buttonRef = viewChild.required("buttonEl", ...ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []);
+		this.panelRef = viewChild.required("panelEl", ...ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []);
+		this.baseId = nextMenuPickerId();
+		this.panelId = `${this.baseId}-panel`;
+		this.tooltipId = `${this.baseId}-tooltip`;
+		this.hoverButton = signal(false, ...ngDevMode ? [{ debugName: "hoverButton" }] : /* istanbul ignore next */ []);
+		this.hoverTooltip = signal(false, ...ngDevMode ? [{ debugName: "hoverTooltip" }] : /* istanbul ignore next */ []);
+		this.focusButton = signal(false, ...ngDevMode ? [{ debugName: "focusButton" }] : /* istanbul ignore next */ []);
+		this.dismissed = signal(false, ...ngDevMode ? [{ debugName: "dismissed" }] : /* istanbul ignore next */ []);
+		this.tooltipVisible = computed(() => !this.open() && !this.dismissed() && (this.hoverButton() || this.hoverTooltip() || this.focusButton()), ...ngDevMode ? [{ debugName: "tooltipVisible" }] : /* istanbul ignore next */ []);
+		this.tooltipEscapeListener = effect((onCleanup) => {
+			if (!this.tooltipVisible() || typeof document === "undefined") return;
+			const onKey = (event) => {
+				if (event.key === "Escape") this.dismissed.set(true);
+			};
+			document.addEventListener("keydown", onKey);
+			onCleanup(() => document.removeEventListener("keydown", onKey));
+		}, ...ngDevMode ? [{ debugName: "tooltipEscapeListener" }] : /* istanbul ignore next */ []);
+		this.childContext = computed(() => {
+			const args = { open: this.open() };
+			return {
+				$implicit: args,
+				...args
+			};
+		}, ...ngDevMode ? [{ debugName: "childContext" }] : /* istanbul ignore next */ []);
+	}
+	onTooltipButtonEnter() {
+		this.hoverButton.set(true);
+		this.dismissed.set(false);
+	}
+	onTooltipButtonFocusIn() {
+		try {
+			this.focusButton.set(this.buttonRef().element?.matches(":focus-visible") ?? false);
+		} catch {
+			this.focusButton.set(true);
+		}
+	}
+	onTooltipButtonFocusOut() {
+		this.focusButton.set(false);
+		this.dismissed.set(false);
+	}
+	onTooltipKeydown(event) {
+		if (event.key === "Escape" && this.tooltipVisible()) this.dismissed.set(true);
+	}
+	focusables() {
+		return Array.from(this.panelRef().nativeElement.querySelectorAll(FOCUSABLE));
+	}
+	openPanel(focus = "none") {
+		this.open.set(true);
+		if (focus === "none") return;
+		queueMicrotask(() => {
+			const all = this.focusables();
+			(focus === "last" ? all[all.length - 1] : all[0])?.focus({ preventScroll: true });
+		});
+	}
+	closePanel(refocus = true) {
+		if (!this.open()) return;
+		this.open.set(false);
+		if (refocus) queueMicrotask(() => this.buttonRef().focus({ preventScroll: true }));
+	}
+	close() {
+		this.closePanel();
+	}
+	onButtonClick() {
+		if (this.open()) this.closePanel();
+		else this.openPanel();
+	}
+	onPanelClick(event) {
+		if (!this.closeOnSelect()) return;
+		const hit = event.target?.closest?.("a[href], button, [role=\"menuitem\"]");
+		if (!hit || !this.panelRef().nativeElement.contains(hit)) return;
+		if (hit.closest("[data-menu-picker-keep-open]")) return;
+		this.closePanel();
+	}
+	onButtonKeydown(event) {
+		if (event.key === "Escape" && this.open()) {
+			event.preventDefault();
+			this.closePanel();
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (!this.open()) this.openPanel("first");
+			else this.focusables()[0]?.focus({ preventScroll: true });
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			if (!this.open()) this.openPanel("last");
+			else {
+				const all = this.focusables();
+				all[all.length - 1]?.focus({ preventScroll: true });
+			}
+		}
+	}
+	onPanelKeydown(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			this.closePanel();
+		} else if (event.key === "Tab") {
+			this.buttonRef().focus?.({ preventScroll: true });
+			this.closePanel(false);
+		}
+	}
+	onRootFocusOut(event) {
+		const next = event.relatedTarget;
+		if (next && this.rootRef().nativeElement.contains(next)) return;
+		this.closePanel(false);
+	}
+	onDocumentClick(event) {
+		if (!this.open()) return;
+		const t = event.target;
+		if (t && !this.rootRef().nativeElement.contains(t)) this.closePanel(false);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: MenuPicker,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.1",
+			type: MenuPicker,
+			isStandalone: true,
+			selector: "lily-menu-picker",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				open: {
+					classPropertyName: "open",
+					publicName: "open",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				closeOnSelect: {
+					classPropertyName: "closeOnSelect",
+					publicName: "closeOnSelect",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				className: {
+					classPropertyName: "className",
+					publicName: "className",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { open: "openChange" },
+			host: { listeners: { "document:click": "onDocumentClick($event)" } },
+			queries: [{
+				propertyName: "iconTemplate",
+				first: true,
+				predicate: MenuPickerIcon,
+				descendants: true,
+				read: TemplateRef,
+				isSignal: true
+			}],
+			viewQueries: [
+				{
+					propertyName: "rootRef",
+					first: true,
+					predicate: ["rootEl"],
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "buttonRef",
+					first: true,
+					predicate: ["buttonEl"],
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "panelRef",
+					first: true,
+					predicate: ["panelEl"],
+					descendants: true,
+					isSignal: true
+				}
+			],
+			exportAs: ["lilyMenuPicker"],
+			ngImport: i0,
+			template: `
+    <div
+      #rootEl
+      class="menu-picker {{ className() }}"
+      (focusout)="onRootFocusOut($event)"
+    >
+      <lily-icon-button
+        #buttonEl
+        [label]="label()"
+        baseClass="menu-picker-button"
+        [ariaExpanded]="open()"
+        [ariaControls]="panelId"
+        (click)="onButtonClick(); hoverButton.set(false)"
+        (mouseenter)="onTooltipButtonEnter()"
+        (mouseleave)="hoverButton.set(false)"
+        (focusin)="onTooltipButtonFocusIn()"
+        (focusout)="onTooltipButtonFocusOut()"
+        (keydown)="onButtonKeydown($event); onTooltipKeydown($event)"
+      >
+        @if (iconTemplate(); as tpl) {
+          <ng-container
+            [ngTemplateOutlet]="tpl"
+            [ngTemplateOutletContext]="childContext()"
+          />
+        } @else {
+          <svg
+            class="menu-picker-icon"
+            viewBox="0 0 16 16"
+            width="1.05rem"
+            height="1.05rem"
+            aria-hidden="true"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M1.5 3.5h13M1.5 8h13M1.5 12.5h13" />
+          </svg>
+        }
+      </lily-icon-button>
+
+      <!-- Purely visual: the same text is already the button's aria-label, so it is not wired
+           with aria-describedby (that would announce the name twice). -->
+      <div
+        class="menu-picker-tooltip"
+        role="tooltip"
+        [id]="tooltipId"
+        [attr.hidden]="tooltipVisible() ? null : ''"
+        (mouseenter)="hoverTooltip.set(true)"
+        (mouseleave)="hoverTooltip.set(false)"
+      >{{ label() }}</div>
+
+      <!-- A named group, not a menu: the content is the app's. The handlers are pure delegation
+           for whatever focusable content the app projects. -->
+      <div
+        #panelEl
+        class="menu-picker-panel"
+        [id]="panelId"
+        role="group"
+        [attr.aria-label]="label() || null"
+        [attr.hidden]="open() ? null : ''"
+        (keydown)="onPanelKeydown($event)"
+        (click)="onPanelClick($event)"
+      >
+        <ng-content />
+      </div>
+    </div>
+  `,
+			isInline: true,
+			dependencies: [{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}, {
+				kind: "component",
+				type: IconButton,
+				selector: "lily-icon-button",
+				inputs: [
+					"label",
+					"className",
+					"baseClass",
+					"ariaHaspopup",
+					"ariaExpanded",
+					"ariaControls",
+					"tabIndex",
+					"disabled"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: MenuPicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lily-menu-picker",
+			standalone: true,
+			exportAs: "lilyMenuPicker",
+			imports: [NgTemplateOutlet, IconButton],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "(document:click)": "onDocumentClick($event)" },
+			template: `
+    <div
+      #rootEl
+      class="menu-picker {{ className() }}"
+      (focusout)="onRootFocusOut($event)"
+    >
+      <lily-icon-button
+        #buttonEl
+        [label]="label()"
+        baseClass="menu-picker-button"
+        [ariaExpanded]="open()"
+        [ariaControls]="panelId"
+        (click)="onButtonClick(); hoverButton.set(false)"
+        (mouseenter)="onTooltipButtonEnter()"
+        (mouseleave)="hoverButton.set(false)"
+        (focusin)="onTooltipButtonFocusIn()"
+        (focusout)="onTooltipButtonFocusOut()"
+        (keydown)="onButtonKeydown($event); onTooltipKeydown($event)"
+      >
+        @if (iconTemplate(); as tpl) {
+          <ng-container
+            [ngTemplateOutlet]="tpl"
+            [ngTemplateOutletContext]="childContext()"
+          />
+        } @else {
+          <svg
+            class="menu-picker-icon"
+            viewBox="0 0 16 16"
+            width="1.05rem"
+            height="1.05rem"
+            aria-hidden="true"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M1.5 3.5h13M1.5 8h13M1.5 12.5h13" />
+          </svg>
+        }
+      </lily-icon-button>
+
+      <!-- Purely visual: the same text is already the button's aria-label, so it is not wired
+           with aria-describedby (that would announce the name twice). -->
+      <div
+        class="menu-picker-tooltip"
+        role="tooltip"
+        [id]="tooltipId"
+        [attr.hidden]="tooltipVisible() ? null : ''"
+        (mouseenter)="hoverTooltip.set(true)"
+        (mouseleave)="hoverTooltip.set(false)"
+      >{{ label() }}</div>
+
+      <!-- A named group, not a menu: the content is the app's. The handlers are pure delegation
+           for whatever focusable content the app projects. -->
+      <div
+        #panelEl
+        class="menu-picker-panel"
+        [id]="panelId"
+        role="group"
+        [attr.aria-label]="label() || null"
+        [attr.hidden]="open() ? null : ''"
+        (keydown)="onPanelKeydown($event)"
+        (click)="onPanelClick($event)"
+      >
+        <ng-content />
+      </div>
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		closeOnSelect: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnSelect",
+				required: false
+			}]
+		}],
+		className: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "className",
+				required: false
+			}]
+		}],
+		iconTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => MenuPickerIcon), {
+				read: TemplateRef,
+				isSignal: true
+			}]
+		}],
+		rootRef: [{
+			type: i0.ViewChild,
+			args: ["rootEl", { isSignal: true }]
+		}],
+		buttonRef: [{
+			type: i0.ViewChild,
+			args: ["buttonEl", { isSignal: true }]
+		}],
+		panelRef: [{
+			type: i0.ViewChild,
+			args: ["panelEl", { isSignal: true }]
+		}]
+	}
+});
+export { FOCUSABLE, MenuPicker, MenuPickerIcon, nextMenuPickerId };
+
+//# sourceMappingURL=lilydesignsystem-angular-menu-picker.mjs.map

package/dist/fesm2022/lilydesignsystem-angular-menu-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lilydesignsystem-angular-menu-picker.mjs","names":[],"sources":["../../menu-picker.component.ts"],"sourcesContent":["import { NgTemplateOutlet } from \"@angular/common\";\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ElementRef,\n  TemplateRef,\n  computed,\n  contentChild,\n  effect,\n  input,\n  model,\n  signal,\n  viewChild,\n} from \"@angular/core\";\n// Only the trigger button composes a headless primitive. The panel is a disclosure of whatever the\n// app projects into it — links, buttons, forms — so it carries no ARIA menu roles (role=\"menu\" would\n// promise a roving-focus menuitem widget that arbitrary content is not). See spec/index.md §3.\nimport { IconButton } from \"@lilydesignsystem/angular-headless\";\n\n/** Context passed to a custom icon `<ng-template>` (the button icon). */\nexport type ChildArgs = {\n  /** Is the panel open? */\n  open: boolean;\n};\n\nlet uid = 0;\n/** Stable per-instance id prefix; SSR-safe (no Math.random / Date.now). */\nexport function nextMenuPickerId(): string {\n  uid += 1;\n  return `menu-picker-${uid}`;\n}\n\n/** The selector for focusable things inside the panel. */\nexport const FOCUSABLE =\n  'a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Marker for the projected icon template. Gives consumers typed `let-` variables:\n *\n * ```html\n * <lily-menu-picker label=\"Menu\">\n *   <ng-template lilyMenuPickerIcon let-args>{{ args.open ? \"×\" : \"☰\" }}</ng-template>\n *   …the panel's content…\n * </lily-menu-picker>\n * ```\n */\n@Directive({\n  selector: \"ng-template[lilyMenuPickerIcon]\",\n  standalone: true,\n})\nexport class MenuPickerIcon {\n  static ngTemplateContextGuard(\n    _dir: MenuPickerIcon,\n    _ctx: unknown,\n  ): _ctx is ChildArgs & { $implicit: ChildArgs } {\n    return true;\n  }\n}\n\n/**\n * MenuPicker — a headless dropdown control.\n *\n * A single-icon button (a bundled hamburger SVG) that opens a disclosure panel holding whatever\n * the app projects into it. It applies nothing to the document and persists nothing. Give the\n * element a template reference (`#menu`) to call `menu.close()` from the projected content.\n * See `spec/index.md`.\n */\n@Component({\n  selector: \"lily-menu-picker\",\n  standalone: true,\n  exportAs: \"lilyMenuPicker\",\n  imports: [NgTemplateOutlet, IconButton],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    \"(document:click)\": \"onDocumentClick($event)\",\n  },\n  template: `\n    <div\n      #rootEl\n      class=\"menu-picker {{ className() }}\"\n      (focusout)=\"onRootFocusOut($event)\"\n    >\n      <lily-icon-button\n        #buttonEl\n        [label]=\"label()\"\n        baseClass=\"menu-picker-button\"\n        [ariaExpanded]=\"open()\"\n        [ariaControls]=\"panelId\"\n        (click)=\"onButtonClick(); hoverButton.set(false)\"\n        (mouseenter)=\"onTooltipButtonEnter()\"\n        (mouseleave)=\"hoverButton.set(false)\"\n        (focusin)=\"onTooltipButtonFocusIn()\"\n        (focusout)=\"onTooltipButtonFocusOut()\"\n        (keydown)=\"onButtonKeydown($event); onTooltipKeydown($event)\"\n      >\n        @if (iconTemplate(); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"childContext()\"\n          />\n        } @else {\n          <svg\n            class=\"menu-picker-icon\"\n            viewBox=\"0 0 16 16\"\n            width=\"1.05rem\"\n            height=\"1.05rem\"\n            aria-hidden=\"true\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.6\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M1.5 3.5h13M1.5 8h13M1.5 12.5h13\" />\n          </svg>\n        }\n      </lily-icon-button>\n\n      <!-- Purely visual: the same text is already the button's aria-label, so it is not wired\n           with aria-describedby (that would announce the name twice). -->\n      <div\n        class=\"menu-picker-tooltip\"\n        role=\"tooltip\"\n        [id]=\"tooltipId\"\n        [attr.hidden]=\"tooltipVisible() ? null : ''\"\n        (mouseenter)=\"hoverTooltip.set(true)\"\n        (mouseleave)=\"hoverTooltip.set(false)\"\n      >{{ label() }}</div>\n\n      <!-- A named group, not a menu: the content is the app's. The handlers are pure delegation\n           for whatever focusable content the app projects. -->\n      <div\n        #panelEl\n        class=\"menu-picker-panel\"\n        [id]=\"panelId\"\n        role=\"group\"\n        [attr.aria-label]=\"label() || null\"\n        [attr.hidden]=\"open() ? null : ''\"\n        (keydown)=\"onPanelKeydown($event)\"\n        (click)=\"onPanelClick($event)\"\n      >\n        <ng-content />\n      </div>\n    </div>\n  `,\n})\nexport class MenuPicker {\n  /** Accessible name for the button, the panel and the tooltip. */\n  readonly label = input.required<string>();\n  /** Is the panel open? Two-way bindable: `[(open)]`. */\n  readonly open = model<boolean>(false);\n  /**\n   * Close the panel when a link, button or `[role=\"menuitem\"]` inside it is activated. Add\n   * `data-menu-picker-keep-open` to an element (or an ancestor) to opt it out. Default `true`.\n   */\n  readonly closeOnSelect = input<boolean>(true);\n  /** Extra CSS class on the root div. */\n  readonly className = input<string>(\"\");\n\n  /** Projected icon template; replaces the default icon when supplied. */\n  protected readonly iconTemplate = contentChild(MenuPickerIcon, { read: TemplateRef });\n\n  private readonly rootRef =\n    viewChild.required<ElementRef<HTMLDivElement>>(\"rootEl\");\n  // A template-ref-variable on a component tag resolves to the component INSTANCE, which is what\n  // is needed to call the headless component's own public `focus()` method.\n  private readonly buttonRef = viewChild.required<IconButton>(\"buttonEl\");\n  private readonly panelRef =\n    viewChild.required<ElementRef<HTMLDivElement>>(\"panelEl\");\n\n  private readonly baseId = nextMenuPickerId();\n  protected readonly panelId = `${this.baseId}-panel`;\n\n  // Tooltip: shown while the pointer is over the button or the tooltip itself (hoverable, WCAG\n  // 1.4.13) or while the button has keyboard focus; Escape dismisses it without moving focus;\n  // never shown while the popup is open, since the popup then explains the control.\n  protected readonly tooltipId = `${this.baseId}-tooltip`;\n  protected readonly hoverButton = signal(false);\n  protected readonly hoverTooltip = signal(false);\n  protected readonly focusButton = signal(false);\n  protected readonly dismissed = signal(false);\n  protected readonly tooltipVisible = computed(\n    () =>\n      !this.open() &&\n      !this.dismissed() &&\n      (this.hoverButton() || this.hoverTooltip() || this.focusButton()),\n  );\n\n  protected onTooltipButtonEnter(): void {\n    this.hoverButton.set(true);\n    this.dismissed.set(false);\n  }\n\n  protected onTooltipButtonFocusIn(): void {\n    // Keyboard focus only: a mouse click also focuses the button in Chromium, and the tooltip\n    // should not stick after a click.\n    try {\n      this.focusButton.set(\n        this.buttonRef().element?.matches(\":focus-visible\") ?? false,\n      );\n    } catch {\n      this.focusButton.set(true); // engine without :focus-visible — err towards showing\n    }\n  }\n\n  protected onTooltipButtonFocusOut(): void {\n    this.focusButton.set(false);\n    this.dismissed.set(false);\n  }\n\n  protected onTooltipKeydown(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.tooltipVisible()) this.dismissed.set(true);\n  }\n\n  // WCAG 1.4.13 \"dismissable\": while the tooltip is visible, Escape works wherever focus is. The\n  // listener exists only while visible; the effect cleanup removes it on hide and on destroy.\n  private readonly tooltipEscapeListener = effect((onCleanup) => {\n    if (!this.tooltipVisible() || typeof document === \"undefined\") return;\n    const onKey = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") this.dismissed.set(true);\n    };\n    document.addEventListener(\"keydown\", onKey);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKey));\n  });\n\n  protected readonly childContext = computed(() => {\n    const args: ChildArgs = { open: this.open() };\n    return { $implicit: args, ...args };\n  });\n\n  private focusables(): HTMLElement[] {\n    return Array.from(\n      this.panelRef().nativeElement.querySelectorAll<HTMLElement>(FOCUSABLE),\n    );\n  }\n\n  // ---------------------------------------------------------------\n  // Open / close\n  // ---------------------------------------------------------------\n\n  /** Open the panel, optionally focusing its first or last focusable element. */\n  openPanel(focus: \"none\" | \"first\" | \"last\" = \"none\"): void {\n    this.open.set(true);\n    if (focus === \"none\") return;\n    // Deferred so the `hidden` attribute is gone before focus is moved.\n    queueMicrotask(() => {\n      const all = this.focusables();\n      (focus === \"last\" ? all[all.length - 1] : all[0])?.focus({ preventScroll: true });\n    });\n  }\n\n  /** Close the panel; `refocus` returns focus to the trigger. */\n  closePanel(refocus = true): void {\n    if (!this.open()) return;\n    this.open.set(false);\n    if (refocus) queueMicrotask(() => this.buttonRef().focus({ preventScroll: true }));\n  }\n\n  /** Close the panel and return focus to the button. For the projected content to call. */\n  close(): void {\n    this.closePanel();\n  }\n\n  protected onButtonClick(): void {\n    if (this.open()) this.closePanel();\n    else this.openPanel();\n  }\n\n  protected onPanelClick(event: MouseEvent): void {\n    if (!this.closeOnSelect()) return;\n    const target = event.target as Element | null;\n    const hit = target?.closest?.('a[href], button, [role=\"menuitem\"]');\n    if (!hit || !this.panelRef().nativeElement.contains(hit)) return;\n    if (hit.closest(\"[data-menu-picker-keep-open]\")) return;\n    this.closePanel();\n  }\n\n  // ---------------------------------------------------------------\n  // Keyboard\n  // ---------------------------------------------------------------\n\n  protected onButtonKeydown(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open()) {\n      event.preventDefault();\n      this.closePanel();\n    } else if (event.key === \"ArrowDown\") {\n      // Enter and Space already produce a click; the arrows open and move into the panel.\n      event.preventDefault();\n      if (!this.open()) this.openPanel(\"first\");\n      else this.focusables()[0]?.focus({ preventScroll: true });\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!this.open()) this.openPanel(\"last\");\n      else {\n        const all = this.focusables();\n        all[all.length - 1]?.focus({ preventScroll: true });\n      }\n    }\n  }\n\n  protected onPanelKeydown(event: KeyboardEvent): void {\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      this.closePanel();\n    } else if (event.key === \"Tab\") {\n      // Focus goes to the button FIRST, without cancelling the key, so the browser continues\n      // from the picker's position rather than from <body>.\n      this.buttonRef().focus?.({ preventScroll: true });\n      this.closePanel(false);\n    }\n  }\n\n  protected onRootFocusOut(event: FocusEvent): void {\n    const next = event.relatedTarget as Node | null;\n    if (next && this.rootRef().nativeElement.contains(next)) return;\n    this.closePanel(false);\n  }\n\n  protected onDocumentClick(event: Event): void {\n    if (!this.open()) return;\n    const t = event.target as Node | null;\n    if (t && !this.rootRef().nativeElement.contains(t)) this.closePanel(false);\n  }\n}\n"],"mappings":"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"}