@lilydesignsystem/angular-link-picker 0.1.0 → 0.1.1

package/AGENTS.md

@@ -0,0 +1,29 @@
+# AGENTS — LinkPicker (Angular)
+
+Single source of truth: [spec/index.md](./spec/index.md); the contract is the Svelte package's, ported.
+
+## What this package is
+
+A headless Angular `>=20 <23` page-links control: a single-icon button (a bundled home SVG) opening a disclosure list of page links the
+**app defines**. No CSS, no routes, no English.
+
+## Files
+
+| File | Purpose |
+| ---- | ------- |
+| `link-picker.component.ts` | Implementation. |
+| `link-picker.component.spec.ts` | 24 tests mapped to the spec §7 clauses. |
+| `spec/index.md` | Contract and this port's differences. |
+| `index.md` | Guide. |
+| `docs/accessibility.md` | Trade-offs, stated plainly. |
+| `examples/` | Home / About Us / Contact Us / Privacy Policy, router integration, custom icon. |
+
+## Surface
+
+`LinkPicker`, `LinkPickerIcon`, `linkId`, `nextLinkPickerId`, types `ChildArgs`, `LinkItem`, `LinkNavigatedEvent`.
+
+## HTML
+
+`div.link-picker` → `button.link-picker-button` (aria-hidden SVG `link-picker-icon`) → `div.link-picker-tooltip[role=tooltip]` →
+`ul.link-picker-list[hidden]` of `li.link-picker-list-item > a.link-picker-link`. Not a menu: real `<a href>`;
+`aria-current="page"` where marked.

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog — LinkPicker (Angular)
+
+The format is loosely based on [Keep a Changelog](https://keepachangelog.com/); the project follows [Semantic Versioning](https://semver.org/).
+
+## 0.1.0 — 2026-10-07
+
+**First release.** A home-icon button opening a disclosure of app-defined page links. Real `<a>` links (not a menu), `aria-current="page"`,
+hover/keyboard-focus tooltip, full keyboard support, no default links and no English. 24 tests, one per spec clause.

package/{fesm2022 → dist/fesm2022}/lilydesignsystem-angular-link-picker.mjs

@@ -313,9 +313,9 @@ var LinkPicker = class LinkPicker {
             stroke-linecap="round"
             stroke-linejoin="round"
           >
-            <path d="M2 7.5 8 2.5l6 5" />
-            <path d="M3.5 6.5v7h9v-7" />
-            <path d="M6.5 13.5V10h3v3.5" />
+            <path d="M1 8 8 1.5l7 6.5" />
+            <path d="M2.5 7v7.5h11V7" />
+            <path d="M6.5 14.5v-4h3v4" />
           </svg>
         }
       </lily-icon-button>
@@ -438,9 +438,9 @@ i0.ɵɵngDeclareClassMetadata({
             stroke-linecap="round"
             stroke-linejoin="round"
           >
-            <path d="M2 7.5 8 2.5l6 5" />
-            <path d="M3.5 6.5v7h9v-7" />
-            <path d="M6.5 13.5V10h3v3.5" />
+            <path d="M1 8 8 1.5l7 6.5" />
+            <path d="M2.5 7v7.5h11V7" />
+            <path d="M6.5 14.5v-4h3v4" />
           </svg>
         }
       </lily-icon-button>

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

@@ -0,0 +1 @@
+{"version":3,"file":"lilydesignsystem-angular-link-picker.mjs","names":[],"sources":["../../link-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  output,\n  signal,\n  viewChild,\n} from \"@angular/core\";\n// Only the trigger button composes a headless primitive. The list below is real `<a>` navigation\n// with a roving-focus pattern of its own — not an ARIA listbox or menu: role=\"menuitem\" would strip\n// middle-click, open-in-new-tab and copy-link-address from ordinary links. See spec/index.md §3.\nimport { IconButton } from \"@lilydesignsystem/angular-headless\";\n\n/**\n * One destination in the list. The app defines them all: this package ships no routes and no\n * English — `label` is the consumer's text.\n */\nexport type LinkItem = {\n  /** Stable identifier, passed back on the `navigated` output. Defaults to `href`. */\n  id?: string;\n  /** Visible link text. Consumer-supplied, so it localises. */\n  label: string;\n  /** Where the link goes: a route (\"/about/\") or a full URL. */\n  href: string;\n  /** Marks this link as the current page (`aria-current=\"page\"`). */\n  current?: boolean;\n  /** Open in a new tab (`target=\"_blank\"` with `rel=\"noopener noreferrer\"`). */\n  newTab?: boolean;\n};\n\n/** Context passed to a custom icon `<ng-template>` (the button icon). */\nexport type ChildArgs = {\n  /** Is the list open? */\n  open: boolean;\n};\n\n/** Payload of the `navigated` output. */\nexport type LinkNavigatedEvent = {\n  /** The chosen link's `id` (its `href` when it has none). */\n  id: string;\n  /** The chosen link's `href`. */\n  href: string;\n};\n\n/** The id a link reports: its explicit `id`, else its `href`. */\nexport function linkId(link: LinkItem): string {\n  return link.id ?? link.href;\n}\n\nlet uid = 0;\n/** Stable per-instance id prefix; SSR-safe (no Math.random / Date.now). */\nexport function nextLinkPickerId(): string {\n  uid += 1;\n  return `link-picker-${uid}`;\n}\n\n/**\n * Optional marker for the projected icon template. Gives consumers typed `let-` variables:\n *\n * ```html\n * <lily-link-picker label=\"Pages\" [links]=\"links\">\n *   <ng-template lilyLinkPickerIcon let-args>{{ args.open ? \"×\" : \"☰\" }}</ng-template>\n * </lily-link-picker>\n * ```\n */\n@Directive({\n  selector: \"ng-template[lilyLinkPickerIcon]\",\n  standalone: true,\n})\nexport class LinkPickerIcon {\n  static ngTemplateContextGuard(\n    _dir: LinkPickerIcon,\n    _ctx: unknown,\n  ): _ctx is ChildArgs & { $implicit: ChildArgs } {\n    return true;\n  }\n}\n\n/**\n * LinkPicker — a headless page-links control.\n *\n * A single-icon button (a bundled home SVG) that opens a disclosure list of page links the app\n * defines. It applies nothing to the document and persists nothing. See `spec/index.md`.\n */\n@Component({\n  selector: \"lily-link-picker\",\n  standalone: true,\n  imports: [NgTemplateOutlet, IconButton],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    \"(document:click)\": \"onDocumentClick($event)\",\n  },\n  template: `\n    <div\n      #rootEl\n      class=\"link-picker {{ className() }}\"\n      (focusout)=\"onRootFocusOut($event)\"\n    >\n      <lily-icon-button\n        #buttonEl\n        [label]=\"label()\"\n        baseClass=\"link-picker-button\"\n        [ariaExpanded]=\"open()\"\n        [ariaControls]=\"listId\"\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=\"link-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 8 8 1.5l7 6.5\" />\n            <path d=\"M2.5 7v7.5h11V7\" />\n            <path d=\"M6.5 14.5v-4h3v4\" />\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=\"link-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      <!-- Named like the sibling pickers' popups: a screen reader entering the list hears what\n           it is for. -->\n      <ul\n        #listEl\n        class=\"link-picker-list\"\n        [id]=\"listId\"\n        [attr.aria-label]=\"label() || null\"\n        [attr.hidden]=\"open() ? null : ''\"\n        (keydown)=\"onListKeydown($event)\"\n      >\n        @for (link of links(); track idOf(link)) {\n          <li class=\"link-picker-list-item\">\n            <!-- A real link, not role=\"menuitem\": these ARE navigation. -->\n            <a\n              class=\"link-picker-link\"\n              [attr.data-link-id]=\"idOf(link)\"\n              [attr.href]=\"link.href\"\n              [attr.aria-current]=\"link.current ? 'page' : null\"\n              [attr.target]=\"link.newTab ? '_blank' : null\"\n              [attr.rel]=\"link.newTab ? 'noopener noreferrer' : null\"\n              (click)=\"onLinkClick($event, link)\"\n              >{{ link.label }}</a\n            >\n          </li>\n        }\n      </ul>\n    </div>\n  `,\n})\nexport class LinkPicker {\n  /** Accessible name for the button and the list. */\n  readonly label = input.required<string>();\n  /** The page links to offer. Defined by the app. */\n  readonly links = input.required<LinkItem[]>();\n  /**\n   * Client-side navigation hook, e.g. a router's `navigateByUrl`. When given, a plain left click\n   * on a link calls `navigate(href)` instead of letting the browser load the page; modified\n   * clicks (Ctrl/Cmd/Shift/Alt, middle button) and `newTab` links stay native.\n   */\n  readonly navigate = input<((href: string) => void) | undefined>(undefined);\n  /** Extra CSS class on the root div. */\n  readonly className = input<string>(\"\");\n\n  /** Fires after a link is chosen. */\n  readonly navigated = output<LinkNavigatedEvent>();\n\n  /** Projected icon template; replaces the default icon when supplied. */\n  protected readonly iconTemplate = contentChild(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 listRef =\n    viewChild.required<ElementRef<HTMLUListElement>>(\"listEl\");\n\n  private readonly baseId = nextLinkPickerId();\n  protected readonly listId = `${this.baseId}-list`;\n\n  protected readonly open = signal(false);\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  protected idOf(link: LinkItem): string {\n    return linkId(link);\n  }\n\n  /** Every focusable link in the list, in DOM order. */\n  private items(): HTMLElement[] {\n    return Array.from(\n      this.listRef().nativeElement.querySelectorAll<HTMLElement>(\".link-picker-link\"),\n    );\n  }\n\n  // ---------------------------------------------------------------\n  // Open / close\n  // ---------------------------------------------------------------\n\n  /** Open the list, focusing the first link (or the last, if `focusLast`). */\n  openList(focusLast = false): void {\n    this.open.set(true);\n    // Deferred so the `hidden` attribute is gone before focus is moved.\n    queueMicrotask(() => {\n      const all = this.items();\n      (focusLast ? all[all.length - 1] : all[0])?.focus({ preventScroll: true });\n    });\n  }\n\n  /** Close the list; `refocus` returns focus to the trigger. */\n  closeList(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  protected onButtonClick(): void {\n    if (this.open()) this.closeList();\n    else this.openList();\n  }\n\n  protected onLinkClick(event: MouseEvent, link: LinkItem): void {\n    this.navigated.emit({ id: linkId(link), href: link.href });\n    const go = this.navigate();\n    const modified =\n      event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || event.button !== 0;\n    if (go && !link.newTab && !modified && !event.defaultPrevented) {\n      event.preventDefault();\n      go(link.href);\n    }\n    this.closeList();\n  }\n\n  // ---------------------------------------------------------------\n  // Keyboard\n  // ---------------------------------------------------------------\n\n  protected onButtonKeydown(event: KeyboardEvent): void {\n    // Enter and Space already produce a click; only the arrows need handling here.\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      if (!this.open()) this.openList();\n      else this.items()[0]?.focus({ preventScroll: true });\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!this.open()) this.openList(true);\n      else {\n        const all = this.items();\n        all[all.length - 1]?.focus({ preventScroll: true });\n      }\n    }\n  }\n\n  private moveFocus(delta: number): void {\n    const all = this.items();\n    if (all.length === 0) return;\n    const i = all.indexOf(document.activeElement as HTMLElement);\n    // Clamp rather than wrap.\n    const next = Math.min(Math.max((i < 0 ? 0 : i) + delta, 0), all.length - 1);\n    all[next]?.focus({ preventScroll: true });\n  }\n\n  protected onListKeydown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        this.moveFocus(1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        this.moveFocus(-1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this.items()[0]?.focus({ preventScroll: true });\n        break;\n      case \"End\": {\n        event.preventDefault();\n        const all = this.items();\n        all[all.length - 1]?.focus({ preventScroll: true });\n        break;\n      }\n      case \"Escape\":\n        event.preventDefault();\n        this.closeList();\n        break;\n      case \"Tab\":\n        // Focus goes to the button FIRST, without cancelling the key: hiding the list while a\n        // link has focus drops focus to <body>, and the default Tab would restart from the top.\n        this.buttonRef().focus?.({ preventScroll: true });\n        this.closeList(false);\n        break;\n      default:\n        break;\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.closeList(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.closeList(false);\n  }\n}\n"],"mappings":"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"}

package/dist/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@lilydesignsystem/angular-link-picker",
+  "version": "0.1.1",
+  "engines": {
+    "node": "=26"
+  },
+  "description": "Lily Design System Angular link picker: an icon button (a home icon) opening a disclosure of app-defined page links. 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",
+    "link",
+    "navigation",
+    "home",
+    "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-link-picker"
+  },
+  "homepage": "https://lilydesignsystem.com/",
+  "bugs": {
+    "url": "https://github.com/LilyDesignSystem/lily-design-system/issues"
+  },
+  "module": "fesm2022/lilydesignsystem-angular-link-picker.mjs",
+  "typings": "types/lilydesignsystem-angular-link-picker.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/lilydesignsystem-angular-link-picker.d.ts",
+      "default": "./fesm2022/lilydesignsystem-angular-link-picker.mjs"
+    }
+  },
+  "type": "module"
+}

