{"_id":"@agencecinq/disclosure-button","_rev":"6-f40f983c04c06e0abe4be3a0c937cb07","name":"@agencecinq/disclosure-button","dist-tags":{"latest":"3.0.1"},"versions":{"1.1.0":{"name":"@agencecinq/disclosure-button","version":"1.1.0","author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","_id":"@agencecinq/disclosure-button@1.1.0","maintainers":[{"name":"19h47","email":"jeremylevron@19h47.fr"}],"homepage":"https://github.com/agencecinq/shopify#readme","bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"dist":{"shasum":"44f3b50b693afbcb69b4a468f58ec9307bf4fa3f","tarball":"https://registry.npmjs.org/@agencecinq/disclosure-button/-/disclosure-button-1.1.0.tgz","fileCount":9,"integrity":"sha512-PdsHL8lmd6hvYxNNduQ6uVn5KN0MR2QPPYX2xM2LKRGFN+QpHzGkcWrRyMlbZeTosRklwK68f+PC0f24ORFr8Q==","signatures":[{"sig":"MEUCIQCCPqk9yWxC2XzD3UIsjqAnAQqB6uM8Q7GSN1N9Q+X9+AIgBCT3X3rANd24rkB66mNJp9825co6uKdk0sd6t6ttY2s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15045},"main":"./dist/index.js","type":"module","_from":"file:agencecinq-disclosure-button-1.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"19h47","email":"jeremylevron@19h47.fr"},"_resolved":"/private/var/folders/vt/kpbgrh4d7k14zvxmcm01bfxh0000gn/T/543e87743ba7b6f812704b66a9422281/agencecinq-disclosure-button-1.1.0.tgz","_integrity":"sha512-PdsHL8lmd6hvYxNNduQ6uVn5KN0MR2QPPYX2xM2LKRGFN+QpHzGkcWrRyMlbZeTosRklwK68f+PC0f24ORFr8Q==","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/disclosure-button"},"_npmVersion":"11.17.0","description":"Accessible WAI-ARIA disclosure button Web Component.","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.3","vite-plugin-dts":"^5.0.3","@agencecinq/utils":"5.0.2"},"peerDependencies":{"@agencecinq/utils":"*"},"_npmOperationalInternal":{"tmp":"tmp/disclosure-button_1.1.0_1782984190114_0.5938972275653438","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@agencecinq/disclosure-button","version":"1.1.1","author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","_id":"@agencecinq/disclosure-button@1.1.1","maintainers":[{"name":"19h47","email":"jeremylevron@19h47.fr"}],"homepage":"https://github.com/agencecinq/shopify#readme","bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"dist":{"shasum":"2700a4ac2398101f59a83f3db4fd57962f652e40","tarball":"https://registry.npmjs.org/@agencecinq/disclosure-button/-/disclosure-button-1.1.1.tgz","fileCount":9,"integrity":"sha512-NZvHsL40TFjZY97SkcUV+NcY63mQMFsWD5lQjiEqiGyGWGqm6vFOO4bBNlhftMMDUwFSMsJig8r02M9Oa1CSig==","signatures":[{"sig":"MEYCIQD9GzBrFD1/EZsviWBpm2vtUk9yn55+VuMEIIZuZrR5jQIhAKX0wn82SMdG7tXuYtrvYRsCkPF+r8T3uDZduPnw+MRc","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15200},"main":"./dist/index.js","type":"module","_from":"file:agencecinq-disclosure-button-1.1.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"19h47","email":"jeremylevron@19h47.fr"},"_resolved":"/private/var/folders/vt/kpbgrh4d7k14zvxmcm01bfxh0000gn/T/9115a219a92e7646e4fab68033bd2525/agencecinq-disclosure-button-1.1.1.tgz","_integrity":"sha512-NZvHsL40TFjZY97SkcUV+NcY63mQMFsWD5lQjiEqiGyGWGqm6vFOO4bBNlhftMMDUwFSMsJig8r02M9Oa1CSig==","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/disclosure-button"},"_npmVersion":"11.18.0","description":"Accessible WAI-ARIA disclosure button Web Component.","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.4","vite-plugin-dts":"^5.0.3","@agencecinq/utils":"5.0.3"},"peerDependencies":{"@agencecinq/utils":"*"},"_npmOperationalInternal":{"tmp":"tmp/disclosure-button_1.1.1_1783576391204_0.3740331586427301","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@agencecinq/disclosure-button","version":"2.0.0","author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","_id":"@agencecinq/disclosure-button@2.0.0","maintainers":[{"name":"19h47","email":"jeremylevron@19h47.fr"}],"homepage":"https://github.com/agencecinq/shopify#readme","bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"dist":{"shasum":"3db8cb7160bb7b2c09a29908d14597126c0ab8ed","tarball":"https://registry.npmjs.org/@agencecinq/disclosure-button/-/disclosure-button-2.0.0.tgz","fileCount":9,"integrity":"sha512-oQfMSl8hguz/b8HQtPtAsSIM1BLtfSeQs/Qe2FTbEoeYNm3Tt2N3l9TaeWy/JVZY5dzu2J7Dz4hPvgYozq1YvA==","signatures":[{"sig":"MEUCIQDiFdcsAcg5l6hhyHfjdB2ic3QQ5ADAc8bXJBIbF+j+9AIgM1gT9K5pZivS3jn3QqfsgeI0Uv/KWA48RL/31LMdXoI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15221},"main":"./dist/index.js","type":"module","_from":"file:agencecinq-disclosure-button-2.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"19h47","email":"jeremylevron@19h47.fr"},"_resolved":"/private/var/folders/vt/kpbgrh4d7k14zvxmcm01bfxh0000gn/T/951a9cda5bfc3a6b2276f7d99eeea681/agencecinq-disclosure-button-2.0.0.tgz","_integrity":"sha512-oQfMSl8hguz/b8HQtPtAsSIM1BLtfSeQs/Qe2FTbEoeYNm3Tt2N3l9TaeWy/JVZY5dzu2J7Dz4hPvgYozq1YvA==","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/disclosure-button"},"_npmVersion":"11.18.0","description":"Accessible WAI-ARIA disclosure button Web Component.","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.4","vite-plugin-dts":"^5.0.3","@agencecinq/utils":"5.1.0"},"peerDependencies":{"@agencecinq/utils":"*"},"_npmOperationalInternal":{"tmp":"tmp/disclosure-button_2.0.0_1784557158818_0.7377780263077396","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@agencecinq/disclosure-button","version":"3.0.0","author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","_id":"@agencecinq/disclosure-button@3.0.0","maintainers":[{"name":"19h47","email":"jeremylevron@19h47.fr"}],"homepage":"https://github.com/agencecinq/shopify#readme","bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"dist":{"shasum":"cc7390ca682620ac092587a749193ee82227af64","tarball":"https://registry.npmjs.org/@agencecinq/disclosure-button/-/disclosure-button-3.0.0.tgz","fileCount":9,"integrity":"sha512-rLolhC6hKk0NpIZapUp7rzruQKBaS6TJTrFgMyT6ElKaFn1ROt9VT9YPIaFPHnZR/z0b/WCCOzoxrlCNfBHrLA==","signatures":[{"sig":"MEQCIFk8wFTsCK0n1Rnq4OGnrF8NbbXECPNzmg9CyjRjbH98AiBileVUdVau5iiODJKgeiTn+FO3u3T8jMiGYYzU1fSRyQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14304},"main":"./dist/index.js","type":"module","_from":"file:agencecinq-disclosure-button-3.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"19h47","email":"jeremylevron@19h47.fr"},"_resolved":"/private/var/folders/vt/kpbgrh4d7k14zvxmcm01bfxh0000gn/T/5cec66046d1847242031571ea33bb6dc/agencecinq-disclosure-button-3.0.0.tgz","_integrity":"sha512-rLolhC6hKk0NpIZapUp7rzruQKBaS6TJTrFgMyT6ElKaFn1ROt9VT9YPIaFPHnZR/z0b/WCCOzoxrlCNfBHrLA==","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/disclosure-button"},"_npmVersion":"11.18.0","description":"Accessible WAI-ARIA disclosure button Web Component.","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.4","vite-plugin-dts":"^5.0.3","@agencecinq/utils":"5.3.0"},"peerDependencies":{"@agencecinq/utils":"*"},"_npmOperationalInternal":{"tmp":"tmp/disclosure-button_3.0.0_1785913801341_0.09718353468837226","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@agencecinq/disclosure-button","version":"3.0.1","author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","_id":"@agencecinq/disclosure-button@3.0.1","maintainers":[{"name":"19h47","email":"jeremylevron@19h47.fr"}],"homepage":"https://github.com/agencecinq/shopify#readme","bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"dist":{"shasum":"84f85ae0493b8fd2969707875119e266bf014878","tarball":"https://registry.npmjs.org/@agencecinq/disclosure-button/-/disclosure-button-3.0.1.tgz","fileCount":9,"integrity":"sha512-xk2vdku2doDwaQOHfWJmBqEFPoLByXpBE2xWFjNFQr/K29fyKToEgytESS4a+oK1QR2igvY6aeQYjHbLHwMAWQ==","signatures":[{"sig":"MEQCIEyuDrvBx7eLkrQjzSYWcuPoz+FVRgFcgIHQpECb/tJNAiA09/pFrsA+qnwqk0I4Ue2COe1dUezh1EWQVpLmyE3Qqw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14085},"main":"./dist/index.js","type":"module","_from":"file:agencecinq-disclosure-button-3.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"19h47","email":"jeremylevron@19h47.fr"},"_resolved":"/private/var/folders/vt/kpbgrh4d7k14zvxmcm01bfxh0000gn/T/1a992055758602990c78b9c001ff58c7/agencecinq-disclosure-button-3.0.1.tgz","_integrity":"sha512-xk2vdku2doDwaQOHfWJmBqEFPoLByXpBE2xWFjNFQr/K29fyKToEgytESS4a+oK1QR2igvY6aeQYjHbLHwMAWQ==","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/disclosure-button"},"_npmVersion":"11.18.0","description":"Accessible WAI-ARIA disclosure button Web Component.","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.0","vite-plugin-dts":"^5.0.3","@agencecinq/utils":"6.1.0"},"peerDependencies":{"@agencecinq/utils":"*"},"_npmOperationalInternal":{"tmp":"tmp/disclosure-button_3.0.1_1786088877488_0.8182114140529582","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-07-02T09:23:09.981Z","modified":"2026-09-15T13:10:34.614Z","1.1.0":"2026-07-02T09:23:10.282Z","1.1.1":"2026-07-09T05:53:11.361Z","2.0.0":"2026-07-20T14:19:18.972Z","3.0.0":"2026-08-05T07:10:01.482Z","3.0.1":"2026-08-07T07:47:57.652Z"},"bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","homepage":"https://github.com/agencecinq/shopify#readme","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/disclosure-button"},"description":"Accessible WAI-ARIA disclosure button Web Component.","maintainers":[{"email":"jeremylevron@19h47.fr","name":"19h47"},{"email":"pauline@agencecinq.com","name":"paulinecinq"}],"readme":"[![](https://img.shields.io/npm/v/@agencecinq/disclosure-button)](https://www.npmjs.com/package/@agencecinq/disclosure-button)\n[![](https://img.shields.io/npm/dm/@agencecinq/disclosure-button)](https://www.npmjs.com/package/@agencecinq/disclosure-button)\n\n# @agencecinq/disclosure-button\n\n> Accessible WAI-ARIA disclosure button Web Component.\n\nA disclosure button shows or hides a section of content. `<cinq-disclosure-button>`\nwraps a `<button>`, wires up `aria-expanded` / `aria-controls`, toggles `hidden` on\ncontrolled regions, and dispatches open/close events.\n\nImplementation follows the\n[WAI-ARIA Authoring Practices disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).\nInspired by [`@19h47/disclosure-button`](https://github.com/19h47/19h47-disclosure-button/).\n\n## Installation\n\n```bash\npnpm add @agencecinq/disclosure-button\n```\n\n## Usage\n\n```js\nimport \"@agencecinq/disclosure-button\";\n```\n\n```html\n<cinq-disclosure-button>\n  <button\n    type=\"button\"\n    aria-expanded=\"false\"\n    aria-controls=\"details-1\"\n  >\n    Show more\n  </button>\n</cinq-disclosure-button>\n\n<div id=\"details-1\" class=\"foo\" hidden>\n  Disclosure content\n</div>\n```\n\n```css\n.foo[hidden] {\n  display: none;\n}\n\n.foo {\n  display: flex;\n}\n```\n\nImporting the package registers the custom element. Controlled regions live\n**outside** the host and are resolved via\n[`ariaControlsElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaControlsElements)\n(Chrome 119+, Firefox 119+, Safari 17.4+).\n\n> **HTML is the source of truth.** The component will not auto-set `role`,\n> auto-migrate attributes, or warn about missing labels. Use an a11y linter\n> (axe-core, Lighthouse) to catch invalid markup.\n\n### Required markup\n\n| Attribute / element | Required | Role |\n| ------------------- | -------- | ---- |\n| Inner `<button>` | **Yes** | Focusable trigger inside `<cinq-disclosure-button>`. |\n| `aria-expanded` | **Yes** | Current disclosure state on the trigger. |\n| `aria-controls` | **Yes** | Space-separated ID(s) of the controlled region(s). |\n| `hidden` | **Yes** | On each controlled region when collapsed. |\n\n### API\n\n| Method | Description |\n| ------ | ----------- |\n| `init()` | Binds markup + listeners. Call `destroy()` first if already bound. |\n| `destroy()` | Removes listeners. Safe while the host stays mounted. |\n| `open(emit?)` | Shows every controlled element. |\n| `close(emit?)` | Hides every controlled element. |\n| `toggle()` | Closes if any controlled element is visible. Otherwise opens all. |\n| `update()` | Syncs `aria-expanded` from the DOM (e.g. after an external dismiss). |\n\nAfter mutating the light DOM while the host stays mounted:\n\n```js\n$host.destroy();\n// mutate button / aria-controls…\n$host.init();\n```\n\n| Property | Description |\n| -------- | ----------- |\n| `$button` | The inner `<button>`. |\n| `elements` | Controlled elements from `ariaControlsElements` at connect time. |\n| `expanded` | Reads `aria-expanded` on the trigger. Call `update()` after external DOM changes. |\n\n`open()` / `close()` accept an optional `emit` flag (default `true`).\n\nWhen several regions are controlled: `aria-expanded` is `true` while **at least\none** is visible. A trigger click closes all if any remain open.\n\nStyle via the trigger, e.g. `button[aria-expanded=\"true\"]` or\n`cinq-disclosure-button:has([aria-expanded=\"true\"])`.\n\n### Keyboard & focus\n\nThe trigger must be a native `<button type=\"button\">`. Enter and Space activate\nit through the browser. The component listens for `click`. Focus stays on the\ntrigger when opening or closing. While collapsed, `hidden` keeps the region out\nof the tab order and accessibility tree.\n\nStyle focus with native pseudo-classes:\n\n```css\ncinq-disclosure-button button:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n```\n\n### One button, multiple targets\n\n`aria-controls` is an ID reference list: one control may reference several\nelements (see the [`ariaControlsElements` MDN example](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaControlsElements)).\nAfter a partial dismiss (`region.hidden = true`), call `update()` so\n`aria-expanded` stays honest.\n\n### Multiple buttons, one target\n\nSeveral triggers can share the same ID. Use one `<cinq-disclosure-button>` per\ntrigger and sync sibling `aria-expanded` yourself from `event.detail.open` /\n`event.detail.$button`.\n\n### Programmatic API\n\n```js\nconst $host = document.querySelector(\"cinq-disclosure-button\");\n\n$host.open();\n$host.close();\n$host.toggle();\n$host.update();\n```\n\n```js\n$openLink.addEventListener(\"click\", () => {\n  $host.open();\n});\n\n$dismissButton.addEventListener(\"click\", () => {\n  $host.close();\n});\n```\n\n## Events\n\n| Event | Cancelable | Detail | Description |\n| ----- | ---------- | ------ | ----------- |\n| `disclosure-button:open` | Yes | `{ ids, elements, $button, open: true }` | Fired on the trigger before open. Cancel to abort. |\n| `disclosure-button:close` | Yes | `{ ids, elements, $button, open: false }` | Fired on the trigger before close. Cancel to abort. |\n\n```js\nimport { EVENTS } from \"@agencecinq/utils\";\n\n$host.addEventListener(EVENTS.DISCLOSURE_BUTTON_OPEN, (event) => {\n  if (!userMayOpen()) {\n    event.preventDefault();\n  }\n});\n```\n\n`event.detail` carries `{ ids, elements, $button, open }`. Events fire **before** the\nDOM mutates: use `detail.open` rather than reading `hidden` yet.\n\n### Updating the button label\n\nThe component does not change the trigger’s visible text. Listen to open/close\nand update copy in your app:\n\n```js\nimport { EVENTS } from \"@agencecinq/utils\";\n\nconst labels = { closed: \"Show details\", open: \"Hide details\" };\n\n$button.addEventListener(EVENTS.DISCLOSURE_BUTTON_OPEN, () => {\n  $button.textContent = labels.open;\n});\n\n$button.addEventListener(EVENTS.DISCLOSURE_BUTTON_CLOSE, () => {\n  $button.textContent = labels.closed;\n});\n```\n\n## Build setup\n\n```bash\npnpm -C packages/disclosure-button build\n```\n\n## Acknowledgments\n\n- [Disclosure Pattern (WAI-ARIA Practices)](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)\n- [`@19h47/disclosure-button`](https://github.com/19h47/19h47-disclosure-button/): original implementation\n\nSee the [interactive docs](https://agencecinq.github.io/ui/components/disclosure-button/) for live examples.\n","readmeFilename":"README.md"}