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

package/dist/package.json

@@ -0,0 +1,50 @@
+{
+  "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/dist/types/lilydesignsystem-angular-menu-picker.d.ts

@@ -0,0 +1,112 @@
+import * as i0 from "@angular/core";
+import { TemplateRef } from "@angular/core";
+/** Context passed to a custom icon `<ng-template>` (the button icon). */
+type ChildArgs = {
+  /** Is the panel open? */
+  open: boolean;
+};
+/** Stable per-instance id prefix; SSR-safe (no Math.random / Date.now). */
+export declare function nextMenuPickerId(): string;
+/** The selector for focusable things inside the panel. */
+export declare 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>
+ * ```
+ */
+export declare class MenuPickerIcon {
+  static ngTemplateContextGuard(_dir: MenuPickerIcon, _ctx: unknown): _ctx is ChildArgs & {
+    $implicit: ChildArgs;
+  };
+  static ɵfac: i0.ɵɵFactoryDeclaration<MenuPickerIcon, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<MenuPickerIcon, "ng-template[lilyMenuPickerIcon]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * 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`.
+ */
+export declare class MenuPicker {
+  /** Accessible name for the button, the panel and the tooltip. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Is the panel open? Two-way bindable: `[(open)]`. */
+  readonly open: import("@angular/core").ModelSignal<boolean>;
+  /**
+   * 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: import("@angular/core").InputSignal<boolean>;
+  /** Extra CSS class on the root div. */
+  readonly className: import("@angular/core").InputSignal<string>;
+  /** Projected icon template; replaces the default icon when supplied. */
+  protected readonly iconTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+  private readonly rootRef;
+  private readonly buttonRef;
+  private readonly panelRef;
+  private readonly baseId;
+  protected readonly panelId: string;
+  protected readonly tooltipId: string;
+  protected readonly hoverButton: import("@angular/core").WritableSignal<boolean>;
+  protected readonly hoverTooltip: import("@angular/core").WritableSignal<boolean>;
+  protected readonly focusButton: import("@angular/core").WritableSignal<boolean>;
+  protected readonly dismissed: import("@angular/core").WritableSignal<boolean>;
+  protected readonly tooltipVisible: import("@angular/core").Signal<boolean>;
+  protected onTooltipButtonEnter(): void;
+  protected onTooltipButtonFocusIn(): void;
+  protected onTooltipButtonFocusOut(): void;
+  protected onTooltipKeydown(event: KeyboardEvent): void;
+  private readonly tooltipEscapeListener;
+  protected readonly childContext: import("@angular/core").Signal<{
+    /** Is the panel open? */
+    open: boolean;
+    $implicit: ChildArgs;
+  }>;
+  private focusables;
+  /** Open the panel, optionally focusing its first or last focusable element. */
+  openPanel(focus?: "none" | "first" | "last"): void;
+  /** Close the panel; `refocus` returns focus to the trigger. */
+  closePanel(refocus?: boolean): void;
+  /** Close the panel and return focus to the button. For the projected content to call. */
+  close(): void;
+  protected onButtonClick(): void;
+  protected onPanelClick(event: MouseEvent): void;
+  protected onButtonKeydown(event: KeyboardEvent): void;
+  protected onPanelKeydown(event: KeyboardEvent): void;
+  protected onRootFocusOut(event: FocusEvent): void;
+  protected onDocumentClick(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<MenuPicker, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<MenuPicker, "lily-menu-picker", ["lilyMenuPicker"], {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeOnSelect": {
+      "alias": "closeOnSelect";
+      "required": false;
+      "isSignal": true;
+    };
+    "className": {
+      "alias": "className";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "open": "openChange";
+  }, ["iconTemplate"], ["*"], true, never>;
+}
+export type { ChildArgs };
+//# sourceMappingURL=lilydesignsystem-angular-menu-picker.d.ts.map

package/dist/types/lilydesignsystem-angular-menu-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lilydesignsystem-angular-menu-picker.d.ts","names":[],"sources":["../../menu-picker.component.ts"],"mappings":";;;KAqBY;;EAEV;;;wBAKc;;qBAMH;;;;;;;;;;;qBAiBA;SACJ,uBACL,MAAM,gBACN,gBACC,QAAQ;IAAc,WAAW;;SAJzB,MAAA,GAAA,qBAAA;SAAA,MAAA,GAAA,uBAAA;;;;;;;;;;qBAgGA;;WAEF,+BAAK;;WAEL,8BAAI;;;;;WAKJ,uCAAa;;WAEb,mCAAS;;qBAGC,sCAAY,OAAA;mBAEd;mBAIA;mBACA;mBAGA;qBACE;qBAKA;qBACA,qCAAW;qBACX,sCAAY;qBACZ,qCAAW;qBACX,mCAAS;qBACT,wCAAc;YAOvB;YAKA;YAYA;YAKA,iBAAiB,OAAO;mBAMjB;qBASE,sCAAY;;IA3MzB;;;UAgNE;;EAWR,UAAU;;EAWV,WAAW;;EAOX;YAIU;YAKA,aAAa,OAAO;YAapB,gBAAgB,OAAO;YAmBvB,eAAe,OAAO;YAYtB,eAAe,OAAO;YAMtB,gBAAgB,OAAO;SA5KtB,MAAA,GAAA,qBAAA;SAAA,MAAA,GAAA,uBAAA;IAAU;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;;IAAA"}

package/docs/accessibility.md

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

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

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

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

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

@@ -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/index.ts

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

package/menu-picker.component.spec.ts

@@ -0,0 +1,276 @@
+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*["'`]/);
+  });
+});