@lilydesignsystem/angular-menu-picker 0.1.0 → 0.1.1

package/package.json

@@ -1,22 +1,19 @@
 {
   "name": "@lilydesignsystem/angular-menu-picker",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "engines": {
     "node": "=26"
   },
   "description": "Lily Design System Angular menu picker: an icon button (a hamburger icon) opening a dropdown of whatever the app provides. Headless, SSR-safe, no CSS.",
   "dependencies": {
-    "@lilydesignsystem/angular-headless": "^0.2.0"
+    "@lilydesignsystem/angular-headless": "^0.2.0",
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
     "@angular/core": ">=20.0.0 <23.0.0",
     "@angular/common": ">=20.0.0 <23.0.0"
   },
   "sideEffects": false,
-  "scripts": {
-    "build": "cd .. && pnpm build",
-    "prepublishOnly": "cd .. && pnpm build"
-  },
   "keywords": [
     "lily",
     "design",
@@ -37,5 +34,17 @@
   "homepage": "https://lilydesignsystem.com/",
   "bugs": {
     "url": "https://github.com/LilyDesignSystem/lily-design-system/issues"
-  }
-}
+  },
+  "module": "fesm2022/lilydesignsystem-angular-menu-picker.mjs",
+  "typings": "types/lilydesignsystem-angular-menu-picker.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/lilydesignsystem-angular-menu-picker.d.ts",
+      "default": "./fesm2022/lilydesignsystem-angular-menu-picker.mjs"
+    }
+  },
+  "type": "module"
+}

package/AGENTS.md

@@ -1,49 +0,0 @@
-# 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

@@ -1,12 +0,0 @@
-# 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/package.json

@@ -1,50 +0,0 @@
-{
-  "name": "@lilydesignsystem/angular-menu-picker",
-  "version": "0.1.0",
-  "engines": {
-    "node": "=26"
-  },
-  "description": "Lily Design System Angular menu picker: an icon button (a hamburger icon) opening a dropdown of whatever the app provides. Headless, SSR-safe, no CSS.",
-  "dependencies": {
-    "@lilydesignsystem/angular-headless": "^0.2.0",
-    "tslib": "^2.3.0"
-  },
-  "peerDependencies": {
-    "@angular/core": ">=20.0.0 <23.0.0",
-    "@angular/common": ">=20.0.0 <23.0.0"
-  },
-  "sideEffects": false,
-  "keywords": [
-    "lily",
-    "design",
-    "system",
-    "angular",
-    "menu",
-    "hamburger",
-    "dropdown",
-    "picker"
-  ],
-  "author": "Joel Parker Henderson <joel@joelparkerhenderson.com>",
-  "license": "MIT OR Apache-2.0 OR GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/LilyDesignSystem/lily-design-system-angular-helpers.git",
-    "directory": "lily-design-system-angular-menu-picker"
-  },
-  "homepage": "https://lilydesignsystem.com/",
-  "bugs": {
-    "url": "https://github.com/LilyDesignSystem/lily-design-system/issues"
-  },
-  "module": "fesm2022/lilydesignsystem-angular-menu-picker.mjs",
-  "typings": "types/lilydesignsystem-angular-menu-picker.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/lilydesignsystem-angular-menu-picker.d.ts",
-      "default": "./fesm2022/lilydesignsystem-angular-menu-picker.mjs"
-    }
-  },
-  "type": "module"
-}

package/docs/accessibility.md

