@vakwerk/navigation 0.0.0-stage → 0.0.0

package/dist/overlay.js

@@ -0,0 +1,75 @@
+import { uniqueId } from './dom.js';
+/**
+ * The menu button and the `<dialog>` panel of one navigation. Both exist while the navigation is
+ * enhanced; the navigation's own `<ul>` moves into the panel in overlay mode and back to its place
+ * in `<nav>` in inline mode, so there is only ever one list.
+ */
+export class Overlay {
+    button;
+    dialog;
+    closeButton;
+    #nav;
+    #list;
+    #inner;
+    /** The node the list sat before in `<nav>`, to put it back in the same place. */
+    #listNext;
+    constructor(nav, list) {
+        const doc = nav.ownerDocument;
+        this.#nav = nav;
+        this.#list = list;
+        this.#listNext = list.nextSibling;
+        this.dialog = doc.createElement('dialog');
+        this.dialog.className = 'ui-nav__panel';
+        this.dialog.id = uniqueId(doc, 'ui-nav-');
+        // The dialog takes the navigation's name, whichever way the nav is named.
+        for (const attribute of ['aria-labelledby', 'aria-label']) {
+            const value = nav.getAttribute(attribute);
+            if (value) {
+                this.dialog.setAttribute(attribute, value);
+                break;
+            }
+        }
+        this.#inner = doc.createElement('div');
+        this.#inner.className = 'ui-nav__panel-inner';
+        this.closeButton = doc.createElement('button');
+        this.closeButton.type = 'button';
+        this.closeButton.className = 'ui-nav__close';
+        // No autofocus: as the first focusable element in the dialog, showModal() focuses it anyway,
+        // and an autofocus element inserted while something else has focus makes Chrome log a message.
+        this.#inner.append(this.closeButton);
+        this.dialog.append(this.#inner);
+        this.button = doc.createElement('button');
+        this.button.type = 'button';
+        this.button.className = 'ui-nav__menu-button';
+        this.button.setAttribute('aria-expanded', 'false');
+        this.button.setAttribute('aria-haspopup', 'dialog');
+        this.button.setAttribute('aria-controls', this.dialog.id);
+        nav.prepend(this.button, this.dialog);
+    }
+    get isOpen() {
+        return this.dialog.hasAttribute('open');
+    }
+    setLabels(open, close) {
+        this.button.textContent = open;
+        this.closeButton.textContent = close;
+    }
+    /** Puts the list in the panel (`true`) or back in its place in `<nav>` (`false`). */
+    moveList(toPanel) {
+        if (toPanel) {
+            if (this.#list.parentElement !== this.#inner)
+                this.#inner.append(this.#list);
+        }
+        else if (this.#list.parentElement !== this.#nav) {
+            this.#nav.insertBefore(this.#list, this.#listNext?.parentNode === this.#nav ? this.#listNext : null);
+        }
+    }
+    /** Removes the button and the panel and puts the list back. */
+    detach() {
+        if (this.isOpen)
+            this.dialog.close();
+        this.moveList(false);
+        this.button.remove();
+        this.dialog.remove();
+    }
+}
+//# sourceMappingURL=overlay.js.map

package/dist/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import { uniqueId } from './dom.js';\n\n/**\n * The menu button and the `<dialog>` panel of one navigation. Both exist while the navigation is\n * enhanced; the navigation's own `<ul>` moves into the panel in overlay mode and back to its place\n * in `<nav>` in inline mode, so there is only ever one list.\n */\nexport class Overlay {\n  readonly button: HTMLButtonElement;\n  readonly dialog: HTMLDialogElement;\n  readonly closeButton: HTMLButtonElement;\n\n  readonly #nav: HTMLElement;\n  readonly #list: HTMLUListElement;\n  readonly #inner: HTMLDivElement;\n  /** The node the list sat before in `<nav>`, to put it back in the same place. */\n  readonly #listNext: Node | null;\n\n  constructor(nav: HTMLElement, list: HTMLUListElement) {\n    const doc = nav.ownerDocument;\n    this.#nav = nav;\n    this.#list = list;\n    this.#listNext = list.nextSibling;\n\n    this.dialog = doc.createElement('dialog');\n    this.dialog.className = 'ui-nav__panel';\n    this.dialog.id = uniqueId(doc, 'ui-nav-');\n    // The dialog takes the navigation's name, whichever way the nav is named.\n    for (const attribute of ['aria-labelledby', 'aria-label']) {\n      const value = nav.getAttribute(attribute);\n      if (value) {\n        this.dialog.setAttribute(attribute, value);\n        break;\n      }\n    }\n\n    this.#inner = doc.createElement('div');\n    this.#inner.className = 'ui-nav__panel-inner';\n    this.closeButton = doc.createElement('button');\n    this.closeButton.type = 'button';\n    this.closeButton.className = 'ui-nav__close';\n    // No autofocus: as the first focusable element in the dialog, showModal() focuses it anyway,\n    // and an autofocus element inserted while something else has focus makes Chrome log a message.\n    this.#inner.append(this.closeButton);\n    this.dialog.append(this.#inner);\n\n    this.button = doc.createElement('button');\n    this.button.type = 'button';\n    this.button.className = 'ui-nav__menu-button';\n    this.button.setAttribute('aria-expanded', 'false');\n    this.button.setAttribute('aria-haspopup', 'dialog');\n    this.button.setAttribute('aria-controls', this.dialog.id);\n\n    nav.prepend(this.button, this.dialog);\n  }\n\n  get isOpen(): boolean {\n    return this.dialog.hasAttribute('open');\n  }\n\n  setLabels(open: string, close: string): void {\n    this.button.textContent = open;\n    this.closeButton.textContent = close;\n  }\n\n  /** Puts the list in the panel (`true`) or back in its place in `<nav>` (`false`). */\n  moveList(toPanel: boolean): void {\n    if (toPanel) {\n      if (this.#list.parentElement !== this.#inner) this.#inner.append(this.#list);\n    } else if (this.#list.parentElement !== this.#nav) {\n      this.#nav.insertBefore(this.#list, this.#listNext?.parentNode === this.#nav ? this.#listNext : null);\n    }\n  }\n\n  /** Removes the button and the panel and puts the list back. */\n  detach(): void {\n    if (this.isOpen) this.dialog.close();\n    this.moveList(false);\n    this.button.remove();\n    this.dialog.remove();\n  }\n}\n"]}

package/dist/submenus.d.ts

@@ -0,0 +1,48 @@
+/** The text of a label element, trimmed and with whitespace runs collapsed to one space. */
+export declare function labelText(el: Element): string;
+export type OpenedBy = 'click' | 'hover';
+/**
+ * Called whenever a submenu opens, closes or is pinned; `by` is how it was (or had been) opened,
+ * or `pin` when a click keeps a hover-opened submenu open.
+ */
+export type SubmenuChange = (change: {
+    open: boolean;
+    label: string;
+    by: OpenedBy | 'pin';
+}) => void;
+/**
+ * Adds and removes the disclosure toggles of every submenu in one `<nav>`. A parent with a link
+ * keeps the link and gets a separate toggle after it (a split button); a top-level parent with a
+ * `<span>` has the span swapped for a toggle with the same content, and the same span put back on
+ * removal. A `<span>` parent below the top level is a group: it never gets a toggle, its list is
+ * always shown with its parent, and the span names that list (`aria-labelledby`).
+ */
+export declare class Submenus {
+    #private;
+    /** How each open submenu was opened. */
+    readonly openedBy: Map<HTMLLIElement, OpenedBy>;
+    constructor(nav: HTMLElement, onChange: SubmenuChange);
+    /** Adds the toggles when `present` and removes them otherwise; `labelSubmenu` names split toggles. */
+    syncToggles(present: boolean, labelSubmenu: string): void;
+    /** Every list item that has a submenu. */
+    get parentItems(): HTMLLIElement[];
+    /** Keeps a hover-opened submenu open as if it had been clicked open. */
+    pin(li: HTMLLIElement): void;
+    /** The parent whose toggle is `toggle`, if any. */
+    parentOfToggle(toggle: Element): HTMLLIElement | undefined;
+    toggleOf(li: HTMLLIElement): HTMLButtonElement | undefined;
+    isOpen(li: HTMLLIElement): boolean;
+    expand(li: HTMLLIElement, by: OpenedBy): void;
+    /** Closes the submenu of `li` and every submenu open inside it. */
+    collapse(li: HTMLLIElement): void;
+    /** Closes every open submenu, or only those inside `scope`. */
+    collapseAll(scope?: Element): void;
+    /** Closes the open submenus of the other items on the same level as `li`. */
+    collapseSiblings(li: HTMLLIElement): void;
+    /** The nearest open parent around `element` (a parent's own toggle counts as inside it). */
+    innermostOpen(element: Element): HTMLLIElement | undefined;
+    /** The top-level item of this menu that contains `element`, if any. */
+    topLevelItemOf(element: Element): HTMLLIElement | undefined;
+    destroy(): void;
+}
+//# sourceMappingURL=submenus.d.ts.map

package/dist/submenus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"submenus.d.ts","sourceRoot":"","sources":["../src/submenus.ts"],"names":[],"mappings":"AAEA,4FAA4F;AAC5F,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,CAE7C;AAID,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAEzC;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,KAAK,IAAI,CAAC;AAUrG;;;;;;GAMG;AACH,qBAAa,QAAQ;;IASnB,wCAAwC;IACxC,QAAQ,CAAC,QAAQ,+BAAsC;gBAE3C,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa;IAgBrD,sGAAsG;IACtG,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,IAAI;IAUzD,0CAA0C;IAC1C,IAAI,WAAW,IAAI,aAAa,EAAE,CAEjC;IAED,wEAAwE;IACxE,GAAG,CAAC,EAAE,EAAE,aAAa,GAAG,IAAI;IAM5B,mDAAmD;IACnD,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,aAAa,GAAG,SAAS;IAK1D,QAAQ,CAAC,EAAE,EAAE,aAAa,GAAG,iBAAiB,GAAG,SAAS;IAI1D,MAAM,CAAC,EAAE,EAAE,aAAa,GAAG,OAAO;IAIlC,MAAM,CAAC,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQ7C,mEAAmE;IACnE,QAAQ,CAAC,EAAE,EAAE,aAAa,GAAG,IAAI;IAWjC,+DAA+D;IAC/D,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;IAOlC,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,EAAE,aAAa,GAAG,IAAI;IAMzC,4FAA4F;IAC5F,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,aAAa,GAAG,SAAS;IAO1D,uEAAuE;IACvE,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,aAAa,GAAG,SAAS;IAQ3D,OAAO,IAAI,IAAI;CAwEhB"}

package/dist/submenus.js

@@ -0,0 +1,209 @@
+import { createChevron, createVisuallyHidden, uniqueId } from './dom.js';
+/** The text of a label element, trimmed and with whitespace runs collapsed to one space. */
+export function labelText(el) {
+    return (el.textContent ?? '').replace(/\s+/g, ' ').trim();
+}
+const FOCUSABLE = 'a[href], button:not([disabled])';
+/**
+ * Adds and removes the disclosure toggles of every submenu in one `<nav>`. A parent with a link
+ * keeps the link and gets a separate toggle after it (a split button); a top-level parent with a
+ * `<span>` has the span swapped for a toggle with the same content, and the same span put back on
+ * removal. A `<span>` parent below the top level is a group: it never gets a toggle, its list is
+ * always shown with its parent, and the span names that list (`aria-labelledby`).
+ */
+export class Submenus {
+    #nav;
+    #doc;
+    #parents;
+    #toggles = new Map();
+    #generatedIds = new Set();
+    #labelledGroups = new Set();
+    #onChange;
+    #labelTemplate = '';
+    /** How each open submenu was opened. */
+    openedBy = new Map();
+    constructor(nav, onChange) {
+        this.#nav = nav;
+        this.#doc = nav.ownerDocument;
+        this.#onChange = onChange;
+        this.#parents = [];
+        for (const li of nav.querySelectorAll('li')) {
+            const submenu = li.querySelector(':scope > ul');
+            const label = li.querySelector(':scope > a, :scope > span');
+            if (!submenu || !label)
+                continue;
+            const outer = li.parentElement?.closest('li');
+            const isGroup = label.localName === 'span' && outer != null && nav.contains(outer);
+            if (isGroup)
+                this.#nameGroup(submenu, label);
+            else
+                this.#parents.push({ li, submenu, label });
+        }
+    }
+    /** Adds the toggles when `present` and removes them otherwise; `labelSubmenu` names split toggles. */
+    syncToggles(present, labelSubmenu) {
+        this.#labelTemplate = labelSubmenu;
+        for (const parent of this.#parents) {
+            const toggle = this.#toggles.get(parent.li);
+            if (present && !toggle)
+                this.#addToggle(parent);
+            else if (!present && toggle)
+                this.#removeToggle(parent, toggle);
+            else if (toggle)
+                this.#renameSplitToggle(parent, toggle);
+        }
+    }
+    /** Every list item that has a submenu. */
+    get parentItems() {
+        return this.#parents.map((parent) => parent.li);
+    }
+    /** Keeps a hover-opened submenu open as if it had been clicked open. */
+    pin(li) {
+        if (this.openedBy.get(li) !== 'hover')
+            return;
+        this.openedBy.set(li, 'click');
+        this.#notify(li, true, 'pin');
+    }
+    /** The parent whose toggle is `toggle`, if any. */
+    parentOfToggle(toggle) {
+        for (const [li, button] of this.#toggles)
+            if (button === toggle)
+                return li;
+        return undefined;
+    }
+    toggleOf(li) {
+        return this.#toggles.get(li);
+    }
+    isOpen(li) {
+        return this.#toggles.get(li)?.getAttribute('aria-expanded') === 'true';
+    }
+    expand(li, by) {
+        const toggle = this.#toggles.get(li);
+        if (!toggle || this.isOpen(li))
+            return;
+        toggle.setAttribute('aria-expanded', 'true');
+        this.openedBy.set(li, by);
+        this.#notify(li, true, by);
+    }
+    /** Closes the submenu of `li` and every submenu open inside it. */
+    collapse(li) {
+        for (const parent of this.#parents) {
+            if (parent.li !== li && !li.contains(parent.li))
+                continue;
+            if (!this.isOpen(parent.li))
+                continue;
+            const by = this.openedBy.get(parent.li) ?? 'click';
+            this.#toggles.get(parent.li)?.setAttribute('aria-expanded', 'false');
+            this.openedBy.delete(parent.li);
+            this.#notify(parent.li, false, by);
+        }
+    }
+    /** Closes every open submenu, or only those inside `scope`. */
+    collapseAll(scope) {
+        for (const parent of this.#parents) {
+            if (scope && !scope.contains(parent.li))
+                continue;
+            this.collapse(parent.li);
+        }
+    }
+    /** Closes the open submenus of the other items on the same level as `li`. */
+    collapseSiblings(li) {
+        for (const sibling of li.parentElement?.children ?? []) {
+            if (sibling !== li && sibling instanceof this.#doc.defaultView.HTMLLIElement)
+                this.collapse(sibling);
+        }
+    }
+    /** The nearest open parent around `element` (a parent's own toggle counts as inside it). */
+    innermostOpen(element) {
+        for (let node = element; node; node = node.parentElement) {
+            if (node instanceof this.#doc.defaultView.HTMLLIElement && this.isOpen(node))
+                return node;
+        }
+        return undefined;
+    }
+    /** The top-level item of this menu that contains `element`, if any. */
+    topLevelItemOf(element) {
+        let item;
+        for (let node = element; node && node !== this.#nav; node = node.parentElement) {
+            if (node instanceof this.#doc.defaultView.HTMLLIElement)
+                item = node;
+        }
+        return item;
+    }
+    destroy() {
+        for (const parent of this.#parents) {
+            const toggle = this.#toggles.get(parent.li);
+            if (toggle)
+                this.#removeToggle(parent, toggle);
+        }
+        for (const submenu of this.#labelledGroups)
+            submenu.removeAttribute('aria-labelledby');
+        this.#labelledGroups.clear();
+        for (const element of this.#generatedIds)
+            element.removeAttribute('id');
+        this.#generatedIds.clear();
+    }
+    /** Names a group's list after its label, unless the markup already names it. */
+    #nameGroup(submenu, label) {
+        if (submenu.hasAttribute('aria-labelledby') || submenu.hasAttribute('aria-label'))
+            return;
+        if (!label.id) {
+            label.id = uniqueId(this.#doc, 'ui-nav-');
+            this.#generatedIds.add(label);
+        }
+        submenu.setAttribute('aria-labelledby', label.id);
+        this.#labelledGroups.add(submenu);
+    }
+    #addToggle(parent) {
+        const { li, submenu, label } = parent;
+        if (!submenu.id) {
+            submenu.id = uniqueId(this.#doc, 'ui-nav-');
+            this.#generatedIds.add(submenu);
+        }
+        const toggle = this.#doc.createElement('button');
+        toggle.type = 'button';
+        toggle.className = 'ui-nav__toggle';
+        toggle.setAttribute('aria-expanded', 'false');
+        toggle.setAttribute('aria-controls', submenu.id);
+        if (label instanceof this.#doc.defaultView.HTMLAnchorElement) {
+            toggle.append(createVisuallyHidden(this.#doc, this.#splitLabel(label)));
+            label.after(toggle);
+        }
+        else {
+            toggle.classList.add('ui-nav__toggle--label');
+            toggle.append(...[...label.childNodes].map((node) => node.cloneNode(true)));
+            label.replaceWith(toggle);
+        }
+        toggle.append(createChevron(this.#doc));
+        this.#toggles.set(li, toggle);
+    }
+    #removeToggle(parent, toggle) {
+        const hadFocus = this.#doc.activeElement === toggle;
+        if (parent.label.isConnected)
+            toggle.remove();
+        else
+            toggle.replaceWith(parent.label);
+        this.#toggles.delete(parent.li);
+        this.openedBy.delete(parent.li);
+        if (!hadFocus)
+            return;
+        const target = parent.label.matches(FOCUSABLE)
+            ? parent.label
+            : parent.submenu.querySelector(FOCUSABLE);
+        target?.focus();
+    }
+    #renameSplitToggle(parent, toggle) {
+        const hidden = toggle.querySelector('.ui-nav__visually-hidden');
+        if (hidden)
+            hidden.textContent = this.#splitLabel(parent.label);
+    }
+    #notify(li, open, by) {
+        const parent = this.#parents.find((candidate) => candidate.li === li);
+        if (parent)
+            this.#onChange({ open, label: labelText(parent.label), by });
+    }
+    #splitLabel(link) {
+        return this.#labelTemplate.replaceAll('{label}', labelText(link));
+    }
+}
+//# sourceMappingURL=submenus.js.map

package/dist/submenus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"submenus.js","sourceRoot":"","sources":["../src/submenus.ts"],"names":[],"mappings":"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","sourcesContent":["import { createChevron, createVisuallyHidden, uniqueId } from './dom.js';\n\n/** The text of a label element, trimmed and with whitespace runs collapsed to one space. */\nexport function labelText(el: Element): string {\n  return (el.textContent ?? '').replace(/\\s+/g, ' ').trim();\n}\n\nconst FOCUSABLE = 'a[href], button:not([disabled])';\n\nexport type OpenedBy = 'click' | 'hover';\n\n/**\n * Called whenever a submenu opens, closes or is pinned; `by` is how it was (or had been) opened,\n * or `pin` when a click keeps a hover-opened submenu open.\n */\nexport type SubmenuChange = (change: { open: boolean; label: string; by: OpenedBy | 'pin' }) => void;\n\n/** A list item with a submenu, and the element that labels it in the rendered markup. */\ninterface Parent {\n  li: HTMLLIElement;\n  submenu: HTMLUListElement;\n  /** The link of a split parent, or the `<span>` of a parent without a page. */\n  label: HTMLAnchorElement | HTMLSpanElement;\n}\n\n/**\n * Adds and removes the disclosure toggles of every submenu in one `<nav>`. A parent with a link\n * keeps the link and gets a separate toggle after it (a split button); a top-level parent with a\n * `<span>` has the span swapped for a toggle with the same content, and the same span put back on\n * removal. A `<span>` parent below the top level is a group: it never gets a toggle, its list is\n * always shown with its parent, and the span names that list (`aria-labelledby`).\n */\nexport class Submenus {\n  readonly #nav: HTMLElement;\n  readonly #doc: Document;\n  readonly #parents: Parent[];\n  readonly #toggles = new Map<HTMLLIElement, HTMLButtonElement>();\n  readonly #generatedIds = new Set<HTMLElement>();\n  readonly #labelledGroups = new Set<HTMLUListElement>();\n  readonly #onChange: SubmenuChange;\n  #labelTemplate = '';\n  /** How each open submenu was opened. */\n  readonly openedBy = new Map<HTMLLIElement, OpenedBy>();\n\n  constructor(nav: HTMLElement, onChange: SubmenuChange) {\n    this.#nav = nav;\n    this.#doc = nav.ownerDocument;\n    this.#onChange = onChange;\n    this.#parents = [];\n    for (const li of nav.querySelectorAll('li')) {\n      const submenu = li.querySelector<HTMLUListElement>(':scope > ul');\n      const label = li.querySelector<HTMLAnchorElement | HTMLSpanElement>(':scope > a, :scope > span');\n      if (!submenu || !label) continue;\n      const outer = li.parentElement?.closest('li');\n      const isGroup = label.localName === 'span' && outer != null && nav.contains(outer);\n      if (isGroup) this.#nameGroup(submenu, label);\n      else this.#parents.push({ li, submenu, label } as Parent);\n    }\n  }\n\n  /** Adds the toggles when `present` and removes them otherwise; `labelSubmenu` names split toggles. */\n  syncToggles(present: boolean, labelSubmenu: string): void {\n    this.#labelTemplate = labelSubmenu;\n    for (const parent of this.#parents) {\n      const toggle = this.#toggles.get(parent.li);\n      if (present && !toggle) this.#addToggle(parent);\n      else if (!present && toggle) this.#removeToggle(parent, toggle);\n      else if (toggle) this.#renameSplitToggle(parent, toggle);\n    }\n  }\n\n  /** Every list item that has a submenu. */\n  get parentItems(): HTMLLIElement[] {\n    return this.#parents.map((parent) => parent.li);\n  }\n\n  /** Keeps a hover-opened submenu open as if it had been clicked open. */\n  pin(li: HTMLLIElement): void {\n    if (this.openedBy.get(li) !== 'hover') return;\n    this.openedBy.set(li, 'click');\n    this.#notify(li, true, 'pin');\n  }\n\n  /** The parent whose toggle is `toggle`, if any. */\n  parentOfToggle(toggle: Element): HTMLLIElement | undefined {\n    for (const [li, button] of this.#toggles) if (button === toggle) return li;\n    return undefined;\n  }\n\n  toggleOf(li: HTMLLIElement): HTMLButtonElement | undefined {\n    return this.#toggles.get(li);\n  }\n\n  isOpen(li: HTMLLIElement): boolean {\n    return this.#toggles.get(li)?.getAttribute('aria-expanded') === 'true';\n  }\n\n  expand(li: HTMLLIElement, by: OpenedBy): void {\n    const toggle = this.#toggles.get(li);\n    if (!toggle || this.isOpen(li)) return;\n    toggle.setAttribute('aria-expanded', 'true');\n    this.openedBy.set(li, by);\n    this.#notify(li, true, by);\n  }\n\n  /** Closes the submenu of `li` and every submenu open inside it. */\n  collapse(li: HTMLLIElement): void {\n    for (const parent of this.#parents) {\n      if (parent.li !== li && !li.contains(parent.li)) continue;\n      if (!this.isOpen(parent.li)) continue;\n      const by = this.openedBy.get(parent.li) ?? 'click';\n      this.#toggles.get(parent.li)?.setAttribute('aria-expanded', 'false');\n      this.openedBy.delete(parent.li);\n      this.#notify(parent.li, false, by);\n    }\n  }\n\n  /** Closes every open submenu, or only those inside `scope`. */\n  collapseAll(scope?: Element): void {\n    for (const parent of this.#parents) {\n      if (scope && !scope.contains(parent.li)) continue;\n      this.collapse(parent.li);\n    }\n  }\n\n  /** Closes the open submenus of the other items on the same level as `li`. */\n  collapseSiblings(li: HTMLLIElement): void {\n    for (const sibling of li.parentElement?.children ?? []) {\n      if (sibling !== li && sibling instanceof this.#doc.defaultView!.HTMLLIElement) this.collapse(sibling);\n    }\n  }\n\n  /** The nearest open parent around `element` (a parent's own toggle counts as inside it). */\n  innermostOpen(element: Element): HTMLLIElement | undefined {\n    for (let node: Element | null = element; node; node = node.parentElement) {\n      if (node instanceof this.#doc.defaultView!.HTMLLIElement && this.isOpen(node)) return node;\n    }\n    return undefined;\n  }\n\n  /** The top-level item of this menu that contains `element`, if any. */\n  topLevelItemOf(element: Element): HTMLLIElement | undefined {\n    let item: HTMLLIElement | undefined;\n    for (let node: Element | null = element; node && node !== this.#nav; node = node.parentElement) {\n      if (node instanceof this.#doc.defaultView!.HTMLLIElement) item = node;\n    }\n    return item;\n  }\n\n  destroy(): void {\n    for (const parent of this.#parents) {\n      const toggle = this.#toggles.get(parent.li);\n      if (toggle) this.#removeToggle(parent, toggle);\n    }\n    for (const submenu of this.#labelledGroups) submenu.removeAttribute('aria-labelledby');\n    this.#labelledGroups.clear();\n    for (const element of this.#generatedIds) element.removeAttribute('id');\n    this.#generatedIds.clear();\n  }\n\n  /** Names a group's list after its label, unless the markup already names it. */\n  #nameGroup(submenu: HTMLUListElement, label: HTMLSpanElement): void {\n    if (submenu.hasAttribute('aria-labelledby') || submenu.hasAttribute('aria-label')) return;\n    if (!label.id) {\n      label.id = uniqueId(this.#doc, 'ui-nav-');\n      this.#generatedIds.add(label);\n    }\n    submenu.setAttribute('aria-labelledby', label.id);\n    this.#labelledGroups.add(submenu);\n  }\n\n  #addToggle(parent: Parent): void {\n    const { li, submenu, label } = parent;\n    if (!submenu.id) {\n      submenu.id = uniqueId(this.#doc, 'ui-nav-');\n      this.#generatedIds.add(submenu);\n    }\n    const toggle = this.#doc.createElement('button');\n    toggle.type = 'button';\n    toggle.className = 'ui-nav__toggle';\n    toggle.setAttribute('aria-expanded', 'false');\n    toggle.setAttribute('aria-controls', submenu.id);\n\n    if (label instanceof this.#doc.defaultView!.HTMLAnchorElement) {\n      toggle.append(createVisuallyHidden(this.#doc, this.#splitLabel(label)));\n      label.after(toggle);\n    } else {\n      toggle.classList.add('ui-nav__toggle--label');\n      toggle.append(...[...label.childNodes].map((node) => node.cloneNode(true)));\n      label.replaceWith(toggle);\n    }\n    toggle.append(createChevron(this.#doc));\n    this.#toggles.set(li, toggle);\n  }\n\n  #removeToggle(parent: Parent, toggle: HTMLButtonElement): void {\n    const hadFocus = this.#doc.activeElement === toggle;\n    if (parent.label.isConnected) toggle.remove();\n    else toggle.replaceWith(parent.label);\n    this.#toggles.delete(parent.li);\n    this.openedBy.delete(parent.li);\n    if (!hadFocus) return;\n    const target = parent.label.matches(FOCUSABLE)\n      ? parent.label\n      : parent.submenu.querySelector<HTMLElement>(FOCUSABLE);\n    target?.focus();\n  }\n\n  #renameSplitToggle(parent: Parent, toggle: HTMLButtonElement): void {\n    const hidden = toggle.querySelector('.ui-nav__visually-hidden');\n    if (hidden) hidden.textContent = this.#splitLabel(parent.label);\n  }\n\n  #notify(li: HTMLLIElement, open: boolean, by: OpenedBy | 'pin'): void {\n    const parent = this.#parents.find((candidate) => candidate.li === li);\n    if (parent) this.#onChange({ open, label: labelText(parent.label), by });\n  }\n\n  #splitLabel(link: Element): string {\n    return this.#labelTemplate.replaceAll('{label}', labelText(link));\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,31 @@
 {
   "name": "@vakwerk/navigation",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.0",
+  "description": "Accessible site navigation with dropdown submenus and an overlay dialog, as a light-DOM custom element or init().",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/navigation.d.ts",
+      "import": "./dist/navigation.js"
+    },
+    "./navigation.css": "./src/navigation.css"
+  },
+  "files": [
+    "dist",
+    "src/navigation.css"
+  ],
+  "devDependencies": {
+    "@axe-core/playwright": "^4.14.0",
+    "@playwright/test": "^1.64.1",
+    "jsdom": "^30.1.3"
+  },
+  "scripts": {
+    "build": "tsc",
+    "pretest": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "tsc && playwright test",
+    "check:types": "tsc --noEmit",
+    "lint": "echo 'no linter configured yet'"
+  }
 }