package/docs/accessibility.md

@@ -0,0 +1,29 @@
+# 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 list state, and `aria-controls` points at it. The list is named with the same
+  `label`.
+- The links keep **native link semantics**: real `<a href>` elements with no `role` override, so middle-click,
+  open-in-new-tab and copy-link-address all work. A `role="menuitem"` implementation would take all three away.
+- The current page's link carries `aria-current="page"` when you mark it `current`.
+- Keyboard: `Enter`/`Space` toggle, `ArrowDown`/`ArrowUp` open and move between links (clamping, not wrapping), `Home`/`End`
+  jump, `Escape` closes and returns focus to the trigger, `Tab` closes — focus lands on the button first so the default Tab
+  proceeds from the picker's position instead of restarting from `<body>`.
+- Opening focuses a link without scrolling the page.
+- 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 list is open.
+
+## What it costs
+
+**The name rests entirely on `label`.** An icon-only control has no visible text fallback. A home icon 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 list is
+("Pages", "Site"), not what the icon is.
+
+**It hides navigation behind a click.** For a handful of links in a header that is the point; for primary site navigation,
+use a visible `nav` instead (see `BreadcrumbNav`, `SectionNav`).
+
+**Focus management is real focus**, not `aria-activedescendant`, so screen readers announce each link as it receives focus.