@@ -1,31 +0,0 @@
-# Accessibility
-
-WCAG 2.2 AAA is the target. This document states what the control does well and what it costs.
-
-## What it does
-
-- The icon is `aria-hidden="true"`; the accessible name is the consumer-supplied `label`, so it localises with your copy.
-- `aria-expanded` on the trigger reflects the panel state, and `aria-controls` points at it. The panel is a `role="group"`
-  named with the same `label`.
-- **It is a disclosure, not an ARIA menu.** Arbitrary content (links, buttons, inputs, headings) inside `role="menu"` would
-  promise arrow-key `menuitem` behaviour it does not have, and would strip the native semantics of links. Native semantics
-  are kept; the APG's disclosure pattern is the model.
-- Keyboard: `Enter`/`Space` toggle; `ArrowDown`/`ArrowUp` on the button open and move to the panel's first/last focusable
-  element; `Escape` closes and returns focus to the button; `Tab` closes — focus lands on the button first so the default Tab
-  proceeds from the picker's position instead of restarting from `<body>`.
-- A click does not move focus into the panel (a disclosure must not steal focus); keyboard users reach it with the arrows or
-  Tab.
-- Clicking outside, or focus leaving the picker, closes the panel.
-- The tooltip is hoverable and dismissable (WCAG 1.4.13): visible on pointer hover or keyboard focus, `Escape` hides it
-  wherever focus is, and it is never shown while the panel is open.
-
-## What it costs
-
-**The name rests entirely on `label`.** An icon-only control has no visible text fallback. The hamburger is widely understood,
-but if `label` is wrong, missing or untranslated there is nothing else to go on. Choose a label that says what the panel is
-("Menu", "More"), not what the icon is.
-
-**The content's accessibility is yours.** The panel contains whatever you put in it; give links real text, inputs real labels
-and headings a sensible order.
-
-**It hides things behind a click.** For primary site navigation, use a visible `nav` (see `BreadcrumbNav`, `SectionNav`).

package/examples/README.md

@@ -1,9 +0,0 @@
-# Examples — MenuPicker (Angular)
-
-| File | Shows |
-| ---- | ----- |
-| [basic.component.ts](./basic.component.ts) | A panel of links and a button: Home, About Us, Sign out |
-| [form.component.ts](./form.component.ts) | A search form in the panel, closing it through `exportAs` |
-| [custom-icon.component.ts](./custom-icon.component.ts) | Replacing the hamburger through `lilyMenuPickerIcon` |
-
-Every user-facing string is yours — the package ships no default content.

package/examples/basic.component.ts

