@agencecinq/disclosure-navigation 0.0.0-stage → 2.0.0

package/README.md

@@ -1,3 +1,321 @@
-# Temporary Holding Version
+[![](https://img.shields.io/npm/v/@agencecinq/disclosure-navigation)](https://www.npmjs.com/package/@agencecinq/disclosure-navigation)
+[![](https://img.shields.io/npm/dm/@agencecinq/disclosure-navigation)](https://www.npmjs.com/package/@agencecinq/disclosure-navigation)
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @agencecinq/disclosure-navigation
+
+> Accessible, WAI-ARIA disclosure navigation as a lightweight Web Component.
+
+A site navigation whose buttons show and hide submenus. `<cinq-disclosure-navigation>`
+updates `aria-expanded` and `hidden`, keeps one branch open at a time, adds the keyboard
+support of the APG example, and can open the submenus on hover.
+
+Implementation follows the
+[WAI-ARIA Authoring Practices disclosure navigation example](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/).
+Inspired by [`@19h47/disclosure-navigation`](https://github.com/19h47/19h47-disclosure-navigation).
+
+- **Navigation, not a menu.** A site navigation is a list of links. Buttons announce
+  _collapsed_ or _expanded_, links stay links. The ARIA `menu` role is meant for
+  application menus.
+- **Your HTML is the source of truth.** The component reads `aria-expanded` and
+  `aria-controls`, and never adds a missing attribute.
+- **Built on the platform.** Native `<button>`, the `hidden` attribute,
+  [`ariaControlsElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaControlsElements),
+  [`ToggleEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent) as popovers
+  fire it, `AbortController`. No dependency.
+
+## Installation
+
+```bash
+pnpm add @agencecinq/disclosure-navigation
+```
+
+## Usage
+
+```js
+import "@agencecinq/disclosure-navigation";
+```
+
+```html
+<cinq-disclosure-navigation>
+  <nav aria-label="Main">
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li>
+        <button type="button" aria-expanded="false" aria-controls="about-menu">About</button>
+        <ul id="about-menu" hidden>
+          <li><a href="/about/overview">Overview</a></li>
+          <li><a href="/about/team" aria-current="page">Team</a></li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</cinq-disclosure-navigation>
+```
+
+Importing the package registers the custom element. Connecting it only adds listeners.
+
+> **HTML is the source of truth.** The component does not set a missing
+> `aria-expanded`, `hidden` or label, nor warns about them. Use an accessibility linter
+> (axe-core, Lighthouse) to catch invalid markup.
+
+### Required markup
+
+| Attribute       | On          | Role                                                                                     |
+| --------------- | ----------- | ---------------------------------------------------------------------------------------- |
+| `aria-expanded` | `<button>`  | **Required.** The state. A button without it is ignored. The component updates it.       |
+| `aria-controls` | `<button>`  | **Required.** ID(s) of the submenu(s), inside the host. Several IDs work together.       |
+| `hidden`        | Submenu     | Present while collapsed, or `hidden="until-found"` to keep its links searchable.         |
+| `aria-label`    | `<nav>`     | Names the landmark when the page has more than one navigation.                           |
+| `aria-current`  | `<a>`       | Optional: marks the current page.                                                         |
+
+To render a submenu open, write `aria-expanded="true"` on its button and leave out
+`hidden`.
+
+### Attributes
+
+| Attribute                | On   | Effect                                                                    |
+| ------------------------ | ---- | ------------------------------------------------------------------------- |
+| `data-hover`             | Host | A mouse opens the submenus on hover. See [Opening on hover](#opening-on-hover). |
+| `data-arrow-keys="false"` | Host | Leaves the arrow, Home and End keys to the browser.                       |
+
+Both are read on each interaction: setting or removing them needs no call.
+
+### Styling
+
+Style the state the component writes:
+
+```css
+button[aria-expanded="true"]::after {
+  rotate: 225deg;
+}
+
+/* Needed only if your CSS gives .submenu a display value */
+.submenu[hidden]:not([hidden="until-found"]) {
+  display: none;
+}
+```
+
+Position submenus with logical properties, such as `inset-inline-start`, so they follow
+the reading direction. The host is inline, as any custom element: give it a `display`
+if you lay it out.
+
+### Nested submenus
+
+A submenu can hold buttons with their own submenus. Opening one keeps its parents open
+and closes the other branches. Closing a submenu closes the ones nested in it.
+
+In a submenu, the arrow keys stay at its level, whatever the layout: Tab moves into a
+nested submenu, and Escape back to its button.
+
+### Opening on hover
+
+With `data-hover`, a mouse opens a submenu when it enters its button, and closes it when
+it leaves the button and the submenu. Touch and pen keep the click.
+
+```html
+<cinq-disclosure-navigation data-hover>…</cinq-disclosure-navigation>
+```
+
+- **The click still works.** The first click after the mouse opened a submenu keeps it
+  open, as the user meant to open it. The next click closes it.
+- **No gap.** The pointer goes from the button to the submenu: leave no space between
+  them, or fill it with the submenu's padding.
+- **Escape closes it wherever the focus is.** Content shown on hover must be dismissible
+  without moving the pointer
+  ([WCAG 1.4.13](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)).
+- **Hover only adds.** Keyboard and screen reader users open the same submenus with the
+  buttons.
+
+### Find in page
+
+Write `hidden="until-found"` on collapsed submenus and their links stay searchable. When
+find in page or a link to a fragment reveals a submenu, the component opens it, nested
+ones included, and keeps `until-found` when it closes again.
+
+```html
+<ul id="about-menu" hidden="until-found">…</ul>
+```
+
+A stylesheet that sets `[hidden] { display: none }` keeps the links out of the search:
+Bootstrap's Reboot does, with `!important`, while Tailwind 4's preflight leaves
+`until-found` out. Restore `display` for `[hidden="until-found"]`. The browser reveals
+the submenu whatever a listener does:
+canceling `beforetoggle` leaves the button collapsed next to a visible submenu.
+
+## Keyboard
+
+| Key                 | Focus on                   | Action                                           |
+| ------------------- | -------------------------- | ------------------------------------------------ |
+| Tab / Shift + Tab   | Anywhere                   | Native order. Collapsed submenus are skipped.    |
+| Enter / Space       | Button                     | Toggles its submenu (native button activation).  |
+| Escape              | Button or top-level link   | Closes the open submenu.                         |
+| Escape              | Submenu                    | Closes the innermost one and focuses its button. |
+| Escape              | Outside the navigation     | Closes the open submenu, focus stays.            |
+| ArrowDown           | Expanded top-level button  | Moves focus to the first item of its submenu.    |
+| Arrow keys          | Top-level item             | Previous or next button or link, wrapping.       |
+| Arrow keys          | Submenu item               | Previous or next item, wrapping.                 |
+| Home / End          | Top-level or submenu item  | First or last item.                              |
+
+Moving focus out of the navigation closes the open submenu. Keys pressed with Alt, Ctrl
+or Meta are left to the browser, and so are arrow keys in a text field.
+
+In a right-to-left context, ArrowLeft and ArrowRight swap. The component reads the
+direction from the markup with `:dir(rtl)`: a `dir` attribute on the page or the
+navigation is enough.
+
+### In a dialog or a popover
+
+Escape is also a
+[close request](https://html.spec.whatwg.org/multipage/interaction.html#close-requests):
+it closes the topmost dialog or popover. While a submenu is open and focus is in the
+navigation, the component cancels the key press, so each press closes one layer: the
+submenu, then the dialog. With every submenu closed, or focus elsewhere, the browser
+handles the key. An Escape another script already canceled is left alone.
+
+## API
+
+| Member            | Description                                                                                  |
+| ----------------- | -------------------------------------------------------------------------------------------- |
+| `init()`          | Binds listeners. Runs on connect. Call `destroy()` first if already bound.                   |
+| `destroy()`       | Removes listeners. Runs on disconnect. The markup stays in its current state.                |
+| `open($button)`   | Opens the submenu of `$button` and closes the other branches. Canceling its `beforetoggle` leaves every submenu as it is. |
+| `close($button?)` | Closes the submenu of `$button`, or every open submenu. Focus inside a closing submenu moves to its button. |
+| `toggle($button)` | Opens or closes the submenu of `$button`.                                                    |
+
+Buttons are found inside the host with `button[aria-expanded][aria-controls]`, read from
+the DOM on each interaction: adding or removing items needs no call. Closing the submenu
+once a link is followed is up to you:
+
+```js
+const $navigation = document.querySelector("cinq-disclosure-navigation");
+
+$navigation.addEventListener("click", (event) => {
+  if (event.target.closest("a")) {
+    $navigation.close();
+  }
+});
+```
+
+### Closing from outside
+
+The open submenu closes when focus leaves the navigation, on Escape, and with
+`data-hover` when the mouse leaves it. Safari does not focus a button on click, by
+design: after opening a submenu with a click, clicking elsewhere moves no focus and the
+submenu stays open. If you need it, close it yourself:
+
+```js
+document.addEventListener("click", (event) => {
+  if (!$navigation.contains(event.target)) {
+    $navigation.close();
+  }
+});
+```
+
+## Events
+
+The component fires the platform's events, the way a popover does: a
+[`ToggleEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent) named
+`beforetoggle`, then `toggle`, at each submenu. The same listener works for `<details>`,
+popovers and `<dialog>`.
+
+| Event          | Fires                                                                                     | Cancelable              |
+| -------------- | ----------------------------------------------------------------------------------------- | ----------------------- |
+| `beforetoggle` | **Before** the DOM changes.                                                               | When the submenu opens. |
+| `toggle`       | **After**, in a later task. Changes made before it fires coalesce into one event, from the first old state to the last new state. | No. |
+
+`event.target` is the submenu, `event.source` its button, and `oldState` and `newState`
+are `'open'` or `'closed'`. As on the platform, the events do not bubble: otherwise a
+submenu's `toggle` would reach the `ontoggle` of a `<details>` or a `<dialog>` holding the
+navigation. Listen on the submenu, or on the host in the capture phase.
+
+```js
+$navigation.addEventListener(
+  "beforetoggle",
+  (event) => {
+    if ("open" === event.newState && "services" === event.source.id) {
+      event.preventDefault(); // Services stays closed
+    }
+  },
+  { capture: true },
+);
+
+$navigation.addEventListener(
+  "toggle",
+  (event) => console.log(event.target.id, event.newState),
+  { capture: true },
+);
+```
+
+Canceling an opening leaves every submenu as it is, the open one included: the other
+branches close after `beforetoggle`. Closing cannot be canceled. A button that controls
+several elements fires at each one, and opens none of them when one opening is canceled.
+In TypeScript, the DOM library already types both events as `ToggleEvent`.
+
+## Browser support
+
+Chrome and Edge 135, Firefox 136 and Safari 17: submenus are resolved with
+[`ariaControlsElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaControlsElements)
+and events are [`ToggleEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent)s.
+`event.source` needs Chrome and Edge 140, Firefox 145 and Safari 26.5: older browsers
+fire the events without it.
+
+Find in page relies on `hidden="until-found"`: Chrome and Edge 102, Firefox 139,
+Safari 26.2. Elsewhere it acts as `hidden`. The package is an ES module.
+
+## Migration
+
+### From 1.x to 2.0
+
+1. **Expect ArrowDown to stay at the level of a submenu.** On an expanded button in a
+   submenu, it moved into the nested submenu, while ArrowUp went to the previous item.
+   It now goes to the next item. Tab still moves into the nested submenu. ArrowDown on
+   an expanded top-level button moves into its submenu, as before.
+
+### From `@19h47/disclosure-navigation` 5.x
+
+The class becomes a custom element: the host replaces `$nav`. Markup inside it, styles,
+methods and events do not change.
+
+1. **Wrap the navigation in the host**, and drop the instance.
+
+   ```diff
+   + <cinq-disclosure-navigation>
+       <nav aria-label="Main">…</nav>
+   + </cinq-disclosure-navigation>
+   ```
+
+   ```diff
+   - import DisclosureNavigation from "@19h47/disclosure-navigation";
+   -
+   - const disclosureNavigation = new DisclosureNavigation($nav);
+   -
+   - disclosureNavigation.init();
+   + import "@agencecinq/disclosure-navigation";
+   ```
+
+2. **Call the methods on the host.** `open()`, `close()` and `toggle()` take the same
+   arguments. `init()` and `destroy()` run on connect and disconnect. `$el` is gone.
+3. **Listen on the host.** `beforetoggle` and `toggle` still fire at the submenus,
+   without bubbling: listen on the host in the capture phase, instead of `$nav`.
+4. **Replace `useArrowKeys = false`** with `data-arrow-keys="false"` on the host.
+5. **Expect Escape outside the navigation** to close the open submenu, without
+   canceling the key.
+
+### From several `<cinq-disclosure-button>`
+
+A navigation built from one `<cinq-disclosure-button>` per entry, with a script that
+closes the others or opens on hover, becomes one host.
+
+1. **Remove the `<cinq-disclosure-button>` around each button**, and wrap the navigation
+   in `<cinq-disclosure-navigation>`. Add `data-hover` to open on hover.
+2. **Remove the script.** One branch open at a time, Escape, closing when focus leaves
+   and hover are built in.
+3. **Replace the `disclosure-button:*` listeners** with `beforetoggle` and `toggle` on
+   the host, in the capture phase.
+
+## Development
+
+```bash
+pnpm --filter @agencecinq/disclosure-navigation build
+pnpm --filter @agencecinq/disclosure-navigation test # Chromium, Firefox and WebKit
+```

package/dist/disclosure-navigation.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Disclosure navigation Web Component around a site navigation whose buttons show
+ * and hide submenus. The markup is the source of truth: `aria-expanded` on each
+ * button holds the state, and the submenus are the elements its `aria-controls`
+ * references. The component never adds a missing attribute; it only updates
+ * `aria-expanded` and `hidden` when the user interacts, and fires `beforetoggle`
+ * and `toggle` at the submenus, as popovers do.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
+ * @see https://w3c.github.io/aria/#dom-ariamixin-ariacontrolselements
+ */
+export declare class DisclosureNavigation extends HTMLElement {
+    #private;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Binds listeners. Call `destroy()` first if already bound. */
+    init(): void;
+    /** Removes listeners. The markup stays in its current state. */
+    destroy(): void;
+    /**
+     * Opens the submenu of `$button` and closes the open ones outside its branch,
+     * as popovers do. Canceling its `beforetoggle` leaves every submenu as it is.
+     */
+    open($button: HTMLButtonElement): void;
+    /** Closes the submenu of `$button` and the ones nested in it, or every open submenu. */
+    close($button?: HTMLButtonElement): void;
+    toggle($button: HTMLButtonElement): void;
+}
+//# sourceMappingURL=disclosure-navigation.d.ts.map

package/dist/disclosure-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure-navigation.d.ts","sourceRoot":"","sources":["../src/disclosure-navigation.ts"],"names":[],"mappings":"AA2BA;;;;;;;;;;GAUG;AACH,qBAAa,oBAAqB,SAAQ,WAAW;;IAOnD,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;IAI5B,gEAAgE;IAChE,IAAI,IAAI,IAAI;IAcZ,gEAAgE;IAChE,OAAO,IAAI,IAAI;IAKf;;;OAGG;IACH,IAAI,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI;IActC,wFAAwF;IACxF,KAAK,CAAC,OAAO,CAAC,EAAE,iBAAiB,GAAG,IAAI;IAUxC,MAAM,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI;CAoOzC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { DisclosureNavigation } from './disclosure-navigation.js';
+export { DisclosureNavigation };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/index.js

@@ -0,0 +1,125 @@
+//#region src/utils.ts
+var e = (e) => e === "open" ? "closed" : "open", t = /* @__PURE__ */ new WeakMap(), n = (t, n, r) => {
+	let i = new ToggleEvent("beforetoggle", {
+		cancelable: n === "open",
+		oldState: e(n),
+		newState: n,
+		source: r
+	});
+	return t.dispatchEvent(i);
+}, r = (n, r, i) => {
+	let a = t.get(n), o = a?.oldState ?? e(r);
+	clearTimeout(a?.timeout);
+	let s = setTimeout(() => {
+		let e = new ToggleEvent("toggle", {
+			oldState: o,
+			newState: r,
+			source: i
+		});
+		t.delete(n), n.dispatchEvent(e);
+	});
+	t.set(n, {
+		oldState: o,
+		timeout: s
+	});
+}, i = (e, t, n) => {
+	if (e.altKey || e.ctrlKey || e.metaKey) return;
+	let r = t.length - 1, i = n === 0 ? r : n - 1, a = n === r ? 0 : n + 1, o = t[n].matches(":dir(rtl)"), s = {
+		ArrowUp: i,
+		ArrowLeft: o ? a : i,
+		ArrowDown: a,
+		ArrowRight: o ? i : a,
+		Home: 0,
+		End: r
+	}[e.key];
+	s !== void 0 && (e.preventDefault(), t[s].focus());
+}, a = "button[aria-expanded][aria-controls]", o = `a[href], ${a}`, s = "a[href], button:enabled, [tabindex]:not([tabindex^=\"-\"])", c = (e) => e.ariaExpanded === "true", l = (e) => e.ariaControlsElements ?? [], u = (e, t) => l(e).some((e) => e.contains(t)), d = (e, t) => t !== null && (e.contains(t) || u(e, t)), f = (e, t) => l(e).every((r) => n(r, t, e)), p = class extends HTMLElement {
+	#e = null;
+	#t = /* @__PURE__ */ new WeakMap();
+	#n = null;
+	connectedCallback() {
+		this.init();
+	}
+	disconnectedCallback() {
+		this.destroy();
+	}
+	init() {
+		this.#e = new AbortController();
+		let { signal: e } = this.#e;
+		this.addEventListener("click", this.#l, { signal: e }), this.addEventListener("keydown", this.#h, { signal: e }), this.addEventListener("focusout", this.#f, { signal: e }), this.addEventListener("beforematch", this.#p, { signal: e }), this.addEventListener("pointerover", this.#u, { signal: e }), this.addEventListener("pointerout", this.#d, { signal: e }), document.addEventListener("keydown", this.#m, { signal: e });
+	}
+	destroy() {
+		this.#e?.abort(), this.#n = null;
+	}
+	open(e) {
+		if (c(e) || !f(e, "open")) return;
+		let t = this.#i.filter((t) => !u(t, e) && !u(e, t));
+		this.#o(t), this.#s(e, !0);
+	}
+	close(e) {
+		let t = e ? this.#i.filter((t) => t === e || u(e, t)) : this.#i;
+		this.#o(t);
+	}
+	toggle(e) {
+		return c(e) ? this.close(e) : this.open(e);
+	}
+	get #r() {
+		return [...this.querySelectorAll(a)];
+	}
+	get #i() {
+		return this.#r.filter(c);
+	}
+	#a(e, t) {
+		let n = this.#r.flatMap(l).filter((t) => e.some((e) => e !== t && e.contains(t)));
+		return e.flatMap((e) => [...e.querySelectorAll(t)]).filter((e) => !n.some((t) => t.contains(e)));
+	}
+	#o(e) {
+		e.toReversed().forEach((e) => {
+			f(e, "closed"), this.#s(e, !1);
+		});
+	}
+	#s(e, t) {
+		let n = t ? "open" : "closed";
+		e.ariaExpanded = t.toString(), !t && e === this.#n && (this.#n = null), l(e).forEach((i) => {
+			r(i, n, e), t ? (this.#t.set(i, i.hidden || !0), i.hidden = !1) : (i.matches(":focus-within") && e.focus(), i.hidden = this.#t.get(i) ?? !0);
+		});
+	}
+	#c(e) {
+		return e.pointerType === "mouse" && this.hasAttribute("data-hover");
+	}
+	#l = (e) => {
+		let t = e.target.closest(a);
+		if (!t || !this.contains(t)) return;
+		let n = t === this.#n;
+		this.#n = null, n || this.toggle(t);
+	};
+	#u = (e) => {
+		let t = e.target.closest(a), n = e.relatedTarget;
+		this.#c(e) && t && this.contains(t) && !c(t) && !d(t, n) && (this.open(t), c(t) && (this.#n = t));
+	};
+	#d = (e) => {
+		if (!this.#c(e)) return;
+		let t = e.target, n = e.relatedTarget;
+		this.#i.filter((e) => d(e, t) && !d(e, n)).forEach((e) => this.close(e));
+	};
+	#f = (e) => {
+		this.contains(e.relatedTarget) || this.matches(":active") || this.close();
+	};
+	#p = (e) => {
+		let t = e.target, n = this.#r.find((e) => l(e).includes(t));
+		n && (this.open(n), t.hidden = "until-found");
+	};
+	#m = (e) => {
+		if (e.key !== "Escape" || e.defaultPrevented || !this.#i.length) return;
+		let t = e.target;
+		return this.contains(t) ? (e.preventDefault(), this.close(this.#i.findLast((e) => u(e, t)))) : this.close();
+	};
+	#h = (e) => {
+		if (this.dataset.arrowKeys === "false") return;
+		let t = e.target, n = this.#i.findLast((e) => u(e, t)), r = n ? this.#a(l(n), s) : this.#a([this], o), a = r.indexOf(t);
+		if (a !== -1) return !n && e.key === "ArrowDown" && t instanceof HTMLButtonElement && c(t) ? (e.preventDefault(), this.#a(l(t), s)[0]?.focus()) : i(e, r, a);
+	};
+};
+customElements.get("cinq-disclosure-navigation") || customElements.define("cinq-disclosure-navigation", p);
+//#endregion
+export { p as DisclosureNavigation };

package/dist/utils.d.ts

@@ -0,0 +1,21 @@
+export type State = "open" | "closed";
+/**
+ * Fires `beforetoggle` at `$element`, as a popover does: before the change,
+ * without bubbling, cancelable only when the element opens.
+ *
+ * @returns `false` if a listener canceled the opening.
+ */
+export declare const dispatchBeforetoggle: ($element: HTMLElement, newState: State, $source: HTMLButtonElement) => boolean;
+/**
+ * Fires `toggle` at `$element` in a later task, as a popover does. Changes made
+ * before it fires coalesce into one event, from the first old state to the last
+ * new state.
+ */
+export declare const queueToggle: ($element: HTMLElement, newState: State, $source: HTMLButtonElement) => void;
+/**
+ * Moves focus between `elements` with the arrow, Home and End keys, wrapping at
+ * both ends. Left and right follow the reading direction of the focused element.
+ * Keys pressed with a modifier are left to the browser.
+ */
+export declare const focusByKey: (event: KeyboardEvent, elements: HTMLElement[], index: number) => void;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;AAUtC;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAC/B,UAAU,WAAW,EACrB,UAAU,KAAK,EACf,SAAS,iBAAiB,KACzB,OASF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GACtB,UAAU,WAAW,EACrB,UAAU,KAAK,EACf,SAAS,iBAAiB,KACzB,IAkBF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,GACrB,OAAO,aAAa,EACpB,UAAU,WAAW,EAAE,EACvB,OAAO,MAAM,KACZ,IAyBF,CAAC"}

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@agencecinq/disclosure-navigation",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.0.0",
+  "description": "Accessible WAI-ARIA disclosure navigation Web Component: submenus opened by buttons, on hover too.",
+  "keywords": [
+    "disclosure",
+    "navigation",
+    "nav",
+    "menu",
+    "web-component",
+    "accessibility",
+    "a11y",
+    "wai-aria",
+    "apg"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "author": "Jérémy Levron <jeremy@agencecinq.com> (https://agencecinq.com)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agencecinq/ui.git",
+    "directory": "packages/disclosure-navigation"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@vitest/browser-playwright": "^4.1.11",
+    "playwright": "^1.64.1",
+    "vite": "^8.2.0",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.11"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
 }