package/examples/README.md

@@ -0,0 +1,9 @@
+# Examples — LinkPicker (Angular)
+
+| File | Shows |
+| ---- | ----- |
+| [basic.component.ts](./basic.component.ts) | Basic usage |
+| [router.component.ts](./router.component.ts) | Angular Router: client-side navigation and the current page |
+| [custom-icon.component.ts](./custom-icon.component.ts) | Replacing the icon |
+
+Every user-facing string and every route is a prop — the package ships no default list.

package/examples/basic.component.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+import { LinkPicker, type LinkItem } from "../link-picker.component";
+
+// The app defines the links: the package ships no routes and no English.
+@Component({
+  selector: "example-basic",
+  standalone: true,
+  imports: [LinkPicker],
+  template: `<lily-link-picker label="Pages" [links]="links" />`,
+})
+export class Basic {
+  links: LinkItem[] = [
+  { label: "Home", href: "/" },
+  { label: "About Us", href: "/about/" },
+  { label: "Contact Us", href: "/contact/" },
+  { label: "Privacy Policy", href: "/privacy/" },
+];
+}

package/examples/custom-icon.component.ts

@@ -0,0 +1,22 @@
+import { Component } from "@angular/core";
+import { LinkPicker, LinkPickerIcon } from "../link-picker.component";
+
+// A projected <ng-template lilyLinkPickerIcon> replaces the icon inside the button, never the links.
+@Component({
+  selector: "example-custom-icon",
+  standalone: true,
+  imports: [LinkPicker, LinkPickerIcon],
+  template: `
+    <lily-link-picker label="Pages" [links]="links">
+      <ng-template lilyLinkPickerIcon let-args><span aria-hidden="true">{{ args.open ? "▾" : "☰" }}</span></ng-template>
+    </lily-link-picker>
+  `,
+})
+export class CustomIcon {
+  links = [
+  { label: "Home", href: "/" },
+  { label: "About Us", href: "/about/" },
+  { label: "Contact Us", href: "/contact/" },
+  { label: "Privacy Policy", href: "/privacy/" },
+];
+}

package/examples/router.component.ts

@@ -0,0 +1,22 @@
+import { Component, inject } from "@angular/core";
+import { Router } from "@angular/router";
+import { LinkPicker } from "../link-picker.component";
+
+// `navigate` turns a plain left click into router navigation; Ctrl/Cmd-click, middle click and
+// newTab links stay native. `current` marks the page you are on with aria-current="page".
+@Component({
+  selector: "example-router",
+  standalone: true,
+  imports: [LinkPicker],
+  template: `<lily-link-picker label="Pages" [links]="links()" [navigate]="go" />`,
+})
+export class RouterExample {
+  private router = inject(Router);
+  go = (href: string) => void this.router.navigateByUrl(href);
+  links = () => [
+  { label: "Home", href: "/" },
+  { label: "About Us", href: "/about/" },
+  { label: "Contact Us", href: "/contact/" },
+  { label: "Privacy Policy", href: "/privacy/" },
+].map((p) => ({ ...p, current: this.router.url === p.href }));
+}

package/index.md