@@ -1,19 +0,0 @@
-import { Component } from "@angular/core";
-import { MenuPicker } from "../menu-picker.component";
-
-// The app provides the panel's content: the package ships no links and no English.
-@Component({
-  selector: "example-basic",
-  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">Sign out</button></li>
-      </ul>
-    </lily-menu-picker>
-  `,
-})
-export class Basic {}

package/examples/custom-icon.component.ts

@@ -1,17 +0,0 @@
-import { Component } from "@angular/core";
-import { MenuPicker, MenuPickerIcon } from "../menu-picker.component";
-
-// A projected <ng-template lilyMenuPickerIcon> replaces the hamburger inside the button, never the
-// panel's content.
-@Component({
-  selector: "example-custom-icon",
-  standalone: true,
-  imports: [MenuPicker, MenuPickerIcon],
-  template: `
-    <lily-menu-picker label="More">
-      <ng-template lilyMenuPickerIcon let-args><span aria-hidden="true">{{ args.open ? "×" : "⋯" }}</span></ng-template>
-      <a href="/help/">Help</a>
-    </lily-menu-picker>
-  `,
-})
-export class CustomIcon {}

package/examples/form.component.ts

@@ -1,19 +0,0 @@
-import { Component } from "@angular/core";
-import { MenuPicker } from "../menu-picker.component";
-
-// A form in the panel. `#menu="lilyMenuPicker"` gives the content a way to close the panel;
-// typing in the input does not close it (it is not a link or button).
-@Component({
-  selector: "example-form",
-  standalone: true,
-  imports: [MenuPicker],
-  template: `
-    <lily-menu-picker #menu="lilyMenuPicker" label="Menu">
-      <form (submit)="$event.preventDefault(); menu.close()">
-        <input type="search" aria-label="Search" />
-        <button type="submit" data-menu-picker-keep-open>Go</button>
-      </form>
-    </lily-menu-picker>
-  `,
-})
-export class Form {}

package/index.md

@@ -1,63 +0,0 @@
-# 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/index.ts

@@ -1,7 +0,0 @@
-export {
-  MenuPicker,
-  MenuPickerIcon,
-  nextMenuPickerId,
-  FOCUSABLE,
-} from "./menu-picker.component";
-export type { ChildArgs } from "./menu-picker.component";

package/menu-picker.component.spec.ts

@@ -1,276 +0,0 @@
-import { Component, viewChild } from "@angular/core";
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-
-import {
-  MenuPicker,
-  MenuPickerIcon,
-  nextMenuPickerId,
-} from "./menu-picker.component";
-
-const flush = () => new Promise<void>((r) => setTimeout(r, 0));
-
-@Component({
-  standalone: true,
-  imports: [MenuPicker, MenuPickerIcon],
-  template: `
-    <lily-menu-picker #menu label="Menu" [closeOnSelect]="closeOnSelect" [(open)]="isOpen" className="{{ extra }}" [attr.data-x]="'1'">
-      <a href="/a/">Alpha</a>
-      <button type="button" class="b">Beta</button>
-      <div data-menu-picker-keep-open><button type="button" class="keep">Keep</button></div>
-      <button type="button" class="closer" (click)="$event.stopPropagation(); menu.close()">Closer</button>
-    </lily-menu-picker>
-  `,
-})
-class Host {
-  closeOnSelect = true;
-  isOpen = false;
-  extra = "";
-  picker = viewChild.required(MenuPicker);
-}
-
-@Component({
-  standalone: true,
-  imports: [MenuPicker, MenuPickerIcon],
-  template: `<lily-menu-picker label="Menu"><ng-template lilyMenuPickerIcon let-args><span class="mine">{{ args.open ? "-" : "+" }}</span></ng-template></lily-menu-picker>`,
-})
-class IconHost {}
-
-@Component({
-  standalone: true,
-  imports: [MenuPicker],
-  template: `<lily-menu-picker label="Menu" />`,
-})
-class EmptyHost {}
-
-let fixtures: ComponentFixture<unknown>[] = [];
-
-function mount(patch: Partial<Host> = {}): ComponentFixture<Host> {
-  const fixture = TestBed.createComponent(Host);
-  Object.assign(fixture.componentInstance, patch);
-  fixture.detectChanges();
-  fixtures.push(fixture);
-  return fixture;
-}
-
-const q = <T extends Element>(f: ComponentFixture<unknown>, sel: string) =>
-  f.nativeElement.querySelector(sel) as T;
-const trigger = (f: ComponentFixture<unknown>) => q<HTMLButtonElement>(f, ".menu-picker-button");
-const panel = (f: ComponentFixture<unknown>) => q<HTMLDivElement>(f, ".menu-picker-panel");
-
-async function press(f: ComponentFixture<unknown>, target: HTMLElement, key: string): Promise<void> {
-  target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
-  f.detectChanges();
-  await flush();
-  f.detectChanges();
-}
-
-async function click(f: ComponentFixture<unknown>, target: HTMLElement): Promise<void> {
-  target.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
-  f.detectChanges();
-  await flush();
-  f.detectChanges();
-}
-
-afterEach(() => {
-  for (const f of fixtures) f.destroy();
-  fixtures = [];
-});
-
-describe("MenuPicker", () => {
-  test("7.1 renders the root, button, tooltip and a hidden panel", () => {
-    const f = mount();
-    expect(q(f, "div.menu-picker")).toBeTruthy();
-    expect(trigger(f)).toBeTruthy();
-    expect(q(f, ".menu-picker-tooltip")).toBeTruthy();
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.2 the button is named by label with aria-expanded and aria-controls", () => {
-    const f = mount();
-    expect(trigger(f).getAttribute("aria-label")).toBe("Menu");
-    expect(trigger(f).getAttribute("aria-expanded")).toBe("false");
-    expect(trigger(f).getAttribute("aria-controls")).toBe(panel(f).id);
-  });
-
-  test("7.3 the default icon is an aria-hidden svg; a projected template replaces it", () => {
-    const f = mount();
-    const svg = q<SVGElement>(f, "svg.menu-picker-icon");
-    expect(svg.getAttribute("aria-hidden")).toBe("true");
-    expect(svg.getAttribute("viewBox")).toBe("0 0 16 16");
-    const hf = TestBed.createComponent(IconHost);
-    hf.detectChanges();
-    fixtures.push(hf);
-    expect(hf.nativeElement.querySelector(".mine")).toBeTruthy();
-    expect(hf.nativeElement.querySelector("svg.menu-picker-icon")).toBeNull();
-  });
-
-  test("7.4 the panel is a role=group named with label", () => {
-    const f = mount();
-    expect(panel(f).getAttribute("role")).toBe("group");
-    expect(panel(f).getAttribute("aria-label")).toBe("Menu");
-  });
-
-  test("7.5 the app's content renders inside; with none the panel is empty", () => {
-    const f = mount();
-    expect(panel(f).querySelector("a")?.textContent).toBe("Alpha");
-    const ef = TestBed.createComponent(EmptyHost);
-    ef.detectChanges();
-    fixtures.push(ef);
-    expect(q<HTMLElement>(ef, ".menu-picker-panel").textContent?.trim()).toBe("");
-  });
-
-  test("7.6 click opens and leaves focus on the button", async () => {
-    const f = mount();
-    trigger(f).focus();
-    await click(f, trigger(f));
-    expect(panel(f).hasAttribute("hidden")).toBe(false);
-    expect(trigger(f).getAttribute("aria-expanded")).toBe("true");
-    expect(document.activeElement).toBe(trigger(f));
-  });
-
-  test("7.7 a second click closes", async () => {
-    const f = mount();
-    await click(f, trigger(f));
-    await click(f, trigger(f));
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.8 ArrowDown opens at the first focusable, ArrowUp at the last", async () => {
-    const f = mount();
-    await press(f, trigger(f), "ArrowDown");
-    expect(panel(f).hasAttribute("hidden")).toBe(false);
-    expect(document.activeElement).toBe(panel(f).querySelector("a"));
-    const g = mount();
-    await press(g, trigger(g), "ArrowUp");
-    expect(document.activeElement).toBe(panel(g).querySelector(".closer"));
-  });
-
-  test("7.9 Escape closes and returns focus to the button", async () => {
-    const f = mount();
-    await press(f, trigger(f), "ArrowDown");
-    await press(f, panel(f), "Escape");
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-    expect(document.activeElement).toBe(trigger(f));
-  });
-
-  test("7.10 Tab closes without sending focus to the document top", async () => {
-    const f = mount();
-    await press(f, trigger(f), "ArrowDown");
-    await press(f, panel(f), "Tab");
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-    expect(document.activeElement).toBe(trigger(f));
-  });
-
-  test("7.11 clicking outside closes", async () => {
-    const f = mount();
-    await click(f, trigger(f));
-    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    f.detectChanges();
-    await flush();
-    f.detectChanges();
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.12 focus leaving the picker closes", async () => {
-    const f = mount();
-    await click(f, trigger(f));
-    const outside = document.createElement("button");
-    document.body.appendChild(outside);
-    q(f, "div.menu-picker").dispatchEvent(new FocusEvent("focusout", { bubbles: true, relatedTarget: outside }));
-    f.detectChanges();
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-    outside.remove();
-  });
-
-  test("7.13 activating a link or button closes; keep-open and closeOnSelect=false do not", async () => {
-    const f = mount();
-    await click(f, trigger(f));
-    panel(f).querySelector("a")!.addEventListener("click", (e) => e.preventDefault());
-    await click(f, panel(f).querySelector("a")!);
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-    expect(document.activeElement).toBe(trigger(f));
-    await click(f, trigger(f));
-    await click(f, panel(f).querySelector(".b")!);
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-    await click(f, trigger(f));
-    await click(f, panel(f).querySelector(".keep")!);
-    expect(panel(f).hasAttribute("hidden")).toBe(false);
-    const g = mount({ closeOnSelect: false });
-    await click(g, trigger(g));
-    await click(g, panel(g).querySelector(".b")!);
-    expect(panel(g).hasAttribute("hidden")).toBe(false);
-  });
-
-  test("7.14 the content can call close()", async () => {
-    const f = mount({ closeOnSelect: false });
-    await click(f, trigger(f));
-    await click(f, panel(f).querySelector(".closer")!);
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.15 [(open)] updates once per actual change", async () => {
-    const f = mount();
-    await click(f, trigger(f));
-    expect(f.componentInstance.isOpen).toBe(true);
-    await click(f, trigger(f));
-    expect(f.componentInstance.isOpen).toBe(false);
-    const g = mount({ isOpen: true });
-    expect(panel(g).hasAttribute("hidden")).toBe(false);
-  });
-
-  test("7.16 the tooltip is a hidden role=tooltip holding the label", () => {
-    const f = mount();
-    const tip = q<HTMLElement>(f, ".menu-picker-tooltip");
-    expect(tip.getAttribute("role")).toBe("tooltip");
-    expect(tip.textContent).toBe("Menu");
-    expect(tip.hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.17 the tooltip shows on hover, hides on Escape, and never shows while open", async () => {
-    const f = mount();
-    const tip = q<HTMLElement>(f, ".menu-picker-tooltip");
-    const host = q<HTMLElement>(f, "lily-icon-button");
-    host.dispatchEvent(new MouseEvent("mouseenter"));
-    f.detectChanges();
-    expect(tip.hasAttribute("hidden")).toBe(false);
-    await flush();
-    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-    f.detectChanges();
-    expect(tip.hasAttribute("hidden")).toBe(true);
-    host.dispatchEvent(new MouseEvent("mouseleave"));
-    host.dispatchEvent(new MouseEvent("mouseenter"));
-    f.detectChanges();
-    expect(tip.hasAttribute("hidden")).toBe(false);
-    await click(f, trigger(f));
-    expect(tip.hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.18 the tooltip is not wired with aria-describedby", () => {
-    const f = mount();
-    expect(trigger(f).hasAttribute("aria-describedby")).toBe(false);
-  });
-
-  test("7.19 className is appended to the root", () => {
-    const f = mount({ extra: "extra" });
-    expect(q(f, "div.menu-picker").classList.contains("extra")).toBe(true);
-  });
-
-  test("7.20 two instances get distinct ids", () => {
-    expect(nextMenuPickerId()).not.toBe(nextMenuPickerId());
-    const a = mount();
-    const b = mount();
-    expect(panel(a).id).not.toBe(panel(b).id);
-  });
-
-  test("7.21 the source ships no stylesheet, inline style or English default", () => {
-    const src = readFileSync(resolve(__dirname, "menu-picker.component.ts"), "utf8")
-      .replace(/<!--[\s\S]*?-->/g, "")
-      .replace(/\/\*[\s\S]*?\*\//g, "")
-      .replace(/^\s*\/\/.*$/gm, "");
-    expect(src).not.toMatch(/styles:|\sstyle=/);
-    expect(src).not.toMatch(/(label|href):\s*["'`]/);
-  });
-});

package/menu-picker.component.ts

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

package/ng-package.json

@@ -1,10 +0,0 @@
-{
-  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist",
-  "lib": {
-    "entryFile": "index.ts"
-  },
-  "allowedNonPeerDependencies": [
-    "@lilydesignsystem/angular-headless"
-  ]
-}

package/spec/index.md

@@ -1,124 +0,0 @@
-# MenuPicker (Angular) — spec
-
-**Package:** `@lilydesignsystem/angular-menu-picker` · **Canonical contract:** this file; the other seven catalogs port it.
-Topic summary: [spec/menu-picker](../../../spec/menu-picker/index.md).
-
-## 1. Goal
-
-An icon button — a typical **hamburger** (three horizontal lines) — that opens a dropdown panel holding **whatever the app
-provides**: links, buttons, a search form, a small list of settings. It owns the whole interaction: open/close, focus,
-keyboard, tooltip. It owns no content and no words: the panel's content and every accessible name come from the consumer.
-
-## 2. Non-goals
-
-- No default content, no English text, no routing, no data.
-- Not an ARIA menu: the panel is a named group of arbitrary content, so it has no `role="menu"` and no roving focus.
-- Not a site navigation bar (use `BreadcrumbNav`, `SectionNav`) and not a modal dialog (use `Dialog`).
-- No persistence.
-
-## 3. Architectural decisions
-
-- **A disclosure of arbitrary content, not a menu.** `role="menu"` promises a roving-focus `menuitem` widget; arbitrary app
-  content (links, inputs, headings) is not that, and the WAI-ARIA APG's disclosure pattern fits it exactly. The trigger carries
-  `aria-expanded` and `aria-controls`; the panel is a `role="group"` named by `label`.
-- **Only the trigger composes headless** (`IconButton`); the panel is self-built, as in `link-picker` and `share-picker`.
-- **The app provides the panel's content** through `children` (a template, slot, `ChildContent`, children …). It receives
-  `{ open, close }` so its own controls can close the panel.
-- **Closes on select by default.** Activating a link, a button or a `[role="menuitem"]` inside the panel closes it and returns
-  focus to the button. `closeOnSelect={false}` turns that off for the whole panel; an ancestor with
-  `data-menu-picker-keep-open` opts one element (or a region, e.g. a form) out.
-- **Focus is not moved on a click.** A disclosure must not steal focus on open; `ArrowDown`/`ArrowUp` on the button move into
-  the panel's first/last focusable element for keyboard users.
-
-## 4. Public API
-
-### 4.1 Props
-
-| Prop | Type | Required | Notes |
-| --- | --- | --- | --- |
-| `label` | `string` | yes | Accessible name of the button **and** the panel; also the tooltip text. |
-| `[(open)]` | `boolean` (model) | no | Is the panel open? Default `false`. |
-| `closeOnSelect` | `boolean` | no | Close when a link/button/menuitem inside is activated. Default `true`. |
-| `(openChange)` | output `boolean` | no | Emitted whenever the open state changes (the `[(open)]` update). |
-| projected content | `<ng-content>` | no | The panel's content. Call `menu.close()` on a `#menu="lilyMenuPicker"` reference to close it. |
-| `<ng-template lilyMenuPickerIcon>` | context `{ open }` | no | Replaces the hamburger **icon** inside the button. |
-| `className` | `string` | no | Appended to the root class. |
-| `...rest` | | | Spread on the root. |
-
-### 4.2 DOM contract
-
-```html
-<div class="menu-picker {class}">
-  <button class="menu-picker-button" type="button" aria-label="{label}" aria-expanded="false" aria-controls="{id}-panel">
-    <svg class="menu-picker-icon" aria-hidden="true" viewBox="0 0 16 16" …three lines…/>
-  </button>
-  <div class="menu-picker-tooltip" role="tooltip" id="{id}-tooltip" hidden>{label}</div>
-  <div class="menu-picker-panel" id="{id}-panel" role="group" aria-label="{label}" hidden>
-    …whatever the app provides…
-  </div>
-</div>
-```
-
-### 4.3 Re-exports
-
-`MenuPicker`, `MenuPickerIcon`, `nextMenuPickerId`, `FOCUSABLE`, type `ChildArgs`.
-
-**Differences from the Svelte contract (idiom, not behaviour).** Angular renders the same DOM in a `<lily-menu-picker>` element; the bindable `open` is a `model()` (`[(open)]`), the content is projected, the icon override is a projected `<ng-template lilyMenuPickerIcon>`, `class` is the `className` input, `close()` is a public method reachable through `exportAs: "lilyMenuPicker"`, and ids come from a module counter.
-
-## 5. Behaviour
-
-### 5.1 Activation
-
-Click toggles the panel; focus stays on the button. Activating a link, button or menuitem inside the panel closes it (see
-§3) and returns focus to the button.
-
-### 5.2 Keyboard
-
-- Button: `Enter`/`Space` toggle; `ArrowDown` opens and focuses the panel's first focusable element (or moves into an open
-  panel); `ArrowUp` focuses the last; `Escape` closes an open panel.
-- Panel: `Escape` closes and returns focus to the button; `Tab` closes and moves on (focus goes to the button first so the
-  browser continues from the picker's position). Everything else is the app's content's own behaviour.
-- Clicking outside, or focus leaving the picker, closes the panel.
-
-### 5.3 Tooltip
-
-`<div class="menu-picker-tooltip" role="tooltip" hidden>` holds the button's `label`. Visible while the pointer is over the
-button or the tooltip (hoverable) or while the button has keyboard focus (`:focus-visible`); `Escape` dismisses it wherever
-focus is; never shown while the panel is open. Not linked with `aria-describedby` (it duplicates the name).
-
-## 6. Accessibility
-
-WCAG 2.2 AAA target. The button has an accessible name and `aria-expanded`/`aria-controls`; the icon is `aria-hidden`; the
-panel is a named group; focus stays visible; no motion. The content's own accessibility is the app's.
-
-## 7. Testing acceptance criteria
-
-1. Renders `div.menu-picker` containing `button.menu-picker-button`, a tooltip and a hidden `div.menu-picker-panel`.
-2. The button's accessible name is `label`; it has `aria-expanded="false"` and `aria-controls` pointing at the panel.
-3. The default icon is an `aria-hidden` SVG with class `menu-picker-icon`; `icon` replaces it.
-4. The panel is a `role="group"` named with `label`.
-5. The app's content renders inside the panel; with no content the panel is empty (nothing is invented).
-6. Click opens: panel visible, `aria-expanded="true"`, focus stays on the button.
-7. Click again closes.
-8. `ArrowDown` on the button opens and focuses the first focusable element in the panel; `ArrowUp` focuses the last.
-9. `Escape` closes and returns focus to the button.
-10. `Tab` closes without teleporting focus.
-11. Clicking outside closes.
-12. Focus moving out of the picker closes.
-13. Activating a link or button inside closes the panel and focuses the button; an element inside
-    `data-menu-picker-keep-open` does not close it; `closeOnSelect=false` never closes on select.
-14. The content receives `close()`, which closes the panel.
-15. `open` is bindable and `onOpenChange` fires once per actual change.
-16. The tooltip exists with `role="tooltip"`, holds `label`, and is hidden at rest.
-17. The tooltip shows on hover, hides on `Escape`, and never shows while the panel is open.
-18. The tooltip is not referenced by `aria-describedby`.
-19. `class` is appended to the root; rest props are spread on the root.
-20. Two instances get distinct ids.
-21. The package source contains no stylesheet, no inline `style` and no English default text.
-
-## 8. Tracking
-
-- Package: `@lilydesignsystem/angular-menu-picker`
-- Version: 0.1.0 (new, 2026-10-08)
-- Framework: Angular `>=20 <23` (signals, standalone, OnPush)
-- Test runner: vitest + TestBed

package/tsconfig.lib.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "types": []
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  },
-  "exclude": ["**/*.spec.ts", "node_modules", "dist"]
-}