@@ -0,0 +1,86 @@
+# LinkPicker (Angular)
+
+A headless control for **page links**: a single-icon button (a bundled home SVG) that opens a dropdown of links **your app
+defines** — "Home", "About Us", "Contact Us", "Privacy Policy". No CSS, no routes, no English.
+
+The single source of truth is [spec/index.md](./spec/index.md); this file is the guide.
+
+## Quick start
+
+```ts
+import { Component } from "@angular/core";
+import { LinkPicker, type LinkItem } from "@lilydesignsystem/angular-link-picker";
+
+@Component({
+  selector: "app-header",
+  standalone: true,
+  imports: [LinkPicker],
+  template: `<lily-link-picker label="Pages" [links]="links" />`,
+})
+export class AppHeader {
+  links: LinkItem[] = [
+  { label: "Home", href: "/" },
+  { label: "About Us", href: "/about/" },
+  { label: "Contact Us", href: "/contact/" },
+  { label: "Privacy Policy", href: "/privacy/" },
+];
+}
+```
+
+`label` names the button, the list and the tooltip. There is **no default list**: the package ships no routes and no English.
+
+## Client-side navigation
+
+```ts
+import { Component, inject } from "@angular/core";
+import { Router } from "@angular/router";
+import { LinkPicker } from "@lilydesignsystem/angular-link-picker";
+
+@Component({
+  selector: "app-header",
+  standalone: true,
+  imports: [LinkPicker],
+  template: `<lily-link-picker label="Pages" [links]="links()" [navigate]="go" />`,
+})
+export class AppHeader {
+  private router = inject(Router);
+  go = (href: string) => void this.router.navigateByUrl(href);
+  links = () => [
+  { label: "Home", href: "/" },
+  { label: "About Us", href: "/about/" },
+  { label: "Contact Us", href: "/contact/" },
+  { label: "Privacy Policy", href: "/privacy/" },
+].map((p) => ({ ...p, current: this.router.url === p.href }));
+}
+```
+
+Ctrl/Cmd/Shift/Alt-click, middle-click and `newTab` links always stay native browser behaviour.
+
+## `LinkItem`
+
+| Field | Notes |
+| --- | --- |
+| label | Visible text. Yours, so it localises. |
+| href | A route (`"/about/"`) or a full URL. |
+| id | Reported when a link is chosen; defaults to the href. |
+| current | Marks the current page with `aria-current="page"`. |
+| newTab | `target="_blank"` with `rel="noopener noreferrer"`. |
+
+## Props
+
+| `label` | `input.required<string>()` | yes | Accessible name of the button **and** the list; also the tooltip text. |
+| `links` | `input.required<LinkItem[]>()` | yes | `{ id?, label, href, current?, newTab? }`. `id` defaults to `href`. |
+| `navigate` | `input<(href: string) => void>()` | no | Client-side navigation hook (a router's `navigateByUrl`). |
+| `navigated` | `output<{ id, href }>()` | no | Emitted after a link is chosen (the Svelte `onNavigate` callback). |
+| icon template | `<ng-template lilyLinkPickerIcon let-args>` | no | Replaces the **icon**, not the links. |
+| `className` | `input<string>()` | no | Appended to the root class. |
+
+## Styling
+
+Headless: no CSS ships. Hooks: `.link-picker`, `.link-picker-button`, `.link-picker-icon`, `.link-picker-tooltip`,
+`.link-picker-list` (carries `hidden` when closed), `.link-picker-list-item`, `.link-picker-link`. The monorepo's 45 `themes/`
+style them all, including the popup placement.
+
+## Examples
+
+[examples/](./examples/README.md): the four-link example, router integration and a custom icon.

package/index.ts

@@ -0,0 +1,11 @@
+export {
+  LinkPicker,
+  LinkPickerIcon,
+  linkId,
+  nextLinkPickerId,
+} from "./link-picker.component";
+export type {
+  ChildArgs,
+  LinkItem,
+  LinkNavigatedEvent,
+} from "./link-picker.component";

package/link-picker.component.spec.ts

@@ -0,0 +1,287 @@
+import { Component } 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 {
+  LinkPicker,
+  LinkPickerIcon,
+  linkId,
+  nextLinkPickerId,
+  type LinkItem,
+} from "./link-picker.component";
+
+const LINKS: LinkItem[] = [
+  { label: "Home", href: "/" },
+  { label: "About Us", href: "/about/" },
+  { label: "Contact Us", href: "/contact/" },
+  { label: "Privacy Policy", href: "/privacy/" },
+];
+
+const flush = () => new Promise<void>((r) => setTimeout(r, 0));
+
+let fixtures: ComponentFixture<unknown>[] = [];
+
+function mount(inputs: Record<string, unknown> = {}): ComponentFixture<LinkPicker> {
+  const fixture = TestBed.createComponent(LinkPicker);
+  fixture.componentRef.setInput("label", "Pages");
+  fixture.componentRef.setInput("links", LINKS);
+  for (const [k, v] of Object.entries(inputs)) fixture.componentRef.setInput(k, v);
+  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, ".link-picker-button");
+const list = (f: ComponentFixture<unknown>) => q<HTMLUListElement>(f, ".link-picker-list");
+const links = (f: ComponentFixture<unknown>) =>
+  Array.from(f.nativeElement.querySelectorAll(".link-picker-link")) as HTMLAnchorElement[];
+
+function press(f: ComponentFixture<unknown>, target: HTMLElement, key: string): void {
+  target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+  f.detectChanges();
+}
+
+async function open(f: ComponentFixture<unknown>): Promise<void> {
+  trigger(f).dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  f.detectChanges();
+  await flush();
+  f.detectChanges();
+}
+
+afterEach(() => {
+  for (const f of fixtures) f.destroy();
+  fixtures = [];
+});
+
+describe("LinkPicker", () => {
+  test("7.1 renders the root, button, tooltip and a hidden list", () => {
+    const f = mount();
+    expect(q(f, "div.link-picker")).toBeTruthy();
+    expect(trigger(f)).toBeTruthy();
+    expect(q(f, ".link-picker-tooltip")).toBeTruthy();
+    expect(list(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("Pages");
+    expect(trigger(f).getAttribute("aria-expanded")).toBe("false");
+    expect(trigger(f).getAttribute("aria-controls")).toBe(list(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.link-picker-icon");
+    expect(svg.getAttribute("aria-hidden")).toBe("true");
+    expect(svg.getAttribute("viewBox")).toBe("0 0 16 16");
+
+    @Component({
+      standalone: true,
+      imports: [LinkPicker, LinkPickerIcon],
+      template: `<lily-link-picker label="Pages" [links]="links"><ng-template lilyLinkPickerIcon let-args><span class="mine">{{ args.open ? "-" : "+" }}</span></ng-template></lily-link-picker>`,
+    })
+    class Host {
+      links = LINKS;
+    }
+    const hf = TestBed.createComponent(Host);
+    hf.detectChanges();
+    fixtures.push(hf);
+    expect(hf.nativeElement.querySelector(".mine")).toBeTruthy();
+    expect(hf.nativeElement.querySelector("svg.link-picker-icon")).toBeNull();
+  });
+
+  test("7.4 one real link per entry, in order", () => {
+    expect(links(mount()).map((a) => [a.textContent?.trim(), a.getAttribute("href")])).toEqual([
+      ["Home", "/"],
+      ["About Us", "/about/"],
+      ["Contact Us", "/contact/"],
+      ["Privacy Policy", "/privacy/"],
+    ]);
+  });
+
+  test("7.5 no links are invented", () => {
+    expect(links(mount({ links: [] }))).toHaveLength(0);
+  });
+
+  test("7.6 the list is named with label", () => {
+    expect(list(mount()).getAttribute("aria-label")).toBe("Pages");
+  });
+
+  test("7.7 click opens the list and focuses the first link", async () => {
+    const f = mount();
+    await open(f);
+    expect(list(f).hasAttribute("hidden")).toBe(false);
+    expect(trigger(f).getAttribute("aria-expanded")).toBe("true");
+    expect(document.activeElement).toBe(links(f)[0]);
+  });
+
+  test("7.8 a second click closes", async () => {
+    const f = mount();
+    await open(f);
+    await open(f);
+    expect(list(f).hasAttribute("hidden")).toBe(true);
+  });
+
+  test("7.9 ArrowDown opens at the first link, ArrowUp at the last", async () => {
+    const a = mount();
+    press(a, trigger(a), "ArrowDown");
+    await flush();
+    expect(document.activeElement).toBe(links(a)[0]);
+    const b = mount();
+    press(b, trigger(b), "ArrowUp");
+    await flush();
+    expect(document.activeElement).toBe(links(b)[3]);
+  });
+
+  test("7.10 arrows move and clamp; Home and End jump", async () => {
+    const f = mount();
+    await open(f);
+    press(f, list(f), "ArrowUp");
+    expect(document.activeElement).toBe(links(f)[0]);
+    press(f, list(f), "ArrowDown");
+    expect(document.activeElement).toBe(links(f)[1]);
+    press(f, list(f), "End");
+    expect(document.activeElement).toBe(links(f)[3]);
+    press(f, list(f), "ArrowDown");
+    expect(document.activeElement).toBe(links(f)[3]);
+    press(f, list(f), "Home");
+    expect(document.activeElement).toBe(links(f)[0]);
+  });
+
+  test("7.11 Escape closes and returns focus to the button", async () => {
+    const f = mount();
+    await open(f);
+    press(f, list(f), "Escape");
+    await flush();
+    f.detectChanges();
+    expect(list(f).hasAttribute("hidden")).toBe(true);
+    expect(document.activeElement).toBe(trigger(f));
+  });
+
+  test("7.12 Tab closes without sending focus to the document top", async () => {
+    const f = mount();
+    await open(f);
+    press(f, list(f), "Tab");
+    await flush();
+    expect(list(f).hasAttribute("hidden")).toBe(true);
+    expect(document.activeElement).toBe(trigger(f));
+  });
+
+  test("7.13 clicking outside closes", async () => {
+    const f = mount();
+    await open(f);
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    f.detectChanges();
+    expect(list(f).hasAttribute("hidden")).toBe(true);
+  });
+
+  test("7.14 current marks only that link aria-current=page", () => {
+    const f = mount({ links: [LINKS[0], { ...LINKS[1], current: true }, LINKS[2]] });
+    expect(links(f).map((a) => a.getAttribute("aria-current"))).toEqual([null, "page", null]);
+  });
+
+  test("7.15 newTab adds target and rel", () => {
+    const f = mount({ links: [{ label: "Docs", href: "https://example.test/", newTab: true }, LINKS[0]] });
+    expect(links(f)[0].getAttribute("target")).toBe("_blank");
+    expect(links(f)[0].getAttribute("rel")).toBe("noopener noreferrer");
+    expect(links(f)[1].hasAttribute("target")).toBe(false);
+  });
+
+  test("7.16 the navigated output reports the id, else the href", async () => {
+    const f = mount({ links: [{ id: "about", label: "About Us", href: "/about/" }, LINKS[0]] });
+    const seen: unknown[] = [];
+    f.componentInstance.navigated.subscribe((e) => seen.push(e));
+    await open(f);
+    for (const a of links(f)) a.addEventListener("click", (e) => e.preventDefault());
+    links(f)[0].dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
+    f.detectChanges();
+    await open(f);
+    links(f)[1].dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
+    expect(seen).toEqual([{ id: "about", href: "/about/" }, { id: "/", href: "/" }]);
+    expect(linkId({ label: "x", href: "/y" })).toBe("/y");
+  });
+
+  test("7.17 navigate handles a plain left click only", async () => {
+    const navigate = vi.fn();
+    const f = mount({ navigate, links: [LINKS[1], { label: "Docs", href: "https://example.test/", newTab: true }] });
+    await open(f);
+    const plain = new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 });
+    links(f)[0].dispatchEvent(plain);
+    expect(navigate).toHaveBeenCalledWith("/about/");
+    expect(plain.defaultPrevented).toBe(true);
+    navigate.mockClear();
+    f.detectChanges();
+    await open(f);
+    const ctrl = new MouseEvent("click", { bubbles: true, cancelable: true, button: 0, ctrlKey: true });
+    links(f)[0].dispatchEvent(ctrl);
+    expect(navigate).not.toHaveBeenCalled();
+    expect(ctrl.defaultPrevented).toBe(false);
+    f.detectChanges();
+    await open(f);
+    const tab = new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 });
+    links(f)[1].dispatchEvent(tab);
+    expect(navigate).not.toHaveBeenCalled();
+    expect(tab.defaultPrevented).toBe(false);
+  });
+
+  test("7.18 without navigate a click is left to the browser", async () => {
+    const f = mount();
+    await open(f);
+    const ev = new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 });
+    links(f)[0].dispatchEvent(ev);
+    expect(ev.defaultPrevented).toBe(false);
+  });
+
+  test("7.19 the tooltip is a hidden role=tooltip holding the label", () => {
+    const tip = q<HTMLElement>(mount(), ".link-picker-tooltip");
+    expect(tip.getAttribute("role")).toBe("tooltip");
+    expect(tip.textContent).toBe("Pages");
+    expect(tip.hasAttribute("hidden")).toBe(true);
+  });
+
+  test("7.20 the tooltip shows on hover, hides on Escape, and never shows while open", async () => {
+    const f = mount();
+    const tip = q<HTMLElement>(f, ".link-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 open(f);
+    expect(tip.hasAttribute("hidden")).toBe(true);
+  });
+
+  test("7.21 the tooltip is not wired with aria-describedby", () => {
+    expect(trigger(mount()).hasAttribute("aria-describedby")).toBe(false);
+  });
+
+  test("7.22 className is appended to the root", () => {
+    expect(q(mount({ className: "extra" }), ".link-picker").classList.contains("extra")).toBe(true);
+  });
+
+  test("7.23 two instances get distinct ids", () => {
+    expect(nextLinkPickerId()).not.toBe(nextLinkPickerId());
+    expect(list(mount()).id).not.toBe(list(mount()).id);
+  });
+
+  test("7.24 the source ships no stylesheet, inline style, English default or route", () => {
+    const src = readFileSync(resolve(__dirname, "link-picker.component.ts"), "utf8")
+      .replace(/<!--[\s\S]*?-->/g, "")
+      .replace(/\/\*[\s\S]*?\*\//g, "")
+      .replace(/^\s*\/\/.*$/gm, "");
+    expect(src).not.toMatch(/styles\s*:|<style|\sstyle=/);
+    expect(src).not.toMatch(/(label|href):\s*["'`]/);
+    expect(src).not.toMatch(/href="\//);
+  });
+});

package/link-picker.component.ts

@@ -0,0 +1,398 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  ElementRef,
+  TemplateRef,
+  computed,
+  contentChild,
+  effect,
+  input,
+  output,
+  signal,
+  viewChild,
+} from "@angular/core";
+// Only the trigger button composes a headless primitive. The list below is real `<a>` navigation
+// with a roving-focus pattern of its own — not an ARIA listbox or menu: role="menuitem" would strip
+// middle-click, open-in-new-tab and copy-link-address from ordinary links. See spec/index.md §3.
+import { IconButton } from "@lilydesignsystem/angular-headless";
+
+/**
+ * One destination in the list. The app defines them all: this package ships no routes and no
+ * English — `label` is the consumer's text.
+ */
+export type LinkItem = {
+  /** Stable identifier, passed back on the `navigated` output. Defaults to `href`. */
+  id?: string;
+  /** Visible link text. Consumer-supplied, so it localises. */
+  label: string;
+  /** Where the link goes: a route ("/about/") or a full URL. */
+  href: string;
+  /** Marks this link as the current page (`aria-current="page"`). */
+  current?: boolean;
+  /** Open in a new tab (`target="_blank"` with `rel="noopener noreferrer"`). */
+  newTab?: boolean;
+};
+
+/** Context passed to a custom icon `<ng-template>` (the button icon). */
+export type ChildArgs = {
+  /** Is the list open? */
+  open: boolean;
+};
+
+/** Payload of the `navigated` output. */
+export type LinkNavigatedEvent = {
+  /** The chosen link's `id` (its `href` when it has none). */
+  id: string;
+  /** The chosen link's `href`. */
+  href: string;
+};
+
+/** The id a link reports: its explicit `id`, else its `href`. */
+export function linkId(link: LinkItem): string {
+  return link.id ?? link.href;
+}
+
+let uid = 0;
+/** Stable per-instance id prefix; SSR-safe (no Math.random / Date.now). */
+export function nextLinkPickerId(): string {
+  uid += 1;
+  return `link-picker-${uid}`;
+}
+
+/**
+ * Optional marker for the projected icon template. Gives consumers typed `let-` variables:
+ *
+ * ```html
+ * <lily-link-picker label="Pages" [links]="links">
+ *   <ng-template lilyLinkPickerIcon let-args>{{ args.open ? "×" : "☰" }}</ng-template>
+ * </lily-link-picker>
+ * ```
+ */
+@Directive({
+  selector: "ng-template[lilyLinkPickerIcon]",
+  standalone: true,
+})
+export class LinkPickerIcon {
+  static ngTemplateContextGuard(
+    _dir: LinkPickerIcon,
+    _ctx: unknown,
+  ): _ctx is ChildArgs & { $implicit: ChildArgs } {
+    return true;
+  }
+}
+
+/**
+ * LinkPicker — a headless page-links control.
+ *
+ * A single-icon button (a bundled home SVG) that opens a disclosure list of page links the app
+ * defines. It applies nothing to the document and persists nothing. See `spec/index.md`.
+ */
+@Component({
+  selector: "lily-link-picker",
+  standalone: true,
+  imports: [NgTemplateOutlet, IconButton],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "(document:click)": "onDocumentClick($event)",
+  },
+  template: `
+    <div
+      #rootEl
+      class="link-picker {{ className() }}"
+      (focusout)="onRootFocusOut($event)"
+    >
+      <lily-icon-button
+        #buttonEl
+        [label]="label()"
+        baseClass="link-picker-button"
+        [ariaExpanded]="open()"
+        [ariaControls]="listId"
+        (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="link-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 8 8 1.5l7 6.5" />
+            <path d="M2.5 7v7.5h11V7" />
+            <path d="M6.5 14.5v-4h3v4" />
+          </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="link-picker-tooltip"
+        role="tooltip"
+        [id]="tooltipId"
+        [attr.hidden]="tooltipVisible() ? null : ''"
+        (mouseenter)="hoverTooltip.set(true)"
+        (mouseleave)="hoverTooltip.set(false)"
+      >{{ label() }}</div>
+
+      <!-- Named like the sibling pickers' popups: a screen reader entering the list hears what
+           it is for. -->
+      <ul
+        #listEl
+        class="link-picker-list"
+        [id]="listId"
+        [attr.aria-label]="label() || null"
+        [attr.hidden]="open() ? null : ''"
+        (keydown)="onListKeydown($event)"
+      >
+        @for (link of links(); track idOf(link)) {
+          <li class="link-picker-list-item">
+            <!-- A real link, not role="menuitem": these ARE navigation. -->
+            <a
+              class="link-picker-link"
+              [attr.data-link-id]="idOf(link)"
+              [attr.href]="link.href"
+              [attr.aria-current]="link.current ? 'page' : null"
+              [attr.target]="link.newTab ? '_blank' : null"
+              [attr.rel]="link.newTab ? 'noopener noreferrer' : null"
+              (click)="onLinkClick($event, link)"
+              >{{ link.label }}</a
+            >
+          </li>
+        }
+      </ul>
+    </div>
+  `,
+})
+export class LinkPicker {
+  /** Accessible name for the button and the list. */
+  readonly label = input.required<string>();
+  /** The page links to offer. Defined by the app. */
+  readonly links = input.required<LinkItem[]>();
+  /**
+   * Client-side navigation hook, e.g. a router's `navigateByUrl`. When given, a plain left click
+   * on a link calls `navigate(href)` instead of letting the browser load the page; modified
+   * clicks (Ctrl/Cmd/Shift/Alt, middle button) and `newTab` links stay native.
+   */
+  readonly navigate = input<((href: string) => void) | undefined>(undefined);
+  /** Extra CSS class on the root div. */
+  readonly className = input<string>("");
+
+  /** Fires after a link is chosen. */
+  readonly navigated = output<LinkNavigatedEvent>();
+
+  /** Projected icon template; replaces the default icon when supplied. */
+  protected readonly iconTemplate = contentChild(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 listRef =
+    viewChild.required<ElementRef<HTMLUListElement>>("listEl");
+
+  private readonly baseId = nextLinkPickerId();
+  protected readonly listId = `${this.baseId}-list`;
+
+  protected readonly open = signal(false);
+
+  // 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 };
+  });
+
+  protected idOf(link: LinkItem): string {
+    return linkId(link);
+  }
+
+  /** Every focusable link in the list, in DOM order. */
+  private items(): HTMLElement[] {
+    return Array.from(
+      this.listRef().nativeElement.querySelectorAll<HTMLElement>(".link-picker-link"),
+    );
+  }
+
+  // ---------------------------------------------------------------
+  // Open / close
+  // ---------------------------------------------------------------
+
+  /** Open the list, focusing the first link (or the last, if `focusLast`). */
+  openList(focusLast = false): void {
+    this.open.set(true);
+    // Deferred so the `hidden` attribute is gone before focus is moved.
+    queueMicrotask(() => {
+      const all = this.items();
+      (focusLast ? all[all.length - 1] : all[0])?.focus({ preventScroll: true });
+    });
+  }
+
+  /** Close the list; `refocus` returns focus to the trigger. */
+  closeList(refocus = true): void {
+    if (!this.open()) return;
+    this.open.set(false);
+    if (refocus) queueMicrotask(() => this.buttonRef().focus({ preventScroll: true }));
+  }
+
+  protected onButtonClick(): void {
+    if (this.open()) this.closeList();
+    else this.openList();
+  }
+
+  protected onLinkClick(event: MouseEvent, link: LinkItem): void {
+    this.navigated.emit({ id: linkId(link), href: link.href });
+    const go = this.navigate();
+    const modified =
+      event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || event.button !== 0;
+    if (go && !link.newTab && !modified && !event.defaultPrevented) {
+      event.preventDefault();
+      go(link.href);
+    }
+    this.closeList();
+  }
+
+  // ---------------------------------------------------------------
+  // Keyboard
+  // ---------------------------------------------------------------
+
+  protected onButtonKeydown(event: KeyboardEvent): void {
+    // Enter and Space already produce a click; only the arrows need handling here.
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!this.open()) this.openList();
+      else this.items()[0]?.focus({ preventScroll: true });
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!this.open()) this.openList(true);
+      else {
+        const all = this.items();
+        all[all.length - 1]?.focus({ preventScroll: true });
+      }
+    }
+  }
+
+  private moveFocus(delta: number): void {
+    const all = this.items();
+    if (all.length === 0) return;
+    const i = all.indexOf(document.activeElement as HTMLElement);
+    // Clamp rather than wrap.
+    const next = Math.min(Math.max((i < 0 ? 0 : i) + delta, 0), all.length - 1);
+    all[next]?.focus({ preventScroll: true });
+  }
+
+  protected onListKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.moveFocus(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.moveFocus(-1);
+        break;
+      case "Home":
+        event.preventDefault();
+        this.items()[0]?.focus({ preventScroll: true });
+        break;
+      case "End": {
+        event.preventDefault();
+        const all = this.items();
+        all[all.length - 1]?.focus({ preventScroll: true });
+        break;
+      }
+      case "Escape":
+        event.preventDefault();
+        this.closeList();
+        break;
+      case "Tab":
+        // Focus goes to the button FIRST, without cancelling the key: hiding the list while a
+        // link has focus drops focus to <body>, and the default Tab would restart from the top.
+        this.buttonRef().focus?.({ preventScroll: true });
+        this.closeList(false);
+        break;
+      default:
+        break;
+    }
+  }
+
+  protected onRootFocusOut(event: FocusEvent): void {
+    const next = event.relatedTarget as Node | null;
+    if (next && this.rootRef().nativeElement.contains(next)) return;
+    this.closeList(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.closeList(false);
+  }
+}

package/ng-package.json

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

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "@lilydesignsystem/angular-link-picker",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "engines": {
     "node": "=26"
   },
   "description": "Lily Design System Angular link picker: an icon button (a home icon) opening a disclosure of app-defined page links. Headless, SSR-safe, no CSS.",
   "dependencies": {
-    "@lilydesignsystem/angular-headless": "^0.2.0",
-    "tslib": "^2.3.0"
+    "@lilydesignsystem/angular-headless": "^0.2.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",
@@ -34,17 +37,5 @@
   "homepage": "https://lilydesignsystem.com/",
   "bugs": {
     "url": "https://github.com/LilyDesignSystem/lily-design-system/issues"
-  },
-  "module": "fesm2022/lilydesignsystem-angular-link-picker.mjs",
-  "typings": "types/lilydesignsystem-angular-link-picker.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/lilydesignsystem-angular-link-picker.d.ts",
-      "default": "./fesm2022/lilydesignsystem-angular-link-picker.mjs"
-    }
-  },
-  "type": "module"
-}
+  }
+}

package/spec/index.md

@@ -0,0 +1,102 @@
+# LinkPicker (Angular) — spec
+
+**Package:** `@lilydesignsystem/angular-link-picker` · **Canonical contract:** the Svelte catalog's spec; this file is its Angular port.
+Topic summary: [spec/link-picker](../../../spec/link-picker/index.md).
+
+## 1. Goal
+
+An icon button — a typical **home** icon — that opens a dropdown of **page links the app defines** ("Home", "About Us",
+"Contact Us", "Privacy Policy", …). It owns the whole interaction: open/close, focus, keyboard, tooltip. It owns no routes
+and no words: every link, and every accessible name, comes from the consumer.
+
+## 2. Non-goals
+
+- No default links, no English text, no routing. A client-side router is supplied through `navigate`.
+- Not a site navigation bar and not an ARIA menu: five links behind an icon, in a page header.
+- No persistence, no current-page detection (the app marks `current`).
+
+## 3. Architectural decisions
+
+- **A disclosure of real links, not a menu or listbox.** The items are navigation, so they are `<a href>`: `role="menuitem"`
+  would strip middle-click, open-in-new-tab and copy-link-address, and the WAI-ARIA APG itself suggests a disclosure when the
+  items are links. Same decision as `share-picker`.
+- **Only the trigger composes headless** (`IconButton`); the list is self-built for the same reason `share-picker`'s is.
+- **The app defines the links** through the required `links` prop. No default, because a default would be a hardcoded string
+  and a hardcoded route.
+- **`navigate` is optional.** Without it links are ordinary page loads; with it (SvelteKit `goto`) a plain left click is a
+  client-side navigation and modified clicks stay native.
+
+## 4. Public API
+
+### 4.1 Props
+
+| Prop | Type | Required | Notes |
+| --- | --- | --- | --- |
+| `label` | `input.required<string>()` | yes | Accessible name of the button **and** the list; also the tooltip text. |
+| `links` | `input.required<LinkItem[]>()` | yes | `{ id?, label, href, current?, newTab? }`. `id` defaults to `href`. |
+| `navigate` | `input<(href: string) => void>()` | no | Client-side navigation hook (a router's `navigateByUrl`). |
+| `navigated` | `output<{ id, href }>()` | no | Emitted after a link is chosen (the Svelte `onNavigate` callback). |
+| icon template | `<ng-template lilyLinkPickerIcon let-args>` | no | Replaces the **icon**, not the links. |
+| `className` | `input<string>()` | no | Appended to the root class. |
+
+**Differences from the Svelte contract (idiom, not behaviour).** Angular renders the same DOM through the `lily-link-picker` selector; the trigger is the headless `lily-icon-button`, the Svelte `onNavigate` callback is the `navigated` output, and the icon override is a projected `<ng-template>`.
+
+### 4.2 DOM contract
+
+```html
+<div class="link-picker {class}">
+  <button class="link-picker-button" type="button" aria-label="{label}" aria-expanded="false" aria-controls="{id}-list">
+    <svg class="link-picker-icon" aria-hidden="true" viewBox="0 0 16 16" …home…/>
+  </button>
+  <div class="link-picker-tooltip" role="tooltip" id="{id}-tooltip" hidden>{label}</div>
+  <ul class="link-picker-list" id="{id}-list" aria-label="{label}" hidden>
+    <li class="link-picker-list-item"><a class="link-picker-link" href="/" data-link-id="/">Home</a></li>
+    …
+  </ul>
+</div>
+```
+
+The current page's link carries `aria-current="page"`. `newTab` links carry `target="_blank" rel="noopener noreferrer"`.
+
+### 4.3 Re-exports
+
+`LinkPicker`, `LinkPickerIcon`, `linkId`, `nextLinkPickerId`, types `ChildArgs`, `LinkItem`, `LinkNavigatedEvent`.
+
+## 5. Behaviour
+
+### 5.1 Activation
+
+Click toggles the list. Opening focuses the first link; the page does not scroll (`preventScroll`). Choosing a link closes the
+list and returns focus to the button (when the link did not navigate away).
+
+### 5.2 Keyboard
+
+- Button: `ArrowDown` opens and focuses the first link (or moves into an open list); `ArrowUp` opens and focuses the last;
+  `Enter`/`Space` toggle.
+- List: `ArrowDown`/`ArrowUp` move (clamped, no wrap), `Home`/`End` jump, `Escape` closes and returns focus to the button,
+  `Tab` closes and moves on.
+- Clicking outside, or focus leaving the picker, closes the list.
+
+### 5.3 Tooltip
+
+`<div class="link-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 list 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
+list is named; links are real links with `aria-current="page"` where marked; focus stays visible; no motion.
+
+## 7. Testing acceptance criteria
+
+The behavioural clauses are the Svelte spec's §7 (open/close, focus, keyboard, `aria-current`, `newTab`, id reporting,
+tooltip, no stylesheet / English / routes). This port's suite, `link-picker.component.spec.ts`, has 24 tests, one per clause
+(§7.1–§7.24), in the same order; where the idiom changes a clause the test name says how. Deviations are listed in §4.1.
+
+## 8. Tracking
+
+- Package: `@lilydesignsystem/angular-link-picker`
+- Version: 0.1.0 (new, 2026-10-07)
+- Framework: Angular `>=20 <23` (signals, standalone, OnPush)
+- Test runner: vitest + TestBed

package/tsconfig.lib.json

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

package/fesm2022/lilydesignsystem-angular-link-picker.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"lilydesignsystem-angular-link-picker.mjs","names":[],"sources":["../../link-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  output,\n  signal,\n  viewChild,\n} from \"@angular/core\";\n// Only the trigger button composes a headless primitive. The list below is real `<a>` navigation\n// with a roving-focus pattern of its own — not an ARIA listbox or menu: role=\"menuitem\" would strip\n// middle-click, open-in-new-tab and copy-link-address from ordinary links. See spec/index.md §3.\nimport { IconButton } from \"@lilydesignsystem/angular-headless\";\n\n/**\n * One destination in the list. The app defines them all: this package ships no routes and no\n * English — `label` is the consumer's text.\n */\nexport type LinkItem = {\n  /** Stable identifier, passed back on the `navigated` output. Defaults to `href`. */\n  id?: string;\n  /** Visible link text. Consumer-supplied, so it localises. */\n  label: string;\n  /** Where the link goes: a route (\"/about/\") or a full URL. */\n  href: string;\n  /** Marks this link as the current page (`aria-current=\"page\"`). */\n  current?: boolean;\n  /** Open in a new tab (`target=\"_blank\"` with `rel=\"noopener noreferrer\"`). */\n  newTab?: boolean;\n};\n\n/** Context passed to a custom icon `<ng-template>` (the button icon). */\nexport type ChildArgs = {\n  /** Is the list open? */\n  open: boolean;\n};\n\n/** Payload of the `navigated` output. */\nexport type LinkNavigatedEvent = {\n  /** The chosen link's `id` (its `href` when it has none). */\n  id: string;\n  /** The chosen link's `href`. */\n  href: string;\n};\n\n/** The id a link reports: its explicit `id`, else its `href`. */\nexport function linkId(link: LinkItem): string {\n  return link.id ?? link.href;\n}\n\nlet uid = 0;\n/** Stable per-instance id prefix; SSR-safe (no Math.random / Date.now). */\nexport function nextLinkPickerId(): string {\n  uid += 1;\n  return `link-picker-${uid}`;\n}\n\n/**\n * Optional marker for the projected icon template. Gives consumers typed `let-` variables:\n *\n * ```html\n * <lily-link-picker label=\"Pages\" [links]=\"links\">\n *   <ng-template lilyLinkPickerIcon let-args>{{ args.open ? \"×\" : \"☰\" }}</ng-template>\n * </lily-link-picker>\n * ```\n */\n@Directive({\n  selector: \"ng-template[lilyLinkPickerIcon]\",\n  standalone: true,\n})\nexport class LinkPickerIcon {\n  static ngTemplateContextGuard(\n    _dir: LinkPickerIcon,\n    _ctx: unknown,\n  ): _ctx is ChildArgs & { $implicit: ChildArgs } {\n    return true;\n  }\n}\n\n/**\n * LinkPicker — a headless page-links control.\n *\n * A single-icon button (a bundled home SVG) that opens a disclosure list of page links the app\n * defines. It applies nothing to the document and persists nothing. See `spec/index.md`.\n */\n@Component({\n  selector: \"lily-link-picker\",\n  standalone: true,\n  imports: [NgTemplateOutlet, IconButton],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    \"(document:click)\": \"onDocumentClick($event)\",\n  },\n  template: `\n    <div\n      #rootEl\n      class=\"link-picker {{ className() }}\"\n      (focusout)=\"onRootFocusOut($event)\"\n    >\n      <lily-icon-button\n        #buttonEl\n        [label]=\"label()\"\n        baseClass=\"link-picker-button\"\n        [ariaExpanded]=\"open()\"\n        [ariaControls]=\"listId\"\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=\"link-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=\"M2 7.5 8 2.5l6 5\" />\n            <path d=\"M3.5 6.5v7h9v-7\" />\n            <path d=\"M6.5 13.5V10h3v3.5\" />\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=\"link-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      <!-- Named like the sibling pickers' popups: a screen reader entering the list hears what\n           it is for. -->\n      <ul\n        #listEl\n        class=\"link-picker-list\"\n        [id]=\"listId\"\n        [attr.aria-label]=\"label() || null\"\n        [attr.hidden]=\"open() ? null : ''\"\n        (keydown)=\"onListKeydown($event)\"\n      >\n        @for (link of links(); track idOf(link)) {\n          <li class=\"link-picker-list-item\">\n            <!-- A real link, not role=\"menuitem\": these ARE navigation. -->\n            <a\n              class=\"link-picker-link\"\n              [attr.data-link-id]=\"idOf(link)\"\n              [attr.href]=\"link.href\"\n              [attr.aria-current]=\"link.current ? 'page' : null\"\n              [attr.target]=\"link.newTab ? '_blank' : null\"\n              [attr.rel]=\"link.newTab ? 'noopener noreferrer' : null\"\n              (click)=\"onLinkClick($event, link)\"\n              >{{ link.label }}</a\n            >\n          </li>\n        }\n      </ul>\n    </div>\n  `,\n})\nexport class LinkPicker {\n  /** Accessible name for the button and the list. */\n  readonly label = input.required<string>();\n  /** The page links to offer. Defined by the app. */\n  readonly links = input.required<LinkItem[]>();\n  /**\n   * Client-side navigation hook, e.g. a router's `navigateByUrl`. When given, a plain left click\n   * on a link calls `navigate(href)` instead of letting the browser load the page; modified\n   * clicks (Ctrl/Cmd/Shift/Alt, middle button) and `newTab` links stay native.\n   */\n  readonly navigate = input<((href: string) => void) | undefined>(undefined);\n  /** Extra CSS class on the root div. */\n  readonly className = input<string>(\"\");\n\n  /** Fires after a link is chosen. */\n  readonly navigated = output<LinkNavigatedEvent>();\n\n  /** Projected icon template; replaces the default icon when supplied. */\n  protected readonly iconTemplate = contentChild(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 listRef =\n    viewChild.required<ElementRef<HTMLUListElement>>(\"listEl\");\n\n  private readonly baseId = nextLinkPickerId();\n  protected readonly listId = `${this.baseId}-list`;\n\n  protected readonly open = signal(false);\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  protected idOf(link: LinkItem): string {\n    return linkId(link);\n  }\n\n  /** Every focusable link in the list, in DOM order. */\n  private items(): HTMLElement[] {\n    return Array.from(\n      this.listRef().nativeElement.querySelectorAll<HTMLElement>(\".link-picker-link\"),\n    );\n  }\n\n  // ---------------------------------------------------------------\n  // Open / close\n  // ---------------------------------------------------------------\n\n  /** Open the list, focusing the first link (or the last, if `focusLast`). */\n  openList(focusLast = false): void {\n    this.open.set(true);\n    // Deferred so the `hidden` attribute is gone before focus is moved.\n    queueMicrotask(() => {\n      const all = this.items();\n      (focusLast ? all[all.length - 1] : all[0])?.focus({ preventScroll: true });\n    });\n  }\n\n  /** Close the list; `refocus` returns focus to the trigger. */\n  closeList(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  protected onButtonClick(): void {\n    if (this.open()) this.closeList();\n    else this.openList();\n  }\n\n  protected onLinkClick(event: MouseEvent, link: LinkItem): void {\n    this.navigated.emit({ id: linkId(link), href: link.href });\n    const go = this.navigate();\n    const modified =\n      event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || event.button !== 0;\n    if (go && !link.newTab && !modified && !event.defaultPrevented) {\n      event.preventDefault();\n      go(link.href);\n    }\n    this.closeList();\n  }\n\n  // ---------------------------------------------------------------\n  // Keyboard\n  // ---------------------------------------------------------------\n\n  protected onButtonKeydown(event: KeyboardEvent): void {\n    // Enter and Space already produce a click; only the arrows need handling here.\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      if (!this.open()) this.openList();\n      else this.items()[0]?.focus({ preventScroll: true });\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!this.open()) this.openList(true);\n      else {\n        const all = this.items();\n        all[all.length - 1]?.focus({ preventScroll: true });\n      }\n    }\n  }\n\n  private moveFocus(delta: number): void {\n    const all = this.items();\n    if (all.length === 0) return;\n    const i = all.indexOf(document.activeElement as HTMLElement);\n    // Clamp rather than wrap.\n    const next = Math.min(Math.max((i < 0 ? 0 : i) + delta, 0), all.length - 1);\n    all[next]?.focus({ preventScroll: true });\n  }\n\n  protected onListKeydown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        this.moveFocus(1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        this.moveFocus(-1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this.items()[0]?.focus({ preventScroll: true });\n        break;\n      case \"End\": {\n        event.preventDefault();\n        const all = this.items();\n        all[all.length - 1]?.focus({ preventScroll: true });\n        break;\n      }\n      case \"Escape\":\n        event.preventDefault();\n        this.closeList();\n        break;\n      case \"Tab\":\n        // Focus goes to the button FIRST, without cancelling the key: hiding the list while a\n        // link has focus drops focus to <body>, and the default Tab would restart from the top.\n        this.buttonRef().focus?.({ preventScroll: true });\n        this.closeList(false);\n        break;\n      default:\n        break;\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.closeList(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.closeList(false);\n  }\n}\n"],"mappings":"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"}